Каскадные таблицы стилей (Cascad Style Sheets)

Каскадные таблицы стилей были предложены w3c(WWW Consorcium) в рамках разработки спецификации HTML 3.0. Однако, реализованы в реально действующих навигаторах они были только в 1997 году. Фактически, в качестве применяемой HTML-разметки они стали доступны только с версий Netscape Navigator 4.0 и Internet Explorer 4.0.

Идея положенная в основу таблиц достаточно проста. К версии 4.0 HTML превращется в язык разметки, опирающийся на контейнерное представление документа, т.е. документ - это множество вложенных в друг друга контейнеров, каждый из которых имеет свои свойства по представлению информации. Многие контейнеры можно сгруппировать в классы однотипных контейнеров, например, заголовки или параграфы. Свойства контейнера, перечисляются в качестве атрибутов тага начала контейнера. При этом у большинства контейнеров, начиная с версии HTML 3.0 набор этих атрибутов типизирован.

Контейнеры во многом походят на блоки в универсальный языках программирования. При этом свойства контейнеров можно интерпретировать как переменные, которые принимают определенные значения в пределах каждого из контейнеров. Как и в языках программирования, например в Паскаль, описание свойств можно вынести в специальную секцию данных в начале документа. Такой секцией и является секция описания каскадных стилей. Обычно стиль описывается внутри контейнера STYLE:

Вообще говоря, в Netscape поддерживают еще одну нотацию описание таблиц стилей - нотация JavaScript:

При описании таблиц стилей мы будем опираться на документацию Netscape, т.к. - это наиболее популярный браузер Internet. Internet Explorer поддерживает только спецификацию w3c.

Начнем с простого примера. Нужно описать стили отображения текста в параграфе и заглавии документа:

Пример 1.28

<html>
<head>
<style type="text/css">
p {color:blue; font-family: times; font-size:10pt;}
h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;}
</style>
</head>
<body>
<h1>Test Style Shits in Communicator</h1>
<p> This is a first part of the document
</body>
</html>

То же самое но в JavaScript-нотации будет выглядеть следующим образом:

Пример 1.29

<html>
<head>
<style type="text/javascript">
tags.p.color="blue";
tags.p.fontFamily="times";
tags.p.fontSize="10pt";
tags.h1.color="black";
tags.h1.fontSize="12pt";
tags.h1.fontStyle="Arial";
tags.h1.textAlign-"center";
</style>
</head>
<body>
<h1>Test Style Shits in Communicator</h1>
<p> This is a first part of the document
</body>
</html>

Сoзданный таким образом документ будет отображаться следующим образом:

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