Содержание
| Значение: | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit |
| Начальное значение: | auto |
| Область применения: | все элементы |
| Наследование: | да |
| Процентное задание: | Н/Д |
| Устройства: | устройства визуального форматирования, интерактивные устройства |
| Вычисляемое значение: | как определено, за исключением того, что любые относительные URL преобразуются в абсолютные |
Данное свойство определяет тип курсора, используемого при работе с указывающим устройством. Значения имеют следующий смысл:
:link,:visited { cursor: url(example.svg#linkcursor), url(hyper.cur), pointer }
Данный пример устанавливает в качестве курсора для всех гиперссылок (и для посещенных и для непосещенных) внешний SVG-курсор. Агенты пользователей, не поддерживающие SVG-курсоры, просто переключаться на следующее значение и попытаются использовать курсор "hyper.cur". Если не поддерживается также и этот формат курсора, то агент пользователя перейдет к следующему значению и просто представит курсор 'pointer'.
Примечание. Системные цвета нежелательны в Цветовом модуле CSS3.
Кроме использования заранее определенных значений цветов для текста, фона и т.п., CSS2 предоставляет набор именованных значений цветов, который позволяет авторам определять цвета в такой форме, которая подразумевает их интеграцию в графическую среду операционной системы.
Для системы, в которой отсутствует соответствующее значение, заданное значение следует сопоставить с ближайшим к нему системным значением, или цветом, используемым по-умолчанию.
Ниже перечислены дополнительные значения для связанных с цветом свойств CSS, и их семантика. Любое свойство, используемое при настройке цветов (например, 'color' или 'background-color'), может принимать одно из следующих имен. Несмотря на независимость от регистра, рекомендуется соблюдать используемое в них сочетание заглавных и строчных букв, делающее данные имена более разборчивыми.
Например, следующее правило позволяет использовать одинаковые цвета для оформления элементов переднего и заднего плана и в абзаце и в пользовательском окне:
p { color: WindowText; background-color: Window }
Как и для цветов, авторы могут задавать шрифты таким образом, чтобы использовать системные ресурсы пользователя. Более подробную информацию можно получить в описании свойства 'font'.
Иногда авторам таблиц стилей необходимо акцентировать внимание на некотором визуально отображаемом объекте, например, на кнопке, активном поле формы, месте для графического объекта и т.д. В CSS 2.1 отличие контура от границ состоит в следующем:
Стилем этих динамических контуров управляют соответствующие свойства.
| Значение: | [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit |
| Начальное значение: | см. каждое свойство в отдельности |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | Н/Д |
| Устройства: | устройства визуального форматирования, интерактивные устройства |
| Вычисляемое значение: | см. каждое свойство в отдельности |
| Значение: | <ширина границы> | inherit |
| Начальное значение: | medium |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | Н/Д |
| Устройства: | устройства визуального форматирования, интерактивные устройства |
| Вычисляемое значение: | абсолютная длина; '0' если стиль границ – 'none' |
| Значение: | <стиль границы> | inherit |
| Начальное значение: | none |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | Н/Д |
| Устройства: | устройства визуального форматирования, интерактивные устройства |
| Вычисляемое значение: | как определено |
| Значение: | <цвет> | invert | inherit |
| Начальное значение: | invert |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | Н/Д |
| Устройства: | устройства визуального форматирования, интерактивные устройства |
| Вычисляемое значение: | как определено |
Контур, созданный с использованием свойств контура, выводится "над" блоком, т.е. всегда находится поверх него и не влияет на расположение и размеры данного блока или любых других блоков. Поэтому отображение или удаление контуров не приводит к переформатированию или переполнению страницы.
Контур выводится непосредственно за пределами края границы.
Контуры могут иметь непрямоугольную форму. Например, если элемент разбит на несколько строк, то контур строится, исходя из минимума, необходимого для того, чтобы вместить все порожденные элементом блоки. В противоположность границам контуры никогда не остается разорванными в начале или в конце линейного блока, но если возможно, то они всегда замкнуты.
Свойство 'outline-width' принимает те же значения, что и свойство 'border-width'.
Свойство 'outline-style' принимает те же значения, что и свойство 'border-style', за исключением значения 'hidden', недопустимого для стиля контура.
Значение свойства 'outline-color' принимает все цвета, так же как ключевое слово 'invert'. 'Invert' осуществляющее инверсию цветов, используемых для отображения пикселов на экране. Этот традиционный прием используется, для того чтобы независимо от цвета фона были всегда видны акцентирующие границы.
Соответствующие агенты пользователей могут игнорировать значение 'invert' на платформах, не поддерживающих инверсию цветов, используемых для отображения пикселов на экране. Если агент пользователя не поддерживает значение 'invert', тогда начальное значение свойства 'outline-color' равно значению свойства 'color', аналогично начальному значению свойства 'border-top-color'.
Свойство 'outline' — это стенографическое свойство, оно устанавливает значения для всех трех свойств 'outline-style', 'outline-width' и 'outline-color'.
Примечание.Контуры выглядят одинаково со всех сторон. В отличие от границ, у них нет свойства 'outline-top' или 'outline-left'.
В настоящей спецификации не определено, как прорисовываются несколько наложенных друг на друга контуров, или как прорисовываются контуры для блоков, частично затененных другими элементами.
Примечание. Т.к. контур не влияет на форматирование (т.е. для него не резервируется место в блочной модели), то он с легкостью может накладываться на другие элементы страницы.
Ниже приведен пример прорисовки толстого контура вокруг элемента BUTTON:
button { outline-width : thick solid}
Для динамического изменения толщины контура без необходимости переформатирования страницы можно использовать скрипты.
В графическом интерфейсе пользователя контуры могут использоваться вокруг элементов страницы, на которых располагается фокус. Эти контуры выступают в роли дополнения к границам, так что их вывод или удаление не должны приводить к переформатированию документа. Фокус представляет собой часть процесса взаимодействия пользователя с документом (например, для ввода текста, выбора кнопки и т.д.). Агенты пользователей, поддерживающие группу интерактивных устройств, должны отслеживать местоположение фокуса и должны предоставлять средства для его формирования. Это может быть сделано путем использования динамических контуров в сочетании с псевдоклассом :focus.
Например, для того, чтобы всякий раз, когда некоторый элемент находится в фокусе или активизирован, вокруг него отображалась толстая линия черного или красного цвета, соответственно, можно использовать следующие правила:
:focus { outline: thick solid black }
:active { outline: thick solid red }
Группа разработчиков CSS считает, что увеличение документа или его отдельных частей не следует описывать посредством таблиц стилей. Агенты пользователей могут поддерживать эту процедуру другими способами (например, с помощью более крупных изображений, более громких звуков и т.д.)
При увеличении страницы агент пользователя должен сохранять связи между позиционированными элементами. В качестве примера можно рассмотреть страницу комиксов, составленную из изображений с наложенными текстовыми элементами. При ее увеличении агенту пользователя следует сохранить текст в пределах каждого кружка, в который заключены слова изображенного в комиксе персонажа.