Каскадные таблицы стилей (CSS)
Адаптация интерфейса
Таблицы стилей CSS имеют возможность создания стилей, автоматически адаптирующихся к пользовательской системе. Для этого в них реализовано определение пользовательских системных установок цвета и шрифтов, а также применение этих значений к любому из элементов web-страницы, который может использовать значения color и font. Для определения пользовательских настроекиспользуется набор ключевых слов.
В этой таблице приведен список ключевых слов для определения пользовательских цветов и примеры их применения.
| Цвета | значение | описание |
|---|---|---|
| activeborder | Цвет границы активного окна. | |
| activecaption | Цвет заголовка активного окна. | |
| appworkspace | Цветмультидокументного фона. | |
| background | Цвет фона рабочего стола. | |
| buttonface | "Лицевая" сторона объемных элементов. | |
| buttonhighlight | Насыщенная тень объемных элементов. | |
| buttonshadow | Цвет тени объемных элементов. | |
| buttontext | Цвет текста на кнопках. | |
| captiontext | Цвет текста в заголовках. | |
| graytext | Отключенный (недоступный) текст. | |
| highlight | Выделение объекта элемента управления. | |
| highlighttext | Выделение текста элемента управления. | |
| inactiveborder | Цвет границы неактивного окна. | |
| inactivecaption | Цвет заголовка неактивного окна. | |
| inactivecaptiontext | Цвет текста в неактивном заголовке. | |
| infobackground | Цвет фона всплывающей подсказки. | |
| infotext | Цвет текста всплывающей подсказки. | |
| menu | Цвет фона меню. | |
| menutext | Цвет текста в меню. | |
| scrollbar | Цвет полосы прокрутки. | |
| threeddarkshadow | Темная тень объемных элементов. | |
| threedface | "Лицевая" сторона объемных элементов. | |
| threedhighlight | Цвет выделения объемных элементов. | |
| threedlightshadow | Светлый цвет тени объемных элементов. | |
| threedshadow | Насыщенная тень объемных элементов. | |
| window | Цвет фона окна. | |
| windowframe | Цвет рамки окна. | |
| windowtext | Цвет текста в окне. |
Синтаксис: селектор {color: background; }
Пример: текст имеет цвет фона Вашего рабочего стола
Применяяправила стилей, которые используют настройки пользователя, можно добиться следующих преимуществ: во-первых, это позволяет создавать страницы, с интерфейсом, отвечающим требованиям и вкусу пользователя, а во-вторых позволяет создавать более доступные страницы, т.к. настройки пользователя могут быть связаны с их физическими ограничениями. Значение, которое отсутствует в системе, при этом будет заменено ближайшим к нему атрибутом системы или цветом, используемым по умолчанию.
В этой таблице приведен список ключевых слов для определения пользовательских шрифтов и примеры их применения.
| Системные шрифты | значение | описание |
|---|---|---|
| Шрифт | caption | Шрифт, используемый в заголовках кнопок и т.д. |
| Шрифт | icon | Шрифт, используемый в иконках. |
| Шрифт | menu | Шрифт, используемый в меню. |
| Шрифт | messagebox | Шрифт, используемый в диалогах и т.д. |
| Шрифт | smallcaption | Шрифт, используемый в малых элементах. |
| Шрифт | statusbar | Шрифт, используемый в статусной строке. |
Синтаксис:селектор {font: icon; }
