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