Чтение онлайн

Мы вкратце рассмотрели, как работают каскадные таблицы стилей. При этом с таблицами CSS связано несколько важных моментов, которые нужно знать и которые описываются в следующих подразделах.

Напомню, что буква «С» в аббревиатуре CSS обозначает «cascade» (каскадная). Этот термин указывает,

что правила стилей, применяемые к конкретному элементу документа, могут быть получены из «каскада» различных источников:

• Таблицы стилей по умолчанию веб-броузера

• Таблицы стилей документа

• Атрибуты

отдельных HTML-элементов

Стили, определяемые в атрибуте

, переопределяют стили из таблицы стилей, а стили из таблицы стилей переопределяют таблицу стилей броузера, применяемую по умолчанию. Визуальное представление любого элемента может определяться комбинацией свойств стилей из всех трех источников. Более того, элемент может соответствовать сразу нескольким селекторам в таблице стилей. В этом случае к элементу применяются все правила стилей, ассоциированные с такими селекторами. (Если различные селекторы определяют различные значения для одних и тех же свойств стилей, значение, ассоциированное с более конкретным селектором, переопределяет значение, ассоциированное с менее конкретным селектором, однако более подробное обсуждение выходит за рамки этой книги.)

Для отображения любого элемента документа веб-броузер должен объединить атрибут

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

CSS - это довольно старый стандарт. В декабре 1996 года был принят стандарт CSS1 и определены атрибуты для задания цвета, шрифта, полей, рамок и других базовых стилей. Такие старые броузеры, как Netscape 4 и Internet Explorer 4, в значительной степени поддерживают CSS1. Вторая редакция стандарта, CSS2, была принята в мае 1998 года; она определяет более развитые возможности, наиболее важной из которых является возможность абсолютного позиционирования элементов. Версия CSS2.1 дополняет и уточняет положения стандарта CSS2. Из нее были исключены возможности, которые не были реализованы в броузерах. Текущие броузеры практически полностью реализуют поддержку стандарта CSS2.1, хотя в версиях IE, предшествовавших IE8, имеются существенные пробелы.

Работа над CSS продолжается и в настоящее время. Третья версия CSS разделена на специализированные модули, работа по стандартизации которых ведется по отдельности. Спецификации и рабочие проекты CSS можно найти по адресу http://www.w3.org/Style/CSS/current-work.

Свойства стиля, которые часто используются совместно, допускается объединять вместе, используя сокращенную форму записи. Например, свойства

и можно определить в виде единственного свойства font с составным значением:

Аналогично свойства

и являются сокращенными именами для свойств, определяющих параметры рамок, полей и отступов (пространство между рамкой и содержимым элемента) для каждой из сторон элемента. Например, чтобы определить параметры рамки для каждой из сторон в отдельности, вместо свойства можно использовать свойства и . Каждое из этих свойств также является сокращенной формой записи. Вместо свойства можно определить свойства и .

Когда производители броузеров реализуют нестандартные свойства CSS, они добавляют префикс к именам свойств. В броузере Firefox используется префикс

moz-, в Chrome - -webkit-, а в IE - -ms-. Производители броузеров добавляют префиксы, даже когда реализуют свойства, которые в будущем, как предполагается, будут включены в стандарт. В качестве примера можно назвать свойство border-radius, которое определяет закругленные углы. Это свойство впервые было реализовано как экспериментальное в Firefox 3 и Safari 4, и к его имени были добавлены соответствующие префиксы. Когда стандарт устоялся в достаточной степени, в версиях Firefox 4 и Safari 5 префикс был убран, и теперь они поддерживают свойство border-radius без префикса. (Chrome и Opera уже давно поддерживают это свойства без префикса. IE9 также поддерживает его без префикса, но IE8 не поддерживает его, даже с префиксом.)

При работе со свойствами CSS, которые в разных броузерах имеют отличающиеся имена, можно определять для таких свойств классы:

.radius10 {

border-radius: 10рх; /* для текущих броузеров */

– moz-border-radius: 10рх; /* для Firefox 3.x */

– webkit-border-radius: 10рх; /* для Safari 3.2 и 4 */

}

Определив такой класс, можно просто добавить значение «radius10* в атрибут class любого элемента, чтобы дать элементу рамку с закругленными углами.

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

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