CSS / 13. Стили пользовательского интерфейса

Основная часть CSS связана со стилевым оформлением документов, но CSS предлагает также массу полезных инструментов оформления интерфейсов. Например, разработчики Mozilla создали его интерфейс (и интерфейс многих его клонов) с помощью расширенного языка пользовательского интерфейса (eXtensible User interface Language – XUL). CSS и CSS-подобные определения лежат в основе средств XUL, реализующих представления навигационных кнопок, вкладок, диалоговых окон, окон состояния и других частей интерфейса.
Статьи раздела '13. Стили пользовательского интерфейса':
Графические курсоры
И последнее, но наиболее занимательное: возможность вызывать специальные курсоры. Это делается с помощью значения URL: a.external {cursor: url(globe.cur), pointer;} По этому правилу агент пользователя загружает файл globe.cu...
Задание стиля контура
Основной характеристикой контура, как и рамки, является его стиль, который задается с помощью свойства outline-style. Список ключевых слов задания стиля преимущественно аналогичен ключевым словам стилей рамки, и обеспечиваемые ими...
Изменение курсора
CSS2 позволяет изменять значок курсора, что намного упрощает создание веб-приложений, функциональность которых аналогична настольным приложениям операционной системы. Например, над ссылкой на файлы справки курсор мог бы превратить...
Контуры
CSS2 вводит последний основной элемент стилевого оформления пользовательского интерфейса: контуры. Контур немного похож на рамку, но между ними существует два главных отличия. Во-первых, контуры не участвуют в потоке документа, в...
Курсоры
Курсор – еще одна важная часть пользовательского интерфейса (в спецификации CSS его называют «указателем»), который управляется такими устройствами, как мышь, координатно-указательное устройство, графический планшет или даже оптич...
Курсоры перемещения
Часто значение move дает результат, аналогичный crosshair. Значение move применяется там, где автору надо показать, что элемент экрана может быть перемещен, и часто его визуальное представление генерируется как жирное перекрестие ...
Ожидание и ход выполнения
И значение wait, и значение progress показывают, что программа занята выполнением. Однако они не идентичны: wait означает, что пользователь должен ждать до тех пор, пока программа освободится, тогда как progress показывает, что по...
Окрашивание контура
Поскольку можно задавать стиль и ширину, есть смысл в существовании свойства outline-color, позволяющего задавать цвет контура. Здесь и проявляется наиболее занятное различие между рамками и контурами: по умолчанию применяется клю...
Предоставление справки
Когда автор хочет показать, что пользователь может получить некоторую справку, применяется значение help. Два самых распространенных представления help – знак вопроса и стрелка с маленьким вопросом рядом. Значение help может быть ...
Сведение воедино
Свойство outline, как и свойство border для рамок, есть сокращенная форма для одновременного задания стиля, ширины и цвета контура. Как и другие варианты сокращенной записи, outline сводит воедино несколько свойств. Для него харак...
Системные цвета
На момент написания данной книги рабочий проект модуля CSS3 «Цвет» рекомендует вместо ключевых слов системных цветов применять новое свойство appearance. Аналогично CSS2.1 не рекомендует применять эти ключевые слова, т. к. ожидают...
Системные шрифты
Скажем, вы создали элемент, функционирующий как кнопка (с помощью JavaScript, например).Делая элемент управления похожим на кнопку, мы реализуем ожидания пользователя о внешнем виде элемента и таким образом делаем его более удобн...
Системные шрифты и цвета
В некоторых случаях вы хотите, чтобы ваш документ максимально точно копировал внешний вид компьютерной среды пользователя. Наглядный пример: вы создаете веб-приложение и хотите, чтобы веб-компонент выглядел как часть операционной ...
Указывающие курсоры и курсоры выделения
Значение pointer соответствует курсору, который появляется, когда пользователь проводит курсором по гиперссылке. Это поведение можно описать даже для документов HTML: a[href] {cursor: pointer;} Свойство cursor позволяет прик...
Ширина контура
Создав контур и задав его стиль, неплохо при помощи свойства out-line-width определить (вы догадались) ширину контура. Список ключевых слов должен быть хорошо знаком тем, кто задавал ширину рамок. Единственное настоящее отличие ме...

Страницы: 1