| Россия |
Инспектор
Вы можете этот курс.
Опубликован: 06.06.2006 | Уровень: для всех | Доступ: платный
Лекция 7:
Типы носителя
Аннотация: Даются спецификации таблиц стилей, зависимых от типа носителя и описания этих типов.
Ключевые слова: представление, css, носитель, шрифт, опыт, serif, таблица, @media, тип носителя, звуковой, группа носителей, терминал, CSS2, список, визуальный, группа носителей, 'визуальный', группа носителей, 'решётка', непрерывный, группа носителей, 'страничный', 'осязательный', решетка, растровый, интерактивный, группа носителей, 'статичный', 'непрерывный', группа носителей, 'растровый', 'звуковой', группа носителей
Введение
Одним из важнейших свойств таблиц стилей является то, что они специфицируют представление документа на различных носителях информации: на экране, бумаге, в речевом синтезаторе, в брайль-устройстве и т.п.
Некоторые свойства CSS созданы для конкретных носителей (например, свойство "'cue-before'" - для звуковых пользовательских агентов (ПА)). Иногда, однако, таблицы стилей для различных носителей могут использовать одно и то же свойство, но при этом требуют для него различных значений. Например, свойство "'font-size'" используется и для экрана, и для носителя печати. Однако эти два носителя достаточно различны, чтобы требовать различных значений для общего свойства; документ обычно требует для экрана более крупный шрифт, чем для печати. Опыт показывает также, что шрифты sans-serif лучше читаются на экране, а шрифты с засечками (serif) лучше читаются на бумаге. Исходя из этих соображений, необходимо указывать, что таблица стилей - или раздел таблицы стилей - применяется к носителю определённого типа.
Спецификация таблиц стилей, зависимых от типа носителя
В настоящее время есть два способа специфицировать зависимость от типа носителя в таблицах стилей:
-
Специфицировать целевой носитель из таблицы стилей с помощью at-правил @media или @import.
@import url("loudvoice.css") aural; @media print { /* здесь идёт таблица стилей для печати */ } -
Специфицировать целевой носитель в языке документа. Например, в HTML 4.0 ( " [HTML40] " ) атрибут "media" элемента LINK специфицирует целевой носитель для внешней таблицы стилей:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Link to a target medium</TITLE> <LINK rel="stylesheet" type="text/css" media="print, handheld" href="foo.css"> </HEAD> <BODY> <P>Тело документа... </BODY> </HTML>
Правило "@import" определено в главе о "каскадах" .
Правило @media
Правило @media специфицирует целевые типы носителя (разделённые запятыми) в наборе правил (ограниченных фигурными скобками). Конструкция @media допускает присутствие правил таблиц стилей для различных носителей в одной таблице стилей:
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}