Поиск

Введение в CSS2

Краткое руководство по CSS2 для HTML-документов

В этом разделе будет продемонстрировано, насколько легко разрабатываются небольшие таблицы стилей. Для этого достаточно иметь общие представления о языке HTML (см. [HTML40]) и настольной издательской терминологии.

Начнем с небольшого HTML-документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Домашняя страница об И.С. Бахе</TITLE>
</HEAD>
<BODY>
<H1>Домашняя страница об И.С. Бахе </H1>
<P> Иоган Себастьян Бах написал много музыкальных произведений.
</BODY>
</HTML>

Для того, чтобы текст стиля H1 отображался синим цветом, Вы можете написать следующее CSS-правило:
H1 { color: blue }

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

Спецификация языка HTML 4.0 определяет правила описания таблиц стилей для HTML-документов: либо непосредственно внутри HTML документа, либо посредством внешней таблицы стилей. Для вставки таблицы стиля в документ используют элемент STYLE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> Домашняя страница об И.С. Бахе </TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1> Домашняя страница об И.С. Бахе </H1>
<P> Иоган Себастьян Бах написал много музыкальных произведений
</BODY>
</HTML>

Для максимальной гибкости мы рекомендуем авторам создавать внешние таблицы стилей, которые могут быть модифицированы без изменения исходного HTML- документа и могут совместно использоваться несколькими документами. Для соединения с внешней таблицей стиля можно использовать элемент LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> Домашняя страница об И.С. Бахе </TITLE>
<LINK rel="stylesheet" href="bach.css" type="text/css">
</HEAD>
<BODY>
<H1> Домашняя страница об И.С. Бахе </H1>
<P> Иоган Себастьян Бах написал много музыкальных произведений.
</BODY>
</HTML>

Элемент LINK определяет:
тип соединения: "stylesheet".
местонахождение таблицы стилей через атрибут "ref".
тип присоединяемой таблицы стилей: "text/css".

Чтобы показать тесную связь между таблицей стилей и структурной разметкой документа, продолжим использование элемента STYLE в этом руководстве. Добавим больше цветов:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> Домашняя страница об И.С. Бахе </TITLE>
<STYLE type="text/css">
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1> Домашняя страница об И.С. Бахе </H1>
<P> Иоган Себастьян Бах написал много музыкальных произведений.
</BODY>
</HTML>

Таблица стилей теперь содержит два правила: первое предопределяет отображение элементов основного текста красным цветом 'red', в то время как второе - отображение элементов стиля H1 синим цветом 'blue'. Так как для элемента P значение цвета не было установлено, то он унаследует цвет от родительского элемента, а именно от основного текста. Элемент стиля H1 также является дочерним элементом основного текста, но второе правило переопределяет унаследованное им значение. Подобные конфликты часто возникают в CSS между различными предписаниями значений. Представленное описание определяет пути их разрешения.

В CSS2 существует более 100 различных свойств, одним из которых является свойство 'color'. Далее предлагается рассмотреть некоторые другие свойства:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> Домашняя страница об И.С. Бахе </TITLE>
<STYLE type="text/css">
BODY {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
</STYLE>
</HEAD>
<BODY>
<H1> Домашняя страница об И.С. Бахе </H1>
<P> Иоган Себастьян Бах написал много музыкальных произведений.
</BODY>
</HTML>

Первой бросается в глаза группа строк, разделенных точкой с запятой и заключённых в фигурные скобки "{}". После последней строки в этой группе также может ставиться точка с запятой.

Первая строка в элементе BODY устанавливает семейство шрифтов "Gill Sans". Если этот тип шрифтов недоступен, то пользовательский агент (часто именуемый программой просмотра или браузером) будет использовать шрифт 'sans-serif', который является одним из пяти шрифтов, распознаваемых всеми пользовательскими агентами. Дочерние элементы BODY наследуют значение 'font-family' .

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

Третья строка использует относительную единицу измерения, масштаб которой изменяется в зависимости от окружения. Единица измерения "em" относится к размеру шрифта элемента. В данном случае, размер полей вокруг элемента BODY в три раза больше размера шрифта.

Краткое руководство по CSS2 для XML-документов

Язык CSS может использоваться с любым структурированным форматом документов, например, с приложениями, написанными на языке XML (eXtensible Markup Language) [XML10]. Фактически, XML-приложения зависят от таблиц стилей больше, чем HTML-приложения, т.к. в первом случае разработчики могут создавать свои собственные элементы, которые не могут быть отображены программами просмотра.

Приведем простой фрагмент из XML-документа:
<ARTICLE>
<HEADLINE> Фридрих Великий знакомится с Бахом </HEADLINE>
<AUTHOR> Иоган Николас Форкель </AUTHOR>
<PARA>
Однажды вечером, как раз когда он готовил
<INSTRUMENT>флейта</INSTRUMENT>, а его музыканты уже собрались, офицер подал ему список
прибывших незнакомцев.
</PARA>
</ARTICLE>

Чтобы отобразить этот фрагмент по подобию документа, мы прежде всего должны объявить, какие элементы принадлежат самой строке как таковой (т.е. не вызывают её разрыва), и какие элементы, являясь блочными, ей не принадлежат (т.е. вызывают разрыв строки).
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

Первое правило объявляет элемент INSTRUMENT как элемент строки, а второе правило, представленное списком селекторов, разделенных друг от друга запятыми, объявляет все другие элементы как блочные.

Одним из возможных путей интеграции таблицы стилей с XML-документом является использование команд предобработки:
<?XML:stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
<HEADLINE> Фридрих Великий знакомится с Бахом </HEADLINE>
<AUTHOR> Иоган Николас Форкель </AUTHOR>
<PARA>
Однажды вечером, как раз когда он готовил
<INSTRUMENT>флейта</INSTRUMENT>, а его музыканты уже собрались, офицер подал ему список
прибывших незнакомцев.
</PARA>
</ARTICLE>

Программа просмотра изобразила бы вышеприведенный пример следующим образом:

[D]

Заметьте, что слово "флейта" остается внутри абзаца, являясь содержимым элемента 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 }

Программа просмотра изобразит вышеприведённый пример следующим образом:

[D]

Добавляя больше правил в таблицу стилей, вы сможете и дальше улучшать представление документа.