Упражнения.
Создайте XHTML-документ минимальной структуры и добавьте в него какой-либо элемент, например, абзац. Сохраните файл с расширением xhtml и откройте сначала в IE, а затем в каком-либо браузере, поддерживающем XHTML как тип документа (фактически, это любой другой современный популярный браузер). Сравните результаты.
Внесите в созданный документ ошибку, нарушающую правила XHTML (например, добавьте атрибут со значением без кавычек). Откройте документ в поддерживающем стандарты браузере - вместо документа там должно отобразиться сообщение об ошибке разбора.
Измените расширение файла на htm (оставив ошибку в документе). Откройте документ в любом браузере.
Назначение языка css
Как было показано в предыдущих разделах, типичный HTML-документ представляет собой набор элементов, содержащих другие элементы либо текст. HTML-элементы могут иметь атрибуты - большинство атрибутов отвечают за такие визуальные характеристики элемента как цвет (color), отступ (margin), рамка (border), размеры (width, height) и т.п. Другая большая группа атрибутов определяют реакции элементов на такие события как щелчок мышью (onclick), нажатие клавиши (onkeydown) и т.д. Ряд атрибутов отвечают за информационное содержание, например, гиперссылка (href) или значение в элементе ввода (value). Таким образом, атрибуты элементов можно принципиально разделить на группы по критерию: "Что определяет атрибут?" - представление, поведение или содержание (существуют и другие, не попадающие в эти группы, атрибуты).
Нетрудно заметить, что применение атрибутов представления на практике обычно имеет массовый характер, в отличие от атрибутов поведения или содержания. Иными словами, имея в документе множество элементов "абзац" (p), веб-дизайнер наверняка будет применять одно и то же форматирование ко многим из них. То же можно сказать и об изображениях, и о таблицах, и об элементах форм - вообще, в основе хорошего дизайна лежит разумное единообразие.
Достичь единого представления для множества элементов посредством задания соответствующих значений атрибутов каждого из них в принципе возможно, но обременительно - как по объёму требуемых для этого усилий, так и по громоздкости результирующего кода. Так, например, при отнюдь не вычурном дизайне может потребоваться указать для абзацев цвет фона, гарнитуру, размер и цвет шрифта:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p style="color: Blue; font-family: Verdana; font-size: 14pt; background: #B9FFCF;">
Несколько абзацев текста синего цвета, написанный шрифтом гарнитуры Verdana кеглем
14 Пунктов на светло-зелёном фоне.
</p>
<p style="color: Blue; font-family: Verdana; font-size: 14pt; background: #B9FFCF; ">
Стиль всех абзацев одинаковый.
</p>
<p style="color: Blue; font-family: Verdana; font-size: 14pt; background: #B9FFCF;">
Однако встроенные стили приходится повторять для каждого из них.
</p>
</body>
</html>
Листинг 1.1. Встроенные стили (html, txt)
Отступы, рамки, межсимвольное расстояние, фоновые изображения и многое другое также может быть включено в значение атрибута style (определяя таким образом встроенный стиль элемента p), однако это весьма нерационально - по крайней мере, по одной причине: одни те же значения указываются многократно вместо того, чтобы сделать это единожды. Если бы HTML-документы строились таким образом, они представляли бы собой тяжёлую структуру из хорошо перемешанных определений содержания и представления.
Упражнение. Замените цвет текста (color) на чёрный (black) в каждом абзаце примера.
Поэтому для определения атрибутов представления HTML-элементов создан специальный язык - Cascading Style Sheets (каскадные таблицы стилей), позволяющий отделить представление от содержания HTML-документа и определить представление либо в отдельном файле, либо в отдельном элементе style в "шапке" HTML-документа. Рекомендация W3C, выпущенная в 1998 году, определяет CSS 2, который поддерживается всеми современными браузерами.
Как и любой хорошо спроектированный язык, CSS позволяет давать короткий исчерпывающий ответ на простые вопросы, регулярно возникающие перед веб-дизайнерами. Например, ответ на простой вопрос: "Какими должны быть рамки таблиц в документе?" можно сформулировать так:
table {
border: 1px solid black;
}
Данное правило CSS означает: "таблицы везде (где не указано иное) должны иметь сплошную рамку чёрного цвета толщиной в 1 пиксел".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p {
color: Blue;
font-family: Verdana;
font-size: 14pt;
background: #B9FFCF;
}
</style>
</head>
<body>
<p>
Ещё несколько абзацев текста синего цвета, написанный шрифтом гарнитуры