Каскадные листы стилей
Типы листов стилей
Существует три способа применения листов стилей в документе HTML
Встраивание, при котором дескрипторы фрагментов документа дополняются короткими объявлениями формата. Встраивание предоставляет полный контроль над фрагментом, к которому оно применяется. Присовокупите атрибут Style=”x” к дескриптору абзаца, и броузер будет выводить абзац с применением параметров соответствующего стиля.
Внедрение, обеспечивающее контроль над страницей HTML. Использование дескриптора <Style> в пределах раздела <Head> страницы позволяет детально описать атрибуты применяемого ко всей странице стиля.
Связывание, известное также как применение внешнего листа стилей. В этом случае связанный документ использует эталонный лист стилей, применяемый для всего узла и хранящийся в файле с расширением .css.
Пример встраиваемого стиля
<P style=”font: 13pt verdana”> Для вывода текста применяется встроенный стиль. </P>
Пример внедренного стиля
<HTML>
<HEAD>
<TITLE>Пример внедрения стиля</TITLE>
<STYLE>
<!--
BODY {
background: #FFFFFF;
color: #000000;
}
H1 {
font: 14pt verdana; color: #CCCCCC;
}
P {
font: 13pt times;
}
A {
color: #FF0000; text-decoration: none;
}
-->
</STYLE>
</HEAD>
При использовании связанного стиля все описания хранятся в отдельном файле с расширением .css. Сам файл либо располагается в корневом каталоге узла, либо определяют вязь с ним в HTML-документах.
Пример листа стиля, предназначенного для связывания. Пусть он имеет имя mystyle.css.
BODY {
background: #000000;
color: #FFFFCC;
}
H1 {
font: 14pt Garamond; color: #CCCCCC;
}
P {
font: 13pt arial;
}
A {
color: #FF0000; text-decoration: none;
}
Чтобы связать HTML страницу с этим листом надо в раздел <HEAD> добавить следующую строку:
<HEAD>
<TITLE> Пример связывания стиля</TITLE>
<link rel=stylesheet href=”mystyle.css” type=”text/css”>
</HEAD>
Синтаксис листов стилей
Независимо от того, какой из способов применения листов стилей использован, синтаксис их схож. Он состоит из трех частей.
Селектора, обладающего свойствами, которые, в свою очередь имеют значения. Селектор обычно представляет собой стандартный элемент HTML-страницы, такой как, например, заголовок (H1) или абзац (P).
Свойств селектора.
Значений свойств селектора
Свойства и значения образуют объявление. Селектор и объявление образуют правило со следующим порядком записи:
H1 {
type-family: Garamond, times, serif;
}
При объявлении встроенного стиля не используются селекторы, так как стиль применяется только к дескриптору, в котором он определен:
<H1 style=”garamond, times, serif;”> text </H1>
Классы
Классом называется разбиение одного правила стиля на несколько частей. Если есть необходимость оформить один фрагмент текста иначе, чем другой, можно создать несколько наборов. Каждый набор вновь созданных стилей называется классом стиля.
Пример классов стиля применительно к заголовку:
<HEAD>
<STYLE>
<!--
H1.left {
font: 14pt arial;
color: #FF0033;
text-align: left;
}
H1.right {
font: 13pt arial;
color: #FF6633;
text-align: right;
}
-->
</STYLE>
</HEAD>
<BODY>
<H1 class=”left”> Заголовок выводится слева</H1>
<BR>
<H1 class=”right”> Заголовок выводится справа </H1>
</BODY>
Псевдоклассы
Чтобы управлять элементами, которые нельзя описать в виде обычных дескрипторов определены несколько псевдоклассов:
:first-child – первый дочерний элемент другого элемента;
:link – еще не посещенные ссылки;
:visited – посещенные ссылки;
:hover – элемент, над которым в настоящее время находится курсор;
:active – активный в данный момент элемент;
:focus – элемент, имеющий фокус ввода;
:first-line – первая форматированная строка абзаца;
:first-letter – первая буква абзаца;
В начале каждого псевдокласса стоят двоеточия. Псевдоклассы указывают после селектора.
Пример. Первая строка абзаца.
P:first-line {color: red}