Опубликован: 06.06.2006 | Доступ: свободный | Студентов: 3910 / 694 | Оценка: 4.34 / 4.02 | Длительность: 21:23:00
Лекция 4:

Синтаксис CSS2 и базовые типы данных

Счётчики

Счётчики обозначаются идентификаторами (см. свойства 'counter-increment' и 'counter-reset'). Чтобы обратиться к значению счётчика, используется обозначение 'counter(<identifier>)' или 'counter(<identifier>, <list-style-type>)'. Стиль по умолчанию - 'decimal'.

Чтобы обратиться к последовательности вложенных счётчиков с одним именем, обозначение будет: 'counters(<identifier>, <string> )' или 'counters(<identifier>, <string>, <list-style-type>)'. См. "Генерируемое содержимое, автоматическая нумерация и списки" в главе о "Генерируемое содержимое, автоматическая нумерация и списки" .

В CSS2 к значениям счётчиков можно обратиться только из свойства 'content'. Заметьте, что 'none', это возможный <list-style-type>: 'counter(x, none)' рассматривается как пустая строка.

Вот таблица стилей, нумерующая параграфы (P) для каждой главы (H1). 
Параграфы нумеруются римскими цифрами с последующими точкой и пробелом: 
P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}

Счётчики вне "Генерируемое содержимое, автоматическая нумерация и списки" какого-либо 'counter-reset', считаются сброшенными в 0 в 'counter-reset' корневого элемента.

Цвета

<color> это или предопределённое слово, или числовая спецификация RGB.

Список названий цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white и yellow. Эти 16 цветов определены в HTML 4.0 ([HTML40]). Пользователь может дополнительно специфицировать ключевые слова, соответствующие цветам, используемым определёнными объектами в среде пользователя. Дополнительную информацию см. в "Цвета и фон" .

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

Формат значения RGB в функциональной записи - 'rgb(' за которым идёт список разделённых запятыми трёх числовых значений (или трёх целых, или трёх процентных) с последующей ')'. Целое значение 255 соответствует 100% и F или FF в 16-ричной записи: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Пробельные символы допускаются вокруг числовых значений.

Все цвета RGB специфицированы в цветовом пространстве sRGB (см. "Приложение F. Индекс свойств" ). ПА могут различаться в том, насколько точно они представляют эти цвета, но использование sRGB предоставляет недвусмысленное и объективно измеряемое определение того, каким должен быть цвет, соответствующий международным стандартам (см. "Приложение F. Индекс свойств" ).

Соответствующие ПА могут ограничивать свои возможности вывода цвета для выполнения коррекции гаммы цветов. sRGB специфицирует гамму дисплея в 2.2 от специфицированных условий просмотра. ПА должны уточнить цвет, заданный в CSS, так чтобы в сочетании с 'натуральной' гаммой дисплея выводного устройства воспроизводилась эффективная гамма дисплея в 2.2. См. дополнительные детали в разделе "Цвета и фон" . Обратите внимание, что воздействие производится только на цвета, специфицированные в CSS; например, от изображений ожидается сопровождающая их собственная цветовая информация.

Значения вне гаммы устройства должны усекаться: значения red, green и blue обязаны измениться, чтобы войти в рамки диапазона, поддерживаемого устройством. Для типичного CRT-монитора, чья гамма устройства - та же самая, что и sRGB, следующие три правила эквивалентны:

EM { color: rgb(255,0,0) }       /* диапазон целых 0 - 255 */
EM { color: rgb(300,0,0) }       /* усекается до rgb(255,0,0) */
EM { color: rgb(255,-10,0) }     /* усекается до rgb(255,0,0) */
EM { color: rgb(110%, 0%, 0%) }  /* усекается до rgb(100%,0%,0%) */
Другие устройства, такие как принтеры, имеют гаммы, отличные от sRGB; 
некоторые цвета вне диапазона 0..255 sRGB будут презентабельными 
(в пределах гаммы устройства), в то время как другие цвета в пределах 
диапазона 0..255 sRGB будут вне гаммы устройства и будут, таким образом, усечены.
Примечание. Хотя цвета могут добавить значительное количество информации в документы и сделать их более читабельными, необходимо учитывать, что определённые сочетания цветов могут вызвать проблемы у людей, страдающих нарушениями восприятия цвета. Если Вы используете фоновое изображение или устанавливаете цвет фона, подбирайте, пожалуйста, подходящий цвет переднего плана.