На то, что при описании элементов 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}
будет применен только к слову, описанному обоими тегами, т. е. к слову "стили".
Классы селекторов. Назначение класса для одинаковых тегов
Спецификация 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>
Классы селекторов. Назначение класса для разных тегов
Назначение класса для разных тегов происходит аналогично вышеизложенному, с той лишь разницей, что тег, к которому отнесен класс, явно не указан:
.имя_класса { свойство: значение }
Данная конструкция позволяет отнести придаваемую классу декларацию к тому тегу, к которому это требуется в данный момент, как это и сделано в примере:
<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>
Идентификаторы селекторов
Идентификаторы (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>
Селекторы - ссылки
Браузеры обычно отображают уже использованные ссылки иначе, нежели неиспользованные. 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>
Назначение стиля тегам или страницам
Назначить определенный стиль для 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>
исполняться будет только декларация инлайнового стиля.
В случае когда стилевое решение задается методами, стоящими на одной ступени в иерархии, исполняться будет стилевое решение, заданное последним. Если все таки необходимо выделить для исполнения какое-либо определенное значение в декларации, то можно сделать его "важным", а следовательно, и безусловно исполняемым. Синтаксис:
{свойство: значение!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