Свойства стилей

Рассмотрение свойств стилей начнём с наиболее наглядной категории для документов с текстовым содержанием.

Шрифты

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

Таблица 2.3. Свойства шрифтов
Свойство	Описание	Умолчание
font-family	Тип шрифта	Зависит от браузера
font-style	Стиль шрифта	normal
font-variant	Вид шрифта	normal
font-weight	Жирность шрифта	normal
font-str	Плотность шрифта	normal
font-size	Размер шрифта	medium

Тип шрифта

font-family:семейство_шрифта

При управлении шрифтами принимается во внимание отношение шрифта к семейству шрифтов и к категории. Множество категорий ограничено:

• serif (с засечками, например, Times),

• sans-serif (без засечек, например, Arial) ,

• cursive (курсивный), fantasy (декоративный) и

• monospace (с символами фиксированной ширины, например, Courier).

Число существующих семейств шрифтов гораздо больше (фактически название семейства можно рассматривать как торговую марку).

Стиль шрифта

font-style:normal|italic|oblique

Вид шрифта

font-variant:normal|small-caps

Жирность шрифта

font-weight:Vv|lighter|normal|bold|bolder

Жирность шрифта задается с помощью числа от 100 до 900 или ключевого слова

• normal (соответствует жирности 400),

• bold (соответствует жирности 700),

• bolder (жирнее, чем унаследованный),

• lighter (светлее, чем унаследованный).

Плотность шрифта

font-str:ultra-condensed|extra-condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded

• ultra-condensed - наиболее сжатый

• extra-condensed - сверх сжатый

• semi-condensed - немного сжатый

• normal - нормальный

• semi-expanded - немного разреженный

• expanded - разреженный

• extra-expanded - сверх разреженный

Размер шрифта

font-size:Sv|Pv|em font-size:xx-small|x-small|small|medium|large|x-large|xx-large font-size:smaller|larger

• Ключевые слова xx-small|x-small|small|medium|large|x-large|xx-large перечислены в порядке возрастания размера. Соседние значения отличаются в 1,2 раза, а размеру medium обычно соответствует 12pt;

• Ключевые слова smaller|larger указывают относительную величину:

  • smaller - меньший по сравнению с родительским размер,

  • larger - больший;

Относительный размер можно задать в процентах 150% или коэффициентом 1.5em

Оформление текста

Для текстовых элементов можно задать отступ (абсолютной величиной или в процентах), выравнивание, подчёркивание, надчёркивание и зачёркивание, особым образом оформить первую букву абзаца.

Таблица 2.4. Свойства текстового оформления
Свойство	Описание	Умолчание	Применение
text-indent	Отступ текста	0	К блочным элементам
text-align	Выравнивание текста	Зависит от браузера	К блочным
text-decoration	Оформление текста	none	К блочным
text-shadow	Тень текста	none	Ко всем
letter-spacing	Разрежение литер	normal	Ко всем
word-spacing	Разрежение слов	normal	Ко всем
text-transform	Преобразование текста	none	Ко всем
white-space	Пробельные последовательности	normal	К блочным

Выравнивание текста

text-align:left|right|center|justify

Оформление текста

text-decoration:none|underline|overline|line-through|blink

• underline - подчёркивание,

• overline - надчёркивание,

• line-through - зачёркивание,

• blink - мерцание.

Тень текста

text-shadow:none|Sv₁ Sv₂ Sv₃ Cv,...

• Sv₁ - отступ тени от текста по горизонтали,

• Sv₂ - отступ тени от текста по вертикали,

• Sv₃ - радиус размытия тени,

• Cv - цвет тени.

Если отступ тени задан положительным числом, то тень располагается справа (снизу) от текста, а если отрицательным - слева (сверху). Можно наложить несколько теней, перечислив их через запятую.

Разрежение литер и слов

letter-spacing:normal|Pv|em word-spacing:normal|Pv|em

При оформлении разрежения между литерами (словами) задаваемая величина представляет изменение интервала между литерами (словами) относительно предусмотренного параметрами шрифта. Положительное число увеличивает интервал, а отрицательное - уменьшает.

Преобразование текста

text-transform:none|capitalize|uppercase|lowercase

• capitalize - первая литера каждого слова переводится в верхний регистр,

• uppercase - каждая литера каждого слова переводится в верхний регистр,

• lowercase - каждая литера каждого слова переводится в нижний регистр.

Пробельные последовательности

white-space:normal|pre|nowrap

• normal - последовательность пробелов сокращается до одного пробела и при необходимости разрываются,

• pre - пробельные последовательности не сжимаются и разрываются только переводом на новую строку кодом в исходном тексте,

• nowrap - как normal, но разрывы строк блокируются.

Таблица 2.5. Цвет фона и переднего плана
Свойство	Описание	Умолчание	Применение
color	Цвет	auto	Ко всем элементам
background-color	Цвет фона	transparent	Ко всем
background-image	Фоновая иллюстрация	none	Ко всем
background-repeat	Повтор фона	repeat	Ко всем
background-attachment	Привязка фона	scroll	Ко всем
background-position	Позиция фона	0% 0%	К блочным и замещаемым

<H1 align="center" onMouseOver="this.style.color='white'"

onMouseOut="this.style.color='black'">Изменение цвета заголовка</H1> <h1 align="center" onClick="this.style.textAlign='left'" onDblClick="this.style.textAlign='right'">и выравнивания</h1>

Изменение цвета заголовка

и выравнивания

Повтор фона

background-repeat:repeat-x|repeat-y|repeat|no-repeat

• repeat-x - повтор по горизонтали,

• repeat-y - повтор по вертикали,

• repeat - повтор по горизонтали и вертикали,

• no-repeat - нет повтора (одна копия).

Привязка фона

background-attachment:scroll|fixed

• scroll - фон прокручивается,

• fixed - фон неподвижен.

Позиция фона

background-position:Pv₁ Pv₂|Sv₁ Sv₂ background-position:left|center|right top|center|bottom

• Pv₁/Sv₁ - горизонталь% / размер по горизонтали,

• Pv₂/Sv₂ - вертикаль% / размер по вертикали,

• left - выравнивание по горизонтали влево,

• right - выравнивание по горизонтали вправо,

• top - выравнивание по вертикали вверх,

• bottom - выравнивание по вертикали вниз,

• center - выравнивание по центру.