Каскадные таблицы стилей или CSS (Cascading Style Sheets) были революцией,
потрясшей WWW. Елси до этого Web-дизайнер не знал, как будет выглядеть его
творение в разных программах Web-обозревателей, то теперь он может
контролировать все: от начертания шрифта до положения картинки на
странице.
Предположим, вам нужно изменить цвет текста в HTML-документе с черного на
синий. Вы помещаете его в пару тегов <FONT> и </FONT> следующего
вида:
<P><FONT color="blue">Это синий
текст</FONT></P>
А теперь представим, что вы внесли определение внешнего вида текста в другое
место документа:
P.bluetext { color: blue }
Эта строка обозначает, что мы определили для текста, находящегося внутри
тега <P> и помеченного стилевым классом bluetext, синий цвет шрифта. Такая
конструкция HTML называется определением стиля или просто
стилем.
В результате в HTML-тексте у нас остануться только теги логического
форматирования текста:
<P class="bluetext">Это синий текст</P>
Здесь мы пометили нужный текст с помощью атрибута class, присвоив ему
значение bluetext. Атрибут class задает имя стилевого класса для тега, и его
поддерживают все теги.
Вы можете переназначить цвета текста для всех тегов <P>. В этом случае
мы не задаем имя стилевого класса:
P { color: blue }
Или вы можете задать форматирование для стилевого класса, не привязанного ни
к какому тегу:
.bluetext{ color: blue }
И теперь вы можете присваивать стилевой класс тексту, заключенному в любые
теги:
<H1 class="bluetext">Это синий цвет</H1>
<CENTER class="bluetext">Это синий цвет</CENTER>
Это <B class="bluetext">жирный синий</B> текст
Вы можете дать специальное форматирование тегу только в том случае, если он
заключен внутрь другого тега:
H7 B { color: blue }
И теперь:
<H7><B>Этот</B> текст будет синим</H7>
<P>А <B>этот</B> - не будет!</P>
Более того, вы можете встроить определение стиля прямо в тег:
<P style="color: blue">Это синий текст</P>
Это достигается при помощи атрибута style, который также поддерживают все
теги HTML.
И еще один способ привязать стиль к какому-либо тегу - использовать атрибут
id, задающий уникальное имя элемента HTML.
Вы можете задавать несколько атрибутов в определении стиля. В этом случае
они разделяются точкой с запятой:
P { color: blue; fotn-size: 9ptl; text-align: center }
Определение стилей, вынесенные в заголовок HTML-документа, составляют
таблицу стилей. Таблица стилей заключается в теги <STYLE> и
</STYLE>:
<Style [type="text/css"]>
. . .
</STYLE>
Тег <STYLE> может содержать необязательный атрибут type, содержащий
обязательное значение text/css.
Таблицу стилей можно вынести в отдельный файл и использовать сразу в
нескольких документах. В этом случае в заголовке HTML-документа необходимо
разместить тег <LINK>, указывающий на эту таблицу стилей:
