Пример таблицы стилей 2
Теперь, когда размер текста предсказуем, мы хотим оптимизировать используемую гарнитуру шрифта. Заголовок лучше задать для разборчивости шрифтом без засечек, а сам текст шрифтом с засечками.
Новые правила
body { font-family: Palatino,'Palatino Linotype',Georgia,
sans-serif; }
h1 { font-family: Helvetica,Arial,sans-serif; }
blockquote { font-family: Helvetica,Arial,sans-serif; }
Font-style, font-variant, and font-weight: изменение деталей
Свойство font-style управляет курсивом без обращения к использованию элемента i; его тремя допустимыми значениями являются italic, oblique и normal.
Значения italic и oblique создают функционально идентичный результат в большинстве современных версий всех массовых браузеров Web, хотя имеется четкое техническое различие между этими двумя стилями, как поясняется в глоссарии, который сопровождает этот курс.
Зачем использовать свойство font-style, когда достаточно элементов em и I?
Каждый из этих элементов имеет специфическое применение: em для предоставления выделения, а i служит в качестве альтернативы для <span style="font-style: italic;">…</span> в тех редких случаях, когда его использование будет оправдано. Обычно <i> вообще не подходит, так как это презентационный элемент, но имеются некоторые фрагменты основного текста, которые принято записывать курсивом, такие как названия книг (хотя это, тем не менее, спорно; кое-кто считает, что элемент cite более подходит для названий книг. Делайте так, как считаете более подходящим.) <em> обычно более уместен, так как он определяет выделение как концепцию, а не как курсив, т.е. определенный стиль — реальный вид выделения может варьироваться в различных браузерах.
Существуют ситуации, когда использование em и его аналога strong может требовать другого подхода. Например, предположим, что вы хотите выделить текст, увеличивая его. Непротиворечивым шагом для предоставления выделения strong будет тогда добавление курсива, что приводит к следующим правилам:
em {
font-size: large;
font-style: normal;
}
strong {
font-size: large;
font-weight: normal;
font-style: italic;
}
Предыдущие правила таблицы стилей создадут результат, аналогичный следующему:
Пример таблицы стилей 3
В данном случае для применения курсива выбран заголовок.
Новые правила
h1 { font-style: italic; }
.sectionNote { font-style: normal; }
font-variant как другой инструмент для выделения коротких отрывков
Свойство font-variant имеет два возможных значения, small-caps и normal. "Капитель" ("Small caps") используется некоторыми дизайнерами для выделения начальной фразы длинного абзаца, или для создания выделения цитированных надписей, таких как следующая:
(Оставь надежды, всяк сюда входящий.)
Пример таблицы стилей 4
Новые правила
.opening { font-variant: small-caps; }
font-weight: жирность и ее отсутствие
Свойство font-weight позволяет изменить уровень жирности любого фрагмента текста, к которому оно применяется.
Обычно поддерживаемыми значениями свойства font-weight являются normal и bold. Хотя Рекомендация CSS 2.1 содержит несколько других значений, текущее состояние поддержки полиграфии Web делает эти другие значения функционально бессмысленными для всех, кроме пользователей специалистов.
Пример таблицы стилей 5
Выделение имени автора жирным шрифтом является приемом дизайна и более часто используется в периодических изданиях, но это, тем не менее, подходит в различных ситуациях в Web.
Новые правила
.author { font-weight: bold; }
Сокращенное свойство font
Многие свойства текста можно задать, если понадобится, в значении одного свойства, способом аналогичном по своей природе свойствам фона.
Сокращенное правило font выглядит следующим образом:
h1 { font: italic normal bold x-large/1.167em Helvetica,Arial,sans-serif; }
Для получения лучших результатов, задаваемое для этого свойства значение должно включать задаваемые значения для всех следующих отдельных свойств в следующем порядке, разделенные пробелами:
font-style
font-variant
font-weight
font-size, за которым следует, если нужно, косая черта и значение line-height (см. ниже)
font-family, которое в данном случае может также быть зарезервированным словом, определяющим системный шрифт; несколько значений должны разделяться запятыми, но не пробелами
|
Таблица 29.3. ключевые слова значений, рассматриваемых в данной лекции свойств | |
|
свойство |
значения |
|
font-family |
cursive, fantasy, monospace, sans-serif, serif |
|
font-size |
xx-small, x-small, small, medium, large, x-large, xx-large |
|
font-style |
italic, normal, oblique |
|
font-variant |
normal, small-caps |
|
font-weight |
bold, normal |
|
line-height |
normal |
|
text-align |
center, justify, left, right |
|
text-decoration |
line-through, none, overline, underline |
|
text-transform |
capitalize, lowercase, none, uppercase |
|
white-space |
normal, nowrap, pre, pre-line, pre-wrap |