18. Пользовательский интерфейс |
Содержание
Значение: | [ [<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 ] ] | inherit |
По умолчан.:; | auto |
Применимо:; | все элементы |
Наследуется: | да |
Процент: | неопр. |
Отображ: | визуальное, интерактивное |
Данное свойство определяет тип курсора, который должен изображаться указывающим устройством. Значения могут быть определены следующими способами::
P { cursor : url("mything.cur"), url("second.csr"), text; }
В дополнение к имеющимся возможностям устанавливать заданные значения цвета для текста, обоев и т.п., CSS2 позволяет автору задавать цвета таким образом, чтобы с ними сочеталось и пользовательское графическое окружение. Стилевые правила, которые принимаются в расчет установками пользователя, предполагают следующие цели:
Набору значений, определяемых для системных цветов, суждено быть ограниченным. Для систем, которые не имеют соответствующих значений, заданное значение должно быть приведено к ближайшему атрибуту или к цвету по умолчанию.
Ниже приведены перечни дополнительных значений атрибутов CSS, относящихся к цвету, и их основной смысл. Любое свойтво цвета (напр., 'color' или 'background-color') может быть взято из указанных наименований. Хотя наименования регистронезависимые, рекомендуется следовать нижеприведенному указанию заглавных букв, чтоб делать наименования более разборчивыми.
(Прим.перев. Наряду с переводом, в пояснениях сохранены также оригинальные англоязычные названия элементов интерфейса, более привычные для части разработчиков)
Например, чтобы задать те же цвета изображения и обоев параграфа, что и для установок окна пользовательского интерфейса, напишите следующее:
P { color: WindowText; background-color: Window }
Так же, как и для цветов, авторы могут определять шрифты, как зависимые от системных настроек пользователя. Детали см. свойство 'font' .
Время от времени авторам таблиц стилей может понадобиться создавать контуры вокруг визуальных объектов - таких, как кнопки, активные поля форм, карты образов, и т.п., чтобы сделать их выделенными. CSS2 отличает контуры от границ следующими путями:
Свойства контуров определяют стили таких динамических контуров.
Значение: | [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit |
По умолчанию: | см. индивидуальные свойства |
Применение: | все элементы |
Наследование: | нет |
Процент: | неопр. |
Отображение: | визуальное, интерактивное |
Значение: | <border-width> | inherit |
По умолчанию: | medium |
Применение: | все элементы |
Наследование: | no |
Процент: | N/A |
Отображение: | визуальное, интерактивное |
Значение: | <border-style> | inherit |
По умолчанию: | none |
Применение: | все элементы |
Наследование: | нет |
Процент: | неопр |
Отображение: | визуальное, интерактивное |
Значение: | <color> | invert | inherit |
По умолчанию: | invert |
Применение: | все элементы |
Наследование: | нет |
Проценты: | неопр |
Отображение: | визуальное, интерактивное |
Контур, созданный с помощью свойств контура, прорисовывается "над" полем, т.е. контур всегда сверху и не влияет на позицию или размер данного поля или других полей. Следовательно, показ или подавление контуров не вызывает "перетекания".
Контур отрисовывается только снаружи границы края.
Контуры могут быть непрямоугольными. К примеру если элемент имеет перелом на пересечении нескольких линий, то контур - это минимальный контур, включающий все поля элемента. В отличие от границ, контур не может быть окрыт у начала или конца поля, а всегда полностью замкнут.
Свойство '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 }
Скрипты могут быть использованы для динамического изменения ширины контура, не вызывая смещения элементов.
Графический интерфейс пользователя может использовать контуры вокруг элемента, чтобы указать пользователю, какой элемент страницы находится в фокусе. Эти контуры дополняют границы и включение и выключение контуров не должно приводить к смещению элементов. Фокус является предметом действий пользователя над документом (напр. для ввода текста, выбора кнопки и т.п.) UA, поддерживающие интерактивную группу отображения должны поддерживать путь, где ложится фокус, а также представлять сам фокус. Это может быть осуществлено с помощью динамических контуров в сочетании с псевдо - классом :focus .
Например, чтобы нарисовать тонкую черную линию вокруг элемента, когда он в фокусе, и тонкую красную, когда он активен, можно применить следующие правила:
:focus { outline: thick solid black } :active { outline: thick solid red }
Группа разработчиков CSS полагает, что увеличение документа или его части не должна определяться с помощью таблиц стилей. UA могут поддерживать такое увеличение разными способами (т.е. более крупными изображениями, более сильным звуком и т.п.).
Увеличивая изображение, UA должен сохранять взаимосвязь между позиционируемыми элементами. Например, комикс может быть скомпонован из изображений с наложенными текстовыми элементами. Увеличивая такую страницу, UA должен удерживать текст в пределах изображений выносок.
Copyright (c) 1997-1999 ВебКлуб Email: webclub@webclub.ru Оригинальная идея Андрей Новиков |