В декабре 1996 г. W3C стандартизовал первый уровень каскадных таблиц стилей (CSS1), который определил правила описания стилей визуального отображения элементов HTML-документов. В мае 1998 г. им была принят стандарт второго уровня таблиц стилей (CSS2), который существенно расширил возможности таблиц стилей. Основными особенностями CSS2 являются следующие:
CSS2 - это язык, который позволяет присоединять стили к любым структурированным документам. На сегодня таковыми являются HTML-документы и XML-приложения.
CSS2 распространил понятие стиля отображения на печатающие устройства, синтезаторы речи и другие устройства отображения документов.
В основу данной части нашего справочника положен именно стандарт CSS2.
Цель создания каскадных таблиц стилей состояла в том, чтобы отделить структуру документа (описанную на языке HTML или подмножестве XML) от правил его отображения на различных устройствах (задаваемых таблицами CSS). Чтобы пояснить это утверждение, рассмотрим следующий пример HTML-документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Моя домашняя страница</TITLE>
<STYLE type="text/css">
<!-- скрыть стили CSS от старых обозревателей
BODY { color: blue }
H1 { color: red }
-->
</STYLE>
</HEAD>
<BODY>
<H1>Моя домашняя страница</H1>
<P>Добро пожаловать!</P>
</BODY>
</HTML>
Этот документ содержит элемент STYLE, содержащий два правила CSS: первое из них определяет, что цвет отображения элемента BODY должен быть синим, а второе - что цвет отображения элемента H1 должен быть красным. Поскольку стиль отображения элемента P не задан, он унаследует стиль своего родительского элемента, в данном случае элемента BODY. В результате данный HTML-документ будет отображаться так
Теперь для изменения стиля отображения этого документа нам достаточно менять только содержимое элемента STYLE, не внося никаких модификаций в остальной HTML-документ. Для большей гибкости мы можем создать текстовый файл STYLE.CSS и перенести в него описание стилей:
BODY { color: blue }
H1 { color: red }
HTML-документ после этого следует изменить следующим образом:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Моя домашняя страница</TITLE>
<LINK rel="stylesheet" href="style.css" type="text/css">
</HEAD>
<BODY>
<H1>Моя домашняя страница</H1>
<P>Добро пожаловать!</P>
</BODY>
</HTML>
В дальнейшем для изменения стилей мы будем изменять только файл STYLE.CSS, не касаясь головного HTML-документа.
 |
Теперь представим этот документ в виде дерева и введем соответствующую терминологию, которая будет нам необходима в дальнейшем изложении:
Корнем этого дерева является элемент HTML, который имеет двух сыновей - HEAD и BODY. Элемент HEAD является отцом элемента TITLE, а элемент BODY - отцом элементов H1 и P (два последних элемента называются братьями, причем H1 является старшим братом, а P - младшим). Все элементы дерева являются потомками корня, а тот является их предком. Таким образом можно представить в виде дерева любой документ, к которому применимы правила языка CSS.
В этом разделе :
8 Введение в таблицы стилей
Основные понятия CSS, ситаксис и основные типы данных.
8 Селекторы, псевдоклассы и псевдоэлементы
Все про селекторы. а также псевдоэлементы и псевдоселекторы.
8 Значения свойств, каскадность и наследование
Вычисление значений свойств, что такое каскадность и наследование.
8 Границы, заполнители и рамки
Все про стили границ, рамок и заполнителей.
8 Позиционирование элементов
Здесь мы изучим, как обозреватель просматривает дерево элементов и отображает их на визуальном носителе
8 Визуализация элементов
Как задется ширина, высота и границы содержимого при генерации объемлющего прямоугольника блочных элементов и элементов, внешних по отношению к CSS.
8 Цвет и фон
Цвет и фон в CSS.
8 Шрифты
Правила использования свойств шрифтов в CSS.
8 Текст
В этой главе приведено описание свойств, определяющих различные параметры отображения текста.
8 Таблицы
Таблицы обеспечивают возможность расположения многомерных данных по строкам и столбцам.
8 Генерация содержимого, нумерация и списки
В этой главе собраны все возможности CSS по генерации содержимого.
8 Страничные устройства вывода
Страничные устройства вывода отличаются от непрерывных устройств тем, что документ разбивается на отдельные страницы. Для работы с такими устройствами в CSS введена модель страницы, которая позволяет авторам задавать размеры страницы и ее границ, а также управлять переходом на новую страницу.
8 Звуковые таблицы стилей
Помимо визуального отображения документов, CSS поддерживает их звуковое отображение, основанное на синтезации речи и звуковых сигналах.
| |
*
Обратная связь