 |
Группирование и наследование
|
|
|
|
Каскадные таблицы стилей
Общие положения
H1 {color: blue}
Любое правило каскадных таблиц стилей состоит из двух частей: селектора (H1) и объявления (color: blue), которое состоит из двух частей: свойства (color) и значения (blue).
Связывание таблиц стилей с документом
Существует четыре способа связывания документа и таблицы стилей:
1. Связывание – позволяет использовать одну таблицу стилей для форматирования многих страниц HTML
2. Внедрение – позволяет задавать все правила таблицы стилей непосредственно в самом документе
3. Импортирование – позволяет встраивать в документ таблицу стилей, расположенную на любом сервере в сети
4. Встраивание в теги документа – позволяет изменять форматирование конкретных элементов страницы
Связывание (рекомендуемый) позволяет хранить таблицу стилей в отдельном файле и присоединять ее к документам с помощью тега <LINK>, задаваемого в головной секции <HEAD>:
<LINK REL="stylesheet" TYPE="text/css" HREF="mystyles.css">
При внедрении таблицы стилей в документ правила, ее составляющие, задаются в элементе, определяемом тегами <STYLE TYPE="text/css"> и </STYLE>, который должен размещаться в секции <HEAD> документа:
<HEAD>
<STYLE TYPE="text/css">
<!--
B { text-transform: uppercase; }
P { background-color: lightgrey;
text-align:center; }
-->
</STYLE>
</HEAD>
В теге <STYLE> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей:
@import: url(mystyles.css);
Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил (после — не рассматриваются, а просто пропускаются!). Значением свойства @import является URL-адрес файла таблицы стилей.
Последний способ задания значений свойств таблицы стилей предназначен для оперативного форматирования определенного элемента документа и называется встраивание.
|
|
|
<H1 STYLE="color: red">Заголовок отображается шрифтом красного цвета</H1>
Группирование и наследование
Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделенных запятыми, если для них задается одно правило. Например, следующие правила
H1 {font-family: Arial}
H2 {font-family: Arial}
H3 {font-family: Arial}
можно сгруппировать и задать в виде одного правила со списком селекторов через запятую
H1, H2, H3 {font-family: Arial}
Аналогично группируются определения, только в списке они разделяются точками с запятой (;). Следующие правила форматирования заголовка первого уровня
H1 {font-weight: bold}
H1 {font-size: 14pt}
H1 {font-family: Arial}
можно задать в виде одного правила, сгруппировав определения:
H1 {font-weight: bold;
font-size: 14pt;
font-family: Arial;
}
Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном (стенографическое свойство). Например, предыдущий пример при использовании свойства 'font' запишется так:
H1 {font: bold 14pt Arial}
В HTML некоторые элементы могут содержать другие. В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя. Некоторые свойства не наследуются вложенными элементами от своих родителей, например свойство background-color, но по умолчанию вложенные элементы будут отображаться с фоном родительского элемента, так как это свойство по умолчанию имеет значение transparent.
BODY {
color: black;
font-family: "Times New Roman";
background: url(texture.gif) white;
}
Селекторы
Правила каскадных таблиц стилей, в которых в качестве селектораиспользуются теги HTML, влияют на отображение всех элементов заданного типа в документе. Следующее правило отображает без подчеркивания все элементы-ссылки (тег <A>) в документе:
|
|
|
<STYLE TYPE="text/css">
<!--
A { text-decoration:none; }
-->
</STYLE>
А что делать, если необходимо некоторые ссылки отобразить по-другому? Можно задать для них правило форматирования непосредственно в теге, а можно применить атрибут CLASS, добавленный в HTML 4.0 в качестве стандарта для всех тегов. Значением атрибута CLASS является ссылка на класс, задаваемый в таблице стилей.
Селектор CLASS
Класс позволяет задать разные правила форматирования для одного элемента определенного типа или всех элементов документа.
<STYLE TYPE="text/css">
<!--
H1.red { color: red; }
H1.blueBgrd { color: red; background-color: blue}
-->
</STYLE>
В тексте документа ссылка на соответствующий класс задается в атрибуте CLASS:
<H1 CLASS="red">Красный шрифт</H1>
<H1 CLASS="blueBgrd">Красный шрифт на синем фоне</H1>
Если класс должен применяться ко всем элементам документа, то в селекторе задается просто имя класса с лидирующей точкой без указания конкретного элемента:
<STYLE TYPE="text/css"><!--
.red { color: red; }
.blueBgrd { color: red; background-color: blue}
--></STYLE>
Теперь два класса red и blueBgrd можно применять к любым элементам документа:
<P ClASS=red>Первый параграф</P>
<P ClASS=blueBgrd>Второй параграф</P>
Селектор ID
Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но он задает уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Атрибут ID можно применять к любому элементу документа.
Правила таблиц стилей регламентируют использование уникального идентификационного имениэлемента в качестве селектора, предваряя его символом '#':
<STYLE TYPE="text/css"><!--
#par24 { letter-spacing: 1em; }
H1#form3 { color: red; background-color: blue}
--></STYLE>
<BODY>
<P ID=par24>Разреженные слова в параграфе</P>
<H1 ID=form2>Черный шрифт</H1>
|
|
|
