При подготовке статьи были использованы материалы Интернет-Университета Информационных Технологий http://www.intuit.ru/, курс Введение в JavaScript, справочник Клиентский JavaScript.
Каскадные таблицы стилей (CSS Cascading Style Sheets) позволяют расширить возможности форматирования языка HTML. Стили обычно хранятся в отдельных файлах или занимают отдельный блок в HTML разметке, что позволяет существенн сократить объем кода на HTML странице с одной стороны, и в некоторой степени отделить контент от разметки с другой стороны.
Впервые стили появляются в HTML 4.0, а в XHTML они уже вытесняют большинство атрибутов элементов языка разметки. Последняя рекомендуемая W3C спецификация каскадных таблиц стилей - это спецификация CSS2. А рекомендуемый консорциумомом W3C перевод этой спецификации на русский язык, находится по адресу http://alepira.ural.ru/css2/index.htm.
Каскадные таблицы стилей позволяют задать формат блоков текста на HTML странице, их расположение, размер и внешний вид. Таблицы стилей также позволяют управлять всеми параметрами шрифта и его цвета. CSS позволяет создать многослойный документ и управлять слоями.
Каскадные таблицы стилей определяют стиль оформления документа, а называются каскадными потому, что параметры форматирования, заданные с их помощью в элементах-контейнерах каскадно наследуются вложенными в них дочерними элементами.
Таблицы стилей могут встречаться на HTML странице, как атрибут тега, они могут располагаться в голове HTML документа в контейнере <STYLE>, а также таблицы стилей могут быть присоединены к документу с помощью тега <LINK>.
Приоритет использования стилей зависит от их местоположения в HTML документе или относительно него. Подключаются таблицы стилей к HTML документу в следующем порядке:
В этом же порядке стили переопределяют друг друга. То есть, если новое описание какого нибудь стиля совпадает с предыдущим, то оно переопределяет предыдущее определение.
Селектором может выступать:
Имя класса или идентификатора должно начинаться с буквы. HTML элементы стили которых переопределяют с помощью селектора класса должны содержать атрибут class="ИмяКласса", а элементы стили которых переопределяют с помощью селектора - идентификатора должны содержать атрибут id="ИмяИдентификатора".
Пример
Файл внешней таблицы стилей, в этом примере, example001.css содержит следующие строки кода:
P {font-family:Arial, sans-serif; color:blue;}
Внешняя и внутренняя таблицы стилей подключаются к HTML документу с помощью следующих тегов, располагающихся в голове документа.
<LINK type="text/css" rel="stylesheet" href="example001.css">
<STYLE>
P {color:red;}</STYLE>
P I {color:#19AD39;font-style:normal;font-weight:bold;}
.newgold {color:#DFAF00;}
#newP {font-weight:bold;}
HTML код примера выглядит так:
<P>
Так выглядит шрифт, стили которого определены во внешней таблице стилей как P {font-family:Arial, sans-serif;color:blue;}, Но буквы голубого цвета в этом тексте вы не увидите, так как цвет текста переопределен во внутренней таблице стилей P {color:red;}.
<I>
Этот тест вложен в элемент I, который, в свою очередь, является дочерним элементом тега P. Стиль для него определен во внутренней таблице P I {color:#19AD39;font-style:normal;font-weight:bold;}
</I></P>
<DIV><I>
A этот курсив не является дочерним элементом тега P.
</I></DIV>
<P class=newgold>
Этот текст находится в контейнере P class=newgold. Его стиль .newgold {color:#DFAF00;}
</P>
<P id=newP>
Этот текст находится в контейнере P id=newP. Его стиль #newP {font-weight:bold;} плюс ранее определенные стили.
</P>
<DIV>
Можно определить стиль и в самом элементе разметки SPAN style="color:white;background-color:black;"
<SPAN style="color:white;background-color:black;">
Как в этом месте.
</SPAN>
Действие стиля отменяется за пределами контейнера, его использующего.
</DIV>
В описании элементов разметки языка HTML существует понятие строкового (in-line) элемента разметки и блочного (block) элемента разметки. У блочных элементов разметки могут быть определены рамки, размеры. Для блоков могут быть определены: расположение на экране, и даже за его пределами и видимость. Для строковых элементов каскадные таблицы стилей определяют фон, шрифт и его параметры.
Описывать стиль для строчных элементов можно в объявлениях для блочных элементов, но блочные описания не применимы для строковых элементов разметки. Упрощенно можно сказать, что атрибуты описания стиля строкового элемента являются подмножеством атрибутов описания стиля блочного элемента.
Блочные элементы можно вкладывать друг в друга, но они не должны пересекаться. Строковые элементы можно как вкладывать, так и пересекать (согласно DTD и практике старых версий браузеров), но последнее делать не рекомендуется.
Обобщениями блочного и строкового элементов , с точки зрения стилей, являются элементы DIV и SPAN, соответственно.
Фон представляет собой область, окружающую отдельные символы текста элемента. В качестве фона вы можете устанавливать либо сплошной цвет, либо рисунок.
Технически дочерние элементы не наследуют свойств фона. Однако по умолчанию фон элемента является прозрачным. Это означает, что если вы опустите все свойства фона для дочернего элемента, будут видны цвет фона или рисунок родительского элемента (или браузера), т.е. фон дочернего элемента будет таким же, что и фон родительского элемента.
| Свойство | Описание | Значения | Примечания |
|---|---|---|---|
| background | Служит для указания всех параметров фона в одном объявлении | ||
| background-color | Задает цвет фона элемента | color / transparent | color - цвет по названию или в RGB |
| background-image | Задает в качестве фона изображение | url() / none | Адрес изображения записывают в скобках |
| background-attachment | Определяет поведение фонового изображения при прокрутке | scroll / fixed | |
| background-position | Задает начальное положение фонового изображения | top / center / bottom | left / center / right | Указывают и вертикальное и горизонтальное выравнивание, или горизонтальную и вертикальную координату в процентах или пикселях |
| background-repeat | Определяет способ размещения фонового изображения | repeat / repeat-x / repeat-y / no-repeat |
Упражнение: Следующий HTML документ выводит в Internet Explorer таблицу
<HTML><HEAD><STYLE>где dub.gif это фоновый рисунок
TABLE {background-image:url("dub.gif")}
TD {background-color:white}
</STYLE></HEAD><BODY>
<TABLE border="5" cellpadding=5 cellspacing=5><TR>
<TD>Ячейка таблицы</TD><TD>Ячейка таблицы</TD>
</TR></TABLE>
</BODY></HTML>
