16.1.5. Пример CSS-таблицы

Пример 16.1 представляет собой HTML-файл, определяющий и использующий таблицу стилей. Он иллюстрирует селекторы, базирующиеся на имени тега, атрибутах class и id, а также содержит встроенный стиль, определяемый атрибутом style. На рис. 16.1 показано, как этот пример отображается в броузере.

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

<head>

<style type="text/css">

/* Указывает, что заголовки отображаются курсивом синего цвета. */

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 сторон */

}

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

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

.WARNING h1, .WARNING h2 { text-align: center }

* Отдельный элемент с атрибутом id="special" отображается

* прописными буквами по центру.

#special {

text-align: center;

text-transform: uppercase;

}

</style>

</head>

<body>

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

<div class="WARNING">

<h2>Предупреждение</h2>

Это предупреждение!

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

</div>

<p id="special">

Этот абзац выровнен по центру<br> и выводится прописными буквами.<br>

<span style="text-transform: none">

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

</span>

</р>

Ультрасовременные свойства CSS

Когда я работал над этой главой, CSS находился в процессе революционных изменений: производители броузеров реализовали поддержку новых мощных свойств стиля, таких как border-radius, text-shadow, box-shadow и column-count. Другой качественно новой возможностью CSS стали веб-шрифты: новое CSS-правило @font-face позволяет загружать и использовать нестандартные шрифты. (Подробнее о шрифтах, которые свободно могут использоваться в веб-страницах, и о простом механизме их загрузки с серверов компании Google можно прочитать на странице http://code.google.com_l/web-fonts.)

Еще одной революционной разработкой в области каскадных таблиц стилей стал модуль «CSS Transitions». Этот проект стандарта определяет возможности, позволяющие преобразовать в анимационные эффекты любые динамические изменения стилей CSS в документе. (Когда поддержка этого стандарта будет реализована достаточно широко, это позволит избавиться от программного кода, воспроизводящего анимационные эффекты, связанные со сменой стилей CSS, как показано в разделе 16.3.1.) Положения модуля «CSS Transitions» реализованы во всех текущих броузерах, кроме IE, но в именах свойств стиля присутствуют префиксы производителей. Проект родственного стандарта «CSS Animations», использующий модуль «CSS Transitions» в качестве основы, определяет более сложные анимационные последовательности. В настоящее время «CSS Animations» реализован только в веб-броузерах, основанных на механизме Webkit. Ни один из этих стандартов не описывается в данной главе, но вам, как веб-разработчикам, нужно знать о существовании этих технологий.

Другим проектом, касающимся CSS, и о котором должны знать веб-разра-ботчики, является стандарт «CSS Transforms», позволяющий определять двухмерные преобразования (вращение, масштабирование, перемещение, а также их комбинации, определяемые в матричном виде), применяемые к любым элементам. Все текущие броузеры (включая версии IE9 и выше) поддерживают этот проект с добавлением приставок, соответствующих производителям. Более того, в Safari реализована поддержка расширения, позволяющего выполнять трехмерные преобразования, но пока неясно, последуют ли этому другие броузеры.

************************************************