SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

Взаимодействие стилей с ОС и устройствами

В этой глааве:

  1. Системные переменные
  2. Курсоры в CSS
  3. Контуры
  4. Типы носителя

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

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

Системные переменные

Поддерживающие CSS браузеры могут выводить документы на основе стилей оформления, имеющихся в ОС посетителя страницы. В CSS 2 предусмотрено использование двух категорий – цветов и шрифтов. Чтобы лучше представить себе, что это за цвета и шрифты, откройте настройки оформления вашей ОС (рис. 3.22).

Настройки оформления в Windows XP

Рис. 3.22. Настройки оформления в Windows XP

Таким образом, использование системных настроек для оформления позволяет добиться создания страниц, похожих по стилю оформления на обычные программы. Это может быть полезным, например, при разработке стилей для пользовательского Web-интерфейса клиент-серверных приложений.

Все допустимые в CSS 2/2.1 значения для цвета приведены в таблице 3.11, а значения шрифтов – в таблице 3.12.

Таблица 3.11. Системные цвета (допустимые значения для свойства color)
ЗначениеТип цвета в операционной системе
ActiveBorderЦвет границы активного окна
ActiveCaptionЦвет заголовка активного окна
AppWorkspaceЦвет фона MDI-окна
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Цвет текста в окне

Следует так же отметить, что все приведенные в таблице 3.11 значения являются самодостаточными, и влияют на все параметры отображения шрифта. Иначе говоря, если для свойства font указано одно из системных значений, то никаких других значений (стиля, гарнитуры) указывать нельзя.

Таблица 3.12. Системные шрифты (допустимые значения для свойства font)
ЗначениеСоответствующий элемент в оформлении ОС
captionШрифт, используемый для заголовков элементов управления (кнопок, выпадающих меню и т.д.)
iconШрифт, используемый для обозначения пиктограмм
menu Шрифт, используемый в меню (например, в выпадающих меню и списках меню)
message-boxШрифт, используемый в диалоговых окнах
small-captionШрифт, используемый для обозначения небольших элементов управления
status-barШрифт, используемый в панелях, описывающих статус окон

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

div.title {font: caption; color: CaptionText; background: ActiveCaption;}

Пример такого заголовка, а заодно и варианты вывода всех системных шрифтов и цветов можно посмотреть в файле Part_3\Misc\system.html.

Курсоры

Дополнительной возможностью привлечь внимание пользователя к тому или иному элементу на странице можно при помощи изменения внешнего вида указателя курсора. Кроме того, управление видом курсора, подобно применению системных переменных в качестве значений шрифтов и цветов, может помочь сделать Web-приложение более понятным и привычным для пользователя.

Для управления видом курсора используется свойство cursor, которое может принимать одно из стандартных значений – auto, или default. В первом случае вид курсора будет определяться браузером в зависимости от контекста, а во втором курсор примет вид, характерный для обычного указателя мышки в ОС пользователя:

body {cursor: default;} table {cursor: auto;}

Здесь мы определили, что для документа в целом и всех его элементов курсор должен иметь стандартный для системы вид, а в таблицах он будет контекстно-зависимым.

Кроме двух рассмотренных значений, спецификацией CSS 2 предусмотрено еще 15 определенных видов указателей, а в CSS 3 суммарный список допустимых значений для свойства cursor переваливает за 3 десятка – все возможные значения приведены в таблице 3.13.

ПРИМЕЧАНИЕ
В данном случае мы приведем информацию на основе спецификаций CSS 3, поскольку часть из новых значений уже поддерживается некоторыми программами просмотра, в частности, здесь отличился браузер от Microsoft.

Таблица 3.13. Допустимые значения свойства cursor
ЗначениеПримечаниеОписание
autoпо умолчаниюБраузер пользователя определяет отображаемый курсор, исходя из контекста
defaultCSS 2, всеКурсор, используемый на данной платформе по умолчанию. Обычно представляется в виде стрелки
crosshairCSS 2, всеКурсор, представляющий собой простое перекрестие (напоминающее большой символ "+")
pointerCSS 2, всеКурсор представляется указателем, обозначающим ссылку
moveCSS 2, всеКурсор, определяющий объект, который можно переместить
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resizeCSS 2, всеКурсор, определяющий перемещение некоторого края. Например, при перемещении, начинающемся с правого нижнего угла, используется курсор se-resize
textCSS 2, всеКурсор, используемый при выделении текста. Обычно представляется в виде вертикальной линии
waitCSS 2, всеКурсор, указывающий на занятость программы, когда пользователю необходимо подождать
helpCSS 2, всеКурсор, означающий, что для объекта, на который он указывает, имеется справочная информации
progressCSS 2.1, всеКурсор, указывающий на занятость программы, но взаимодействие с пользователем все равно возможно
vertical-textCSS 3, всеКурсор, используемый при выделении вертикально расположенного текста (например, японского)
all-scroll CSS 3, всеКурсор, указывающий на то, что объект можно переместить в любом направлении
col-resize CSS 3, всеКурсор, указывающий, что ширину колонки можно изменить
row-resize CSS 3, всеКурсор, указывающий, что высоту строки можно изменить
no-drop CSS 3, всеКурсор, указывающий, что перетаскиваемый объект не может быть помещен в текущем месте
not-allowed CSS 3, всеКурсор, указывающий, что запрашиваемое действие недопустимо
<uri>только MSIEКурсор, загружаемый из ресурса, задаваемого этим URI
context-menuCSS 3, Opera 9Курсор, указывающий, что для элемента доступно контекстное меню
cellCSS 3, Firefox 3, Opera 9, ChromeКурсор, указывающий, что под ним находится ячейка таблицы
aliasCSS 3, Firefox 3, Opera 9, ChromeКурсор, указывающий, что под ним находится ярлык (симлинк) / процедура создания ярлыка
copyCSS 3, Firefox 3, Opera 9, ChromeКурсор, указывающий, что элемент можно копировать / процедура копирования при перетаскивании
ew-resize, ns-resize, nesw-resize, nwse-resizeCSS 3, Firefox 3, Opera 9, ChromeКурсоры изменения размеров окна
noneCSS 3, Firefox 3Отсутствующий курсор (указатель мышки не отображается)

Примеры курсоров можно посмотреть, обратившись к файлу cursor.html. Отдельно следует лишь выделить такое значение, как URI. В данном случае, в принципе, допустимо указывать список из нескольких значений, перечисленных через запятую. В результате, если браузеру не удается обработать курсор, расположенный первым в списке, он должен попытаться обработать второй, третий и т.д. Но если не удается обработать ни одного курсора, заданного пользователем, он должен использовать общий курсор, расположенный в конце этого списка:

div.superpointer {cursor: uri('cur1.cur'), uri('cur2.png'), crosshair;}

Здесь браузер должен сначала попытаться отобразить курсор, используя файл cur1.cur, затем, если это по той или иной причине оказывается невозможным, загружается курсор из файла cur2.png, и, наконец, если браузер вновь постигает неудача, то используется курсор типа crosshair. На практике же MSIE не поддерживает перечисления альтернатив через запятую, равно, как и форматы, отличные от CUR/ANI, а остальные браузеры вообще не воспринимают загружаемые из изображений курсоры, и из CSS 2.1 это свойство исключено.

Свойства cursor в CSS

Значение по умолчанию: auto.
Наследуемые значения: да.
Применяется: ко всем элементам.
Совместимость: все (см. примечания по совместимости в табл. 3.13)

Контуры

Помимо курсоров, в таблицах стилей предусмотрена еще одна возможность выделить тот или иной объект на странице, не затрагивая его форматирования на странице. Для этого предусмотрен механизм контуров, задаваемых при помощи свойств группы outline.

В целом – по набору свойств и внешнему облику контуры аналогичны рамкам, и имеют, в общем-то, те же свойства, что и border, а именно: outline-width, outline-style и outline-color. Отличия состоят, прежде всего, в том, что контуры не занимают вообще никакого места на странице, т.е. выводятся как бы над блоком и никак не влияют на его размеры и расположение, равно как и на расположение каких-либо других, смежных блоков. Благодаря этому динамическое отображение или удаление контуров не приводит к переформатированию страницы.

Еще одно отличие контуров от рамок состоит в том, что они всегда одинаковы со всех сторон. В результате мы имеем следующее: свойство outline-width может принимать все те же значения, что и border-width, outline-style – те же, что и border-style, кроме hidden, и outline-color – любые цвета подобно border-color. Впрочем, для outline-color предусмотрено еще одно, дополнительное значение – invert, означающее, что должна быть произведена инверсия цветов всех пикселей по периметру контура. Такой вариант указания цвета гарантирует, что независимо от цвета окружающего фона, границы контура всегда будут видны.

Впрочем, учитывая проблемы с крсс-браузерной совместимостью, обычно лучше все-таки использовать border.

Значение по умолчанию: outline-width – medium; outline-style – none; outline-color – invert.
Наследуемые значения: нет.
Применяется: ко всем элементам.
Совместимость: Opera 7, MSIE 8, Firefox, Chrome. Значение invert не поддерживается Firefox и неверно работает в Chrome.

Типы носителя

Одним из важнейших свойств таблиц стилей является то, что они могут определять представление документа для различных устройств вывода – таких, как монитор ПК, принтер, проектор, телевизор и т.д. Причем ряд свойств CSS имеет смысл только для определенных типов выводящих устройств. Например, свойство page-break-after применимо только к устройствам с постраничной разбивкой, в то время как, скажем, свойство text-align подойдет и для любых других типов устройств визуального отображения информации. Всего в CSS определено 9 групп устройств, все они приведены в таблице 3.14.

Таблица 3.14. Категории устройств в CSS
КатегорияПодходящие типы устройствГруппа по типу форматированияГруппа по типу вывода страниц
aural, speechРечевой синтезаторЗвуковоеБез разбивки
brailleИнтерактивные устройства чтения азбуки БрайляТактильноеБез разбивки
embossedПринтеры, печатающие азбукой БрайляТактильноеС разбивкой
handheldКПК, «наладонники»Визуальное, звуковоеОба варианта
printПринтеры, или вывод документа на экран в режиме просмотра перед печатьюВизуальноеС разбивкой
projectionНастенные презентации, печать плакатовВизуальноеС разбивкой
screenЭкран монитора ПКВизуальное, звуковоеБез разбивки
ttyУстройства с символьным выводом фиксированной ширины (телетайп, ч/б символьный терминал, пейджер)ВизуальноеБез разбивки
tvТелевизоры и подобные им устройстваВизуальное, звуковоеОба варианта

Для того чтобы указать, что определенный стиль должен применяться только для того или иного типа устройств, используют директиву @media:

@media screen { body {background: navy; color: white;} }

Таким образом мы указали, что вложенный в фигурные скобки фрагмент таблицы стилей должен применяться только к выводу на экран монитора ПК. Поскольку в данном случае мы задали светлый текст на темном фоне, то нетрудно догадаться, что при печати браузер заменит цвет фона на белый, а цвет шрифта – на черный. Если требуется вмешаться в этот процесс, то следует добавить специальное правило для принтеров:

@media print { body {color: navy; background: white;} }

Теперь цвет шрифта при печати будет темно-синим (разумеется, для того случая, если у пользователя окажется цветной принтер). Что касается цвета фона в целом, то он для принтеров всегда будет белым (вернее, прозрачным), однако для отдельных элементов страницы его вполне можно будет указывать явно. Таким образом, можно избавиться от необходимости добавлять на свои страницы ссылки «версия для печати», а заодно – и от самих дубликатов: убрать все лишнее и вообще как следует приспособить вид страницы для вывода на принтер можно при помощи CSS.

ПРИМЕЧАНИЕ Отметим, что, на самом деле, имеется еще одно значение для директивы @media – all, подразумевающее все возможные устройства вывода. Собственно говоря, когда вы вообще не указываете @media, то, как раз ко всем устройствам, по возможности, и применяются заданные таблицы стилей.

Для примера можно обратиться к файлу media.html – при обычном просмотре в браузере вы увидите белый текст на синем фоне, а открыв окно предварительного просмотра (Mozilla, MSIE 5.5 или выше) или выбрав режим просмотра печати (Opera), будет отображен синий шрифт на белом фоне.

Собственно говоря, подобного можно добиться и при помощи средств языка HTML, воспользовавшись атрибутом MEDIA атрибута STYLE:

<style type="text/css" media="screen"> body {background: navy; color: white;} </style>

Но на самом деле такой способ гораздо менее удобен с точки зрения использования глобальных таблиц стилей. Собственно, атрибут MEDIA имеется и у элемента LINK:

<link rel="Stylesheet" href="style1.css" type="text/css" media="screen" />

Однако и синтаксис таблиц стилей позволяет внедрять файл со стилями для того или иного типа устройств непосредственно в саму таблицу. Делается это при помощи директивы @import, значение адреса импортируемого файла CSS будет дополнено указанием типа устройства:

@import url("style1.css") screen;

Вообще же тот факт, что тип устройств допускается указывать как в HTML, так и в CSS, с одной стороны, добавляет гибкости, а с другой – повышает требование к внимательности. Например, все 3 правила CSS в следующем фрагменте кода будут проигнорированы:

<style type="text/css" media="print"> @media screen { p {color: lime;} h1,h2,h3 {text-align: center;} blockquote {font-style: italic;} } </style>

В данном случае атрибут HTML сообщает браузеру о том, что данная таблица относится к печати, и должна быть проигнорирована при выводе на экран. Когда же дойдет до обработки правил печати, то едва начав анализировать данную CSS, браузер натолкнется на то, что она предназначена для экрана, и, опять-таки проигнорирует ее.

В завершение знакомства с типами устройств следует отметить, что директива @media поддерживается всеми рассматриваемыми браузерами. А что касается особенностей постраничной разбивки, то это – последнее, что нам осталось узнать о каскадных таблицах стилей.

2011-06-24 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия Android
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2020 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru