Cascading Style Sheet в примерах

Мода бывает на все, в том числе и на элементы оформления, и конструкции Web-страниц. Собственно говоря, каждое обновление спецификаций средств описания Web-страниц вызывает всплеск моды на какую-нибудь новинку. В 1996 г. с появлением HTML 3.2 и выходом в свет третьих версий таких самых популярных браузеров, как Microsoft Internet Explorer и Netscape Navigator, началась мода на фреймы. 1997 г. был отмечен всеобщим интересом к JavaScript, который употребляли где надо и не надо.

И все же, несмотря на некоторую легкомысленность, система стилей является мощным инструментом, привносящим в процесс создания Web-страниц новые возможности. Особо отметим возможность задавать оформление Web-страниц, практически не используя теги HTML, свойство в условиях нюансов понимания HTML разными браузерами весьма важное.

Наступивший год обещает стать годом широкого распространения системы стилей, благо начало этому положено. Сама спецификация каскадных или, как еще говорят, иерархических таблиц стилей (CSS - Cascading Style Sheet), уже не новинка. Впервые о ней заговорили года полтора назад, когда появился первый, поддерживающий CSS браузер - Microsoft Internet Explorer 3.0. Однако так как он был и еще долго оставался единственным браузером с поддержкой CSS, то о CSS не то чтоб забыли совсем, но использовали очень мало. Это связано с требованиями к тому, чтобы Web-страница имела один вид вне зависимости от того, какой браузер используется для ее просмотра. Теперь, когда оба наиболее распространенных браузера фирм Microsoft и Netscape способны отображать страницы, использующие в своем оформлении CSS, интерес к таблицам стилей значительно возрос. Тем более, что совсем недавно WWW-консорциум опубликовал предварительный вариант второй версии спецификации таблиц стилей - CSS2.

Не претендуя на полноту изложения, попытаемся ознакомить потенциальных пользователей с этим средством оформления Web-страниц.

Общие положения

На то, что при описании элементов Web-страницы используются CSS, указывают теги <STYLE> и </ STYLE >. Конкретно на использование каскадных таблиц стилей указывает атрибут TYPE. В нашем случае значение этого атрибута будет

TYPE="text/css"

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

<STYLE TYPE="text/css">

...

</STYLE>

Синтаксис определения стилей сам по себе весьма прост. Стиль описывается с помощью двух типов параметров - селекторов и деклараций. Так, в примере

<STYLE TYPE="text/css">

H1 { color: red }

</STYLE>

"Н1" - селектор, а "{ color: red }" - декларация. Несложно заметить, что сама декларация также состоит из двух частей. Это в данном случае "color" - свойство и "red" - значение. То есть в общем случае

селектор { значение: свойство}

Типы селекторов

В качестве простейшего селектора может быть любой из тегов HTML, если к нему возможно употребить какое-либо свойство. Так, свойством тега, задающего заголовок, может быть тип применяемого для заголовка шрифта, например,

H1 { font-family: Helvetica }.

Таким образом, синтаксис задания стиля можно описать, как

тег { значение: свойство }

Если одна и та же декларация применяется по отношению к нескольким селекторам, как в

H1 { font-family: Helvetica }

H2 { font-family: Helvetica }

H3 { font-family: Helvetica },

то селекторы можно сгруппировать, применив к ним одну декларацию:

H1, H2, H3 { font-family: Helvetica }.

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

H1 { font-weight: bold }

H1 { font-size: 12pt }

H1 { line-height: 14pt }

H1 { font-family: Helvetica }

H1 { font-variant: normal }

H1 { font-style: normal }

будет эквивалентна

H1 { font-weight: bold;

font-size: 12pt;

line-height: 14pt;

font-family:

Helvetica;font-variant: normal;

font-style: normal;

}

В этом случае декларации разделяются точкой с запятой.

Контекстные селекторы

Селектор может состоять и из нескольких тегов, декларации для которых будут задаваться раздельно. Такие селекторы называются контекстными и имеют вид

тег1 тег2 { значение: свойство }.

В этом случае значение указанного в декларации свойства будет применено только к элементу, описанному сразу двумя тегами, указанными в селекторе, точнее к значению тега2 в пределах действия тега1, например,

<HEAD>

<STYLE TYPE="text/css">

H1 I {font-family: Arial; font-size: 24pt; Color:red}

</STYLE>

</HEAD>

<BODY>

<H1>Здесь применяются<I>стили</I>.</H1>

<I>А здесь стилей нет.</I>

</BODY>

стиль, описанный как

H1 I {font-family: Arial; font-size: 24pt; Color:red}

будет применен только к слову, описанному обоими тегами, т. е. к слову "стили" (рис. 1).

Классы селекторов. Назначение класса для одинаковых тегов

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

тег.имя_класса { свойство: значение }

запишем

H3.red {font-family: Arial; font-size: 10pt; Color:red}

H3.blue {font-family: Times New Roman; font-size: 14pt; Color:blue}

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

<тег class="имя_класса">

В общем же виде код будет выглядеть так:

<HEAD>

<STYLE TYPE="text/css">

H3.red {font-family: Arial; font-size: 20pt; Color:red}

H3.blue {font-family: Times New Roman; font-size: 24pt; Color:blue}

</STYLE>

</HEAD>

<BODY>

<H3 CLASS="red">Красный заголовок</H3>

<H3 CLASS="blue">Синий заголовок</H3>

</BODY> (рис. 2).

Классы селекторов. Назначение класса для разных тегов

Назначение класса для разных тегов происходит аналогично вышеизложенному, с той лишь разницей, что тег, к которому отнесен класс, явно не указан:

.имя_класса { свойство: значение }

Данная конструкция позволяет отнести придаваемую классу декларацию к тому тегу, к которому это требуется в данный момент, как это и сделано в примере:

<HEAD>

<STYLE TYPE="text/css">

.red {font-family: Arial; font-size: 20pt; Color:red}

.green {font-family: Times New Roman; font-size: 24pt; Color:green}

</STYLE>

</HEAD>

<BODY>

<H3 CLASS="green">Красный заголовок</H3>

<H3 CLASS="red">Зеленый заголовок</H3>

<DIV CLASS="green">Зеленая надпись</DIV>

</BODY> (рис. 3).Идентификаторы селекторов

Идентификаторы (id) селекторов предназначены для того, чтобы придавать каждому стилевому решению оригинальное имя. В этом случае указанное для идентификатора стилевое решение будет отнесено каждому элементу, которому данный идентификатор придан. Стилевое решение назначается идентификатору как

#idимя_идентификатора {свойство: значение }

соответствующие же идентификатору свойства придаются выбранному тегу как

<тег id="idимя_идентификатора">

Пример:

<HEAD>

<STYLE TYPE="text/css">

#id100 {font-family: Arial; font-size: 20pt; Color:red}

#idblue {font-family: Times New Roman; font-size: 24pt; Color:blue}

</STYLE>

</HEAD>

<BODY>

<H3 ID="id100">Красный заголовок.</H3>

<DIV ID="idblue">Синяя надпись.</DIV>

</BODY> (рис. 4)

Селекторы - ссылки

Браузеры обычно отображают уже использованные ссылки иначе, нежели неиспользованные. CSS позволяет авторам Web-страниц представлять ссылки в одном из нескольких фиксированных состояний. Делается это с помощью элементов, напоминающих по своим свойствам классы, но имеющими только одно фиксированное значение - псевдоклассов. Значения псевдоклассов таковы:

link Неиспользованная ссылка

hover Ссылка с помещенным поверх нее указателем мыши меняет свой стиль на указанный в декларации этого псевдокласса

active Активная используемая в данный момент ссылка

visited Использованная ссылка

Синтаксис использования этих псевдоклассов в общем-то одинаков:

A:link {свойство: значение}

A:hover { свойство: значение }

A:active { свойство: значение }

A:visited { свойство: значение }

Пример:

<HEAD>

<STYLE TYPE="text/css">

A:link {font-size: 14pt; text-decoration:underline; Color:red}

A:hover {font-size: 10pt; text-decoration:none; Color:blue}

A:active {font-size: 20pt; text-decoration:none; Color:yellow}

A:visited {font-size: 10pt; text-decoration:none; Color:green}

</STYLE>

</HEAD>

<BODY>

<A href="file.htm">Новая ссылка</A><BR>

<A href="link.htm">Использованная ссылка</A>

</BODY>

На рис. 5 изображен именно тот момент, когда указатель мыши оказался над одной из надписей-ссылок.

Назначение стиля тегам или страницам

Назначить определенный стиль для Web-страницы или определенной ее части либо тега можно тремя методами.

Присоединенный стиль. Применение того или иного стиля не обязательно прописывать непосредственно в коде Web-страницы. Существует возможность с помощью какого-либо из специальных редакторов создать файл, несущий информацию о стиле (такой файл будет иметь расширение .css) и поставить на него ссылку согласно правилу:

<LINK REL="stylesheet" TYPE="text/css" HREF="имя_файла.css">

В примере

<HEAD>

<LINK REL="stylesheet" TYPE="text/css" HREF="samp.css">

</HEAD>

<BODY>

<H1>Назначение стиля</H1>

<P>Пример ссылки на стиль.</P>

</BODY>

тег LINK просто заменил тег STYLE. В отличие от данного примера файл, содержащий стилевое решение для страницы, может располагаться и на каком-то другом компьютере в сети или на удаленном компьютере. В этом случае делается ссылка на URL нужного компьютера либо сервера:

<HTML>

<HEAD>

<TITLE>Cool Style</TITLE>

<LINK REL=STYLESHEET TYPE="text/css"

HREF="http://www.coolstyle.com/superstyles.css">

</HEAD>

Вложенный стиль. Это наиболее распространенная форма назначения стилей. С ней мы уже знакомы по приведенным выше примерам.

<HEAD>

<STYLE TYPE="text/css">

селектор1 {свойство: значение }

селектор2 { свойство: значение }

</STYLE>

</HEAD>

Пример.

<HEAD>

<STYLE TYPE="text/css">

H1 {font-family: Arial; font-size: 40pt; Color:red}

P {font-size:12pt; line-height:20pt}

</STYLE>

</HEAD> <BODY> <H1>Назначения стиля</H1>

<P> Пример вложенного стиля</P>

</BODY>

Инлайновый стиль. Наравне с возможностью "импортировать" стиль с другого компьютера или указать его для всей страницы разом существует возможность указать стиль непосредственно для определенного тега или строки, что видно из названия.

<тег STYLE="свойство: значение"> ТЕКСТ </тег>

Пример:

<BODY>

<H1 STYLE="font-family: Arial; font-size: 40pt; Color:red">

Назначение стиля

</H1>

<P STYLE="font-size:28pt; line-height:20pt">

Пример инлайнового стиля </P>

</BODY>

Иерархия стилей

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

инлайновый;

вложенный;

присоединенный.

Поэтому в примере, где файл style1.css предписывает стиль

I {font-size: 30pt; Color:red}

а остальные стилевые решения заданы как

<HEAD>

<LINK REL="stylesheet" TYPE="text/css" HREF="style1.css">

<STYLE TYPE="text/css">

I {Color:blue; text-decoration:underline}

</STYLE>

</HEAD>

<BODY>

<I STYLE="font-size:28pt; color:green">Иерархия стилей</I>

</BODY>

исполняться будет только декларация инлайнового стиля (рис. 6).

В случае когда стилевое решение задается методами, стоящими на одной ступени в иерархии, исполняться будет стилевое решение, заданное последним. Если все таки необходимо выделить для исполнения какое-либо определенное значение в декларации, то можно сделать его "важным", а следовательно, и безусловно исполняемым. Синтаксис:

{свойство: значение!important}

Внимание! Важным будет только то значение в декларации, важность которого непосредственно указана, а не все значения в декларации. Поэтому в примере

<HEAD>

<STYLE TYPE="text/css">

.color {background:black; font-size:28pt; color:aqua!important}

</STYLE>

</HEAD>

<BODY>

<P CLASS="code" STYLE="background:blue; font-size:28pt; color:yellow">

Задание важности стиля</P>

</BODY>

безусловно, исполнится только значение color:aqua класса .color, как это и показано на рис. 7.

Д.Адров

СomputerWeekly, N1, 1998, c.20,45