Разработка зависящих от среды таблиц стилей

Механизмы, определенные в HTML и CSS, позволяют ограничить область действия любой таблицы стилей конкретным устройством. В таблицах стилей, предназначенных для HTML, такие ограничения могут быть наложены посредством атрибута media. Его можно применять как для элемента link, так и для элемента style:

href="article-print.css">

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

href="visual.css">
В самой таблице стилей можно также наложить ограничения на правила @import:

@import url(visual.css) screen, projection;
@import url (article-print.css) print;

Помните, что если не добавить в таблицу стилей информацию об устройстве, она будет применяться ко всем устройствам. Следовательно, если один набор стилей должен применяться только при выводе на экран, а другие – только при печати, то в обе таблицы стилей необходимо добавить информацию об устройстве.


Например:

href="article-screen.css"> href="article-print.css">
Если удалить атрибут media из первого элемента link предыдущего примера, то правила таблицы стилей article%screen.css будут применяться во всех устройствах, включая печатные, проекционные, переносные и все остальные. CSS2 также определяет синтаксис для блоков @media, которые позволяют определять стили для нескольких устройств в одной таблице стилей. Рассмотрим следующий стандартный пример:



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


В тех ситуациях, когда авторы могут управлять только одной таблицей стилей, блоки @media дают, возможно, единственный способ задания зависящих от среды таблиц стилей. Это также верно, когда CSS применяется для стилевого оформления документа, основанного на XML, не содержащего атрибут media или его эквивалент.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Воспроизведение речи
Выбор типов страниц
Звуковое воспроизведение заголовков таблиц
Звуковое сопровождение
Изменение высоты

Вернуться в раздел: CSS / 14. Неэкранные устройства