4 Свойства CSS1

Таблицы стилей влияют на внешний вид документа путем присвоения тех или иных значений свойствам стилей. В данном разделе перечисляются определения свойств стилей и приводится соответствующий перечень значений, допускаемых CSS1.

4.1 Разъяснение значений свойств.

В настоящем тексте допустимые значения для каждого свойства перечисляются с синтаксисом, подобным приведенному ниже:

     Значение: N | NW | NE
     Значение: [ <length> | thick | thin ]{1,4}
     Значение: [<family-name> , ]* <family-name>
     Значение: <url>? <color> [ / <color> ]?
     Значение: <url> || <color>

Слова между "<" and ">" дают нам тип значения. Наиболее распространенными типами являются <length> (длина), <percentage> (доля, процент), <url>, <number> (число) и <color> (цвет); они описаны в разделе 6. Более специфические типы (такие, как <font-family> и <border-style>) описаны в разделах соответственно свойствам.*

Другой вид слов - ключевые, которые должны указываться литерально, без знаков препинания. Знаки "слеш" (/) и запятая (,) также должны указываться литерально.

Если что-то размещается рядом, то это значит, что действия должны производиться в указанном порядке. Вертикальная черта (A|B) означает исключающее ИЛИ (ИЛИ-НЕ); должно происходить одно из двух. Двойная черта (A||B) означает объединяющее ИЛИ (ИЛИ-И) - или и то и другое, или одно из двух. Квадратные скобки([]) - группировка. Расположение рядом важнее, чем ИЛИ-И, а последнее важнее, чем ИЛИ-НЕ. Так, "a b | c || d e " равноценно "[ a b ] | [ c || [ d e ]]".

Каждый знак, ключевое слово или группа в скобках могут следовать за одним из модификаторов:

• Звездочка (*) означает, что предшествующие знак, слово или группа повторяются ноль или более раз.
• Плюс (+) означает, что предшествующие знак, слово или группа повторяются один или более раз.
• Знак вопроса (?) означает, что предшествующие знак, слово или группа являются необязательными (optional).
• Два числа в фигурных скобках ({A,B}) означают, что предшествующие знак, слово или группа повторяются не менее чем А и не более чем В раз.

4.2 Свойства шрифта

Определение свойств шрифта относится к одному из наиболее распространенных способов применения таблицы стилей. К сожалению, пока нет четкого и универсального стандарта для типометрии шрифтов, и определения, применимые к шрифтам одного семейства, могут оказаться неподходящими для других. Так, для обозначения курсива обычно используется свойство 'italic', но могут встречаться и такие обозначения, как Oblique, Slanted, Incline, Cursive или Kursiv. Таким образом, преобразование характерных черт шрифта в типометрические свойства является непростой задачей.

CSS1 определяет следующие свойства шрифтов: "семейство" ('font-family'), "начертание" ('font-style'), "вариант" ('font-variant'), а также "вес" ('font-weight'), "размер" ('font-size'), "шрифт" 'font'.

5.2.1 Распознавание шрифта.

В связи с отсутствием общепринятой классификации свойств шрифта, распознавание свойств гарнитуры шрифта должно быть произведена особенно тщательно. Свойства идентифицируются в четко выраженном порядке, чтобы результаты распознавания были настолько последовательными, насколько позволяют UA (предполагается, что на каждом из последних установлена одна и та же библиотека гарнитур шрифта).

1. UA создает базу относящихся к CSS1 свойств всех известных для UA шрифтов. UA может быть осведомлен о шрифте, если тот был установлен локально или загружен из Интернет. Если найдены два шрифта с одинаковыми свойствами, один из них игнорируется.

2. Применительно к данному элементу и для каждого из символов данного элемента, UA подбирает свойства шрифта, применимые к этому элементу. Основываясь на полном наборе свойств, UA использует свойство "семейство" ('font-family') для выбора пробного семейства шрифта. Остальные свойства проверяются на предмет того, насколько пробное семейство соответствует критериям распознавания, описываемым каждым из свойств. Если все остальные свойства могут быть распознаны UA, то распознавание гарнитуры шрифта считается завершенным.

3. В случае, если в процедуре п. 2 не удается распознать гарнитуру шрифта, и если в запасе есть другое альтернативное семейство шрифтов, процедура п. 2 повторяется применительно к последнему.

4. Если гарнитуру шрифта удалось распознать, но оно не содержит глифа для текущего символа, процедура п. 2 повторяется для следующего альтернативного начертания шрифта, если таковое имеется. См. в приложении С описание шрифтов и кодировок.

5. Если с помощью процедуры п.2 не удалось распознать гарнитуру шрифта, берется гарнитура шрифта, определенного для UA по умолчанию, затем повторяется процедура п. 2, с использованием наилучших результатов, которые могут быть достигнуты со шрифтом по умолчанию.

(Вышеизложенный алгоритм может быть оптимизирован на предмет исключения дублирования проверок свойств CSS1 для каждого символа).

Из правил распознавания свойств (2) вытекает следующее:

1. "Начертание" ('font-style') пробуется в первую очередь. "Курсив" ('italic') считается распознанным если курсив явно указан, либо данная гарнитура шрифта в базе UA отмечена зарезервированными для CSS словами 'italic' (предпочтительное), или 'oblique'. В противном случае значения должны быть распознаны правильно, иначе "начертание" считается нераспознанным.

2. Следующим пробуется "вариант". "Нормальным" считается шрифт, не отмеченный как "малые прописные" ('small-caps'); "малые прописные" считается (1) шрифт, помеченный как 'small-caps', (2) шрифт, в котором синтезированы малые прописные символы или (3) шрифт, в котором строчные буквы заменены прописными. Малые прописные буквы могут быть синтезированы путем уменьшения размеров прописных букв нормального шрифта.

3. "Вес" шрифта опознается следующим и никогда не бывает неопознанным. (См. далее "Задание веса шрифта").

4. "Размер" шрифта ('font-size') должен распознаваться в допустимых пределах, установленных UA. (Обычно размеры масштабируемых шрифтов округляются до ближайшего целого пикселя, так что допуск для растровых шрифтов на экране может доходить до 20%.) Дальнейшая обработка, например, значений в единицах "м" других свойств, основано на том значении "размера", которое используется, а не на том, которое определено.

4.2.2 Задание семейства шрифта ('font-family').

Значение: [[<family-name> | <generic-family>],]* [<family-name> |
<generic-family>]
По умолчанию: определяется UA
Область приложения: все элементы
Наследование: есть
Процентное выражение: неопр.

Значение свойства представляет собой перечень гарнитур шрифтов и/или их названий в порядке приоритетности. В отличие от других свойств CSS1, здесь значения могут разделяться запятой для указания альтернатив:

  BODY { font-family: gill, helvetica, sans-serif }

Имеются два типа перечней значений:

<family-name>

Названия избранных гарнитур шрифта (в последнем примере - "gill" и "helvetica").

<generic-family>

В нижеследующем примере последнее значение указывает на семейство шрифта. Определены следующие семейства:

• 'serif' (напр. Times)
• 'sans-serif' (напр. Helvetica)
• 'cursive' (напр. Zapf-Chancery)
• 'fantasy' (напр. Western)
• 'monospace' (напр. Courier)

В таблицах стилей дизайнерам рекомендуется использовать указание семейства шрифта в качестве последней альтернативы.

Названия семейств, содержащие пробелы, должны быть в кавычках:

  BODY { font-family: "new century schoolbook", serif }

  <BODY STYLE="font-family: 'My own font', fantasy">

Если кавычки отсутствуют, то символы пробела перед и после названия гарнитуры игнорируются и любая последовательность символов пробела внутри названия семейства преобразуется в слитное написание.

4.2.3 Задание начертания шрифта ('font-style')

Значение: normal | italic | oblique
По умолчанию: normal
Область приложения: все элементы
Наследование: да
Процентное выражение: неопр.

Свойство "начертание" ('font-style') определяет выбор между нормальным (иногда обозначается также терминами "roman" или "upright"), курсивным и наклонным начертанием шрифта.

Значение "нормальный" ('normal') принимается для шрифта, если он классифицирован как нормальный ('normal') в базе шрифтов UA, в то время как "наклонным" считается шрифт, помеченный как 'oblique'. По значению "курсив" ('italic') выбирается шрифт, обозначенный как 'italic' , либо, при отсутствии такового, обозначенный как 'oblique'.

Шрифт, обозначенный как "наклонный" ('oblique') в базе шрифтов UA, может также генерироваться программным способом путем наклона линий нормального шрифта.

Шрифты, имеющие в названиях такие слова, как Oblique, Slanted или Incline, обычно обозначаются в базе данных UA как "наклонные". Шрифты, имеющие в названиях такие слова, как Italic, Cursive или Kursiv, обычно обозначаются как "курсив".

  H1, H2, H3 { font-style: italic }
  H1 EM { font-style: normal }

В вышеприведенном примере подчеркнутый текст, относящийся к H1, будет отрабатываться как нормальный.

4.2.4 Задание варианта шрифта ('font-variant').

Значение: normal | small-caps
По умолчанию: normal
Область приложения: все элементы
Наследование: есть
Процентное выражение: неопр. 

Другой тип варьирования внутри семейства шрифтов - это "малые прописные". В таких шрифтах строчные буквы выглядят подобно заглавным, только меньше размером и с несколько иными пропорциями. Такой шрифт определяется свойством "вариант" ('font-variant' ).

Значение 'normal' определяет шрифт без малых прописных букв, 'small-caps' - с малыми прописными. Для CSS1 желательно (но не обязательно), чтобы малые прописные создавались путем замены строчных букв уменьшенными символами прописных. В крайнем случае, для замены шрифта с малыми прописными используются прописные буквы.

В нижеследующем примере в элементе H3 результатом будет шрифт в варианте "малые прописные", с подчеркнутыми наклонными малыми прописными буквами.

  H3 { font-variant: small-caps }
  EM { font-style: oblique }

В семействе шрифтов возможны и другие варианты, например, шрифты со старинными цифрами, малыми прописными цифрами, сжатыми или растянутыми буквами и т.п. CSS1 не предусматривает свойств для их определения.

Ядро CSS1: как для преобразования текста в написанный заглавными буквами, так и для 'text-transform' используются одинаковые соображения. (Досл.: CSS1 core: insofar as this свойство causes text to be transformed to uppercase, the same considerations as for 'text-transform' apply)

4.2.5 Задание веса шрифта ('font-weight')

Значение: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
По умолчанию: normal
Область приложения: все элементы
Наследование: есть
Процентное выражение: неопр.

Свойство "вес шрифта" определяет степень толщины линий при начертании. Это ряд значений от 100 до 900, где каждый номер указывает вес, соответствующий по крайней мере не меньшей жирности начертания, чем для предшествующего. Нормальный шрифт 'normal' соответствует номеру 400, полужирный 'bold' - 700. Другие слова, использованные вместо 'normal' или 'bold', зачастую истолковывались как названия гарнитур, и поэтому была принята численная шкала в 9 позиций.

  P { font-weight: normal }   /* 400 */
  H1 { font-weight: 700 }     /* bold */

Значения 'bolder' и 'lighter' определяют вес шрифта по отношению к унаследованного от родительского:

  STRONG { font-weight: bolder }

Дочерние элементы наследуют результирующее значение веса, но не его ключевое слово.

Шрифты (данные шрифтов) обычно имеют одно или более свойств, значения которых являются терминами, описывающими их веса. Общепринятых, универсальных описаний названий весов не существует. Первичная функция этих условных имен - различать жирность внутри одного семейства шрифтов. В целом по разным семействам шрифта терминология весьма разнообразна: к примеру, шрифт, который по внешнему виду отнесли бы к полужирным, может быть назван как Регулярный (Regular), Романский (Roman), Книжный (Book), Средний (Medium), Полужирный (Semi- или DemiBold), Жирный (Bold), или как Black, в зависимости от относительной "жирности" нормального шрифта данного семейства. В связи с отсутствием стандартных названий, свойство "вес" для CSS1 в численном выражении соизмеряется со значением 400, которое соответствует нормальному шрифту данного семейства. Этому весу обычно соответствуют такие условные имена шрифтов, как Book, Regular, Roman, Normal, Medium, Обыкновенный, Книжный, Средний, Нормальный.

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

• Если семейство шрифта уже использует числовую шкалу с девятью градациями (к примеру, как шрифт Open Type), вес шрифта может быть пересчитан напрямую.
• Если гарнитура отмечена как Medium, а в семействе есть хотя бы одна, помеченная как Book, Regular, Roman или Normal, то гарнитура Medium ассоциируется с весом 500.
• Шрифт, отмеченный как Bold, обычно соответствует весу 700.
• Если шкала жирности шрифта имеет меньше 9 градаций, используется следующий метод интерполяции. Если значение 500 невозможно присвоить, вместо него также присваивается 400. Если невозможно присвоить одно из значений следующего ряда - 600, 700, 800, 900 - то берется ближайшее значение для более жирного шрифта, если таковое имеется, в противном случае - для менее жирного. Если невозможно присвоить одно из значений следующего ряда - 300, 200, 100, - то берется ближайшее значение для менее жирного шрифта, если таковое имеется, в противном случае - для более жирного.

Данный метод иллюстрируют два нижеследующих примера. Возьмем для некоего условного семейства шрифтов "Example1" четыре градации веса по возрастающей: Regular, Medium, Bold, Heavy. Возьмем также шесть градаций веса для другого условного семейства шрифтов "Example2": Book, Medium, Bold, Heavy, Black, ExtraBlack. Обратите внимание на то, как во втором примере шрифт "Example2 ExtraBlack" не был с чем-либо ассоциирован.

Доступные шрифты	Назначен вес	Включены также
"Example1 Regular"	400	100, 200, 300
"Example1 Medium"	500	
"Example1 Bold"	700	600
"Example1 Heavy"	800	900

Доступные шрифты	
Назначен вес	
Включены также
"Example2 Book"	400	100, 200, 300
"Example2 Medium"	500	
"Example2 Bold"	700	600
"Example2 Heavy"	800	
"Example2 Black"	900	
"Example2 ExtraBlack"	(none)	

В зависмости от того, как ключевые слова 'bolder' и 'lighter' делают шрифт в семействе жирнее или светлее, и в связи с тем, что семейство шрифта может не содержать шрифтов, соответствующих всем весовым значениям, обработка значения 'bolder' до следующего более жирного и значения 'lighter' до менее жирного ограничена для UA пределами семейства шрифта. Если точнее, то ключевые слова 'bolder' и 'lighter' означают следующее.

• Значение 'bolder' выбирает для шрифта следующий вес, соответствующий более жирному шрифту, чем родительский. Если такого веса нет, то обычно используется ближайшее большее численное значение (при сохранении шрифта неизменным), если наследуемое значение не было равно 900, в противном случае вес остается равным 900.
• Аналогично со значением 'lighter', но в обратном порядке: выбирается ближайшее значение, соответствующее менее жирному шрифту, если же таковой отсутствует, то принимается ближайшее численное значение для менее жирного шрифта, при сохранении шрифта неизменным.

Это не дает гарантии, что для любого значения "веса" найдется более жирный шрифт; к примеру, некоторые фонты бывают только нормальными или полужирными, остальные могут иметь восемь гарнитур с различным весом. Нельзя заранее угадать, как именно UA сопоставит формализованные шрифтовые параметры с конкретными шрифтами различной жирности. Можно быть уверенным лишь в том, что шрифт заданного наименования будет не менее жирным, чем имеющиеся в семействе менее жирные шрифты.

4.2.6 Задание размера шрифта ('font-size').

Значение: <absolute-size> | <relative-size> | <length> | <percentage>
По умолчанию: medium
Область применения: все элементы
Наследование: есть
Процентное выражение: относительно размера шрифта родительского элемента

<absolute-size>

Значение абсолютного размера (<absolute-size>) есть индекс таблицы размеров шрифта, поддерживаемых и отрабатываемых UA. Возможные значения следующие: [ xx-small | x-small | small | medium | large | x-large | xx-large ]. На дисплее градации масштабируются с шагом х1,5: если 'medium' - кегль 10, то 'large' - кегль 15. Различные мультимедийные устройства могут потребовать различные шкалы масштабирования. Кроме того, UA должен обеспечивать качество и разборчивость шрифтов при отработке таблицы. Для разных семейств шрифтов таблицы могут отличаться.

<relative-size>

Относительный размер (<relative-size>) отрабатывается, исходя из таблицы размеров шрифта и размера шрифта родительского элемента. Возможные значения - [ larger | smaller ]. Например, если размер шрифта родительского элемента 'medium', то значение 'larger' преобразует шрифт текущего элемента в 'large'. Если для размера шрифта родительского элемента нет близкого вхождения в таблицу, то UA волен интерполировать данные таблицы или округлить размер до ближайшего значения. UA может также экстраполировать табличные значения, если численное значение выходит за пределы зарезервированных слов.

Для значений длины и процентного выражения таблица размеров шрифта не должна приниматься в расчет, пока не будет вычислен размер шрифта элемента

Отрицательные значения не допускаются.

Для всех других свойств, значения длины 'em' и 'ex' относятся к размеру шрифта текущего элемента. Для свойства "размер шрифта" эти единицы длины относятся к размеру шрифта родительского элемента.

Заметим, что приложения могут переиначивать явно заданный размер в зависимости от содержания. К примеру, для трехмерной сцены VR размер шрифта будет изменяться в зависимости от перспективы.

примеры:

  P { font-size: 12pt; }
  BLOCKQUOTE { font-size: larger }
  EM { font-size: 150% }
  EM { font-size: 1.5em }

Если используется градация масштабирования 1.5, то три последних случая равнозначны.

4.2.7 Задание шрифта в целом ('font')

Значение: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ /
<line-height> ]? <font-family>
По умолчанию: не определено для обобщающего свойства
Область применения: все элементы
Наследование: есть
Процентное выражение: допускается для <font-size> и <line-height>

Свойство "шрифт" есть обобщающее свойство для определения 'font-style' 'font-variant' 'font-weight' 'font-size', 'line-height' and 'font-family' в одном и том же месте таблицы стилей. Синтаксис этого свойства основан на традиционном для полиграфии способе указания группы свойств, относящихся к шрифтам.

Для определения допускаемых значений и значений по умолчанию см. вышеописанные свойства. Если для тех или иных свойств значения явно не указаны, то для них принимаются значения по умолчанию.

  P { font: 12pt/14pt sans-serif }
  P { font: 80% sans-serif }
  P { font: x-large/110% "new century schoolbook", serif }
  P { font: bold italic large Palatino, serif }
  P { font: normal small-caps 120%/120% fantasy }

Во втором примере размер шрифта, указанный в процентном выражении (80%), считается от размера шрифта родительского элемента. В третьем примере высота линии, выраженная в процентах, считается от размера шрифта самого элемента.

В первых трех примерах начертание, вариант и вес шрифта явно не заданы, и по умолчанию всем им присваивается значение 'normal'. В четвертом примере вес шрифта явно указан как 'bold', стиль как 'italic', а варианту по умолчанию присваивается значение 'normal'.

В пятом примере указан вариант "малые прописные" ('small-caps'), размер (120% от родительского шрифта), высота линии (120% от размера шрифта), и гарнитура ('fantasy'). Следовательно, значение 'normal' присваивается по умолчанию двум свойствам: "стиль" и "вес".

4.3 Свойства "цвет" (color) и "фон" (background).

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

Свойство "цвет", как правило, наследуется. Свойство "фон" не наследуется, но фон родительского элемента будет виден на просвет, т.к. по умолчанию значение цвета фона для дочерних элементов принимается как 'transparent' (прозрачный).

4.3.1 Определение цвета ('color')

Значение: <color>
По умолчанию: Определяется UA
Область применения: все элементы
Наследование: есть
Процентное выражение: неопр.

Это свойство описывает цвет текста в элементе (зачастую именуемый как цвет переднего плана). Есть несколько разных способов описать, к примеру, красный цвет:

  EM { color: red }              /* natural language */
  EM { color: rgb(255,0,0) }     /* RGB range 0-255   */

См. раздел 5.3. для описания возможных значений цвета.

4.3.2 Определение цвета обоев ('background-color').

Значение: <color> | transparent
По умолчанию: transparent
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Это свойство описывает цвет обоев элемента.

  H1 { background-color: #F00 }

5.3.3 Определение рисунка фона ('background-image').

Значение: <url> | none
По умолчанию: нет
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Это свойство определяет рисунок фона элемента. При назначении изображения для рисунка фона, необходимо также определить цвет фона, который будет использоваться в случае недоступности изображения. Если изображение доступно, оно перекрывает цвет фона сверху.

  BODY { background-image: url(marble.gif) }
  P { background-image: none }

4.3.4 Определение повтора рисунка фона ('background-repeat').

Значение: repeat | repeat-x | repeat-y | no-repeat
По умолчанию: repeat
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Если рисунок фона определен, значение свойства "повтор рисунка фона" определяет, повторяется ли изображение и каким образом.

Значение 'repeat' указывает, что изображение повторяется как в горизонтальном, так и в вертикальном направлении. Значение 'repeat-x' ('repeat-y') устанавливает повтор изображения соответственно только в горизонтальном (вертикальном) направлении, создавая одну полосу из изображений от одного края до противоположного. При значении 'no-repeat' изображение не повторяется.

  BODY {
    background: red url(pendant.gif);
    background-repeat: repeat-y;
  }

В вышеприведенном примере изображение рисунка фона повторяется только в вертикальном направлении.

4.3.5 Определение привязки фона ('background-attachment').

Значение: scroll | fixed
По умолчанию: scroll
Область приложения: все элементы
Наследование: нет
Процентное выражение: неопр.

Если определен рисунок фона, значение свойства "привязка" ('background-attachment') определяет, привязан ли рисунок к холсту или перемещается вместе с содержанием.

  BODY {
    background: red url(pendant.gif);
    background-repeat: repeat-y;
    background-attachment: fixed;
  }

Ядро CSS1: UA вправе рассматривать 'fixed' как 'scroll'. Тем не менее рекомендуется, чтобы они правильно отрабатывали 'fixed' по крайней мере для элементов HTML и BODY, т.к. для автора не существует возможности использовать изображение только для браузеров, поддерживающих 'fixed'. (См. гл.7).

4.3.6 Определение положения фона ('background-position')

Значение: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left |
center | right]
По умолчанию: 0% 0%
Область применения: блочные и замещаемые элементы
Наследование: нет
Процентное значение: по отношению к стороне самого элемента

Если рисунок фона был определен, значение свойства "положение фона" определяет его начальное расположение.

При парном значении '0% 0%', верхний левый угол изображения устанавливается в верхнем левом углу поля, окружающего содержание элемента (т.е. не того поля, что окружает отступ, рамку или границу). При парном значении '100% 100%', нижний правый угол изображения устанавливается в нижнем правом углу элемента. При парном значении '14% 84%', точка изображения 14% вправо и 84% вниз будет установлена на точке элемента 14% вправо и 84% вниз.

При парном значении '2cm 2cm', верхний левый угол изображения будет установлен на расстоянии 2 см правее и 2 см ниже верхнего левого угла элемента.

Если задано только одно процентное выражение или абсолютные единицы, они устанавливают только горизонтальное положение, а вертикальное по умолчанию будет 50%. Если заданы два значения, то первое из них - горизонтальное положение. Допускаются комбинации абсолютных единиц и процентных выражений, например, '50% 2cm'. Допускаются отрицательные значения.

Для обозначения положения изображения фона могут быть также использованы ключевые слова, которые можно комбинировать с процентным выражением или абсолютными единицами. Ниже перечислены возможные комбинации ключевых слов и их расшифровка:

• 'top left' или 'left top' равноценны '0% 0%'.
• 'top', 'top center' или 'center top' равноценны '50% 0%'.
• 'right top' или 'top right' равноценны '100% 0%'.
• 'left', 'left center' или 'center left' равноценны '0% 50%'.
• 'center' или 'center center' равноценны '50% 50%'.
• 'right', 'right center' или 'center right' равноценны '100% 50%'.
• 'bottom left' или 'left bottom' равноценны '0% 100%'.
• 'bottom', 'bottom center' или 'center bottom' равноценны '50% 100%'.
• 'bottom right' или 'right bottom' равноценны '100% 100%'.

примеры:

  BODY { background: url(banner.jpeg) right top }    /* 100%   0% */
  BODY { background: url(banner.jpeg) top center }   /*  50%   0% */
  BODY { background: url(banner.jpeg) center }       /*  50%  50% */
  BODY { background: url(banner.jpeg) bottom }       /*  50% 100% */

Если рисунок фона привязан относительно холста (см. раздел "Определение привязки фона"), изображение устанавливается относительно холста, но не элемента. К примеру:

  BODY {
    background-image: url(logo.png);
    background-attachment: fixed;
    background-position: 100% 100%;
  }

В вышеприведенном примере изображение устанавливается в нижний правый угол холста.

4.3.7 Определение свойств фона в целом ('background')

Значение: <background-color> || <background-image> || <background-repeat> ||
<background-attachment> || <background-position>
По умолчанию: для обобщающего свойства не определено
Область приложения: все элементы
Наследование: нет
Процентное выражение: применительно к <background-position>

Свойство "фон" ('background') - это обобщающее свойство для установки отдельных свойств фона (т.е. цвета, рисунка, повтора, привязки и положения) в одном правиле таблицы стилей.

Возможные значения обобщающего свойства "фон" включают совокупность возможных значений каждого из составляющих свойств.

  BODY { background: red }
  P { background: url(chess.png) gray 50% repeat fixed }

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

4.4 Свойства текста

4.4.1 Установка интервалов ('word-spacing')

Значение: normal | <length>
По умолчанию: normal
Область применения: все элементы
Наследование: есть
Процентное выражение: неопр.

Численное выражение длины указывает добавление к установленной по умолчанию величине интервалов между словами. Это значение может быть отрицательным, но в этом случае могут иметь место различные ограничения, накладываемые методами отработки. UA вправе самостоятельно выбирать алгоритм вычисления интервалов. Интервалы между словами могут также зависеть от способа выравнивания абзаца (последний определяется значением свойства "выравнивание" ('align')).

  H1 { word-spacing: 0.4em }

Здесь интервал между словами в элементе H1 увеличен на единицу "м" ('1em')(0,4em?), (м соответствует круглой - прим. перев.).

Ядро CSS1: UA вправе квалифицировать любое значение "интервала" как 'normal' (См. раздел 6.)

4.4.2 Установка трекинга ('letter-spacing')

Значение: normal | <length>
По умолчанию: normal
Область применения: все элементы
Наследование: есть
Процентное выражение: неопр.

Численное выражение длины указывает на добавление к установленной по умолчанию величине межбуквенных пробелов. Это значение может быть отрицательным, но в этом случае могут иметь место различные ограничения, накладываемые методами отработки. UA вправе самостоятельно выбирать алгоритм вычисления интервалов. Межбуквенные интервалы могут также зависеть от способа выравнивания абзаца (последний определяется значением свойства "выравнивание" ('align')).

  BLOCKQUOTE { letter-spacing: 0.1em }

Здесь межбуквенный интервал для элемента BLOCKQUOTE' увеличен на '0.1em'.

В случае значения 'normal', UA может менять межбуквенное расстояние для выравнивания абзаца. Этого не произойдет, если для "трекинга" будет указано значение длины в численном выражении:

  BLOCKQUOTE { letter-spacing: 0 }
  BLOCKQUOTE { letter-spacing: 0cm }

Если образующийся межбуквенный интервал не идентичен интервалу по умолчанию, UA не будет использовать лигатуры.

Ядро CSS1: UA может интерпретировать любое значение трекинга как 'normal'. (См. секцию 7.)

4.4.3 Установка оформления текста ('text-decoration')

Значение: none | [ underline || overline || line-through || blink ]
По умолчанию: none
Область применения: все элементы
Наследование: нет с условием см ниже
Процентное выражение: неопр.

Это свойство описывает способ оформления текста в элементе. Если в элементе нет текста (напр., элемент 'IMG' в HTML), либо в случае пустого элемента (напр. '<EM></EM>'), это свойство не имеет силы. Значение 'blink' делает текст мерцающим.

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

Это свойство не наследуется, но элементы должны соответствовать родительским. Например, если в элементе подчеркивание, черта должна передаваться дочерним элементам. Цвет подчеркивания остается даже в случаях, когда дочерние элементы имеют другие значения цвета.

  A:link, A:visited, A:active { text-decoration: underline }

В вышеуказанном примере будет подчеркиваться текст для всех видов ссылок (т.е. все элементы 'A' с атрибутом 'HREF').

UA должны распознавать зарезервированное слово 'blink', хотя не обязательно должны поддерживать мерцание текста.

4.4.4 Установка вертикального выравнивания текста ('vertical-align').

Значение: baseline | sub | super | top | text-top | middle | bottom |
text-bottom | <percentage>
По умолчанию: baseline
Область применения: строчные элементы
Наследуемость: нет
Процентное выражение: по отношению к свойству "высота линии" ('line-height') самого элемента

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

'baseline'

совмещает базу элемента (или его низ, если элемент не имеет базы), с базой родительского элемента

'middle'

выравнивает среднюю линию элемента (обычно изображения) по уровню "база плюс половина высоты ('x-height') родительского элемента"

'sub'

делает элемент подстрочным

'super'

делает элемент надстрочным

'text-top'

выравнивает верх элемента по верху шрифта родительского элемента

'text-bottom'

выравнивает низ элемента по низу шрифта родительского элемента

Другой набор значений свойства определяет выравнивание относительно форматируемой линии, частью которой является указанный элемент:

'top'

выравнивает вершину элемента по самому высокому элементу линии

'bottom'

выравнивает низ элемента по самому низкому элементу линии.

При использовании значений 'top' и 'bottom' могут возникать неразрешимые ситуации, когда зависимости одних элементов от других образуют замкнутый цикл.

Процентное выражение соотносится со значением свойства "высота линии" ('line-height') самого элемента. Таким способом база элемента (или низ, если таковая отсутствует) повышается на определенный уровень относительно базы родительского элемента. Допускаются отрицательные значения. Например, при значении '-100%' элемент будет опущен так, что его база достигнет уровня, где должна лежать база следующей линии. Это позволяет позиционировать по вертикали элементы, не имеющие базы - скажем, изображения, используемые для замещения букв.

Предполагается, что в будущей версии CSS в качестве значения этого свойства будет допускаться <length>.

4.4.5 Установка преобразования текста ('text-transform')

Значение: capitalize | uppercase | lowercase | none
По умолчанию: none
Область применения: все элементы
Наследование: есть
Процентное выражение: неопр.

'capitalize'

устанавливает первую букву каждого слова прописной

'uppercase'

устанавливает все буквы элемента прописными

'lowercase'

устанавливает все буквы элемента строчными

'none'

аннулирует наследованное значение.

Фактически преобразование в каждом случае будет зависеть от используемого языка . См. способы определения языка элемента в [4] .

  H1 { text-transform: uppercase }

В вышеприведенном примере для элемента 'H1' все буквы устанавливаются прописными.

Ядро CSS1: UA может игнорировать преобразование текста (т.е. отрабатывать как по значению 'none'), для символов, не относящихся к набору для кодировки Latin-1 и для элементов на языках, для которых преобразование отличается от принятого для таблиц преобразования Unicode [8].

4.4.6 Установка выравнивания текста ('text-align')

Значение: left | right | center | justify
По умолчанию: определяется UA
Область применения: блочные элементы
Наследование: есть
Процентное выражение: неопр.

Это свойство описывает способ выравнивания текста внутри элемента. Фактически используемый UA алгоритм будет зависеть от языка документа.

Пример:

  DIV.center { text-align: center }

Поскольку выравнивание текста наследуется, все блочные элементы внутри элемента 'DIV' с 'CLASS=center' будут выровнены по середине. Обратите внимание, что выравнивание производится относительно ширины элемента, а не холста. Если UA не поддерживает выравнивание по ширине ('justify'), он должен поддерживать замену - для западных языков это будет, как правило, выравнивание по левому краю.

Ядро CSS: UA вправе интерпретировать выравнивание по середине как выравнивание по левому или правому краю, в зависимости от установленного по умолчанию для элемента направления письма - соответственно слева направо или справа налево.

4.4.7 Установка абзацного отступа ('text-indent')

Значение: <length> | <percentage>
По умолчанию: 0
Область применения: блочный элементы
Наследование: есть
Процентное выражение: относительно ширины родительского элемента.

Это свойство определяет величину отступа перед первой форматируемой линией абзаца. Значение для абзацного отступа может быть отрицательным, но в пределах, накладываемых особенностями обработки. Отступ не используется в середине элемента, если тот был разбит другим (напр. 'BR' для HTML).

Пример:

  P { text-indent: 3em }

4.4.8 Установка высоты строки ('line-height').

Значение: normal | <number> | <length> | <percentage>
По умолчанию: normal
Область применения: все элементы
Наследование: есть
Процентное выражение: относительно размера шрифта самого элемента.

Данное свойство определяет расстояние между базами двух смежных строк.

Если численное значение явно определено, высота строки определяется как высота шрифта, умноженная на численное значение. Отличие от процентного выражения - в способе наследования: если определено численное значение, то наследуется сам коэффициент, а не результирующее значение, как в случае в процентным или иным способом выражения.

Отрицательные значения не допускаются.

В трех строках следующего примера получаются одинаковые результаты высоты строки:

  DIV { line-height: 1.2; font-size: 10pt }     /* number */
  DIV { line-height: 1.2em; font-size: 10pt }   /* length */
  DIV { line-height: 120%; font-size: 10pt }    /* percentage */

Значение 'normal' устанавливает "рациональное" соотношение высоты строки и высоты шрифта элемента. Предполагается, что UA в случае значения 'normal' устанавливает это соотношение в пределах 1,0....1,2.

См. раздел 3.7. , описание того, как свойство "высота строки" влияет на форматирование блочного элемента.

4.5 Свойства полей.

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

Свойства границы устанавливают границу элемента. Обобщающее свойство 'margin' устанавливает границу для всех четырех сторон , в то время как остальные устанавливают только соответствующую сторону.

Свойства отступа определяют, сколько места оставляется между рамкой и содержанием (напр. текст или изображение). Обобщающее свойство 'padding' устанавливает отступ для всех четырех сторон, в то время как остальные устанавливают лишь соответствующую сторону.

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

Свойства "ширина" ('width') и "высота" ('height') устанавливают размеры поля , а "плавающий" ('float') и "очистка" ('clear') позволяют изменять позицию элементов.

4.5.1 Установка верхней границы ('margin-top').

Значение: <length> | <percentage> | auto
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов.

Это свойство определяет верхнюю границу элемента:

  H1 { margin-top: 2em }

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

4.5.2 Установка правой границы ('margin-right').

Значение: <length> | <percentage> | auto
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов

Это свойство определяет правую границу элемента:

  H1 { margin-right: 12.3% }

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

4.5.3 Установка нижней границы ('margin-bottom').

Значение: <length> | <percentage> | auto
По умолчания: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов

Это свойство определяет нижнюю границу элемента:

  H1 { margin-bottom: 3px }

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

4.5.4 Установка левой границы ('margin-left')

Значение: <length> | <percentage> | auto
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентные значения: refer to родительский элемент's width

Это свойство устанавливает левую границу элемента:

  H1 { margin-left: 2em }

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

4.5.5 Установка обобщающего свойства "граница" ('margin').

Значение: [ <length> | <percentage> | auto ]{1,4}
По умолчанию: не определено для обобщающих свойств
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов

Обобщающее свойство "граница" используется для одновременной установки свойств верхней, правой, нижней и левой границы в одном месте таблицы стилей.

При явном указании четырех значений длины они соответственно применяются к верхней, правой, нижней и левой стороне. Если явно указано одно значение, оно применяется ко всем сторонам, если два или три значения, то отсутствующие значения берутся по значению противоположной стороны.

  BODY { margin: 2em } /* all margins set to 2em */
  BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
  BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

Последняя строка вышеприведенного примера равноценна нижеследующему примеру:

  BODY {
    margin-top: 1em;
    margin-right: 2em;
    margin-bottom: 3em;
    margin-left: 2em;        /* copied from opposite side (right) */
  }

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

4.5.6 Установка верхнего отступа ('padding-top').

Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов

Это свойство определяет величину верхнего отступа элемента.

  BLOCKQUOTE { padding-top: 0.3em }

Отрицательные значения для отступа не допускаются.

4.5.7 Установка правого отступа ('padding-right').

Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов

Это свойство определяет величину правого отступа элемента.

  BLOCKQUOTE { padding-right: 10px }

Отрицательные значения для отступа не допускаются.

4.5.8 Установка нижнего отступа ('padding-bottom').

Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов

Это свойство определяет величину нижнего отступа элемента.

  BLOCKQUOTE { padding-bottom: 2em }

Отрицательные значения для отступа не допускаются.

4.5.9 Установка левого отступа ('padding-left').

Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов

Это свойство устанавливает величину левого отступа элемента..

  BLOCKQUOTE { padding-left: 20% }

Отрицательные значения для отступа не допускаются.

4.5.10 Установка обобщающего свойства " отступ" ('padding').

Значение: [ <length> | <percentage> ]{1,4}
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов

Свойство "отступ" является обобщающим для установки свойств верхнего, правого, нижнего и левого отступа в одном правиле таблицы стилей.

Если явно указаны четыре значения, они применяются соответственно к верхнему, правому, нижнему и левому отступу. Если явно указано только одно значение, оно применяется ко всем сторонам, если два или три, то отсутствующие значения принимаются по значениям противоположной стороны.

Поверхность отступа определяется с помощью свойства "фон" ('background'):

  H1 {
    background: white;
    padding: 1em 2em;
  }

В вышеприведенном примере устанавливается горизонтальный отступ величиной '1em' (правый и левый) и вертикальный отступ величиной '2em' (верхний и нижний). Величина 'em' определяется относительно размера шрифта элемента: 1em соответствует размеру применяемого шрифта.

Отрицательные значения для отступа не допускаются.

4.5.11 Установка ширины верхней рамки ('border-top-width').

Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: all элементы
Наследование: нет
Процентное выражение: неопр.

Это свойство определяет ширину верхней рамки элемента. Ширина, определяемая зарезервированным словом, зависит от UA, но при этом выдерживается зависимость: 'thin' меньше, чем 'medium', а последнее меньше, чем 'thick'.

Ширина рамки, определенная с помощью зарезервированного слова, является для документа величиной постоянной:

  H1 { border: solid thick red }
  P  { border: solid thick blue }

В вышеуказанном примере у элементов 'H1' и 'P' будет та же самая рамка независимо от размера шрифта. Чтобы установить относительную ширину, можно использовать единицы 'em':

  H1 { border: solid 0.5em }

Величина рамки не может быть отрицательной.

4.5.12 Установка ширины правой рамки('border-right-width').

Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Это свойство определяет ширину правой рамки элемента. Остальное эквивалентно установке ширины верхней рамки('border-top-width').

4.5.13 Установка ширины нижней рамки('border-bottom-width')

Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Это свойство определяет ширину нижней рамки элемента. Остальное эквивалентно установке ширины верхней рамки('border-top-width').

4.5.14 Установка ширины левой рамки 'border-left-width'

Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Это свойство определяет ширину левой рамки элемента. Остальное эквивалентно установке ширины верхней рамки ('border-top-width').

4.5.15 Установка обобщающего свойства "ширина рамки" ('border-width')

Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Это свойство является обобщающим для установки верхней, правой, нижней и левой ширины рамки в одном правиле таблицы стилей.

Может быть указано от одного до четырех значений, обрабатываемых следующим образом:

• одно значение: используется для установки ширины всех четырех рамок
• два значения: ширина верхней и нижней рамок устанавливаются по первому значению, правое и левое - по второму
• три значения: ширина верхней рамки устанавливается по первому значению, правого и левого по второму, а нижнего по третьему
• четыре значения: соответственно ширина верхней, правой, нижней и левой рамок.

В нижеследующем примере комментарии указывают на получившуюся величину ширины верхней, правой и левой рамок:

  H1 { border-width: thin }                   /* thin thin thin thin */
  H1 { border-width: thin thick }             /* thin thick thin thick */
  H1 { border-width: thin thick medium }      /* thin thick medium thin */
  H1 { border-width: thin thick medium none } /* thin thick medium none */

Величина рамки не может быть отрицательной.

4.5.16 Установка цвета рамки ('border-color').

Значение: <color>{1,4}
По умолчанию: значение свойства 'color'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Свойство "цвет рамки" ('border-color') определяет цвет четырех сторон рамки. "Цвет рамки" может иметь от одного до четырех значений, которые устанавливают цвета сторон рамки аналогично вышеописанному для толщины рамки.

Если не задано ни одного значения цвета, по умолчанию присваивается значение свойства "цвет" самого элемента:

  P {
    color: black;
    background: white;
    border: solid;
  }

В вышеуказанном примере рамка представляет собой сплошную черную линию.

4.5.17 Установка стиля рамки ('border-style')

Значение: none | dotted | dashed | solid | double | groove | ridge | inset |
outset
По умолчанию: none
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Свойство "стиль рамки" устанавливает стиль четырех сторон рамки. Оно может иметь от одного до четырех значений для разных сторон, устанавливаемых аналогично вышеописанному для ширины рамки.

  #xy34 { border-style: solid dotted }

В вышеприведенном примере горизонтальные стороны рамки будут сплошными, а вертикальные - пунктирными.

Так как значение стиля рамки по умолчанию - 'none', то в случае, если стиль рамки явно не задан, видимой рамки не будет.

Возможны следующие стили рамки:

none

рамка не изображается (независимо от значения ширины рамки)

dotted

рамка - пунктирная линия поверх обоев элемента

dashed

рамка - штриховая линия поверх обоев элемента

solid

рамка - сплошная линия

double

рамка - двойная линия поверх обоев элемента. Сумма толщин двух линий и промежутка между ними соответствует толщине рамки.

groove

объемная канавка, цвета на основе значения свойства "цвет".

ridge

объемный гребень, цвета на основе значения свойства "цвет".

inset

объемная складка внутрь, цвета на основе значения свойства "цвет".

outset

объемная складка наружу, цвета на основе значения свойства "цвет".

Ядро CSS: UA может обрабатывать 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как сплошную линию ('solid').

4.5.18 Установка обобщающего свойства "верхняя рамка" ('border-top')

Значение: <border-top-width> || <border-style> || <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Данное свойство является обобщающим для установки ширины, стиля и цвета для верхней рамка элемента.

  H1 { border-bottom: thick solid red }

В вышеуказанном примере установлены ширина, стиль и цвет для рамки элемента H1. Отсутствующим значениям присваиваются значения по умолчанию:

  H1 { border-bottom: thick solid }

В вышеуказанном примере значение цвета опущено и цвет рамки будет установлен по значению свойства "цвет" самого элемента.

Обратите внимание, что в отличие от свойства "стиль рамки ", для обобщающего свойства "верхняя рамка" задается только одно значение стиля.

4.5.19 Установка обобщающего свойства "правая рамка" ('border-right')

Значение: <border-right-width> || <border-style> || <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Данное свойство является обобщающим для установки ширины, стиля и цвета для правой рамки элемента. Остальное аналогично обобщающему свойству "верхняя рамка".

4.5.20 Установка обобщающего свойства "нижняя рамка" ('border-bottom')

Значение: <border-bottom-width> || <border-style> || <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Данное свойство является обобщающим для установки ширины, стиля и цвета для нижней рамки элемента. Остальное аналогично обобщающему свойству "верхняя рамка".

4.5.21 Установка обобщающего свойства "левая рамка" 'border-left'

Значение: <border-left-width> || <border-style> || <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Данное свойство является обобщающим для установки ширины, стиля и цвета для левой рамки элемента. Остальное аналогично обобщающему свойству "верхняя рамка".

4.5.22 Установка обобщающего свойства " рамка" 'border'

Значение: <border-width> || <border-style> || <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Данное свойство является обобщающим для установки ширины, стиля и цвета для всех четырех сторон рамки элемента. В нижеследующем примере первая строка равнозначна четырем последующим:

  P { border: solid red }
  P {
    border-top: solid red;
    border-right: solid red;
    border-bottom: solid red;
    border-left: solid red
  }

В отличие от обобщающих свойств "граница" и "заполнение", для обобщающего свойства "рамка" нельзя задать разные значения четырех сторон рамки. Чтобы так сделать, необходимо использовать одно или более из других вышеприведенных свойств рамки.

Поскольку свойства в известной мере функционально перекрываются, при их обработке важен также порядок, в соответствии с которым они были назначены. Рассмотрим следующий Пример:

  BLOCKQUOTE {
    border-color: red;
    border-left: double
    color: black;
  }

В вышеприведенном примере цвет левого края рамки будет черным, в то время как для остальных - красным. Это является результатом установки ширины, стиля и цвета для свойства "левая рамка". Поскольку значение цвета не было явно задано для свойства "левая рамка", будет использовано значение, заданное для свойства "цвет". То, что свойство "цвет" определено позже свойства "левая рамка", не играет роли.

Обратите внимание, что если для свойства "ширина рамки" устанавливается до четырех значений, то для рассматриваемого - только одно.

4.5.23 Установка свойства "ширина" ('width')

Значение: <length> | <percentage> | auto
По умолчанию: auto
Область применения: блочные и замещаемые элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительского элемента

Это свойство может быть использовано для текстовых элементов, но чаще - для замещаемых, таких как изображения. Если необходимо, ширина изображения может быть изменена масштабированием. При этом отношение ширины изображения к высоте будет сохранена, если для свойства "высота" указано значение 'auto'.

Пример:

  IMG.icon { width: 100px }

Если для свойств "ширина" и "высота" замещаемого элемента использовано значение 'auto', то обрабатываются значения, соответствующие собственным размерам элемента.

Отрицательные значения для свойства "ширина" не допускаются.

См. также модель форматирования глава 4, описание зависимости между настоящим свойством, границей и заполнением.

5.5.24 Установка свойства "высота" 'height'

Значение: <length> | auto
По умолчанию: auto
Область применения: блочные и замещаемые элементы
Наследование: нет
Процентное выражение: неопр.

Это свойство может быть использовано для текстовых элементов, но чаще - для замещаемых, таких как изображения. Если необходимо, высота изображения может быть изменена масштабированием. При этом отношение ширины изображения к высоте будет сохранена, если для свойства "ширина" указано значение 'auto'.

Пример:

  IMG.icon { height: 100px }

Если для свойств "ширина" и "высота" замещаемого элемента использовано значение 'auto', то обрабатываются значения, соответствующие собственным размерам элемента.

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

Отрицательные значения свойства "высота" не допускаются.

Ядро CSS1: UA могут игнорировать свойство "высота" (т.е. присваивать ему значение 'auto'), если элемент не является замещаемым.

4.5.25 Установка свойства "плавающий" ('float')

Значение: left | right | none
По умолчанию: none
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

При установке значения 'none', элемент отображается там, где он присутствует в тексте. При значении 'left' ('right'), элемент смещается влево (вправо), а перенос текста производится по правой (левой) стороне элемента. При значении 'left' ('right'), элемент будет отображаться как блочный (в том смысле, что свойство "выделение" - 'display' - игнорируется). См. полную спецификацию раздел 3.1.4.

  IMG.icon {
    float: left;
    margin-left: 0;
  }

В вышеприведенном примере все элементы IMG, имеющие класс icon, будут установлены вдоль левой стороны родительского элемента.

Это свойство чаще всего используется для позиционирования обтекаемых текстом изображений, но также может применяться для текстовых элементов.

4.5.26 Установка свойства "чисто" ('clear')

Значение: none | left | right | both
По умолчанию: none
Область применения: все элементы
Наследование: нет
Процентное выражение: нет

Это свойство устанавливается, если элемент допускает размещение на своих сторонах плавающих элементов. Если точнее, то значение данного свойства указывает стороны, где плавающие элементы не ставятся. Если для свойства элемента "чисто" указать значение 'left', то для такого элемента все плавающие элементы на левой стороне будут опущены вниз. Если указано значение 'none', то плавающие элементы устанавливаются на всех сторонах. Пример:

  H1 { clear: left }

4.6 Свойства - классификации

Эти свойства классифицируют элементы по категориям, большим, чем при установке специфических визуальных параметров.

Перечень стилей свойств описывает, каким образом сформатированы элементы перечня (т.е. элементы, у которых свойство "показ" ('display') имеет значение 'list-item'). Свойства перечня стилей могут быть установлены для любого элемента, и будут наследоваться в порядке, определенном древом этого перечня. Однако этот эффект будет распространяться только на элементы, у которых свойство "показ" ('display') имеет значение 'list-item'. Для языка

4.6.1 Установка свойства "показ" ('display')

Значение: block | inline | list-item | none
По умолчанию: block
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Это свойство описывает, показывается ли элемент на холсте (печатная страница, экран и т.п.) и каким образом.

Элемент со значением 'block' свойства "показ" открывает новое поле. Поле устанавливается относительно смежных полей в соответствии с принципами форматирования CSS. Обычно такие элементы как 'H1' и 'P' относятся к типу "блочные". Значение 'list-item' будет здесь аналогично значению 'block', с той лишь разницей, что добавляется маркер элемента списка. Для HTML это значение обычно имеет элемент 'LI'.

Элемент со значением 'inline' свойства "показ" открывает новое строчное поле в той же самой строке, что и предыдущее содержание. Размеры поля согласуются с размером отформатированного содержания. Если содержание - текст, он может быть разделен на несколько строк, на каждой из которых будет поле. Свойства границы, бордюра и заполнения применяются к строчным ('inline') элементам, но их эффект не будет проявляться в местах переноса строк.

Значение 'none' отменяет показ элемента, включая дочерние элементы и окружающее поле.

  P { display: block }
  EM { display: inline }
  LI { display: list-item }
  IMG { display: none }

Последняя строка отключает показ картинок.

По умолчанию свойству "показ" ('display') присваивается значение 'block', но UA обычно присваивает всем элементам HTML значения по умолчанию в соответствии с предлагаемыми спецификацией HTML для соответствующих элементов [2].

Ядро CSS1: UA может игнорировать свойство "показ" и использовать собственные установки по умолчанию. (См. раздел 7).

4.6.2 Установка пробелов ('white-space')

Значение: normal | pre | nowrap
По умолчанию: normal
Область: блочный элементы
Наследование: есть
Процентное выражение: неопр.

Это свойство описывает, каким образом внутри элемента поддерживаются пробелы: при значении 'normal' пробелы сжимаются, значение 'pre' действует подобно элементу PRE для HTML, а при значении 'nowrap' перенос производится только с помощью элементов BR:

  PRE { white-space: pre }
  P   { white-space: normal }

По умолчанию свойству "пробелы" присваивается значение 'normal', однако UA обычно ставит значения по умолчанию для всех элементов HTML в соответствии с указанным для этих элементов в спецификации HTML [2].

Ядро CSS1: UA может игнорировать свойство "пробелы" в таблице стилей автора или читателя, и использовать взамен собственные значения по умолчанию. (См. раздел 6).

4.6.3 Установка типа маркера перечня ('list-style-type')

Значение: disc | circle | square | decimal | lower-roman | upper-roman |
lower-alpha | upper-alpha | none
По умолчанию: disc
Область применения: элементы со значением 'list-item' для свойства 'display'
Наследование: есть
Процентное выражение: неопр.

Это свойство служит для установки появления маркера перечня, если свойству "рисунок маркера перечня" ('list-style-image') присвоено значение 'none', либо, если изображение, указанное в URL, не может быть отображено.

  OL { list-style-type: decimal }       /* 1 2 3 4 5 etc. */
  OL { list-style-type: lower-alpha }   /* a b c d e etc. */
  OL { list-style-type: lower-roman }   /* i ii iii iv v etc. */

4.6.4 Установка рисунка маркера перечня ('list-style-image').

Значение: <url> | none
По умолчанию: none
Область применения: элементы со значением 'list-item' для свойства 'display'
Наследование: есть
Процентное выражение: неопр.

Это свойство определяет изображение, которое должно быть использовано в качестве маркера перечня. В случае недоступности изображения последнее будет заменено маркером, определенным по свойству "тип маркера перечня".

  UL { list-style-image: url(http://png.com/ellipse.png) }

4.6.5 Установка отступа маркера перечня 'list-style-position'

Значение: inside | outside
По умолчанию: outside
Область применения: элементы со значением 'list-item' для свойства 'display'
Наследование: есть
Процентное выражение: неопр.

Значение свойства "отступ маркера перечня" определяет, каким образом маркер перечня будет расположен относительно содержания. Примеры форматирования см. в разделе 3.1.3.

4.6.6 Установка обобщающего свойства "перечень" ('list-style')

Значение: <keyword> || <position> || <url>
По умолчанию: не определено для обобщающих свойств
Область применения: элементы со значением 'list-item' для свойства 'display'
Наследование: есть
Процентное выражение: неопр.

Это свойство является обобщающим для установки трех свойств: "тип маркера перечня", "рисунок маркера перечня" и "отступ маркера перечня" в одном месте таблицы стилей.

  UL { list-style: upper-roman inside }
  UL UL { list-style: circle outside }
  LI.square { list-style: square }

Прямое указание значений свойств "перечень" для элементов 'LI' может иметь непредсказуемые результаты. На Пример:

  <STYLE TYPE="text/css">
    OL.alpha LI  { list-style: lower-alpha }
    UL LI        { list-style: disc }
  </STYLE>
  <BODY>
    <OL CLASS=alpha>
      <LI>level 1
      <UL>
         <LI>level 2
      </UL>
    </OL>
  </BODY>

Поскольку приоритет установки (как определено в каскаде установок) выше для первой строки таблицы стилей вышеуказанного примера, он отменяет действие второй строки для всех элементов 'LI' и позиции будут маркироваться только строчными буквами в алфавитном порядке. Таким образом, рекомендуется устанавливать значения для обобщающего свойства "перечень" только для элементов перечня:

  OL.alpha  { list-style: lower-alpha }
  UL        { list-style: disc }

В вышеуказанных примерах свойства "перечень" будут унаследованы элементами 'LI' от элементов 'OL' и 'UL'.

Значение URL можно сочетать с любыми другими значениями:

  UL { list-style: url(http://png.com/ellipse.png) disc }

В вышеуказанном примере значение 'disc' будет использоваться в случае недоступности изображения.