|
Новые статьи:
|
Каскадные таблицы стилей CSS
Каскадные таблицы стилей или 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. #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="http://programmersclub.ru/{Адрес файла таблицы стилей}"> |
|
|
|
||