REC-CSS1-20080411

Каскадные Таблицы Стилей, 1 уровень

Аннотация

Этот документ определяет устройство Каскадных Таблиц Стилей 1 уровня (Cascading Style Sheet, CSS1). CSS1 представляет собой простое устройство таблиц стилей, которое позволяет авторам и читателям прикреплять стиль (например, шрифты, цвета и расстояния) к HTML-документам. Язык CSS1 читается и пишется человеком, и выражает стиль в общих настольных издательских терминах.

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

Данная Рекомендация является результатом деятельности W3C в области Таблиц Стилей. Для получения общих сведений о таблицах стилей смотрите [1].

Содержание

Аннотация
Терминалогия

1         Основные понятия
1.1         Встраивание в HTML
1.2         Группировка
1.3         Наследование
1.4         Класс как селектор
1.5         ID как селектор
1.6         Контекстные селекторы
1.7         Комментарии
2         Псевдоклассы и псевдоэлементы
2.1         Псевдоклассы якоря
2.2         Типографские псевдоэлементы
2.3         Псевдоэлемент 'first-line'
2.4         Псевдоэлемент 'first-letter'
2.5         Псевдоэлементы в селекторах
2.6         Несколько псевдоэлементов
3         Каскад
3.1         'important'
3.2         Порядок каскадирования
4         Модель форматирования
4.1         Элементы блок-уровня
4.1.1         Вертикальное форматирование
4.1.2         Горизонтальное форматирование
4.1.3         Элементы пунктов-списка
4.1.4         Плавающие элементы
4.2         Встроенные элементы
4.3         Заменяемые элементы
4.4         Высота строк
4.5         Холст
4.6         Элементы 'BR'
5         Свойства CSS1
5.1         Обозначения для значений свойств
5.2         Свойства шрифта
5.2.1         Согласование шрифта
5.2.2         'font-family'
5.2.3         'font-style'
5.2.4         'font-variant'
5.2.5         'font-weight'
5.2.6         'font-size'
5.2.7         'font'
5.3         Свойства цвета и фона
5.3.1         'color'
5.3.2         'background-color'
5.3.3         'background-image'
5.3.4         'background-repeat'
5.3.5         'background-attachment'
5.3.6         'background-position'
5.3.7         'background'
5.4         Свойства текста
5.4.1         'word-spacing'
5.4.2         'letter-spacing'
5.4.3         'text-decoration'
5.4.4         'vertical-align'
5.4.5         'text-transform'
5.4.6         'text-align'
5.4.7         'text-indent'
5.4.8         'line-height'
5.5         Свойства коробки
5.5.1         'margin-top'
5.5.2         'margin-right'
5.5.3         'margin-bottom'
5.5.4         'margin-left'
5.5.5         'margin'
5.5.6         'padding-top'
5.5.7         'padding-right'
5.5.8         'padding-bottom'
5.5.9         'padding-left'
5.5.10         'padding'
5.5.11         'border-top-width'
5.5.12         'border-right-width'
5.5.13         'border-bottom-width'
5.5.14         'border-left-width'
5.5.15         'border-width'
5.5.16         'border-color'
5.5.17         'border-style'
5.5.18         'border-top'
5.5.19         'border-right'
5.5.20         'border-bottom'
5.5.21         'border-left'
5.5.22         'border'
5.5.23         'width'
5.5.24         'height'
5.5.25         'float'
5.5.26         'clear'
5.6         Свойства классификации
5.6.1         'display'
5.6.2         'white-space'
5.6.3         'list-style-type'
5.6.4         'list-style-image'
5.6.5         'list-style-position'
5.6.6         'list-style'
6         Единицы
6.1         Единицы длины
6.2         Процентные единицы
6.3         Единицы цвета
6.4         URL
7         Соответствие CSS1
7.1         Совместимый синтаксический анализ
8         Список Использованной Литературы
9         Благодарности

Приложение A: Простые таблицы стилей для HTML 2.0
Приложение B: Грамматика CSS1
Приложение C: Кодировка
Приложение D: Гамма-коррекция
Приложение E: Применимость и расширяемость CSS1
Приложение F: Изменения версии от 17 Декабря 1996

Терминология

автор: автор HTML-документа
АП: Агент Пользователя, в качестве которого часто выступает веб-браузер или веб-клиент
атрибут: HTML-атрибут
вес: приоритет правила
внутренние размеры: ширина и высота, как это определено самим элементом, а не навязано ему извне. В данной спецификации предполагается, что все заменяемые элементы -- и только заменяемые элементы -- оснащены внутренними размерами.
документ: HTML-документ
дочерний элемент: подэлемент в терминологии SGML [5]
заменяемый элемент: элемент, о котором CSS модулю форматирования известны только его внутренние размеры. В HTML, 'IMG', 'INPUT', 'TEXTAREA', 'SELECT' и 'OBJECT' элементы могут быть примерами заменяемых элементов. Например, содержимое элемента 'IMG' часто заменяется изображением, которое указывается с помощью атрибута SRC. CSS1 не определяет, как находятся внутренние размеры.
контекстный селектор: селектор, который соответствует элементам, на основании их положения в структуре документа. Контекстный селектор состоит из нескольких простых селекторов. Например, контекстный селектор 'H1.initial B' состоит из двух простых селекторов, 'H1.initial' и 'B'.
синтаксический анализатор CSS1: Агент Пользователя, который читает таблицы стилей CSS1
объявление: свойство (например, 'font-size') и соответствующее значение (например, '12pt')
основные функции CSS1: часть CSS1, которая является обязательной для всех АПей, соответствующих CSS1
пользователь: синонимом читателя
правило: объявление (например, 'font-family: helvetica') и его селектор (например, 'H1')
простой селектор: селектор, который соответствует элементам на основании типа элемента и/или атрибутов, а не положения самого элемента в структуре документа. Например, 'H1.initial' является простым селектором.
псевдокласс: псевдоклассы используются в CSS-селекторах для того, чтобы позволить информации внешней по отношению к HTML-коду (например, факт того был ли якорь посещён или нет), классифицировать элементы.
псевдоэлемент: псевдоэлементы используются в CSS-селекторах для обращения к типографическим элементам (например, к первой строке элемента), а не к структурным элементам.
размер шрифта: Размер, предназначенный для шрифта. Как правило, размер шрифта примерно равен расстоянию от нижней части самой нижней буквы с подстрочным элементом до вершины самой высокой буквы с надстрочным и (необязательно) с диакритическим знаком.
разработчик: разработчик таблицы стилей
расширенные функции CSS1: функции, описанные в данной спецификации, но помеченные как не относящиеся к числу основных функций CSS1
родительский элемент: элемент контейнер в терминологии SGML [5]
свойство: стилистический параметр, на который можно повлиять с помощью CSS. Данная спецификация определяет список свойств и их соответствующих значений.
селектор: строка, определяющая, какие элементы соответствуют применяемому правилу. Селектор может быть либо простым селектором (например, 'H1'), либо контекстным селектором (например, 'H1 B'), который состоит из нескольких простых селекторов.
строчный элемент: элемент, который не имеет разрыва строк ни до ни после себя (например, 'STRONG' в HTML)
таблица стилей: совокупность правил
тип элемента: общий идентификатор в терминологии SGML [5]
фиктивная последовательность тегов: инструмент для описания поведения псевдоклассов и псевдоэлементов
холст: часть отрисовочной поверхности АП, на которой представляются документы
читатель: лицо, для которого представляется документ
элемент: HTML-элемент
элемент блочного-уровня: элемент, который разрывает строку перед собой и после себя (например 'H1' в HTML)
CSS: Каскадные Таблицы Стилей
CSS1: Каскадные Таблицы Стилей 1-ого уровня. Данный документ определяет CSS1, который представляет собой устройство простых таблиц стилей для веб.
HTML: Язык Гипертекстовой Разметки [2], приложение SGML.
HTML-расширение: Разметка вводимая поставщиками АПей, чаще всего для поддержки определённых визуальных эффектов. Элементы «FONT», «CENTER» и «BLINK» являются примерами HTML-расширений, так же как атрибут «BGCOLOR». Одной из целей CSS является предоставление альтернативы HTML-расширениям.
SGML: Стандартный Обобщённый Язык Разметки [5], приложением которого является HTML

В тексте данной спецификации, одинарные кавычки ('...') обозначают отрывки HTML и CSS кода.

1 Основные понятия

Разработка простых таблиц стилей это легко. Нужно лишь знать HTML и некоторые основные термины настольной издательской системы. Например, чтобы установить синий цвет текста элементам 'H1', можно указать:

H1 { color: blue }

Приведённый выше пример является простым CSS-правилом. Правило состоит из двух основных частей: селектора ('H1') и объявления ('color: blue'). Объявление состоит из двух частей: свойства ('color') и значения ('blue'). Несмотря на то, что в приведённом выше примере осуществляется попытка повлиять только на одно из свойств, необходимых для представления HTML-документа, оно само по себе может рассматриваться как таблица стилей. В сочетании с другими таблицами стилей (одно из фундаментальных свойств CSS заключается в объединении таблиц стилей) она будет определять окончательный вид документа.

Селектор является связующим звеном между HTML-документом и таблицей стилей, а также между всеми типами HTML-элементов и возможными селекторами. Типы HTML-элементов определены в HTML-спецификации [2].

Свойство 'color' является одним из приблизительно 50 свойств, определяющих вид HTML-документа. Список свойств и их возможных значений определяется в данной спецификации.

Авторам HTML-кода необходимо писать таблицы стилей, только если они хотят создать определённый стиль для своих документов. Каждый Агент Пользователя (АП, которым часто является «веб-браузер» или «веб-клиент») будет иметь таблицу стилей по умолчанию, которая представляет документы в надлежащей -- но, вероятней, в обычной -- манере. Приложение A содержит образец таблицы стилей для представления HTML-документов, как это было указано в спецификации HTML 2.0 [3].

Формальная грамматика языка CSS1 определена в Приложении B.

1.1 Встраивание в HTML

Для того, чтобы таблицы стилей могли повлиять на внешний вид, АП должны знать об их существовании. То как происходит прикрепление таблиц стилей к HTML определяет HTML-спецификация [2]. Поэтому данный раздел является исключительно информативным,а не нормативным:

<HTML>
  <HEAD>
    <TITLE>название</TITLE>
    <LINK REL=STYLESHEET TYPE="text/css" 
      HREF="http://style.com/cool" TITLE="Круто">
    <STYLE TYPE="text/css">
      @import url(http://style.com/basic);
      H1 { color: blue }
    </STYLE>
  </HEAD>
  <BODY>
    <H1>Заголовок - синий</H1>
    <P STYLE="color: green">А абзац зелёный.
  </BODY>
</HTML>

В примере показано четыре способа объединить стиль и HTML: использовать элемент 'LINK' для прикрепления внешней таблицы стилей, использовать элемент 'STYLE' внутри элемента 'HEAD', импортировать таблицы стилей с помощью CSS-нотации '@import', и использовать атрибут 'STYLE' для элемента, расположенного внутри 'BODY'. Последний вариант смешивает стиль с содержимым и теряет соответствующие преимущества традиционных таблиц стилей.

Элемент 'LINK' указывает альтернативные таблицы стилей, которые может выбрать читатель, в то время как импортируемые таблицы стилей автоматически объединяются с остальной таблицей стилей.

Традиционно АПей молча игнорируют неизвестные теги. В результате старые АПей будут игнорировать элемент 'STYLE', а его содержимое будет рассматриваться как часть тела документа, и представляться как таковое. Во время переходного этапа, содержимое элемента 'STYLE' может быть скрыто с помощью SGML-комментариев:

<STYLE TYPE="text/css"><!--
  H1 { color: green }
--></STYLE>

Поскольку элемент 'STYLE' в ОТД (как определено в [2]) объявлен как «CDATA», соответствующий SGML-анализатор не будет рассматривать указанную выше таблицу стилей как комментарий, который подлежит удалению.

1.2 Группировка

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

H1, H2, H3 { font-family: helvetica }

Аналогичным образом, могут быть сгруппированы объявления:

H1 { 
  font-weight: bold; 
  font-size: 12pt;
  line-height: 14pt; 
  font-family: helvetica; 
  font-variant: normal;
  font-style: normal;
}

Кроме того, некоторые свойства имеют свой собственный синтаксис группировки:

H1 { font: bold 12pt/14pt helvetica }

который эквивалентен предыдущему примеру.

1.3 Наследование

В первом примере, элементам 'H1' был задан синий цвет. Предположим, что внутри элемента 'H1' присутствует элемент акцентирования:

<H1>Заголовок <EM>это</EM> важно!</H1>

Если элементу 'EM' не был задан цвет, то акцентированная фраза «это» будет наследовать цвет родительского элемента, т.е. она также будет отображаться синим цветом. Прочие свойства стиля, например, 'font-family' и 'font-size', наследуются аналогичным образом.

Для того чтобы в документе установить свойство стиля «по умолчанию», можно установить свойство элементу, от которого происходят все визуально-представляемые элементы. В HTML-документах эту функцию может выполнять элемент 'BODY':

BODY { 
  color: black;
  background: url(texture.gif) white;
}

Такое положение будет работать, даже если автор опустит тег 'BODY' (что является допустимым), так как HTML-анализатор восстановит отсутствующий тег. В приведённом выше примере устанавливается чёрный цвет текста, а так же устанавливается фон, в качестве которого будет выступать изображение. При этом, если изображение не будет доступно, фон будет белым. (Для получения более подробной информации об этом смотрите раздел 5.3.)

Некоторые свойства стилей не наследуются от родительского элемента к дочернему. Чаще всего то, почему так происходит можно понять интуитивно. Например, свойство 'background' не наследуется, но по умолчанию фон родительского элемента будет виден через дочерний элемент.

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

P { font-size: 10pt }
P { line-height: 120% }  /* относительно 'font-size', т.е. 12pt */

Для каждого свойства, допускающего процентные значения, определяется то свойство, относительно которого это процентное значение рассчитывается. Дочерние элементы 'P' будут наследовать вычисленное значение 'line-height' (т.е. 12pt), а не процентное.

1.4 Класс как селектор

Для повышения детализации контроля над элементами, в HTML [2] был добавлен новый атрибут: 'CLASS'. Все элементы внутри элемента 'BODY' могут быть классифицированы, и к классу можно будет обратиться в таблице стилей:

<HTML>
 <HEAD>
  <TITLE>Название</TITLE>
  <STYLE TYPE="text/css">
    H1.pastoral { color: #00FF00 }
  </STYLE>
 </HEAD>
 <BODY>
  <H1 CLASS=pastoral>Слишком зелёный</H1>
 </BODY>
</HTML>

К классифицированным элементам применяются обычные правила наследования; такие элементы наследуют значения от своих родительских элементов в структуре документа.

Можно обратиться ко всем элементам одного и того же класса, опуская имя тега в селекторе:

.pastoral { color: green }  /* все элементы с CLASS pastoral */

В селекторе может быть определён только один класс. Поэтому в CSS1 'P.pastoral.marine' является недопустимым селектором. (Контекстные селекторы, описанные ниже, могут иметь один класс в простом селекторе)

CSS даёт атрибуту CLASS так много власти, что во многих случаях даже не важно какому HTML-элементу устанавливается класс -- вы можете из одного элемента съэмулировать практически любой другой. Опираться на эту власть не рекомендуется, так как она удаляет уровень структуры, которая имеет универсальное значение (для HTML-элементов). Структура, основанная на CLASS полезна только в пределах ограниченной области, где был взаимно согласован смысл класса.

1.5 ID как селектор

В HTML [2] также вводится атрибут 'ID', который в рамках документа гарантированно имеет уникальное значение. Поэтому он может иметь особое значение в качестве селектора таблиц стилей, и к нему можно будет обратиться с помощью начального знака '#':

#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }

<P ID=z98y>Широкий текст</P>

В приведённом выше примере первый селектор соответствует элементу 'P' с соответствующим значением атрибута 'ID'. Второй селектор определяет как тип элемента ('H1') так и значение ID, и, следовательно, он не соответствует элементу 'P'.

Используя ID атрибут в качестве селектора, можно установить свойства стиля для каждого отдельного элемента. В то время как таблицы стилей были разработаны для расширения структуры документа, эта функция позволит авторам создавать документы, которые хорошо выглядят на холсте без использования структурных элементов HTML. Но, при этом, такое использование таблиц стилей не рекомендуется.

1.6 Контекстные селекторы

Наследование сохраняет CSS наборы разработчиков. Вместо того чтобы указывать все свойства стиля, можно задать значения по умолчанию, а затем список исключений. Для того чтобы задать 'EM' элементам, расположенным внутри 'H1' другой цвет, можно указать:

H1 { color: blue }
EM { color: red }

Когда действует эта таблица стилей, все акцентированные участки внутри или снаружи 'H1' будут окрашены в красный цвет. Возможно, кто-то захочет окрасить 'EM' элементы красным цветом только внутри 'H1', и это можно указать следующим образом:

H1 EM { color: red }

Селектор является теперь шаблоном поиска в стеке открытых элементов, и этот тип селектора называется контекстным селектором. Контекстные селекторы состоят из нескольких простых селекторов, разделённых пробельным символом (все селекторы описанные до сих пор были простыми селекторами). Только элементы, которые соответствуют последнему простому селектору (в этом случае это элемент 'EM') будут рассмотрены и то, только если совпадёт шаблон поиска. Контекстные селекторы в CSS1 производят поиск относительно предков, но в более поздних версиях могут быть введены и другие отношения (например, родитель-ребёнок). В приведённом выше примере, шаблон поиска соответствует, если 'EM' является потомком 'H1', т.е., если 'EM' вложен внутрь элемента 'H1'.

UL LI    { font-size: small }    
UL UL LI { font-size: x-small }

Здесь первый селектор соответствует элементам 'LI' с как минимум одним предком, в лице элемента 'UL'. Второй селектор соответствует подмножеству первого, т.е. элементам 'LI' с как минимум двумя предками, в лице элементов 'UL'. Конфликт разрешается в пользу второго более конкретного селектора из-за более длинного шаблона поиска. Смотрим порядок каскадирования (раздел 3.2) для получения более подробной информации.

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

DIV P           { font: small sans-serif }
.reddish H1     { color: red }
#x78y CODE      { background: blue }
DIV.sidenote H1 { font-size: large }

Первый селектор соответствует всем элементам 'P', которые имеют 'DIV' элементы в числе предков. Второй селектор соответствует всем элементам 'H1', которые имеют предка с классом 'reddish'. Третий селектор соответствует всем элементам 'CODE', которые являются потомками элемента с 'ID=x78y'. Четвёртый селектор соответствует всем 'H1' элементам, которые имеют предка 'DIV' с классом 'sidenote'.

Несколько контекстных селекторов могут быть сгруппированы воедино:

H1 B, H2 B, H1 EM, H2 EM { color: red }

Что эквивалентно:

H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }

1.7 Комментарии

Текстовые комментарии в CSS-таблицах стилей аналогичны комментариям в языке программирования C. [7]:

EM { color: red }  /* красный, действительно красный!! */

Комментарии не могут быть вложенными. Для синтаксического анализатора CSS1 комментарий эквивалентен пробельному символу.

2 Псевдоклассы и псевдоэлементы

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

Псевдоклассы и псевдоэлементы могут быть использованы в CSS-селекторах при том, что они отсутствуют в HTML-коде. Скорее всего, они «вставляются» АП при определённых условиях для того, чтобы к ним можно было обращаться в таблицах стилей. Они упоминаются как «классы» и «элементы», так как это удобный способ описания их поведения. Более точно, их поведение определяется фиктивной последовательностью тегов.

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

2.1 Псевдоклассы якоря

Обычно агенты пользователей по-разному отображают посещённые и не посещённые ссылки. В CSS1, это регулируется с помощью псевдоклассов элемента 'A':

A:link { color: red }       /* не посещённая ссылка */
A:visited { color: blue }   /* посещённые ссылки */
A:active { color: lime }    /* активированные ссылки */

Все элементы 'A' с атрибутом 'HREF' будут отнесены к одной и только к одной из этих групп (т.е. на якоря это не влияет). При этом АПей могут изменить статус элемента с 'visited' на 'link' по истечении определённого времени. Ссылка 'active' это ссылка, которая активируется читателем в настоящее время (например, с помощью нажатия кнопки мыши).

Форматирование псевдокласса якоря происходит так, как будто бы класс был установлен вручную. Поэтому АП не требуется переформатировать отображаемый в данный момент документ из-за изменений псевдокласса якоря. Например, в таблицах стилей может быть указано, что свойству 'font-size' для 'active' ссылки следует иметь большее значение, чем для 'visited' ссылки, но АП не требуется динамически переформатировать документ, когда читатель выбирает 'visited' ссылку.

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

A:link { color: red }

<A CLASS=link NAME=target5> ... </A>

В CSS1 псевдоклассы якорей не оказывают ни какого влияния на другие элементы, кроме 'A'. Таким образом, тип элемента может быть опущен из селектора:

A:link { color: red }
:link { color: red }

Два приведённых выше селектора, в CSS1 будут выбирать одни и те же элементы.

Названия псевдоклассов не чувствительны к регистру.

Псевдоклассы могут быть использованы в контекстных селекторах:

A:link IMG { border: solid blue }

Кроме того, псевдоклассы могут быть объединены с обычными классами:

A.external:visited { color: blue }

<A CLASS=external HREF="http://out.side/">внешняя ссылка</A>

Если ссылка в приведённом выше примере была посещена, то она будет представлена синим цветом. Обратите внимание, что в селекторе названия обычных классов предшествуют псевдоклассу.

2.2 Типографские псевдоэлементы

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

Основной CSS1: АПей могут игнорировать все правила с ':first-line' или ':first-letter' в селекторе, или, наоборот поддерживать только подмножество свойств в этих псевдоэлементах. (смотрите раздел 7)

2.3 Псевдоэлемент 'first-line'

Псевдоэлемент 'first-line' используется для применения специальных стилей к первой строке как отформатированной на холсте:

<STYLE TYPE="text/css">
  P:first-line { font-variant: small-caps }
</STYLE>

<P>Первая строка статьи в Newsweek.

Текстовый АП может отформатировать текст как:

ПЕРВАЯ СТРОКА
статьи в Newsweek.

Фиктивная последовательность тегов в приведённом выше примере:

<P>
<P:first-line>
Первая строка 
</P:first-line>
статьи в Newsweek.
</P>

Конечный тег 'first-line' вставлен в конец первой строки как отформатированной на холсте.

Псевдоэлемент 'first-line' может быть применён только к элементам блочного-уровня.

Псевдоэлемент 'first-line' похож на строчный элемент, но с некоторыми ограничениями. К элементу 'first-line' могут применяться только следующие свойства: свойства font (5.2), свойства color и background (5.3), 'word-spacing' (5.4.1), 'letter-spacing' (5.4.2), 'text-decoration' (5.4.3), 'vertical-align' (5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), 'clear' (5.5.26).

2.4 Псевдоэлемент 'first-letter'

Псевдоэлемент 'first-letter' используется для создания «начальных заглавных» букв и «буквиц», которые являются распространёнными типографскими эффектами. Они похожи на строчные элементы, если их свойство 'float' в значении 'none', в противном случае они похожи на плавающие элементы. Свойства применяемые к псевдоэлементу 'first-letter': свойства font (5.2), свойства color и background (5.3), 'text-decoration' (5.4.3), 'vertical-align' (только если 'float' в значении 'none', 5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), свойства margin (5.5.1-5.5.5), свойства padding (5.5.6-5.5.10), свойства border (5.5.11-5.5.22), 'float' (5.5.25), 'clear' (5.5.26).

Рассмотрим пример, как можно сделать буквицу начальной буквы размером с две строки:

<HTML>
 <HEAD>
  <TITLE>Название страницы</TITLE>
  <STYLE TYPE="text/css">
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>Первые</SPAN> несколько слов из статьи в журнале «Экономист».</P>
 </BODY>
</HTML>

Если текстовый АП поддерживает псевдоэлемент 'first-letter' (скорее всего он его поддерживать не будет), то приведённый выше пример может быть отформатирован им следующим образом:

___
| | ЕРВЫЕ несколько
| | слов из статьи
в журнале
«Экономист».

Фиктивная последовательность тегов:

<P>
<SPAN>
<P:first-letter>
П
</P:first-letter>ервые
</SPAN> 
несколько слов из статьи в журнале «Экономист».
</P>

Обратите внимание, что теги псевдоэлемента 'first-letter' граничат с содержимым (т.е. с начальным символом), в то время как начальный тег псевдоэлемента 'first-line' вставляется сразу после начального тега элемента, к которому он прикреплён.

АП определяет какие символы располагаются внутри 'first-letter' элемента. Как правило, кавычки предшествующие первой букве так же следует включать в форматируемый первый элемент:

||   /\    учше  
    /  \   синица в 
   /    \  руках, чем
  /      \ журавль
в небе", говорится  
в старой пословице.

Если абзац начинается с других знаков пунктуации (например, скобок и многоточия) или других символов, которые обычно не считаются буквами (например, цифры и математические символы), то такие псевдоэлементы 'first-letter' обычно игнорируются.

Некоторые языки могут иметь специальные правила обращения с определёнными комбинациями букв. В голландском, например, если в начале слова присутствует сочетание букв "ij", то их в рамках псевдоэлемента 'first-letter' следует рассматривать как одну первую букву.

Псевдоэлемент 'first-letter' может быть привязан только к элементу блочного-уровня.

2.5 Псевдоэлементы в селекторах

Псевдоэлементы в контекстном селекторе допускаются только в конце селектора:

BODY P:first-letter { color: purple }

В селекторах псевдоэлементы могут быть объединены с классами:

P.initial:first-letter { color: red }

<P CLASS=initial>Первый абзац</A>

В приведённом выше примере первая буква всех элементов 'P' с 'CLASS=initial' будет раскрашена в красный цвет. При сочетании с классами или псевдоклассами, псевдоэлементы должны быть указаны в конце селектора. В селекторе может быть указан только один псевдоэлемент.

2.6 Несколько псевдоэлементов

Можно комбинировать несколько псевдоэлементов:

P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }

<P>Некоторый текст, разделённый на две строки</P>

В этом примере, первая буква каждого элемента 'P' будет зелёного цвета с размером шрифта равным 24pt. Остальная часть первой строки (как отформатированной на холсте) будет синей, в то время как оставшаяся часть абзаца будет красной. Если предположить, что разрыв строки будет произведён перед словом «разделённый», то фиктивная последовательность тегов будет выглядеть следующим образом:

<P>
<P:first-line>
<P:first-letter> 
Н 
</P:first-letter>екоторый текст, 
</P:first-line> 
разделённый на две строки
</P>

Обратите внимание, что элемент 'first-letter' находится внутри элемента 'first-line'. Свойства установленные для 'first-line' будут унаследованы 'first-letter', но значения свойств будут переопределёны, если то же самое свойство установлено в 'first-letter'.

Если псевдоэлемент разделяет реальный элемент, необходимые дополнительные теги должны быть восстановлены в фиктивную последовательность тегов. Например, если действие элемента SPAN выходит за границу </P:first-line> тега, то набор начальных и конечных тегов SPAN должен быть восстановлен и фиктивная последовательность тегов будет выглядеть следующим образом:

<P>
<P:first-line>
<SPAN> 
Этот текст находится внутри продолжительного 
</SPAN>
</P:first-line>
<SPAN> 
элемента span 
</SPAN>

3 Каскад

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

модульность: Разработчик таблицы стилей может объединить несколько (составных) таблиц стилей, чтобы сократить размер кода:
баланс автор/пользователь: Как читатели, так и авторы могут влиять на представление документа с помощью таблиц стилей. Для этого они используют тот же язык таблиц стилей, отражающий основную функцию сети: каждый может стать издателем. АП может сам выбирать механизм для ссылки на персональные таблицы стилей.

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

Также импортированные таблицы стилей объединяются друг с другом, в порядке их импортирования, согласно правилам каскадирования, определённым ниже. Любые правила, указанные в самой таблице стилей переопределяют правила в импортированных таблицах стилей. То есть, импортированные таблицы стилей - ниже в порядке каскадирования, чем правила в самой таблице стилей. Импортированные таблицы стилей сами могут импортировать и рекурсивно переопределять другие таблицы стилей.

В CSS1 все операторы '@import' должны находиться в начале таблицы стилей до любых объявлений. Это делает их хорошо видимыми, для того чтобы правила в самой таблице стилей переопределяли правила в импортированных таблицах стилей.

3.1 'important'

Разработчики таблиц стилей могут увеличивать вес своих объявлений:

H1 { color: black ! important; background: white ! important }
P  { font-size: 12pt ! important; font-style: italic }

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

Правило читателя с важным объявлением будет переопределять правило автора с обычным объявлением. Правило автора с важным объявлением будет переопределять правило читателя с важным объявлением.

3.2 Порядок каскадирования

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

Найти все объявления, которые относятся к элементу/свойству. Объявления применяются, если селектор соответствует элементу. Если никакие объявления не применяются, то используется унаследованное значение. Если унаследованное значение отсутствует (такая ситуация имеет место для 'HTML' элементов и свойств, которые не наследуются), то используется начальное значение.
Сортировка объявлений по явному весу: объявления помеченные как '!important', имеют больший вес, чем не помеченные (нормальные) объявления.
Сортировка по происхождению: таблицы стилей автора переопределяют таблицу стилей читателя, которая переопределяет значения по умолчанию, устанавливаемые АП. Импортированная таблица стилей имеет такое же происхождение, как и таблицы стилей, из которых они импортируются.
Сортировка по специфичному селектору: более специфические селекторы переопределяют более общие. Чтобы найти специфичность, подсчитайте количество ID атрибутов в селекторе (а), количество CLASS атрибутов в селекторе (б), а также количество имён тегов в селекторе (в). Объединение трёх чисел (в системе счисления с большим основанием) даёт специфичность. Некоторые примеры:
```
LI            {...}  /* a=0 b=0 c=1 -> специфичность =   1 */
UL LI         {...}  /* a=0 b=0 c=2 -> специфичность =   2 */
UL OL LI      {...}  /* a=0 b=0 c=3 -> специфичность =   3 */
LI.red        {...}  /* a=0 b=1 c=1 -> специфичность =  11 */
UL OL LI.red  {...}  /* a=0 b=1 c=3 -> специфичность =  13 */ 
#x34y         {...}  /* a=1 b=0 c=0 -> специфичность = 100 */ 
```
Псевдоэлементы и псевдоклассы учитываются как обычные элементы и классы, соответственно.
Сортировка по определённому правилу: если два правила имеют одинаковый вес, то рассматривается только указанное последним. Правила в импортированных таблицах стилей рассматриваются как правила, располагаемые перед любыми правилами в самой таблице стилей.

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

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

Объявление в 'STYLE' атрибуте элемента (смотрите раздел 1.1 для примера) имеет такой же вес, что и объявление с селектором на основе ID, которое указано в конце таблицы стилей:

<STYLE TYPE="text/css">
  #x97z { color: blue }
</STYLE>

<P ID=x97z STYLE="color: red">

В приведённом выше примере цвет элемента 'P' будет красным. Хотя специфичность одинакова для обоих объявлений; объявление в атрибуте 'STYLE' будет переопределять объявление в элементе 'STYLE' ввиду каскадного правила номер 5.

АП может выбрать другие стилистические атрибуты HTML, например, 'ALIGN'. Если это происходит, то эти атрибуты преобразуются в соответствующие CSS-правила со специфичностью равной 1. Правила допускаются в начале таблицы стилей автора и могут быть переопределены последующими правилами таблиц стилей. На переходном этапе, такая политика сделает более лёгкой совместную работу стилистических атрибутов с таблицами стилей.

4 Модель форматирования

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

 _______________________________________
|                                       |
|           поле (прозрачное)           |
|   _________________________________   |
|  |                                 |  |
|  |        граница                  |  |
|  |   ___________________________   |  |
|  |  |                           |  |  |
|  |  |     отступ                |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |  содержимое         |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

         |   ширина элемента   |
|            ширина коробки             |

Размер поля, границы и отступа устанавливается с помощью свойств margin (5.5.1-5.5.5), padding (5.5.6-5.5.10) и border (5.5.11-5.5.22) соответственно. Область отступа использует тот же фон, что и сам элемент (набор со свойствами фона (5.3.2-5.3.7)). Цвет и стиль границы устанавливается с помощью свойств border. Поля всегда прозрачны, в результате чего на их месте будет виден фон родительского элемента.

Размер коробки равен сумме ширины элемента (т.е. отформатированного текста или изображения) областей отступа, границы и поля.

С точки зрения форматера существует два основных типа элемента: элементы блочного-уровня и строчные элементы.

4.1 Элементы блочного-уровня

Элементы, у которых 'display' имеет значение 'block' или 'list-item', являются элементами блочного-уровня. Кроме того, плавающие элементы (элементы у которых 'float' имеет любое значение, кроме 'none') считаются элементами блочного-уровня.

В следующем примере показано, как форматируются поля и отступы элемента 'UL' с двумя дочерними элементами. Для упрощения схемы границы отсутствуют. Кроме того, однобуквенные «константы» в данном примере не являются действительным синтаксисом CSS1, но они являются удобным способом связывания значений таблиц стилей с рисунком.

<STYLE TYPE="text/css">
  UL { 
    background: red; 
    margin: A B C D;      
    padding: E F G H;
  }
  LI { 
    color: white;    
    background: blue;     /* белый текст на синем фоне */ 
    margin: a b c d; 
    padding: e f g h;
  }
</STYLE>
..
<UL>
  <LI>1й элемент списка
  <LI>2й элемент списка
</UL>

 _______________________________________________________
|                                                       |
|    A      UL поле (прозрачное)                        |
|    _______________________________________________    |
| D |                                               | B |
|   |    E   UL отступ (красный)                    |   |
|   |    _______________________________________    |   |
|   | H |                                       | F |   |
|   |   |    a   LI поле (прозрачное,           |   |   |
|   |   |        поэтому оно красное)           |   |   |
|   |   |    _______________________________    |   |   |
|   |   | d |                               | b |   |   |
|   |   |   |    e    LI отступ (синий)     |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   | h  1й элемент списка        f |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   |    g                          |   |   |   |
|   |   |   |_______________________________|   |   |   |
|   |   |                                       |   |   |
|   |   |     максимум(a, c)                    |   |   | <- обратите внимание
|   |   |    _______________________________    |   |   |    на максимум
|   |   |   |                               |   |   |   |
|   |   | d |    e    LI отступ (синий)     |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   | h  2й элемент списка        f |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   |    g                          |   |   |   |
|   |   |   |_______________________________|   |   |   |
|   |   |                                       |   |   |
|   |   |   c    LI поле (прозрачное,           |   |   |
|   |   |        поэтому оно красное)           |   |   |
|   |   |_______________________________________|   |   |
|   |                                               |   |
|   |    G                                          |   |
|   |_______________________________________________|   |
|                                                       |
|   C                                                   |
|_______________________________________________________|

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

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

На следующей схеме представлена некоторая полезная терминология:

                              ------------------ <-- верх
                                 верхнее поле
                              ------------------
                               верхняя граница
                              ------------------
                                верхний отступ
                              +----------------+ <-- внутренний верх
|         |         |         |                |          |          |          |
|--левое--|--левая--|--левый--|-- содержимое --|--правый--|--правая--|--правое--|
|  поле   | граница |  отступ |                |  отступ  |  граница |   поле   |
|         |         |         |                |          |          |          |
                              +----------------+ <-- внутренний низ
^                             ^                ^                                ^
левый     левый внутренний край                правый внутренний край      правый
внешний                                                                   внешний
край                            нижний отступ                                край
                              ------------------
                                нижняя граница
                              ------------------
                                 нижнее поле
                              ------------------ <-- низ

Левый внешний край является краем элемента с учётом его отступа, границы и поля. Левый внутренний край является только лишь краем содержимого, находящимся внутри любых отступов, границ или полей. То же самое и для правой стороны. Верх является верхней частью элемента, включающей любые отступы, границы и поля; он определён только для строчных и плавающих элементов, но не определён для неплавающих элементов блочного-уровня. Внутренний верх является верхней частью содержимого, внутри любых отступов, границ или полей. Низ является нижней частью элемента, вне всяких отступов, границ и полей; он определён только для строчных и плавающих элементов, но не определён для неплавающих элементов блочного-уровня. Внутренний низ является нижней частью элемента, внутри любых отступов, границ и полей.

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

4.1.1 Вертикальное форматирование

Ширина полей в неплавающих элементах блочного-уровня определяется минимальным расстоянием до краёв окружающих коробок. Два или более смежных вертикальных поля (т.е., без границ, отступов или содержимого между ними) схлопываются до максимального среди используемых значений полей. В большинстве случаев, после схлопывания вертикальных полей, визуально результат получается более приятным и близким к ожиданиям разработчика. В приведённом выше примере, поля между двумя элементами 'LI' схлопываются до максимального значения среди 'margin-bottom' первого элемента LI и 'margin-top' второго элемента LI. Аналогичным образом, если отступ между 'UL' и первым элементом 'LI' (константа «Е») был равен нулю, то поля UL и первых элементов LI были бы схлопнуты.

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

4.1.2 Горизонтальное форматирование

Горизонтальное положение и размер неплавающего элемента блочного-уровня определяется семью свойствами: 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right' и 'margin-right'. Сумма всех этих семи свойств всегда равна 'width' родительского элемента.

По умолчанию значением 'width' свойства элемента является 'auto'. Если элемент не является заменяемым элементом, то это означает, что 'width' вычисляется АП таким образом, чтобы сумма указанных выше семи свойств была равна ширине родительского элемента. Если элемент является заменяемым элементом, то значение 'auto' свойства 'width' автоматически заменяется внутренней шириной элемента.

Трём из семи свойств может быть установлено значение 'auto': 'margin-left', 'width' и 'margin-right'. Для заменяемых элементов, значение 'auto' в 'width' заменяется внутренней шириной, поэтому для них может быть установлено только два значения 'auto'.

Свойство 'width' имеет неотрицательное, определяемое АП минимальное значение (которое может изменяться от элемента к элементу и даже зависеть от других свойств). Если значение 'width' опускается ниже этого предела, либо потому, что оно было задан явно, либо потому, что оно было 'auto' и при этом правило указываемое ниже сделало бы его слишком маленьким, то такое значение будет заменено минимальным значением.

Если только одно из свойств 'margin-left', 'width' или 'margin-right' соответствует значению 'auto', то АП присвоит этому свойству такое значение, которое сделает сумму семи свойств равной ширине родительского элемента.

Если ни одно из свойств не имеет значения 'auto', то 'margin-right' будет присвоено значение 'auto'.

Если более одного свойства из этих трёх свойств имеет значение 'auto', и одним из этих свойств является 'width', то остальные свойства ('margin-left' и/или 'margin-right') будут равны нулю, а 'width' получит такое значение, которое сделает сумму семи свойств равной ширине родителя.

В противном случае, если и 'margin-left' и 'margin-right' имеют значение 'auto', то им будут установлены равные значения. Они будут центрировать элемент внутри его родителя.

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

В отличие от вертикальных полей, горизонтальные поля не схлопываются.

4.1.3 Элементы пунктов-списка

Элементы у которых свойство 'display' имеет значение 'list-item' форматируются как элементы блочного-уровня, но размещаются после маркера пункта-списка. Тип маркера определяется свойством 'list-style'. Размещение маркера регулируется значением свойства 'list-style':

<STYLE TYPE="text/css">
  UL         { list-style: outside }
  UL.compact { list-style: inside }
</STYLE>
  
<UL>
  <LI>первый пункт списка появится первым
  <LI>второй пункт списка появится вторым
</UL>

<UL CLASS=COMPACT>
  <LI>первый пункт списка появится первым
  <LI>второй пункт списка появится вторым
</UL>

Приведённый выше пример может быть отформатирован следующим образом:

* первый пункт списка 
  появится первым

* второй пункт списка 
  появится вторым

  * второй пункт 
  списка появится вторым

  * первый пункт 
  списка появится первым

В тексте, выводимом справа налево, маркеры были бы на правой стороне коробки.

4.1.4 Плавающие элементы

С помощью свойства 'float', элемент может быть объявлен вне нормального потока элементов и затем отформатирован как элемент блочного-уровня. Например, установив свойству 'float', применяемого к изображению, значение 'left', изображение перемещается влево, до тех пор, пока не будет достигнуто поле, отступ или же граница другого элемента блочного-уровня. При этом нормальный поток будет обтекать такое изображение с правой стороны. Поля, границы, а так же отступы самого элемента будут учтены, и при этом поля соприкасаемые с полями соседних элементов никогда не будут схлопнуты.

Плавающий элемент позиционируется с учётом следующих ограничений (смотрите раздел 4.1 для объяснения значений терминов):

Левый внешний край плавающего слева элемента не может быть слева от левого внутреннего края его родительского элемента. Аналогично для элементов плавающих справа.
Левый внешний край плавающего слева элемента должен быть справа от правого внешнего края каждого элемента идущего перед (в исходном коде HTML) этим плавающим слева элементом или верхняя часть первого должна быть ниже, чем нижняя часть последнего. Аналогично для плавающих справа элементов.
Правый внешний край плавающего слева элемента не может быть справа от левого внешнего края любого плавающего справа элемента, который справа от него. Аналогично для плавающих справа элементов.
Верхняя часть плавающего элемента не может быть выше внутренней верхней части своего родителя.
Верхняя часть плавающего элемента не может быть выше верхней части любого расположенного ранее плавающего элемента или элемента блочного-уровня.
Верхняя часть плавающего элемента не может быть выше верхней части любой коробки-строки (смотрите раздел 4.4) с содержимым, которая предшествует плавающему элементу в исходном HTML-коде.
Плавающий элемент должен быть помещён как можно выше.
Плавающий слева элемент должен быть помещён так далеко влево, насколько это возможно, а элемент плавающий справа так далеко вправо, насколько это возможно. Более высокое положение предпочтительней, чем последующее левое/правое.

<STYLE TYPE="text/css">
  IMG { float: left }
  BODY, P, IMG { margin: 2em }
</STYLE>

<BODY>
  <P>
    <IMG SRC=img.gif>
    Некоторый образец текста, который не имеет никакой другой...
</BODY>

Приведённый выше пример может быть отформатирован следующим образом:

 _______________________________________________
|
|          максимум(BODY поле, P поле)
|          _____________________________________
|    |    |             Некоторый образец 
| B  | P  |  IMG поля   текста, который не 
| O  |    |    _____    имеет никакой другой 
| D  | п  |   |     |   цели, кроме как 
| Y  | о  |   | IMG |   показать, как плавающие 
|    | л  |   |     |   элементы перемещаются к 
| п  | е  |   |_____|   стороне родительского 
| о  |    |             элемента учитывая поля, 
| л  |    |             границы и отступы. 
| е  |    |             Обратите внимание, 
|    |    |как соседние вертикальные поля 
|    |    |схлопываются между не плавающими
|    |    |элементами блочного-уровня.

Обратите внимание, что поле элемента 'P' окружает плавающий элемент 'IMG'.

Есть две ситуации, когда плавающие элементы могут накладываться на области поля, границы и отступа других элементов:

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

4.2 Строчные элементы

Элементы, которые не форматируются как элементы блочного-уровня являются строчными элементами. Строчный элемент может располагаться на одной строке с другими элементами. Рассмотрим следующий пример:

<P>В предложении <STRONG>указано</STRONG> несколько <EM>акцентированных</EM> слов.</P>

Элемент 'P' является обычным элементом блочного-уровня, в то время как 'EM' и 'STRONG' являются строчными элементами. Если элемент 'P' имеет ширину достаточную для форматирования всего элемента на одной строке, то на одной строке будут располагаться сразу два строчных элемента:

В предложении указано несколько акцентированных слов.

Если не хватает места на одной строке, то строчный элемент будет разделён на несколько коробок:

<P>Несколько <EM>акцентированных слов</EM> указано в этом предложении.</P>

Приведённый выше пример может быть отформатирован следующим образом:

Несколько акцентированных
слов указано в этом предложении.

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

           ---------------
Несколько |акцентированных
           ---------------
----
слов| указано в этом предложении.
----

(Указанный выше «рисунок» слегка искажён из-за использования ASCII-графики. Для получения информации о том, как вычислить высоту строк смотрите раздел 4.4.)

4.3 Заменяемые элементы

Заменяемый элемент является элементом, который заменяется содержимым указываемым в самом элементе. Например, в HTML, элемент 'IMG' заменяется изображением, указанным в атрибуте 'SRC'. Можно предположить, что заменяемые элементы предоставляются со своими внутренними размерами. Если значением свойства 'width' является значение 'auto', то в качестве ширины элемента используется внутренняя ширина. Если значение указанное в таблице стилей отличается от значения 'auto', то используется это значение, а размеры заменяемого элемента изменяются соответствующим образом (метод изменения размера будет зависеть от типа медиа). Свойство 'height' используется таким же образом.

Заменяемые элементы могут быть либо строчными, либо элементами блочного-уровня.

4.4 Высота строк

Все элементы имеют свойство 'line-height', которое, в принципе, задаёт общую высоту строки текста. Для достижения необходимой высоты строки добавляется пространство выше и ниже текстовой строки. Например, если текст высотой 12pt, а 'line-height' имеет значение '14pt', то добавляется дополнительное пространство в 2pt, а именно 1pt сверху строки и 1pt снизу строки. Пустые элементы влияют на эти вычисления так же, как элементы с содержимым.

Разница между размером шрифта и 'line-height' называется ведущей. Половина ведущей называется половиной-ведущей. После форматирования, каждая строка будет образовывать прямоугольную коробку-строки.

Если строка текста содержит разделы с различными значениями 'line-height' (потому что в строке есть строчные элементы), то каждый из этих разделов имеет свои собственные половины-ведущей выше и ниже. Высотой коробки-строки является расстояние от верха самой верхней части до низа самой нижней части. Обратите внимание, что верх и низ не обязательно соответствуют самому высокому элементу, поскольку элементы могут быть выровнены вертикально с помощью свойства 'vertical-align'. Для того, чтобы сформировать абзац, каждая коробка-строки укладывается непосредственно под предыдущей строкой.

Обратите внимание, что любой отступ, граница или поле выше и ниже незаменяемых строчных элементов не влияют на высоту строки. Другими словами: если 'line-height' слишком мал для выбранного отступа или границы, то он будет накладываться на текст других строк.

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

В обычном случае, когда имеется только одно значение 'line-height' на протяжении всего абзаца, и нет высоких изображений, то приведённое выше определение гарантирует, что базовые линии следующих друг за другом строк точно соответствуют 'line-height'. Это важно в случае, когда столбцы текста с различными шрифтами необходимо выровнить, например, в таблице.

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

4.5 Холст

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

откуда следует начинать расчёты размеров холста?
если документ не охватывает весь холст, как следует представлять эту область?

Разумный ответ на первый вопрос заключается в том, что начальная ширина холста зависит от размера окна, но CSS1 оставляет решение этого вопроса АП. Кроме того, разумно ожидать, что АП изменит ширину холста при изменении размеров окна, но это также выходит за рамки CSS1.

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

Если значение свойства 'background' элемента 'HTML' отличается от 'transparent', то использовать его, в противном случае использовать значение свойства 'background' элемента 'BODY'. Если полученным значением является 'transparent', то представление фона не определено.

Это правило позволяет:

<HTML STYLE="background: url(http://style.com/marble.png)">
<BODY STYLE="background: red">

В приведённом выше примере, холст будет покрыт фоновым изображением «marble». Фон элемента 'BODY' (который может или не может полностью покрыть холст) будет красным.

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

4.6 Элементы 'BR'

Текущие свойства и значения CSS1 не могут описать поведение элемента 'BR'. В HTML элемент 'BR' определяет разрыв строки между словами. По сути, элемент является заменой разрыва строки. В будущих версиях CSS может быть добавлено ручное добавление и замена содержимого, но форматирование базирующееся на CSS1 должно относиться к 'BR' особым образом.

5 Свойства CSS1

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

5.1 Обозначения для значений свойств

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

Значение: N | NW | NE
Значение: [ <длина> | thick | thin ]{1,4}
Значение: [<название-семейства> , ]* <название-семейства>
Значение: <url>? <цвет> [ / <цвет> ]?
Значение: <url> || <цвет>

Слова между «<» и «>» указывают тип значения. Наиболее распространёнными типами являются <длина>, <процент>, <url>, <число> и <цвет>; они описаны в разделе 6. Более специализированные типы (например, <font-family> и <border-style>) описаны в разделе соответствующего свойства.

Прочие слова -- это ключевые слова, которые должны появляться буквально, без кавычек. Косая черта (/) и запятая (,) также должны появляться в буквальном смысле.

Сочетание нескольких вещей означает, что все они должны идти в заданном порядке. Вертикальная линия (|) разделяет альтернативы: должна быть указана одна из альтернатив. Двойная вертикальная линия (A || B) означает, что либо А, либо В или оба должны быть указаны в любом порядке. Квадратные скобки ([]) используются для группировки. Сочетание сильнее, чем двойная вертикальная линия, и двойная вертикальная линия сильнее, чем простая вертикальная линия. Таким образом, «а б | в || г д» эквивалентно «[а б] | [в || [г д]]».

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

Звёздочка (*) указывает, что предыдущий тип, слово или группа может повторяться от нуля и более раз.
Плюс (+) указывает, что предыдущий тип, слово или группа может повторяться от одного и более раз.
Вопросительный знак (?) указывает, что предыдущий тип, слово или группа не является обязательной.
Пара чисел в фигурных скобках ({А,Б}) указывает, что предыдущий тип, слово или группа повторяется не менее А и не более Б раз.

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

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

CSS1 определяет свойства 'font-family', 'font-style', 'font-variant' и 'font-weight', 'font-size', 'font'.

5.2.1 Согласование шрифта

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

Агент Пользователя создаёт (или обращается к) базу данных, соответствующую CSS1 свойствам всех шрифтов, о которых он осведомлён. АП может располагать данными об определённом шрифте, поскольку он был установлен локально или заранее был загружен через Сеть. Если присутствуют два шрифта с одинаковыми свойствами, то один из них игнорируется.
В заданном элементе и для каждого символа в этом элементе, АП собирает свойства шрифта, применяемые к данному элементу. На основании полного набора свойств, АП использует свойство 'font-family' для выбора предполагаемого семейства шрифтов. Остальные свойства проверяются независимо от семейства в соответствии с критериями согласования, описанными для каждого свойства. Если по всем остальным свойствам имеются совпадения, то согласованные грани шрифта применяется к заданному элементу.
Если в 'font-family' нет соответствующей грани шрифта обрабатываемой в шаге 2, и если там в наборе шрифтов 'font-family' есть следующая альтернатива, то происходит повторение шага 2, но уже со следующей альтернативой 'font-family'.
Если там есть соответствующая грань шрифта, но он не содержит глиф для текущего символа, и если в наборе шрифтов 'font-family' есть следующая альтернатива, то происходит повторение шага 2, но уже со следующей альтернативой 'font-family'. Для получения более подробной информации об описании шрифтов и кодировки символов смотрите приложение C.
Если в семействе выбранном в шаге 2 шрифт отсутствует, то используется 'font-family' применяемое АП по умолчанию и повторяется шаг 2, с использованием шрифта более соответствующего ожиданиям, который может быть получен в пределах шрифта по умолчанию.

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

Для каждого свойства, правила согласуются с представленным выше шагом (2), следующим образом:

'font-style' проверяется первым. 'italic' будет применён, если есть какая-либо грань в базе данных шрифтов АП помеченная ключевым словом 'italic' (предпочтительно) или 'oblique'. В противном случае значения должны быть полностью согласованы или font-style не будет применён.
'font-variant' проверяется следующим. 'normal' соответствует шрифту не помеченному как 'small-caps'; 'small-caps' соответствует (1) шрифту помеченному как 'small-caps', (2) шрифту в котором синтезированы малые заглавные, или (3) шрифту, в котором все буквы нижнего регистра заменяются заглавными буквами. Капитель шрифт может быть синтезирован с помощью электронного масштабирования прописных букв нормального шрифта.
'font-weight' согласуется следующим, он никогда не подведёт. (Смотрим ниже 'font-weight'.)
'font-size' должен быть согласован в пределах допустимого запаса АП. (Как правило, размеры масштабируемых шрифтов округляются до ближайшего целого значения выражаемого в пикселях, в то время как погрешность для растровых шрифтов может составлять около 20%.) Дальнейшие вычисления, например, 'em' значений в других свойствах, основываются на используемом значении 'font-size', а не на том, которое определено.

5.2.2 'font-family'

Значение: [[<название-семейства> | <общее-семейство>],]* [<название-семейства> | <общее-семейство>]
Начальное: определяется АП
Применяется: ко всем элементам
Наследование: присутствует
Процентные значения: Н/Д

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

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

Существует два типа значений списка:

<название-семейства>

Название выбранного семейства шрифтов. В последнем примере, «gill» и «helvetica» это семейства шрифтов.

<общее-семейство>

В приведённом выше примере, последнее значение является названием общего семейства. Определены следующие общие семейства шрифтов:

'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">

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

5.2.3 'font-style'

Значение: normal | italic | oblique
Начальное: normal
Применяется: ко всем элементам
Наследование: присутствует
Процентные значения: Н/Д

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

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

Шрифт, который в базе данных шрифтов АП обозначен как 'oblique' может фактически быть сгенерирован путём электронного наклона нормального шрифта.

Шрифты, в названии которых присутствуют слова Oblique, Slanted или Incline, обычно, в базе данных шрифтов АП обозначаются как 'oblique'. Шрифты, в названии которых присутствуют слова Italic, Cursive или Kursiv, обычно, обозначаются как 'italic'.

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

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

5.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'.

5.2.5 'font-weight'

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

Свойство 'font-weight' выбирает вес шрифта. Значения от '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, в зависимости от того, насколько насыщенно выглядит дизайн «normal» грани шрифта. В виду того, что в используемых именах нет единого стандарта, значения свойства веса в CSS1 заданы в виде числовой шкалы, в которой значение '400' (или 'normal') соответствует текстовой грани «normal» для данного семейства. Название веса, ассоциированное с этой гранью будет, как правило, Book, Regular, Roman, Normal или иногда Medium.

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

Если семейство шрифтов уже использует числовую шкалу с девятью значениями (как например, делает OpenType), то весу шрифта следует зависеть напрямую.
Если присутствует грань, обозначенная как 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' сопоставляется с менее насыщенной гранью в рамках семейства. Точнее, смысл относительных ключевых слов 'bolder' и 'lighter' выглядит следующим образом:

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

Нет никакой гарантии, что будет существовать более насыщенная грань для каждого 'font-weight' значения; например, некоторые шрифты могут иметь только нормальную и полужирную грань, другие могут иметь восемь различных весов граней. Нет никакой гарантии, что АП будет сопоставлять грани шрифта в рамках одного семейства со значениями веса. Единственной гарантией является то, что грань заданного значения не будет менее насыщенной, чем грани менее насыщенных значений.

5.2.6 'font-size'

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

<абсолютный-размер>: Ключевое слово <абсолютный-размер> является указателем в таблице размеров шрифтов, которое вычисляется и хранится в АП. Возможные значения: [ xx-small | x-small | small | medium | large | x-large | xx-large ]. На экране компьютера коэффициент масштабирования 1.5 предполагает значение находящееся между соседними указателями; если 'medium' шрифт это 10pt, то 'large' шрифт может быть 15pt. Разные медиа могут использовать разные коэффициенты масштабирования. Кроме того, АП следует принять во внимание качество и доступность шрифтов при вычислении таблицы. Таблица может отличаться от одного семейства шрифтов к другому.
<относительный-размер>: Ключевое слово <относительный-размер> интерпретируется относительно таблицы размеров шрифта и размера шрифта родительского элемента. Возможные значения: [ larger | smaller ]. Например, если родительский элемент имеет размер шрифта 'medium', то значение 'larger' сделает размер шрифта текущего элемента 'больше'. Если родительский элемент имеет размер, который не близок к табличной записи, то АП свободен в интерполяции между записями таблицы или округлении до ближайшего значения. АП может экстраполировать значения таблицы, если числовое значение выходит за пределы ключевых слов.

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

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

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

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

Например:

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

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

5.2.7 'font'

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

Свойство 'font' ‒ это сокращённое свойство для одновременного указания значений 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' и '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%') размера шрифта выражается относительно размера шрифта родительского элемента. В третьем правиле, процент высоты строки выражается относительно размера шрифта самого элемента.

В первых трёх приведённых выше правилах, 'font-style', 'font-variant' и 'font-weight' прямо не указываются, но это означает, что всем троим установлены их начальные значения ('normal'). В четвёртом правиле 'font-weight' устанавливается значение 'bold', 'font-style' значение 'italic', а свойству 'font-variant' неявно устанавливается значение 'normal'.

В пятом правиле устанавливаются значения таким свойствам как 'font-variant' ('small-caps'), 'font-size' (120% относительно размера шрифта родительского элемента), 'line-height' (на 120% больше размера шрифта) и 'font-family' ('fantasy'). Из чего следует, что ключевое слово 'normal' относится к двум оставшимся свойствам: 'font-style' и 'font-weight'.

5.3 Свойства цвета и фона

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

Свойство 'color' обычно наследуется. Свойства фона не наследуются, но по умолчанию фон родительского элемента будет просвечиваться из-за начального значения 'transparent' в 'background-color'.

5.3.1 'color'

Значение: <цвет>
Начальное: определяется АП
Применяется: ко всем элементам
Наследование: присутствует
Процентные значения: Н/Д

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

EM { color: red }              /* естественное название */
EM { color: rgb(255,0,0) }     /* RGB диапазон 0-255   */

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

5.3.2 'background-color'

Значение: <цвет> | transparent
Начальное: transparent
Применяется: ко всем элементам
Наследование: отсутствует
Процентные значения: Н/Д

Это свойство устанавливает цвет фона элемента.

H1 { background-color: #F00 }

5.3.3 'background-image'

Значение: <url> | none
Начальное: none
Применяется: ко всем элементам
Наследование: отсутствует
Процентные значения: Н/Д

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

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

5.3.4 'background-repeat'

Значение: repeat | repeat-x | repeat-y | no-repeat
Начальное: repeat
Применяется: ко всем элементам
Наследование: отсутствует
Процентные значения: Н/Д

Если фоновое изображение определено, то значение 'background-repeat' определяет, как повторяется изображение и повторяется ли оно вообще.

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

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

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

5.3.5 'background-attachment'

Значение: scroll | fixed
Начальное: scroll
Применяется: ко всем элементам
Наследование: отсутствует
Процентные значения: Н/Д

Если фоновое изображение определено, то значение 'background-attachment' определяет, является ли оно фиксированным относительно холста или оно прокручивается вместе с содержимым.

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

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

5.3.6 'background-position'

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

Если фоновое изображение было определено, то значение 'background-position' определяет его начальное положение.

При парном значении '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% */

Если фоновое изображение фиксировано относительно холста (смотрите указанное выше свойство 'background-attachment'), то изображение размещается относительно холста, а не элемента. Например:

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

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

5.3.7 'background'

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

Свойство 'background' является сокращённым свойством для указания индивидуальных свойств фона (т.е. 'background-color', 'background-image', 'background-repeat', 'background-attachment' и 'background-position') в одном и том же месте в таблице стилей.

Возможными значениями в 'background' свойствах является множество всех возможных значений индивидуальных свойств.

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

Свойство 'background' всегда устанавливает все индивидуальные свойства фона. В первом правиле приведённого выше примера, было задано только значение 'background-color', а другим индивидуальным свойствам были установлены их начальные значения. Во втором правиле, были определены все индивидуальные свойства.

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

5.4.1 'word-spacing'

Значение: normal | <длина>
Начальное: normal
Применяется: ко всем элементам
Наследование: присутствует
Процентные значения: Н/Д

Единица длины указывает дополнительное пространство между словами, добавляемое к пространству по умолчанию. Значения могут быть отрицательными, но в определённых реализациях могут существовать ограничения. АП может самостоятельно выбирать алгоритм точного расстояния. Расстояние между словами также может находиться под влиянием выравнивания по двум сторонам (что является значением свойства 'text-align').

H1 { word-spacing: 1em }

Здесь word-spacing между каждым словом в 'H1' элементах будет увеличено на '1em'.

Основной CSS1: АПей могут интерпретировать любое значение 'word-spacing', как 'normal'. (Смотрите раздел 7.)

5.4.2 'letter-spacing'

Единица длины указывает дополнительное пространство между символами, добавляемое к пространству по умолчанию. Значения могут быть отрицательными, но в определённых реализациях могут существовать ограничения. АП может самостоятельно выбирать алгоритм точного расстояния. Расстояние между буквами также может находиться под влиянием выравнивания по двум сторонам (что является значением свойства 'align').

BLOCKQUOTE { letter-spacing: 0.1em }

Здесь letter-spacing между каждым символом в 'BLOCKQUOTE' элементах будет увеличено на '0.1em'.

При значении 'normal', АПей могут изменить расстояние между буквами для выравнивания текста. Этого не произойдет, если 'letter-spacing' будет явно установлено с помощью значения <длины>:

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

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

Основной CSS1: АПей могут интерпретировать любое значение 'letter-spacing' как 'normal'. (Смотрите раздел 7.)

5.4.3 'text-decoration'

Значение: none | [ underline || overline || line-through || blink ]
Начальное: none
Применяется: ко всем элементам
Наследование: отсутствует, но смотрим указанные ниже пояснения
Процентные значения: Н/Д

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

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

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

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

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

АПей должны распознавать ключевое слово 'blink', но не обязаны поддерживать эффект мерцания.

5.4.4 'vertical-align'

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

'baseline': выравнивание базовой линии элемента (или нижней части, если у элемента отсутствует базовая линия) по базовой линии родителя
'middle': выравнивание вертикальной середины элемента (обычно изображения) по базовой линии плюс добавляется половина x-высоты родителя
'sub': выравнивание как подстрочный элемент
'super': выравнивание как надстрочный элемент
'text-top': выравнивание верхней части элемента по верхней части шрифта родительского элемента
'text-bottom': выравнивание нижней части элемента по нижней части шрифта родительского элемента.

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

'top': выравнивание верхней части элемента по самому высокому элементу в строке
'bottom': выравнивание нижней части элемента по самому низкому элементу в строке

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

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

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

5.4.5 'text-transform'

Значение: capitalize | uppercase | lowercase | none
Начальное: none
Применяется: ко всем элементам
Наследование: присутствует
Процентные значения: Н/Д

'capitalize': преобразует первый символ каждого слова в верхний регистр
'uppercase': преобразует все буквы элемента в верхний регистр
'lowercase': преобразует все буквы элемента в нижний регистр
'none': отменяет наследуемое значение.

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

H1 { text-transform: uppercase }

В приведённом выше примере произойдёт перевод текста 'H1' элементов в верхний регистр.

Основной CSS1: АПей могут игнорировать 'text-transform' (т.е., рассматривать его как 'none') по отношению к символам, которые не входят в набор Latin-1, а так же по отношению к элементам с некоторыми языками, для которых преобразование отличается от определённого в таблицах преобразования регистра Unicode [8].

5.4.6 'text-align'

Значение: left | right | center | justify
Начальное: определяется АП
Применяется: к элементам блок-уровня
Наследование: присутствует
Процентные значения: Н/Д

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

Пример:

DIV.center { text-align: center }

Так как 'text-align' наследуется, все элементы блок-уровня внутри элемента 'DIV' с 'CLASS=center' будут отцентрированы. Обратите внимание, что выравнивание производится относительно ширины элемента, а не холста. Если 'justify' не поддерживается, АП обеспечит замену. Как правило, для западных языков это будет 'left'.

Основной CSS1: АПей могут рассматривать 'justify' как 'left' или 'right', в зависимости от того, каким является используемое по умолчанию направление написания в элементе ‒ слева направо или справа налево, соответственно.

5.4.7 'text-indent'

Значение: <длина> | <процент>
Начальное: 0
Применяется: к элементам блок-уровня
Наследование: присутствует
Процентные значения: относительно ширины родительского элемента

Свойство определяет отступ перед первой форматируемой строкой. Допускаются отрицательные значения 'text-indent', но при этом могут существовать определённые ограничения зависящие от реализации. Отступ не вставляется посереди элемента, который был разбит другим элементом (например, таким как 'BR' в HTML).

Пример:

P { text-indent: 3em }

5.4.8 'line-height'

Значение: normal | <число> | <длина> | <процент>
Начальное: normal
Применяется: ко всем элементам
Наследование: присутствует
Процентные значения: относительно размера шрифта самого элемента

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

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

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

Три правила из указанного ниже примера имеют одну и ту же итоговую высоту строки:

DIV { line-height: 1.2; font-size: 10pt }     /* число */
DIV { line-height: 1.2em; font-size: 10pt }   /* длина */
DIV { line-height: 120%; font-size: 10pt }    /* процент */

Значение 'normal' устанавливает 'line-height' в приемлемое значение для шрифта элемента. Предполагается, что АПей будут устанавливать числовое значение 'normal' в диапазоне от 1.0 до 1.2.

Смотрите раздел 4.4 для описания того, как 'line-height' влияет на форматирование элемента блок-уровня.

5.5 Свойства коробки

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

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

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

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

Свойства 'width' и 'height' устанавливают размер коробки, а также свойства 'float' и 'clear' могут изменять положение элементов.

5.5.1 'margin-top'

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

Это свойство устанавливает верхнее поле элемента:

H1 { margin-top: 2em }

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

5.5.2 'margin-right'

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

H1 { margin-right: 12.3% }

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

5.5.3 'margin-bottom'

Это свойство устанавливает нижнее поле элемента:

H1 { margin-bottom: 3px }

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

5.5.4 'margin-left'

Это свойство устанавливает левое поле элемента:

H1 { margin-left: 2em }

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

5.5.5 'margin'

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

Свойство 'margin' является сокращённым свойством для одновременного указания таких свойств как 'margin-top', 'margin-right', 'margin-bottom' и 'margin-left' в одном месте в таблице стилей.

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

BODY { margin: 2em } /* все поля равны 2em */
BODY { margin: 1em 2em } /* верхнее & нижнее = 1em, правое & левое = 2em */
BODY { margin: 1em 2em 3em } /* верхнее=1em, правое=2em, нижнее=3em, левое=2em */

Последнее правило приведённого выше примера эквивалентно примеру, указанному ниже:

BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* скопировано с противоположной (правой) стороны */
}

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

5.5.6 'padding-top'

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

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

BLOCKQUOTE { padding-top: 0.3em }

Значения отступа не могут быть отрицательными.

5.5.7 'padding-right'

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

BLOCKQUOTE { padding-right: 10px }

Значения отступа не могут быть отрицательными.

5.5.8 'padding-bottom'

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

BLOCKQUOTE { padding-bottom: 2em }

Значения отступа не могут быть отрицательными.

5.5.9 'padding-left'

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

BLOCKQUOTE { padding-left: 20% }

Значения отступа не могут быть отрицательными.

5.5.10 'padding'

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

Свойство 'padding' является сокращённым свойством для одновременного указания таких свойств как 'padding-top', 'padding-right', 'padding-bottom' и 'padding-left' в одном месте в таблице стилей.

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

Внешние стороны области отступа устанавливается с помощью свойства 'background':

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

Приведённый выше пример устанавливает вертикальные отступы равные '1em' ('padding-top' и 'padding-bottom') и горизонтальные отступы равные '2em' ('padding-right' и 'padding-left'). 'em' единица рассчитывается относительно размера шрифта элемента: '1em' равен размеру используемого шрифта.

Значения отступа не могут быть отрицательными.

5.5.11 'border-top-width'

Значение: thin | medium | thick | <длина>
Начальное: 'medium'
Применяется: ко всем элементам
Наследование: отсутствует
Процентные значения: Н/Д

Это свойство устанавливает ширину верхней границы элемента. Значения ключевых слов ширины зависят от АП, но справедливы следующие отношения: 'thin' <= 'medium' <= 'thick'

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

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

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

H1 { border: solid 0.5em }

Ширина границ не может быть отрицательной.

5.5.12 'border-right-width'

Это свойство устанавливает ширину правой границы элемента. В противном случае оно эквивалентно 'border-top-width'.

5.5.13 'border-bottom-width'

Это свойство устанавливает ширину нижней границы элемента. В противном случае оно эквивалентно 'border-top-width'.

5.5.14 'border-left-width'

Это свойство устанавливает ширину левой границы элемента. В противном случае оно эквивалентно 'border-top-width'.

5.5.15 'border-width'

Значение: [thin | medium | thick | <длина>]{1,4}
Начальное: для сокращённых свойств не определено
Применяется: ко всем элементам
Наследование: отсутствует
Процентные значения: Н/Д

Это свойство является сокращённым свойством для одновременного указания таких свойств как 'border-width-top', 'border-width-right', 'border-width-bottom' и 'border-width-left' в одном месте в таблице стилей.

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

одно значение: ширина всех четырёх границ равна этому значению
два значения: первое значение устанавливает ширину верхней и нижней границы, а второе значение устанавливает ширину правой и левой границы
три значения: первое устанавливает ширину верхней, второе устанавливает ширину правой и левой, а третье устанавливает ширину нижней границы
четыре значения: устанавливают ширину верхней, правой, нижней и левой границы соответственно

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

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 thin } /* thin thick medium thin */

Ширина границ не может быть отрицательной.

5.5.16 'border-color'

Значение: <цвет>{1,4}
Начальное: значение свойства 'color'
Применяется: ко всем элементам
Наследование: отсутствует
Процентные значения: Н/Д

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

Если значение цвета не указано, то вместо него будет использовано значение свойства 'color' этого элемента:

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

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

5.5.17 'border-style'

Свойство 'border-style' устанавливает стиль всех четырёх границ. Оно может иметь от одного до четырёх значений, при чём значения устанавливаются для разных сторон, как это делается выше для 'border-width'.

#xy34 { border-style: solid dotted }

В приведенном выше примере горизонтальные границы будут 'solid', а вертикальные границы будут 'dotted'.

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

Стили границ означают:

none: граница не рисуется (независимо от значения 'border-width')
dotted: в качестве границы выступает точечная пунктирная линия, рисуемая поверх фона элемента
dashed: в качестве границы выступает штриховая пунктирная линия, рисуемая поверх фона элемента
solid: в качестве границы выступает сплошная линия
double: в качестве границы выступает двойная линия, рисуемая поверх фона элемента. Сумма двух отдельных линий и пространства между ними равна значению <border-width>.
groove: 3D-паз рисуемый в цвете на основе значения <цвета>.
ridge: 3D-выступ рисуемый в цвете на основе значения <цвета>.
inset: 3D-вставка рисуемая в цвете на основе значения <цвета>.
outset: 3D-боковик рисуемый в цвете на основе значения <цвета>.

Основной CSS1: АПей могут интерпретировать все 'dotted', 'dashed', 'groove', 'ridge', 'inset' и 'outset' значения как 'solid'.

5.5.18 'border-top'

Значение: <border-top-width> || <border-style> || <цвет>
Начальное: для сокращённых свойств не определено
Применяется: ко всем элементам
Наследование: отсутствует
Процентные значения: Н/Д

Это свойство является сокращённым свойством для одновременного указания ширины, стиля и цвета верхней границы элемента.

H1 { border-bottom: thick solid red }

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

H1 { border-bottom: thick solid }

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

Обратите внимание, что в то время как свойство 'border-style' принимает до четырёх значений, это свойство принимает только одно значение стиля.

5.5.19 'border-right'

Значение: <border-right-width> || <border-style> || <цвет>
Начальное: для сокращённых свойств не определено
Применяется: ко всем элементам
Наследование: отсутствует
Процентные значения: Н/Д

Это сокращённое свойство для указания ширины, стиля и цвета правой границы элемента. В противном случае это свойство эквивалентно 'border-top'.

5.5.20 'border-bottom'

Значение: <border-bottom-width> || <border-style> || <цвет>
Начальное: для сокращённых свойств не определено
Применяется: ко всем элементам
Наследование: отсутствует
Процентные значения: Н/Д

Это сокращённое свойство для указания ширины, стиля и цвета нижней границы элемента. В противном случае это свойство эквивалентно 'border-top'.

5.5.21 'border-left'

Значение: <border-left-width> || <border-style> || <цвет>
Начальное: для сокращённых свойств не определено
Применяется: ко всем элементам
Наследование: отсутствует
Процентные значения: Н/Д

Это сокращённое свойство для указания ширины, стиля и цвета левой границы элемента. В противном случае это свойство эквивалентно 'border-top'.

5.5.22 'border'

Значение: <border-width> || <border-style> || <цвет>
Начальное: для сокращённых свойств не определено
Применяется: ко всем элементам
Наследование: отсутствует
Процентные значения: Н/Д

Свойство 'border' является сокращённым свойством для указания одинаковых значений ширины, цвета и стиля всем четырём границам элемента. Например, первое, приведённое ниже правило эквивалентно набору из четырёх правил, которые указаны после него:

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

В отличие от таких сокращённых свойств как 'margin' и 'padding', свойство 'border' не может одновременно устанавливать различные значения для четырёх границ. Для этого должно быть использовано одно или несколько других свойств границы.

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

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

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

Обратите внимание, что в то время как свойство 'border-width' принимает до четырёх значений длины, данное свойство принимает только одно значение.

5.5.23 'width'

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

Это свойство может быть применено к текстовым элементам, но его использование наиболее целесообразно в отношении заменяемых элементов, таких как изображения. Устанавливаемое значение ширины должно быть соблюдено путём масштабирования изображения, если это необходимо. При масштабировании, соотношение сторон изображения сохраняется, если свойство 'height' имеет значение 'auto'.

Пример:

IMG.icon { width: 100px }

Если и 'width' и 'height' заменяемого элемента имеют значение 'auto', то этим свойствам будут установлены внутренние размеры элемента.

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

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

5.5.24 'height'

Значение: <длина> | auto
Начальное: auto
Применяется: к элементам блок-уровня и заменяемым элементам
Наследование: отсутствует
Процентные значения: Н/Д

Это свойство может быть применено к текстовым элементам, но его использование наиболее целесообразно в отношении заменяемых элементов, таких как изображения. Устанавливаемое значение высоты должно быть соблюдено путём масштабирования изображения, если это необходимо. При масштабировании, соотношение сторон изображения сохраняется, если свойство 'width' имеет значение 'auto'.

Пример:

IMG.icon { height: 100px }

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

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

Основной CSS1: АПей могут игнорировать свойство 'height' (т.е. рассматривать его как 'auto'), если элемент не является заменяемым элементом.

5.5.25 'float'

Значение: left | right | none
Начальное: none
Применяется: ко всем элементам
Наследование: отсутствует
Процентные значения: Н/Д

При значении 'none' ‒ элемент будет отображаться там, где он появляется в тексте. При значении 'left' ('right') элемент будет перемещён влево (вправо), а текст будет обтекать его с правой (левой) стороны. При значении 'left' или 'right' ‒ элемент обрабатывается как элемент блок-уровня (т.е. значение свойства 'display' игнорируется). Для получения полного определения смотрите раздел 4.1.4.

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

Приведённый выше пример будет размещать все IMG элементы с 'CLASS=icon' по левой стороне родительского элемента.

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

5.5.26 'clear'

Значение: none | left | right | both
Начальное: none
Применяется: ко всем элементам
Наследование: отсутствует
Процентные значения: Н/Д

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

H1 { clear: left }

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

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

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

5.6.1 'display'

Значение: block | inline | list-item | none
Начальное: block
Применяется: ко всем элементам
Наследование: отсутствует
Процентные значения: Н/Д

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

Элемент у которого свойство 'display' имеет значение 'block' создаёт новую коробку. Коробка располагается относительно соседних коробок в соответствии с CSS моделью форматирования. Как правило, такие элементы как 'H1' и 'P' относятся к типу 'block'. Значение 'list-item' аналогично 'block' за исключением того, что пункту-списка добавляется маркер. В HTML, как правило, данное значение имеют элементы 'LI'.

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

Значение 'none' отключает отображение самого элемента, а так же в том числе и дочерних элементов, и окружающих коробок.

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

Последнее правило отключает отображение изображений.

Начальным значением 'display' является 'block', но АП, как правило, имеет разные значения по умолчанию для различных HTML-элементов в соответствии с предлагаемым отображением элементов в HTML-спецификации [2].

Основной CSS1: АПей могут игнорировать 'display' и использовать только значения по умолчанию, определённые АП. (Смотрите раздел 7.)

5.6.2 'white-space'

Значение: normal | pre | nowrap
Начальное: normal
Применяется: к элементам блок-уровня
Наследование: присутствует
Процентные значения: Н/Д

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

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

Начальным значением 'white-space' является 'normal', но АП, как правило, имеет разные значения по умолчанию для различных HTML-элементов в соответствии с предлагаемым отображением элементов в HTML-спецификации [2].

Основной CSS1: АПей могут игнорировать свойство 'white-space' в авторских и читательских таблицах стилей, и вместо него использовать значения по умолчанию, определённые АП. (Смотрите раздел 7.)

5.6.3 'list-style-type'

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

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

5.6.4 'list-style-image'

Значение: <url> | none
Начальное: none
Применяется: к элементам, у которых 'display' имеет значение 'list-item'
Наследование: присутствует
Процентные значения: Н/Д

Это свойство устанавливает изображение, которое будет использоваться в качестве маркера пункта-списка. Если изображение доступно, то оно заменит маркер, установленный с помощью свойства 'list-style-type'.

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

5.6.5 'list-style-position'

Значение: inside | outside
Начальное: outside
Применяется: к элементам, у которых 'display' имеет значение 'list-item'
Наследование: присутствует
Процентные значения: Н/Д

Значение 'list-style-position' определяет, как маркер пункта-списка будет представляться по отношению к содержимому. Пример форматирования смотрите в разделе 4.1.3.

5.6.6 'list-style'

Значение: [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
Начальное: для сокращённых свойств не определено
Применяется: к элементам, у которых 'display' имеет значение 'list-item'
Наследование: присутствует
Процентные значения: Н/Д

Свойство 'list-style' является сокращённой формой для указания трёх таких свойств как 'list-style-type', 'list-style-image' и 'list-style-position' в одном и том же месте в таблице стилей.

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

Установка 'list-style' непосредственно для элементов 'LI' может привести к неожиданным результатам. Рассмотрим:

  <STYLE TYPE="text/css">
    OL.alpha LI  { list-style: lower-alpha }
    UL LI        { list-style: disc }
  </STYLE>
  <BODY>
    <OL CLASS=alpha>
      <LI>1 уровень
      <UL>
         <LI>2 уровень
      </UL>
    </OL>
  </BODY>

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

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

В приведённом выше примере, наследование будет передавать значения 'list-style' от 'OL' и 'UL' элементов к элементам 'LI'.

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

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

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

6 Единицы

6.1 Единицы длины

Формат значения длины представляется в виде необязательного символа знака ('+' или '-', при чём '+' в качестве символа по умолчанию), за которым сразу следует число (с или без десятичной точки), после которого следует идентификатор единицы (двухбуквенная аббревиатура). После '0', указывать идентификатор единицы не обязательно.

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

Существует два типа единиц длины: относительные и абсолютные. Относительные единицы определяют длину относительно длины другого свойства. Таблицы стилей, использующие относительные единицы будут более легко масштабироваться от одной среды к другой (например, с дисплея компьютера на лазерный принтер). Процентные единицы (описанные ниже) и значения ключевых слов (например, 'x-large') предлагают аналогичные преимущества.

Это поддерживаемые относительные единицы:

H1 { margin: 0.5em }      /* em, высота шрифта элемента */
H1 { margin: 1ex }        /* x-высота, ~ высота литеры 'x' */
P  { font-size: 12px }    /* пиксели, относительно холста */

Относительные единицы 'em' и 'ex' вычисляются относительно размера шрифта самого элемента. Единственным исключением из этого правила в CSS1 является свойство 'font-size', где 'em' и 'ex' значения ссылаются на размер шрифта родительского элемента.

Пиксельные единицы, используемые в последнем правиле, относятся к разрешению холста, т.е. чаще всего компьютерного дисплея. Если плотность пикселей устройства вывода сильно отличается от стандартного компьютерного дисплея, АП следует масштабировать значения пикселей. Предлагаемый опорный пиксель представляет собой угол обзора одного пикселя в устройстве с плотностью пикселей равной 90dpi и расстоянием от читателя равным расстоянию вытянутой руки. При номинальной длине руки равной 28 дюймам, угол обзора составляет около 0.0227 градусов.

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

BODY {
  font-size: 12pt;
  text-indent: 3em;  /* т.е. 36pt */
}
H1 { font-size: 15pt }

В приведённом выше примере, значение 'text-indent' для элементов 'H1' будет равно 36pt, а не 45pt.

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

H1 { margin: 0.5in }      /* дюймы, 1in = 2.54cm */
H2 { line-height: 3cm }   /* сантиметры */
H3 { word-spacing: 4mm }  /* миллиметры */
H4 { font-size: 12pt }    /* точки, 1pt = 1/72 in */
H4 { font-size: 1pc }     /* пики, 1pc = 12pt */

В случаях, когда не поддерживается определённая длина, АПей следует попытаться использовать наиболее приближенное значение. Для всех свойств CSS1, дальнейшие вычисления и наследование следует основывать на приближенном значении.

6.2 Процентные единицы

Формат процентного значения представляется в виде необязательного символа знака ('+' или '-', при чём '+' в качестве символа по умолчанию), за которым сразу следует число (с или без десятичной точки), после которого следует символ '%'.

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

P { line-height: 120% }   /* 120% от значения 'font-size' элемента */

Во всех наследуемых свойствах CSS1, если значение определено в процентах, то дочерние элементы наследуют рассчитанное, а не процентное значение.

6.3 Единицы цвета

Цвет представляет собой либо ключевое слово, либо числовое RGB определение.

Предлагаемый список ключевых слов названий цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white и yellow. Эти 16 цветов взяты из VGA-палитры Windows, и их RGB-значения не определены в данной спецификации.

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }

Цветовая модель RGB используется в числовых определениях цвета. Во всех этих примерах определён один и тот же цвет:

EM { color: #f00 }              /* #rgb */
EM { color: #ff0000 }           /* #rrggbb */
EM { color: rgb(255,0,0) }      /* диапазон целых чисел 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* диапазон чисел с плавающей точкой 0.0% - 100.0% */

Формат RGB-значения в шестнадцатеричной записи состоит из символа '#' сразу после которого следует три или шесть шестнадцатеричных символа. Трёхзначное значение RGB записи (#rgb) преобразуется в шестизначную форму (#rrggbb) путём дублирования цифр, а не добавлением нулей. Например, #fb0 расширяется до #ffbb00. Это гарантирует, что белый (#ffffff) может быть определён в короткой записи (#fff) и устраняет любые зависимости, связанные с глубиной цвета дисплея.

Формат RGB-значения в функциональной записи представляется в виде строки 'rgb(', после которой следует разделённый запятыми список из трёх числовых значений (либо трёх целочисленных значений в диапазоне 0-255, либо трёх процентных значений в диапазоне от 0.0% до 100.0%), за которым следует строка ')'. Вокруг числовых значений допускается использование пробельных символов.

Значения за пределами числовых диапазонов следует обрезать. Поэтому указанные ниже три правила, эквивалентны:

EM { color: rgb(255,0,0) }       /* диапазон целых чисел 0 - 255 */
EM { color: rgb(300,0,0) }       /* обрезается до 255 */
EM { color: rgb(110%, 0%, 0%) }  /* обрезается до 100% */

RGB-цвета определяются в цветовом пространстве sRGB [9]. АПей могут варьироваться в точности, с которой они представляют эти цвета, но использование sRGB обеспечивает однозначное и объективно измеримое определение того, каким следует быть цвету, который может быть связан с международными стандартами [10].

АПей могут ограничить свои усилия в отображении цветов для выполнения гамма-коррекции. sRGB определяет цветовую гамму дисплея соответствующую 2.2 при определённых условиях просмотра. АПей настраивают цвета, заданные в CSS таким образом, чтобы в сочетании с «естественной» цветовой гаммой дисплея устройства вывода, эффективная цветовая гамма дисплея соответствовала 2.2. В приложении D дана дополнительная информация по этой теме. Обратите внимание, что затронуты только цвета, определённые в CSS; например, изображения, как ожидается, само по себе передаёт свою собственную информацию о цвете.

6.4 URL

Унифицированный Указатель Ресурса (URL) указывается при помощи функциональной записи:

BODY { background: url(http://www.bg.com/pinkish.gif) }

Формат URL-значения представляется в виде строки 'URL(', за которой дополнительно может быть указано пробельное пространство, после которого так же дополнительно может быть указан символ одинарной (') или двойной кавычки ("), после чего указывается сам URL (как определено в [11]), за которым дополнительно может быть указан символ одинарной (') или двойной кавычки ("), после чего так же дополнительно может быть указан пробел, после которого указывается символ ')'. Символы кавычек, которые не являются частью самого URL должны быть сбалансированы.

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

Частичные URL-адреса интерпретируются относительно расположения исходной таблицы стилей, а не относительно документа:

BODY { background: url(yellow) }

7 Соответствие CSS1

Агент Пользователя, который использует CSS1 для отображения документов соответствует спецификации CSS1, если он:

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

Агент Пользователя, который выводит таблицы стилей CSS1 соответствует спецификации CSS1, если он:

выводит допустимые таблицы стилей CSS1

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

АП может не иметь возможности реализовывать все функциональные возможности CSS1: он может соответствовать CSS1, реализуя основные функциональные возможности. Основные функциональные возможности состоят из всей спецификации CSS1, за исключением тех частей, которые исключаются явно. В тексте эти части помечены как «Основной CSS1:», за которыми следует объяснение того, что функциональные возможности находятся за пределами основных функциональных возможностей. Набор функций, исключённый из основных функциональных возможностей называется расширенными функциями CSS1.

Этот раздел определяет только соответствие CSS1. В будущем будут другие уровни CSS, которые могут потребовать от АП реализации другого набора функций для обеспечения соответствия.

Примерами ограничений среды представления являются: ограниченные ресурсы (цвет, шрифты) и ограниченное разрешение (поэтому поля могут быть не точными). В этих случаях АП следует аппроксимировать значения таблицы стилей. Кроме того, различные парадигмы пользовательского интерфейса могут накладывать свои собственные ограничения: VR-браузер может изменить размер документа на основе его «расстояния» от пользователя.

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

Обратите внимание, что CSS1 не определяет все аспекты форматирования. Например, АП волен выбирать алгоритм межбуквенного расстояния.

Данная спецификация также рекомендует, но не требует, чтобы АП:

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

Приведённые выше правила соответствия описывают только функциональные возможности, а не пользовательский интерфейс.

7.1 Совместимый синтаксический анализ

Данная спецификация определяет CSS 1 уровня. Ожидается, что в будущем будут определены более высокие уровни CSS, с дополнительными функциями. Для того, чтобы гарантировать, что АПей поддерживающие только CSS1 будут иметь возможность читать таблицы стилей, содержащие функции более высокого уровня, этот раздел определяет, что делает АП, когда встречает определённые конструкции, которые не являются допустимыми в CSS 1 уровня.

объявление с неизвестным свойством игнорируется. Например, если таблица стилей представляет собой
```
  H1 { color: red; rotation: 70deg; }
```
АП будет относиться к этому, как если бы таблица стилей была такой
```
H1 { color: red; }
```
недопустимые значения или значения с недопустимыми частями, рассматриваются как если бы объявления не было бы вовсе:
```
IMG { float: left }       /* CSS1 */
IMG { float: left top }   /* «top» не является значением 'float' */
IMG { background: "red" } /* ключевые слова не указываются в скобках в css1 */
IMG { border-width: 3 }   /* для значений длины должны быть определены единицы */
```
В приведённом выше примере обработчик CSS1 будет соблюдать первое правило и игнорировать все остальные, как если бы таблица стилей была такой
```
IMG { float: left }
IMG { }
IMG { }
IMG { }
```
АП, соответствующий будущей спецификации CSS может принимать от одного и более других правил.
недопустимое эт-ключевое слово игнорируется вместе со всем кодом, следующим за ним, вплоть до точки с запятой (;) или пары фигурных скобок ({...}), в зависимости от того, что наступит раньше. Например, предположим, что таблица стилей имеет следующий вид:
```
@three-dee {
  @background-lighting {
    azimuth: 30deg;
    elevation: 190deg;
  }
  H1 { color: red }
}
H1 {color: blue}
```
'@three-dee' является недопустимым в соответствии с CSS1. Таким образом, всё эт-правило (вплоть до третьей закрывающей фигурной скобки включительно) игнорируется. АП соответствующий CSS1 пропускает его, эффективно сокращая таблицу стилей:
```
H1 {color: blue}
```

Более детально:

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

CSS таблицы стилей часто встраиваются в HTML-документы, и для того, чтобы иметь возможность скрыть таблицы стилей от старых АПей, удобно располагать таблицы стилей внутри HTML-комментариев. Лексемы HTML-комментария «» могут быть указаны до, после и в промежутках между операторами. Они могут иметь пробельные символы вокруг них.

Эт-правила начинаются с эт-ключевого слова, которое представляет собой идентификатор с '@' в начале (например: '@import', '@page'). Идентификатор состоит из букв, цифр, дефисов и экранированных символов (как определено ниже).

В эт-правило входит всё, вплоть до следующей точки с запятой (;) или следующего блока (определённого непосредственно после) в зависимости от того, что наступит раньше. АП соответствующий CSS1, который встречает эт-правило, которое начинается с эт-ключевого слова отличного от '@import' игнорирует всё эт-правило и продолжает обработку после него. Он также игнорирует любое эт-правило, которое начинается с '@import', если оно не располагается в верхней части таблицы стилей, т.е., если оно располагается после каких-либо правил (даже после игнорируемых правил). Вот пример.

Предположим, что CSS1 обработчик встречает эту таблицу стилей:

@import "subs.css";
H1 { color: blue }
@import "list.css";

Второе правило '@import' согласно CSS1 является недопустимым. Обработчик CSS1 пропускает всё эт-правило, эффективно сокращая таблицу стилей:

@import "subs.css";
H1 {color: blue}

Блок начинается с открывающей фигурной скобки ({) и заканчивается соответствующей закрывающей фигурной скобкой (}). В промежутке между ними могут быть любые символы, за исключением того, что круглые скобки (()), квадратные скобки ([]) и фигурные скобки ({}) всегда встречаются парами и могут быть вложенными. Одинарные (') и двойные кавычки (") также встречаются парами, а символы между ними обрабатываются как строка (смотрим токенизатор в приложении B для определения строки). Ниже приведён пример блока; обратите внимание, что закрывающая фигурная скобка между двойными кавычками не соответствует открывающей фигурной скобки блока, и что вторая одинарная кавычка является экранированным символом, и, таким образом, не соответствует открывающей кавычки:

{ causta: "}" + ({7} * '\'') }

Набор правил состоит из строки-селектора, за которой следует блок-объявлений. Строка-селектора включает в себя всё, вплоть до (но не включая саму) первой открывающей фигурной скобки ({). Набор правил, который начинается со строки-селектора, которая не является допустимой с точки зрения CSS1 пропускается.

Например, предположим, что обработчик CSS1 встречает эту таблицу стилей:

H1 { color: blue }
P[align], UL { color: red; font-size: large }
P EM { font-weight: bold }

Вторая строка содержит строку-селектора, которая является недопустимой в CSS1. АП, поддерживающий CSS1 пропустит набор правил, сокращая таблицу стилей:

H1 { color: blue }
P EM { font-weight: bold }

Блок-объявлений начинается с открывающей фигурной скобки ({) и заканчивается соответствующей закрывающей фигурной скобкой (}). Между ними находится список от нуля и более объявлений, разделённых точкой с запятой (;).

Объявление состоит из свойства, двоеточия (:) и значения. Вокруг каждого из них могут быть пробельные символы. Свойство является идентификатором, как определено ранее. В значении может быть указан любой символ, но круглые скобки (()), квадратные скобки ([]), фигурные скобки ({}), одиночные кавычки (') и двойные кавычки (") должны указываться соответствующими парами. Круглые, квадратные и фигурные скобки могут быть вложенными. Символы внутри кавычек обрабатываются как строки.

Для того, чтобы гарантировать, что новые свойства и новые значения для существующих свойств могут быть добавлены в будущем, АП должен пропускать объявление с недопустимым именем свойства или недопустимым значением. Каждое свойство CSS1 имеет свои собственные синтаксические и семантические ограничения на принимаемые им значения.

Например, предположим, что обработчик CSS1 встречает эту таблицу стилей:

H1 { color: red; font-style: 12pt }
P { color: blue;  font-vendor: any;  font-variant: small-caps }
EM EM { font-style: normal }

Второе объявление в первой строке имеет недопустимое значение '12pt'. Второе объявление во второй строке содержит неопределённое свойство 'font-vendor'. Обработчик CSS1 будет пропускать эти объявления, сокращая таблицу стилей:

H1 { color: red; }
P { color: blue;  font-variant: small-caps }
EM EM { font-style: normal }

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

Следующие правила всегда имеют место:

Все CSS таблицы стилей нечувствительны к регистру, за исключением частей, которые не находятся под контролем CSS. Т.е. в CSS1, имена семейств шрифтов и URL-адреса могут быть чувствительны к регистру. Кроме того, чувствительность к регистру атрибутов CLASS и ID находится под контролем HTML [2].
селекторы CSS1 (имена элементов, классы и ID) могут содержать только символы A-Z, 0-9 и символы Юникода 161-255, плюс тире (-); они не могут начинаться с тире или цифры; они также могут содержать экранированные символы и любые символы Юникода в виде числового кода (смотрим следующий пункт).
символ Юникода представляется в виде обратной косой черты, после которой может следовать не более четырёх шестнадцатеричных цифр (0..9A..F), соответствующих Юникод числу этого символа.
любой символ, кроме шестнадцатеричной цифры может быть экранирован с целью удаления его особого значения, путём указания обратной косой черты перед этим символом. Например: «\"» представляет собой строку, состоящую из одной двойной кавычки.
два предыдущих пункта определяют экранирующую обратную косую черту. Экранирующая обратная косая черта всегда считается частью идентификатора, за исключением ситуации с расположением внутри строк (то есть «\7B» не является пунктуацией, хотя «{» является таковой, а «\32» допускается в начале имени класса, даже несмотря на то, что «2» не допускается).

Примечание: HTML-атрибут CLASS допускает больший диапазон символов в имени класса, чем указанный выше набор допустимых в селекторе символов. В CSS1 эти символы необходимо экранировать или записать в виде Юникод числа: «B&W?» можно записать в виде «B\&W\?» или «B\26W\3F», «κουρος» (по-гречески: «kouros») необходимо записать как «\3BA\3BF\3C5\3C1\3BF\3C2». Ожидается, что в последующих версиях CSS можно будет вводить больший диапазон символов.

Приложение B задаёт грамматику для CSS1.

8 Список Использованной Литературы

[1] Страница W3C ресурса по веб таблицам стилей (http://www.w3.org/Style)

[2] «HTML 4.0 Спецификация», D. Raggett, A. Le Hors, I. Jacobs, Декабрь 1997. Доступна по адресу http://www.w3.org/TR/REC-html40/.

[3] T Berners-Lee, D Connolly: «Язык Гипертекстовой Разметки - 2.0», RFC 1866, MIT/W3C, Ноябрь 1995. Спецификация также доступна в гипертекстовой форме (http://www.w3.org/MarkUp/html-spec/html-spec_toc.html)

[4] F Yergeau, G Nicol, G Adams, M Dürst: «Интернационализация Языка Гипертекстовой Разметки» (ftp://ds.internic.net/rfc/rfc2070.txt).

[5] ISO 8879:1986. Обработка Информации - Текстовые и Офисные Системы - Стандартный Обобщённый Язык Разметки (Standard Generalized Markup Language - SGML)

[6] ISO/IEC 10179:1996 Информационные технологии -- Обработка языков -- Язык Описания Семантики и Стиля Документа (Document Style Semantics and Specification Language - DSSSL).

[7] ISO/IEC 9899:1990 Языки программирования -- C.

[8] Консорциум Юникода, «Стандарт Юникода -- Всемирная Кодировка Символов -- Версия 1.0», Addison-Wesley, Том 1, 1991, Том 2, 1992.

[9] «Стандартное цветовое Пространство по Умолчанию для Интернета», версия 1.10, M. Stokes, M. Anderson, S. Chandrasekar и R. Motta, 5 Ноября 1996.

[10] CIE Публикация 15.2-1986, «Колориметрия, Второе Издание», ISBN 3-900-734-00-3 (http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html)

[11] T Berners-Lee, L Masinter, M McCahill: «Унифицированные Указатели Ресурсов (Uniform Resource Locators - URL)», RFC 1738, ЦЕРН, Корпорация Xerox, Университет Миннесоты, Декабрь 1994

[12] «PNG (Портативная Сетевая Графика) Спецификация, Версия спецификации 1.0» (http://www.w3.org/TR/REC-png-multi.html)

[13] Charles A. Poynton: «Гамма-коррекция на Платформе Macintosh» (ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)

[14] Международный Консорциум по Цвету: «Спецификация ICC Формата Профиля, Версия 3.2», 1995 (ftp://sgigate.sgi.com/pub/icc/ICC32.pdf)

[15] S C Johnson: «YACC - Ещё один компилятор компилятора», Технический Отчёт, Murray Hill, 1975

[16] «Flex: Генератор Лексического Сканера», Версия 2.3.7, ISBN 1882114213

9 Благодарности

За короткий срок существования HTML, уже существует несколько представлений таблиц стилей, которым обязано данное представление. Особенно важными были представления от Robert Raisch, Joe English и Pei Wei.

Многие люди внесли свой вклад в разработку CSS1. Мы хотели бы особо поблагодарить: Terry Allen, Murray Altheim, Glenn Adams, Walter Bender, Tim Berners-Lee, Yves Bertot, Scott Bigham, Steve Byrne, Robert Cailliau, James Clark, Daniel Connolly, Donna Converse, Adam Costello, Todd Fahrner, Todd Freter, Roy Fielding, Neil Galarneau, Wayne Gramlich, Phill Hallam-Baker, Philipp Hoschka, Kevin Hughes, Scott Isaacs, Tony Jebson, William Johnston, Gilles Kahn, Philippe Kaplan, Phil Karlton, Evan Kirshenbaum, Yves Lafon, Murray Maloney, Lou Montulli, Colas Nahaboo, Henrik Frystyk Nielsen, David Perrell, William Perry, Scott Preece, Paul Prescod, Liam Quin, Vincent Quint, Jenny Raggett, Thomas Reardon, Cécile Roisin, Michael Seaton, David Seibert, David Siegel, David Singer, Benjamin Sittler, Jon Smirl, Charles Peyton Taylor, Irène Vatton, Daniel Veillard, Mandira Virmani, Greg Watkins, Mike Wexler, Lydja Williams, Brian Wilson, Chris Wilson, Lauren Wood и Stephen Zilles.

Три человека, заслуживают особого упоминания: Dave Raggett (за его помощь и работу над HTML3), Chris Lilley (за его постоянное сотрудничество, особенно в области цвета и шрифтов) и Steven Pemberton (за его организационные, а также творческие навыки).

Приложение A: Простые таблицы стилей для HTML 2.0

(Данное приложение является информативным, а не нормативным)

Следующая таблица стилей написана в соответствии с предложенным отображением в спецификации HTML 2.0 [3]. Некоторые стили, например, цвета, были добавлены для полноты картины. Предполагается, что таблица стилей, подобная той, что приведена ниже, используется АП в качестве таблицы стилей по умолчанию.

BODY { 
  margin: 1em;
  font-family: serif;
  line-height: 1.1;
  background: white;
  color: black; 
}

H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV, 
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL { 
  display: block }

B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP, 
IMG, SPAN { display: inline }

LI { display: list-item }

H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }

H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }

B, STRONG { font-weight: bolder }  /* относительно родительского элемента */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }

PRE { white-space: pre }

ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }

UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 }              /* плотное форматирование */
LI { margin-left: 3em }

DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }

HR { border-top: solid }        /* также можно было бы использовать 'border-bottom' */

A:link { color: blue }          /* непосещённая ссылка */
A:visited { color: red }        /* посещённые ссылки */
A:active { color: lime }        /* активируемые ссылки */

/* установка границы якоря вокруг элементов IMG требует 
   контекстные селекторы */

A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }

Приложение B: Грамматика CSS1

(Данное приложение является нормативным)

Минимальная грамматика CSS (т.е. любой версии CSS) заключается в том, что всем реализациям необходимо поддерживать определение, указанное в разделе 7. Грамматика, указанная ниже определяет гораздо меньший язык, который определяет синтаксис CSS1.

Однако это в каком-то смысле, ещё надмножество спецификации CSS1: существуют дополнительные семантические ограничения не выраженные в этой грамматике. Соответствующий АП должен также придерживаться правил обработки совместимых с ними (раздел 7.1), обозначения свойства и значения (раздел 5) и обозначения единиц (раздел 6). Кроме того, HTML накладывает ограничения, например, на возможные значения атрибута CLASS.

Указанная ниже грамматика является LL(1) (но учтите, что большинству АП не следует использовать её непосредственно, так как она не выражает соглашения по обработке, только синтаксис CSS1). Формат продукций оптимизирован для использования человеком и использует некоторую сокращённую запись за yacc [15]:

*  : от 0 и более
+  : от 1 и более
?  : 0 или 1
|  : разделяет альтернативы
[] : группировка

Продукция:

таблицастилей
 : [CDO|CDC]* [ импортирование [CDO|CDC]* ]* [ наборправил [CDO|CDC]* ]*
 ;
импортирование
 : ОБОЗН_ИМПОРТИРОВАНИЯ [СТРОКА|URL] ';'	/* Например, @import url(fun.css); */
 ;
унарный_оператор
 : '-' | '+'
 ;
оператор
 : '/' | ',' | /* пусто */
 ;
свойство
 : ИДЕНТ
 ;
наборправил
 : селектор [ ',' селектор ]*
   '{' объявление [ ';' объявление ]* '}'
 ;
селектор
 : простой_селектор+ [ псевдоэлемент | отдельный_псевдоэлемент ]?
 | отдельный_псевдоэлемент
 ;
	/* «id» представляет собой идентификатор, присоединяемый
	** слева к типу элемента, как в: P#p007
	** «отдельный_id» представляет собой не присоединяемый идентификатор,
	** например: #p007
	** Аналогично для классов и псевдоклассов.
	*/
простой_селектор
 : имя_элемента id? класс? псевдокласс?		/* напр: H1.subject */
 | отдельный_id класс? псевдокласс?		/* напр: #xyz33 */
 | отдельный_class псевдокласс?			/* напр: .author */
 | отдельный_псевдокласс			/* напр: :link */
 ;
имя_элемента
 : ИДЕНТ
 ;
псевдокласс					/* как в:  A:link */
 : ПСКЛАСС_ССЫЛКИ_ПОСЛЕ_ИДЕНТ
 | ПСКЛАСС_ПОСЕЩЁН_ССЫЛКИ_ПОСЛЕ_ИДЕНТ
 | ПСКЛАСС_АКТИВ_ССЫЛКИ_ПОСЛЕ_ИДЕНТ
 ;
отдельный_псевдокласс				/* как в:  :link */
 : ПСКЛАСС_ССЫЛКИ
 | ПСКЛАСС_ПОСЕЩЁН_ССЫЛКИ
 | ПСКЛАСС_АКТИВ_ССЫЛКИ
 ;
класс						/* как в:  P.note */
 : КЛАСС_ПОСЛЕ_ИДЕНТ
 ;
отдельный_класс					/* как в:  .note */
 : КЛАСС
 ;
псевдоэлемент					/* как в:  P:first-line */
 : ПЕРВАЯ_БУКВА_ПОСЛЕ_ИДЕНТ
 | ПЕРВАЯ_СТРОКА_ПОСЛЕ_ИДЕНТ
 ;
отдельный_псевдоэлемент				/* как в:  :first-line */
 : ПЕРВАЯ_БУКВА
 | ПЕРВАЯ_СТРОКА
 ;
	/* Существует ограничение на id и отдельные_id заключающееся в том, что часть
	** после "#" должна быть допустимым значением ID HTML;
	** например, "#x77" является допустимым, а "#77" не допустимо.
	*/
id
 : ХЕШ_ПОСЛЕ_ИДЕНТ
 ;
отдельный_id
 : ХЕШ
 ;
объявление
 : свойство ':' выражн приор? 
 | /* пусто */				/* Предотвращает синтаксические ошибки... */
 ;
приор
 : ОБОЗН_ВАЖНОСТИ	 		/* !important */
 ;
выражн
 : термин [ термин оператора ]*
 ;
термин
 : унарный_оператор?
   [ ЧИСЛО | СТРОКА | ПРОЦЕНТ | ДЛИНА | EMS | EXS
   | ИДЕНТ | hexцвет | URL | RGB ]
 ;
	/* Существует ограничение на цвет, он должен иметь либо 3, либо 6
	** шестнадцатеричных цифр (т.е. [0-9a-fA-F]) после «#»;
	** например, «#000» допустимо, а «#abcd» не допустимо.
	*/
hexцвет
 : ХЕШ | ХЕШ_ПОСЛЕ_ИДЕНТ
 ;

Ниже приводится токенизатор, написанный в гибкой [16] нотации. Обратите внимание, что это предполагает гибкую 8-битную реализацию. Токенизатор нечувствителен к регистру (-i параметр гибкости в командной строке).

юникод		  \\[0-9a-f]{1,4}
latin1		  [¡-ÿ]
экранирование	  {юникод}|\\[ -~¡-ÿ]
симвстроки	  {экранирование}|{latin1}|[ !#$%&(-~]
начимен		  [a-z]|{latin1}|{экранирование}
симвимен	  [-a-z0-9]|{latin1}|{экранирование}
идент		  {начимен}{симвимен}*
имя		  {симвимен}+
d		  [0-9]
неимя		  [^-a-z0-9\\]|{latin1}
w		  [ \t\n]*
числ		  {d}+|{d}*\.{d}+
строка		  \"({симвстроки}|\')*\"|\'({симвстроки}|\")*\'

%x КОММЕНТАРИЙ
%s ПОСЛЕ_ИДЕНТ

%%
"/*"				{НАЧИНАЕТСЯ(КОММЕНТАРИЙ);}
<КОММЕНТАРИЙ>"*/"		{НАЧИНАЕТСЯ(0);}
<КОММЕНТАРИЙ>\n			{/* игнорируется */}
<КОММЕНТАРИЙ>.			{/* игнорируется */}
@import				{НАЧИНАЕТСЯ(0); вернёт ОБОЗН_ИМПОРТИРОВАНИЯ;}
"!"{w}important			{НАЧИНАЕТСЯ(0); вернёт ОБОЗН_ВАЖНОСТИ;}
{идент}				{НАЧИНАЕТСЯ(ПОСЛЕ_ИДЕНТ); вернёт ИДЕНТ;}
{строка}			{НАЧИНАЕТСЯ(0); вернёт СТРОКУ;}

{числ}				{НАЧИНАЕТСЯ(0); вернёт ЧИСЛО;}
{числ}"%"			{НАЧИНАЕТСЯ(0); вернёт ПРОЦЕНТ;}
{числ}pt/{неимя}		{НАЧИНАЕТСЯ(0); вернёт ДЛИНУ;}
{числ}mm/{неимя}		{НАЧИНАЕТСЯ(0); вернёт ДЛИНУ;}
{числ}cm/{неимя}		{НАЧИНАЕТСЯ(0); вернёт ДЛИНУ;}
{числ}pc/{неимя}		{НАЧИНАЕТСЯ(0); вернёт ДЛИНУ;}
{числ}in/{неимя}		{НАЧИНАЕТСЯ(0); вернёт ДЛИНУ;}
{числ}px/{неимя}		{НАЧИНАЕТСЯ(0); вернёт ДЛИНУ;}
{числ}em/{неимя}		{НАЧИНАЕТСЯ(0); вернёт EMS;}
{числ}ex/{неимя}		{НАЧИНАЕТСЯ(0); вернёт EXS;}

<ПОСЛЕ_ИДЕНТ>":"link		{вернёт ПСКЛАСС_ССЫЛКИ_ПОСЛЕ_ИДЕНТ;}
<ПОСЛЕ_ИДЕНТ>":"visited		{вернёт ПСКЛАСС_ПОСЕЩЁН_ССЫЛКИ_ПОСЛЕ_ИДЕНТ;}
<ПОСЛЕ_ИДЕНТ>":"active		{вернёт ПСКЛАСС_АКТИВ_ССЫЛКИ_ПОСЛЕ_ИДЕНТ;}
<ПОСЛЕ_ИДЕНТ>":"first-line	{вернёт ПЕРВАЯ_СТРОКА_ПОСЛЕ_ИДЕНТ;}
<ПОСЛЕ_ИДЕНТ>":"first-letter	{вернёт ПЕРВАЯ_БУКВА_ПОСЛЕ_ИДЕНТ;}
<ПОСЛЕ_ИДЕНТ>"#"{имя}		{вернёт ХЕШ_ПОСЛЕ_ИДЕНТ;}
<ПОСЛЕ_ИДЕНТ>"."{имя}		{вернёт КЛАСС_ПОСЛЕ_ИДЕНТ;}

":"link				{НАЧИНАЕТСЯ(ПОСЛЕ_ИДЕНТ); вернёт ПСКЛАСС_ССЫЛКИ;}
":"visited			{НАЧИНАЕТСЯ(ПОСЛЕ_ИДЕНТ); вернёт ПСКЛАСС_ПОСЕЩЁН_ССЫЛКИ;}
":"active			{НАЧИНАЕТСЯ(ПОСЛЕ_ИДЕНТ); вернёт ПСКЛАСС_АКТИВ_ССЫЛКИ;}
":"first-line			{НАЧИНАЕТСЯ(ПОСЛЕ_ИДЕНТ); вернёт ПЕРВАЯ_СТРОКА;}
":"first-letter			{НАЧИНАЕТСЯ(ПОСЛЕ_ИДЕНТ); вернёт ПЕРВАЯ_БУКВА;}
"#"{имя}			{НАЧИНАЕТСЯ(ПОСЛЕ_ИДЕНТ); вернёт ХЕШ;}
"."{имя}			{НАЧИНАЕТСЯ(ПОСЛЕ_ИДЕНТ); вернёт КЛАСС;}

url\({w}{строка}{w}\)					|
url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\)		{НАЧИНАЕТСЯ(0); вернёт URL;}
rgb\({w}{числ}%?{w}\,{w}{числ}%?{w}\,{w}{числ}%?{w}\)	{НАЧИНАЕТСЯ(0); вернёт RGB;}

[-/+{};,#:]			{НАЧИНАЕТСЯ(0); вернёт *yytext;}
[ \t]+				{НАЧИНАЕТСЯ(0); /* игнорировать пробельное пространство */}
\n				{НАЧИНАЕТСЯ(0); /* игнорировать пробельное пространство */}
\<\!\-\-			{НАЧИНАЕТСЯ(0); вернёт CDO;}
\-\-\>				{НАЧИНАЕТСЯ(0); вернёт CDC;}
.				{fprintf(stderr, "%d: Недопустимый символ (%d)\n",
				 lineno, *yytext);}

Приложение C: Кодировка

(Данное приложение является информативным, а не нормативным)

HTML-документы могут содержать любой из указанных выше 30,000 различных символов, определенных в Юникод. Многим документам необходимо всего лишь несколько сотен символов. Многие шрифты также содержат только лишь несколько сотен глифов. В сочетании с разделом 5.2 это приложение объясняет, как происходит подбор глифов шрифта и символов в документе.

Кодировка символов

Содержимое HTML-документа представляет собой последовательность символов и разметки. Для того, чтобы отправить его «по проводам», он кодируется в виде последовательности байт, используя одну из нескольких возможных кодировок. HTML-документ необходимо декодировать для нахождения символов. Например, в Западной Европе принято использовать 224-ый байт для a-с-грав-ударением (à), но в иврите, более распространено использование 224-ого байта для Алеф. В японском языке, значение байта, как правило, зависит от числа байт, которые предшествовали ему. В некоторых кодировках один символ кодируется двумя (или более) байтами.

АП знает, как декодировать байты, посмотрев на параметр «charset» в HTTP-заголовке. Обычными кодировками (значениями кодировки) являются «ASCII» (для английского языка), «ISO-8859-1» (для западной европы), «ISO-8859-8» (для иврита), «Shift-JIS» (для японского языка).

HTML [2][4], допускает около 30,000 различных символов, а именно символы, которые определены в Юникоде. Не многие документы будут использовать большое количество различных символов, и поэтому правильный выбор кодировки, как правило, создаёт ситуацию, при которой в документе используется только один байт на символ. Отдельные символы выходящие за пределы диапазона кодировки, всё ещё могут быть введены в виде числовых ссылок на символы: 'Π' всегда будет означать греческую прописную литеру Пи, независимо от того, какая кодировка используется. Обратите внимание на то, что это предполагает, что АПей необходимо быть готовым к встрече с любым символом Юникода, даже если они могут обрабатывать только несколько кодировок.

Кодировка шрифта

Шрифт не содержит символов, он содержит изображения символов, известные как глифы. Глифы, в виде контуров или растровых изображений, составляют собой конкретное представление символа. Явно или неявно, каждый шрифт имеет связанную с ним таблицу; таблица кодировки шрифта указывает каждому глифу, какой он представляет символ. В Type 1 шрифтах, таблица называется вектором кодирования.

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

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

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

Наборы шрифтов

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

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

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

BODY { font-family: Baskerville, Mincho, Symbol, serif }

Символы доступные в шрифте Baskerville (шрифт содержащий только латинские символы) будут взяты из этого шрифта, Японские символы будут взяты из Mincho, а математические символы будут заимствованы из Symbol. Любые другие символы (надеюсь) будут взяты из общего семейства шрифтов 'serif'. Семейство шрифтов 'serif' также будет использовано в случае, когда недоступны прочие шрифты.

Приложение D: Гамма-коррекция

(Данное приложение является информативным, а не нормативным)

Смотрите Учебник по Гамме в спецификации PNG [12], если вы ещё не знакомы с вопросами гаммы.

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

PC, использующие MS-Windows: нет
Unix, использующие X11: нет
Mac, использующие QuickDraw: применяется гамма 1.39 [13] (ColorSync-savvy приложения могут просто передать sRGB ICC профиль [14] в ColorSync для выполнения правильной коррекции цвета)
SGI, использующие X: применяется значение гаммы из /etc/config/system.glGammaVal (значение по умолчанию равно 1.70; приложения, работающие на Irix 6.2 или выше, могут просто передать sRGB ICC профиль в систему управления цветом)
NeXT, использующие NeXTStep: применяется гамма 2.22

«Применение гаммы» означает, что каждое из трёх значений ‒ R, G и B должно быть преобразовано в R'= R^гамма, G'=G^гамма, B'=B^гамма, перед передачей в ОС.

Это может быть сделано быстро путём построения 256-элементной таблицы подстановки создав вызов в браузере, таким образом:

for i := 0 to 255 do
  raw := i / 255;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

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

Приложение E: Применимость и расширяемость CSS1

(Данное приложение является информативным, а не нормативным)

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

замену визуальной разметки: HTML-расширения, например, «CENTER», «FONT» и «SPACER», легко заменяются таблицами стилей CSS1.
более элегантную разметку: вместо того, чтобы использовать элементы «FONT» для достижения популярного капительного стиля, достаточно одного объявления в таблице стилей. Сравните визуальную разметку:
```
<H1>H<FONT SIZE=-1>EADLINE</FONT></H1>
```
с таблицей стилей:
```
H1 { font-style: small-caps }

<H1>Headline</H1>
```
различные уровни интеграции: правила стиля CSS1 могут быть извлечены из внешних таблиц стилей, таблиц стилей содержащихся в элементе 'STYLE', или стилей вложенных в 'STYLE' атрибуты. Последний вариант обеспечивает простоту перехода от HTML-расширений.
новые эффекты: были добавлены некоторые новые визуальные эффекты для того, чтобы предложить пользователям новые игрушки. В эту категорию попадают типографские псевдоэлементы и дополнительные значения для свойства фона.
масштабируемость: CSS1 будет полезен на оборудовании, начиная от текстовых терминалов до цветных рабочих станций с высокой разрешающей способностью. Авторы могут написать одну таблицу стилей и быть уверенными в том, что предполагаемый стиль будет представлен наилучшим образом.

CSS1 не предлагает:

контроль за пикселями: CSS1 значения просты на уровне контроля, и, хотя сочетание фоновых изображений и стилизованного HTML является мощным, контроль на уровне пикселей не представляется возможным.
контроль автора: автор не может обеспечить использование определённой таблицы, он может только предполагать
язык макета: CSS1 не предлагает возможность создания нескольких столбцов с потоком текста, перекрывание фреймов и так далее.
богатый язык запросов по разбору дерева: CSS1 может искать только предков элементов в разбираемом дереве, в то время как другие языки таблиц стилей (например, DSSSL [6]) предлагают полный язык запросов.

Мы ожидаем расширения CSS в нескольких направлениях:

бумага: улучшенная поддержка печати HTML-документов
поддержка невизуальных медиа: работа находится в процессе добавления списка свойств и соответствующих значений для поддержки вывода речи и шрифта Брайля
названия цветов: поддерживаемый в настоящее время список может быть расширен
шрифты: более точные системы спецификации шрифта, как ожидается, будут дополнять существующие CSS1 свойства шрифта.
значения, свойства: мы ожидаем, что разработчики предложат дополнительные значения и свойства в добавок к уже существующему набору значений и свойств CSS1. Расширение в данном направлении является тривиальным для спецификации, но совместимость между различными АПей является проблемой
язык макета: поддержка двумерного макета в традициях настольных издательских пакетов.
другие ОТД: CSS1 имеет некоторые HTML-ориентированные части (например, особый статус 'CLASS' и 'ID' атрибутов), но их следует сделать также легко распространимыми и на другие ОТД.

Мы не ожидаем, что CSS превратиться в:

язык программирования

Приложение F: Изменения версии от 17 Декабря 1996

(Данное приложение является информативным, а не нормативным)

Данный документ представляет собой пересмотренный вариант Рекомендованной версии CSS1, которая была впервые опубликована 17 декабря 1996 года; приведённый ниже список описывает все изменения. При выборе альтернативной таблицы стилей «errata», будут выделены все изменения.

Мы хотели бы поблагодарить Komachi Yushi, Steve Byrne, Liam Quinn, Kazuteru Okahashi, Susan Lesch и Tantek Çelik за помощь в подготовке этой пересмотренной редакции.

Орфографические и типографские ошибки

опечатка1 [раздел 1.1] Предложение:
В в результате старые АПей будут игнорировать элемент 'STYLE', а его содержимое будет рассматриваться как часть тела документа, и отображаться как таковое.

было изменено на:

В результате старые АПей будут игнорировать элемент 'STYLE', а его содержимое будет рассматриваться как часть тела документа, и отображаться как таковое.
опечатка2 [раздел 1.6] Предложение:
Второй селектор соответствует соответствует всем элементам 'H1', которые имеют предка с классом 'reddish'.

было изменено на:

Второй селектор соответствует всем элементам 'H1', которые имеют предка с классом 'reddish'.
опечатка3 [раздел 2.1] Предложение:
Например, в таблицах стилей может быть указано, что свойству 'font-size' для 'active' ссылки следует иметь большее значение, что для 'visited' ссылки, но АП не обязательно динамически переформатировать документ, когда читатель выбирает 'visited' ссылку.

было изменено на:

Например, в таблицах стилей может быть указано, что свойству 'font-size' для 'active' ссылки следует иметь большее значение, чем для 'visited' ссылки, но АП не обязательно динамически переформатировать документ, когда читатель выбирает 'visited' ссылку.
опечатка4, опечатка5 [раздел 2.3-2.4] Опущенная кавычка была добавлена в 'vertical-align'.
опечатка6 [раздел 4] Была добавлена отсутствовавшая правая скобка.
опечатка7 [раздел 4.1] Была добавлена отсутствующая запятая.
опечатка8 [раздел 4.1.2] Текст:
«Если более одного свойства из этих трёх свойств имеет значение 'auto', и одним из этих свойств является 'width', чем остальные...»

был изменён на:

«Если более одного свойства из этих трёх свойств имеет значение 'auto', и одним из этих свойств является 'width', то остальные...»
опечатка9 [раздел 5.3.6] Слово «Примеры» было капитализировано.
опечатка10 [раздел 5.4.4] Была исправлена недописанная сущность («<длину&t;» на «<длину>»).
опечатка11 [раздел 5.5] Текст:
Свойства свойства поля устанавливают поле элемента.

был изменён на:

Свойства поля устанавливают поле элемента.
опечатка12 [раздел 5.5.25] Были удалены лишние кавычки.

Ошибки

ошибка1 [раздел 2.3] Ранее недопустимое объявление (font-style: small-caps) было заменено на допустимое.
ошибка2 [раздела 4] Это предложение:
CSS1 предполагает простую коробочную модель форматирования где каждый элемент представляется в виде одной или более прямоугольных коробок.

было заменено на:

CSS1 предполагает простую коробочную модель форматирования где каждый форматируемый элемент представляется в виде одной или более прямоугольных коробок.
ошибка3 [раздел 4.1] В этом предложении:
Верх является верхней частью объекта, включающей любые отступы, границы и поля; он определён только для встроенных и плавающих элементов, а не для неплавающих элементов блок-уровня.

слово «объекта» было заменено на «элемента», чтобы использовалась согласованная терминология.
ошибка4 [раздел 4.1.3] Было исправлено выравнивание пунктов списка.
ошибка5 [раздел 4.1.4] В примере и в указанном ниже предложении существует только один элемент P:
Обратите внимание, что поля элементов 'P' охватывают плавающий элемент 'IMG'.

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

Обратите внимание, что поле элемента 'P' охватывает плавающий элемент 'IMG'.
ошибка6, ошибка7 [раздел 4.5] Размер окна может влиять только на одну ось холста, либо на ширину либо на высоту.
ошибка8 [раздел 5.4.1] Текст внутри круглых скобок ссылался на свойство CSS1.
ошибка9 [раздел 5.4.1] Был исправлен пример для того, чтобы он соответствовал следующему абзацу.
ошибка10 [раздел 5.4.8] Раздел «Высота строк» был правильно идентифицирован как раздел 4.4, а не как раздел 4.7.
ошибка11 [раздел 5.5] Это предложение:
Свойство 'margin' устанавливает границу для всех четырёх сторон, а прочие свойства полей устанавливают поля только с соответствующих сторон.

было исправлено на:

Свойство 'margin' устанавливает поле для всех четырёх сторон, а прочие свойства полей устанавливают поля только с соответствующих сторон.
ошибка12, ошибка13, ошибка14, ошибка15, ошибка16, ошибка17, ошибка18, ошибка19, ошибка20, ошибка22 [раздел 5.5.1-5.5.10] Процентные значения рассчитываются относительно ширины ближайшего предка блок-уровня, а не родительского элемента (который может быть встроенным), как указывалось ранее.
ошибка21 [раздел 5.5.10] Сокращённые свойства не имеют начальных значений, в результате чего было исправлено ранее указанное значение '0'.
ошибка23 [раздел 5.5.15] Последнее правило в указанном ранее примере содержало недопустимое значение ('none').
ошибка24 [раздел 5.6.6] Было исправлено значение, определённое в свойстве 'list-style', но при этом не было произведено каких-либо синтаксических или семантических изменений.
ошибка25 [раздел 7.1] Были исправлены числовые ссылки на символ, используемые для кодирования греческого слова «kouros».
ошибка26 [Приложение А] Эти типы элементов были добавлены в список селекторов, прикреплённых к объявлению 'display: block': FORM DL.
ошибка27 [Приложение B] Была исправлена неработающая ссылка на раздел 7.
ошибка28 [Приложение D] Этот текст:
«Применение гаммы» означает, что каждое из трёх значений ‒ R, G и B должно быть преобразовано в R'= R^гамма, G'=G^гамма, G'=B^гамма, перед передачей в ОС.

был исправлен на:

«Применение гаммы» означает, что каждое из трёх значений ‒ R, G и B должно быть преобразовано в R'= R^гамма, G'=G^гамма, B'=B^гамма, перед передачей в ОС.

Структура и Организация

Было добавлено приложение F, в котором перечислены все изменения, начиная с версии от 17 Декабря 1996.
Абзац в разделе статуса был добавлен для информирования читателей о том, что это переработанная версия.
Была изменена таблица стилей.
Ссылка на будущую HTML-спецификацию с поддержкой таблиц стилей была заменена ссылкой на HTML 4.0.
Были обновлены URL-адреса в ссылках, а так же были удалены неработающие ссылки.
Была пересмотрена основная HTML-разметка.

Данная версия:	http://www.w3.org/TR/2008/REC-CSS1-20080411
Последняя версия:	http://www.w3.org/TR/CSS1
Предыдущая версия:	http://www.w3.org/TR/1999/REC-CSS1-19990111
Авторы:	Håkon Wium Lie (howcome@w3.org) Bert Bos (bert@w3.org)

Каскадные Таблицы Стилей, 1 уровень

Рекомендация W3C от 17 Дек 1996, редакция от 11 Апр 2008

Статус данного документа

Орфографические и типографские ошибки

Ошибки

Структура и Организация