Содержание
В этом примере мы покажем, как легко можно сделать простые таблицы стилей. Для этого примера вы должны немного знать HTML (см. [HTML40]) и некоторую общепринятую терминологию.
Мы начнем с небольшого документа HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>
Для определения синего цвета текста элемента H1, вы должны внести следующую управляющую запись:
H1 { color: blue }
Правила CSS состоят из двух основных частей: селектора ('H1') и объявления ('color: blue'). Объявление имеет две части: свойство ('color') и значение ('blue'). Пока пример содержит свойства только одного элемента, необходимого для представления документа HTML, он может быть только таблицей стилей для таблицы стилей. Скомбинированный с другими определениями стиля (одно из фундаментальных свойств CSS - возможность комбинирования таблиц стилей),он будет определять окончательный вид всего документа.
Спецификация 4.0 определяет, как таблица стилей может включаться в документ HTML: как внутри документа, так и в качестве внешнего файла. Для внесения таблицы стилей в документ, используется элемент STYLE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>
Для максимальной гибкости мы рекомендуем авторамопределять внешние таблицы стилей; они могут быть изменены без модификации документа HTML, а также могут использоваться в нескольких документах. Чтобы сделать ссылку на внешнюю таблицу стилей, используется элемент LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> <LINK rel="stylesheet" href="bach.css" type="text/css"> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>
Элемент LINK должен содержать:
Чтобы показать скрытые связи между таблицей стилей и структурной разметкой, мы продолжаем использовать элемент STYLE в этом примере. Добавим немного цвета:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> BODY { color: red } H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>
Таблица стилей теперь содержит два определения; первый указывает цвет элементу BODY: 'red' (красный), второй же определяет цвет элемента H1 как синий ('blue'). Не определен цвет для элемента P, но он наследует цвет родительского элемента BODY. Элемент H1 также является наследником элемента BODY, но его определение имеет приоритет над наследованием значений свойств.В CSS часто встречаются конфликты между различными значениями, и эта спецификация описывает, как их разрешить.
CSS2 имеет более 100 различных свойств, включая 'color' (цвет). Давайте посмотрим на некоторые другие:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> BODY { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>
Первая вещь, которую следует заметить, это то, что несколько деклараций сгруппированы в блок внутри фигурных скобок ({...}), и разделены точкой с запятой, последняя декларация также может иметь точку с запятой.
Первая декларация в элементе BODY устанавливает начертание шрифта "Gill Sans". Если этот шрифт недоступен, броузер будет использовать начертание шрифта без засечек 'sans-serif'. Sans-serif - одно из пяти семейств шрифтов, которые известны всем броузерам. Дочерние элементы BODY будут наследовать значение свойства 'font-family'.
Вторая декларация устанавливает размер шрифта элементу BODY в 12 точек (points). Точка ("point") общеупотребительный типографский термин для определения высоты шрифта и других линейных размеров. Это пример абсолютной единицы измерения, которая не изменяется в зависимости от окружения.
Третья декларация использует относительные размеры, которые пересчитываются вслед за окружающими величинами. Единица измерения "em" зависит от высоты шрифта элемента. В этом случае результатом будет величина отступа, равная утроенной высоте шрифта.
CSS может использоваться с любыми форматами структурирования документов, например, с eXtensible Markup Language (Расширяемым языком разметки) [XML10]. XML более зависит от таблиц стилей, чем HTML, так как авторы могут использовать свои собственные элементы, которые броузеры не умеют показывать.
Вот простейший фрагмент XML:
<ARTICLE> <HEADLINE>Fredrick the Great meets Bach</HEADLINE> <AUTHOR>Johann Nikolaus Forkel</AUTHOR> <PARA> One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT> ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. </PARA> </ARTICLE>
Чтобы показать этот фрагмент в читаемом виде, мы, во-первых, должны определить, какие элементы являются строчными (т.е., не разрывающими строки), а какие - блоковыми (т.е., разрывающими строки).
INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
Первая управляющая запись определяет INSTRUMENT как строковый элемент, и вторая запись, включающая разделенный запятыми список селекторов, определяет каждый из этих элементов как блочный.
Одна из возможностей ссылаться на таблицу стилей из документа XML - это использовать указание:
<?XML:stylesheet type="text/css" href="bach.css"?> <ARTICLE> <HEADLINE>Fredrick the Great meets Bach</HEADLINE> <AUTHOR>Johann Nikolaus Forkel</AUTHOR> <PARA> One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT> ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. </PARA> </ARTICLE>
Визуальные средства просмотра сформатируют этот пример так:
Заметим, что слово "flute" (флейта) показывается внутри абзаца, так как является содержимым строчного элемента INSTRUMENT.
Текст все еще не отформатирован так, как хотелось бы. Например, шрифт заголовка должен быть больше шрифта текста, и можно пожелать, чтобы имя автора было написано наклонным шрифтом:
INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block } HEADLINE { font-size: 1.3em } AUTHOR { font-style: italic } ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }
Визуальные средства просмотра сформатируют этот пример так:
Добавление большего числа определений стилей придаст более презентабельный вид вашему документу.
Этот раздел представляет ону из возможных моделей поддержки броузерами работы CSS. Это концептуальная модель; существующие реализации могут несколько отличаться.
В этой модели броузер обрабатывает содержимое поэтапно:
Часть, касающаяся расчета значений, зависит от алгоритма форматирования указанного медиа-типа. Например, для вывода на экран броузеры применяют модель визуального форматирования. Для вывода на печать броузеры применяют страничную модель. Если среда вывода - звуковое устройство (т.е., синтезатор речи), броузеры используют звуковую модель.
Надо заметить, что во время этой фазы броузеры не изменяют дерево документа. Вообще, содержимое, созданное благодаря таблицам стилей, не разбирается повторно.
Первый шаг лежит вне компетенции этой спецификации (см., например, [DOM]).
Шаги 2-5 подробно рассмотрены в спецификации.
Шаг 6 лежит вне компетенции этой спецификации.
Для всех сред термин canvas (канва, холст) описывается как "место, где отображается форматированная структура". Канва бесконечна для каждого измерения пространства, но отображение осуществляется для конечного участка канвы, используемого броузером и указанной средой вывода. Например, броузеры отображают на экран необходимый минимум ширины и выбирают ширину, основываясь на размерах видимой части окна экрана (viewport). Броузеры отображают страницы с сохранением пропорций высоты и ширины. Слуховые броузеры ограничены звуковым диапазоном, но не временем.
Селекторы CSS2 и свойства позволяют таблицам стилей ссылаться на следующие части документа или броузера:
CSS2, как и CSS1 до этого, базируется на установленных принципах проектирования:
Совместимость версий. Броузеры с поддеркой CSS2 будут понимать CSS1. Броузеры с поддержкой CSS1 способны читать CSS2 и исключать части, непонятные им. Также броузеры без поддержки CSS способны показать документ, содержащий стили. Конечно, стилевое содержимое, основанное на CSS, не будет отображено, но все содержание будет представлено.
Дополнение со структурированными документами.. Таблицы стилей дополняют структурированные документы (т.е., HTML и XML), предоставляя стилистическую информацию в размеченном тексте. Возможно легко изменить таблицы стилей с небольшими изменениями или без изменений структурной разметки.
Независимость от поставщиков, платформ, устройств. Таблицы стилей обеспечивают документам независимость от поставщиков, платформ и устройств. Таблицы стилей также независимы от поставщиков и программных платформ, но CSS2 позволяет вам указать таблицы стилей для групп устройств (напр., принтеров).
Возможность поддержки. Помещая таблицы стилей в документы, вебмастер может легко поддерживать сайт и сохранять единый стиль всего сайта. Например, при изменении цвета обоев во всей организации, придется поправить только один файл.
Простота. CSS2 более комплексна, чем CSS1, но представляет простой язык стиля, легко читаемый и понимаемый людьми. Свойства CSS сохраняют независимость каждого из элементов при большей расширяемости, и, как правило, есть только один способ применения требуемого эффекта.
Производительность сети. CSS обеспечивает компактный способ представления содержимого документов. По сравнению с картинками и аудиофайлами, которые часто используются авторами для достижения лучшего эффекта, таблицы стилей очень часто уменьшают размер содержимого. Также некоторые сетевые соединения могут использоваться с дальнейшим увеличением сетевой производительности.
Гибкость. CSS может быть добавлена к содержимому несколькими различными способами. Ключевой особенностью является возможность определения информации таблиц каскадных стилей в таблице стилей броузера, пользователя, в связанной с документом таблице стилей, в заголовке документа, в атрибутах элементов.
Разнообразие. Обеспечивая авторов большим количеством возможностей отображения эффектов, повышается роль веба как среды выражения. Дизайнеры мечтают об общедоступности приложений. Некоторые из желаемых эффектов отображения конфликтуют с независимостью от устройств, но CSS2 идет к удовлетворению всех требований дизайнеров.
Поддержка альтернативных языков.. Установление свойств CSS, описанных в этой спецификации, формирует однородную модель форматирования для визуальных и слуховых представлений. Эта форматированная модель доступна с помощью языка CSS, также возможна поддержка других языков. Например, программа JavaScript может динамически изменять значение определенного у элемента свойства 'color'.
Доступность. Некоторые особенности CSS делают веб более доступным для людей с ограниченными возможностями:
Примечание. За дополнительной информацией о доступности документов с использованием CSS и HTML обращайтесь [WAI-PAGEAUTH].