Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
лекции 2005 / P8 / CSS учебник.doc
Скачиваний:
28
Добавлен:
16.04.2013
Размер:
468.99 Кб
Скачать

1. Базовые понятия

Разработка простых таблиц стилей является довольно простым занятием. Разработчик должен иметь базовые знания по HTML и по полиграфической терминологии. Например для определения цвета элементов 'H1' как синий, достаточно сказать:

H1 { color: blue }

Приведенный пример является простым правилом CSS. Правило состоит из двух основных частей: селектора ('H1') и определения ('color: blue'). Определение в свою очередь тоже состоит из двух частей: свойства ('color') и значения ('blue'). В то время, как приведенный пример пытается повлиять только на одно из свойств, необходимых для построения HTML документа, он уже является таблицей стилей. Скомбинированный с другими таблицами стилей (одним из фундаментальных свойств CSS является комбинирование таблиц стилей) он будет определять конечный вид всего документа.

Селектор является связью между HTML документом и таблицей стилей, полный набор типов элементов содержит все возможные селекторы. Типы элементов определены в спецификации HTML [2].

Cвойство 'color' является одним из порядка 50 свойств, которые определяют вид HTML документа. Список свойств и их возможных значений определяется в данной спецификации.

Авторам HTML необходимо определять свою таблицу стилей только в том случае, если они хотят предложить специфический стиль для своих документов. Каждый UA должен иметь таблицу стилей по умолчанию, которая представляет документы в приемлемом, но может быть достаточно простом виде. В приложении А приведена примерная таблица стилей для представления HTML документов так, как это предлагается в спецификации HTML 2.0 [3].

Формальная грамматика языка CSS1 определена в приложении B.

1.1 Включение в html

Для того, чтобы таблица стилей влияла на вид документа, UA должен знать о ее существовании. Спецификация HTML [2] определяет способы включения таблиц стилей в HTML. Поэтому данный раздел является информативным, а не нормативным:

<HTML>

<HEAD>

<TITLE>title</TITLE>

<LINK REL=STYLESHEET TYPE="text/css" HREF="http://style.com/cool" TITLE="Cool">

<STYLE TYPE="text/css">

@import url( http://style.com/basic

);

H1 { color: blue }

</STYLE>

</HEAD>

<BODY>

<H1>Headline is blue</H1>

<P STYLE="color: green">While the paragraph is green.

</BODY>

</HTML>

Данный пример демонстрирует четыре способа объединения стиля с HTML: используя элемент 'LINK' для связи с внешней таблицей стилей, используя элемент 'STYLE' внутри элемента 'HEAD', импортируя таблицу стилей с помощью нотации CSS '@import' и используя атрибут 'STYLE' в элементе внутри секции 'BODY'. Последний способ смешивает стиль с содержимым и поэтому теряет соответствующие достоинства традиционных таблиц стилей.

Элемент 'LINK' ссылается на альтернативную таблицу стилей, которую может выбрать читатель, в то время как импортируемые таблицы стилей автоматически объединяются с остальной частью таблицы стилей.

Традиционно UA игнорировали неизвестные теги. Как результат старые UA будут игнорировать элемент 'STYLE', но его содержимое будет считаться, как часть тела документа и будет отображаться в документе. В течение переходного периода содержимое элемента 'STYLE' можно "прятать", используя комментарии SGML:

<STYLE TYPE="text/css"><!--

H1 { color: green }

--></STYLE>

В связи с тем, что элемент 'STYLE' определен, как "CDATA" в DTD [2], интерпретаторы SGML не будут считать таблицу стилей комментарием, который надо удалить.