создание и продвижение сайта (вбиваю в ТОП-10, как гвозди)Настройка и сопровождение платной рекламы яндекс.директ

CSS2. Спецификация. Рекомендации W3C. 1998

предыдущий следующий содержание свойства индекс


18 Интерфейс пользователя

Содержание

  • 18.1 Курсоры: свойство 'cursor'
  • 18.2 Предпочтительные цвета пользователя
  • 18.3 Предпочтительные шрифты пользователя
  • 18.4 Динамические контуры: свойство 'outline'
  • 18.4.1 Контуры и фокус
  • 18.5 Увеличение

    18.1 Курсоры: свойство 'cursor'

    'cursor'

    Значение:[[<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
    Применяется:ко всем элементам
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный, интерактивный

    Это свойство специфицирует тип курсора указательного устройства.

    Значения имеют следующий смысл:

    auto пользовательский агент (ПА) определяет курсор на базе текущего контекста.

    crosshair простой крест (например, увеличение знака "+" с помощью коротких отрезков).

    default курсор по умолчанию, зависящий от платформы. Часто отображается стрелкой.

    pointer курсор - указатель на ссылку.

    move обозначает то, что перемещается.

    e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize обозначают перемещение какого-либо края. Например, курсор 'se-resize' используется, если передвижение начинается в юго-восточном углу бокса.

    text обозначает текст, который может быть выделен. Часто отображается как вертикальная черта I.

    wait обозначает, что программа занята и пользователь должен подождать. Часто отображается как (песочные) часы.

    help для объекта под курсором имеется вспомогательная информация. Часто отображается как знак вопроса или воздушный шар.

    <uri> ПА получает курсор из ресурса, обозначенного в URI. Если ПА не может обработать 1-йкурсор из списка курсоров, он должен попытаться обработать 2-й, и т.д. Если ПА не может обработать ни 1 курсор, определённый пользователем, он обязан использовать общий курсор в конце списка.

    Пример:

    p{cursor:url(my>ing.cur"),url(second.csr"),text}
    

    18.2 Предпочтительные цвета пользователя

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Menu Фон меню.

    MenuText Текст меню.

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

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

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

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

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

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

    Window Фон окна.

    WindowFrame Кадр окна.

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

    Пример:

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

    p{color:windowtext;background:window}

    18.3 Предпочтительные шрифты пользователя

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

    18.4 Динамические контуры: свойство 'outline'

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

  • Контуры не занимают пространство.
  • Контуры могут не быть прямоугольными.

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

    'outline'

    Значение:[<'outline-color'>||<'outline-style'>||<'outline-width'>]|inherit
    Начальное:см. конкретные свойства
    Применяется:ко всем элементам
    Наследуется:нет
    Процентное:N/A
    Носитель:визуальный, интерактивный

    'outline-width'

    Значение:<border-width>|inherit
    Начальное:medium
    Применяется:ко всем элементам
    Наследуется:нет
    Процентное:N/A
    Носитель:визуальный, интерактивный

    'outline-style'

    Значение:<border-style>|inherit
    Начальное:none
    Применяется:ко всем элементам
    Наследуется:нет
    Процентное:N/A
    Носитель:визуальный, интерактивный

    'outline-color'

    Значение:<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:>ick}

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

    18.4.1 Контуры и фокус

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

    Пример:

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

    :focus{outline:>ick solid black}:active{outline:>ick solid red}

    18.5 Увеличение

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

    При увеличении страницы ПАгенты должны выдерживать соотношения между позиционированными элементами.

    предыдущий следующий содержание свойства индекс

  • Отвечу на любые вопросы. С уважением, Дмитрий Владимирович.

    Ваше письмо×
    Free Web Hosting