Урок 4: Продолжаем издеваться над шрифтами

Главная|Учебник HTML|Учебник CSS|Новости|Вопрос/ответ|Советы|Ссылки|Downloadы|Анкета

Гарнитура
В CSS для задания гарнитуры шрифта (его названия) служит атрибут font-family. Что в переводе означает "семья шрифтов". Имя шрифта может быть не только одно, как в HTML: можно написать несколько возможных имен. При этом браузер, не найдя первого из них, попробует второй и т.д. В случае нескольких шрифтов они записываются через запятую. Давайте поглядим на примерчик:

<p style="font-family:tahoma,ms sans serif">
В этом случае браузер поищет шрифт tahoma. Если найдет то поставит именно его. Если не найдет, то возьмет ms sans serif, ну а если и этот не найдет, то это наверное не компьютер.

Вы заметили, что я "окружил" кавычками (можно и апострофами) описания стилей. Это потому, что в названии второго шрифта есть пробелы. Просто браузер воспримет пробел, как окончание описания стилей. Но если у Вас там (в описаниях стилей) никаких пробелов нет, то и кавычки Вам нафиг не нужны! Это правило распространяется не только на CSS. Не помню, говорил ли я об этом в Учебнике HTML, но в тех атрибутах это правило тоже действует. Помните: каждая кавычка - это 1 байт, значит поставив на странице 20 атрибутов в ненужных кавычках, Вы увеличиваете вес страницы на 40 байт! А если атрибутов еще больше!

"Жирность" и "наклонность"
"Жирность" шрифта задается атрибутом font-weight (вес шрифта):

А можно поизвращатся и написать степень жирности числом от 100 до 900. Незнаю кому это надо...

Чтоб шрифт наклонился или, как говорят умные дядьки, стал курсивным, его надо наклонить атрибутом font-style

Подчеркивание и перечеркивание
За эти дела отвечает атрибут text-decoration:

Следует заметить, что эти атрибуты можно применять и в тегах гиперссылок. Чаще всего их там и применяют. Только не забывайте, что человек, встретив подчеркнутый текст, думает что это гиперссылка и нервно водит над ним курсором мыши. Потому лучше выделять нужный текст другими способами.

Верхний и нижний индекс
В CSS верхний и нижний индексы задаются атрибутом vertical-align. Если super, то верхний, если sub, то нижний. Ничего сложного.

Цвет
Цвет любого элемента в CSS задается атрибутом color. Можно задавать как в HTML:

<p style=color:red> или <i style=color:#00ffсс>
Но есть и другой способ: в десятичном числовом формате или в процентах:
<b style=color:rgb(255,0,192)> или <font style=color:rgb(100%,50%,0%)>
Второй способ не поддерживает моя любимая Opera. Когда Вы зададите больше 100% браузер округлит значение до 100%.

Предыдущий урок | Следующий урок