Евгений Резниченко - Спецификация CSS2

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

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

Далее дан список дополнительных значений для относящихся к цвету атрибутов CSS и их основной смысл. Любое свойство цвета (например, 'color' или 'background-color') может иметь одно из следующих названий. Хотя они и нечувствительны к регистру, рекомендуется использовать смешанную капитализацию, как показано ниже, чтобы сделать названия более понятными.

ActiveBorder

Рамка активного окна.

ActiveCaption

Заголовок активного окна.

AppWorkspace

Цвет фона многодокументного интерфейса.

Background

Фон рабочего стола.

ButtonFace

Цвет переднего плана 3-мерных элементов.

ButtonHighlight

Тёмная тень для 3-мерных элементов (для краёв, выступающих из светлой основы).

ButtonShadow

Цвет тени для 3-мерных элементов.

ButtonText

Текст кнопки.

CaptionText

Текст заголовка, бокса и в боксе прокручиваемого списка.

GrayText

Серый ("недоступен") текст. Это цвет установлен в #000 на тот случай, если текущий дисплей не поддерживает сплошной серый цвет.

Highlight

Объект(ы), выделенный в элементе управления.

HighlightText

Текст объекта(ов), выделенного в элементе управления.

InactiveBorder

Рамка неактивного окна.

InactiveCaption

Заголовок неактивного окна.

InactiveCaptionText

Цвет текста неактивного заголовка.

InfoBackground

Цвет фона элементов подсказки.

InfoText

Цвет текста элементов подсказки.

Menu

Фон меню.

MenuText

Текст меню.

Scrollbar

Серая область прокрутки.

ThreeDDarkShadow

Тёмная тень для 3-мерных элементов дисплея.

ThreeDFace

Цвет переднего плана для 3-мерных элементов дисплея.

ThreeDHighlight

Цвет подсветки для 3-мерных элементов дисплея.

ThreeDLightShadow

Светлый цвет для 3-мерных элементов дисплея (для краёв, выступающих из светлой основы).

ThreeDShadow

Тёмная тень для 3-мерных элементов дисплея.

Window

Фон окна.

WindowFrame

Кадр окна.

WindowText

Текст в окнах.

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

P { color: WindowText; background-color: Window }

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

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

1 Контуры не занимают пространство.

2 Контуры могут не быть прямоугольными.

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

'outline'

Значение: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit

Начальное: см. конкретные свойства

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный, интерактивный

'outline-width'

Значение: | inherit

Начальное: medium

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный, интерактивный

'outline-style'

Значение: | inherit

Начальное: none

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный, интерактивный

'outline-color'

Значение: | invert | inherit

Начальное: invert

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный, интерактивный

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

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

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

Свойство 'outline-width' принимает те же значения, что и 'border-width'.

Свойство 'outline-style'принимает те же значения, что и 'border-style', за исключением 'hidden', который не является допустимым стилем контура.

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

Свойство 'outline'это сокращённое свойство, устанавливающее все три: 'outline-style' , 'outline-width' и 'outline-color' .

Обратите внимание, что контур одинаков на всех сторонах. В отличие от рамок, свойства 'outline-top' или 'outline-left' отсутствуют.

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

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

Прорисовка толстого контура вокруг элемента BUTTON:

BUTTON { outline-width : thick }

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

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

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

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