Версии CSS

CSS – это довольно старый стандарт. В декабре 1996 года был принят стандарт CSS1 и определены атрибуты для задания цвета, шрифта, полей, рамок и других базовых стилей. Такие старые броузеры, как Netscape 4 и Internet Explorer 4, поддерживают CSS1, по крайней мере, частично. Вторая редакция стандарта, CSS2, была принята в мае 1998 года; она определяет более развитые характери_ стики, наиболее важная из которых – абсолютное позиционирование элементов. К моменту написания этих строк характеристики, предусматриваемые стандар_ том CSS2, поддерживались практически всеми современными броузерами. Про_ цесс стандартизации ключевых характеристик позиционирования начинался за_ долго до появления стандарта CSS2 как часть отдельного проекта CSS_Position_ ing (CSS_P), поэтому DHTML_характеристики доступны во всех современных броузерах. (Эти важные характеристики позиционирования обсуждаются в этой же главе далее.)

Работа над CSS продолжается и в настоящее время. К моменту написания этих строк спецификация CSS2.1 была практически завершена. В ней уточнены по_ ложения спецификации CSS2, исправлены ошибки, из нее убраны стили, не на_ шедшие воплощения в броузерах. Третья версия CSS разделена на специализи_ рованные модули, стандартизируемые по отдельности. Стандартизация некото_ рых CSS3_модулей уже близка к завершению, и в части броузеров уже делается попытка реализовать отдельные функциональные возможности спецификации CSS3, такие как стиль opacity. Спецификации и рабочие проекты CSS можно найти по адресу http://www.w3.org/Style/CSS/.

Пример CSS_таблицы

Пример 16.1 представляет собой HTML_файл, определяющий и использующий таблицу стилей. Этот пример иллюстрирует описанные ранее правила стилей,

16.1. Обзор CSS

Рис. 16.1. Веб'страница, оформленная с помощью CSS

базирующиеся на имени тега, классе и идентификаторе, а также содержит встроенный стиль, определяемый атрибутом style. На рис. 16.1 показано, как этот код визуализируется в броузере. Помните, что данный пример приведен здесь только для знакомства с синтаксисом и возможностями CSS. Полное опи_ сание CSS_стилей выходит за рамки темы этой книги.

Пример 16.1. Определение и использование каскадных таблиц стилей

<head>

/* Указывает, что заголовки отображаются курсивом синего цвета. */ h1, h2 { color: blue; font_style: italic }

* Любой элемент с атрибутом class="WARNING" отображается крупными жирными

* символами, имеет большие поля и желтый фон с жирной красной рамкой.

.WARNING {

font_weight: bold; font_size: 150%;

margin: 0 1in 0 1in; /* сверху справа, снизу слева */ background_color: yellow;

border: solid red 8px;

padding: 10px; /* 10 пикселов со всех 4 сторон */

}

* Текст заголовков h1 и h2 внутри элементов с атрибутом class="WARNING"

* должен быть выровнен по центру, в дополнение к выделению синим курсивом.

.WARNING h1, .WARNING h2 { text_align: center }

/* Отдельный элемент с атрибутом id="P23" отображается прописными буквами по центру. */

370 Глава 16. CSS и DHTML

#P23 {

text_align: center; text_transform: uppercase;

}

</style>

</head>

<body>

<h1>Демонстрация использования каскадных таблиц стилей</h1> <div class="WARNING">

<h2>Предупреждение</h2> Это предупреждение!

Обратите внимание, как оно привлекает внимание жирным шрифтом и яркими цветами. Также обратите внимание, что заголовок выровнен по центру и выделяется синим курсивом.

</div>

Этот абзац выровнен по центру<br>

и выводится прописными буквами.<br> <span style="text_transform: none">

Здесь мы явно используем встроенный стиль для переопределения прописных букв. </span>

</p>

</body>