Каскадные таблицы стилей Общие положения
H1 {color: blue}
Любое правило каскадных таблиц стилей состоит из двух частей: селектора (H1) и объявления (color: blue), которое состоит из двух частей: свойства (color) и значения (blue).
Связывание таблиц стилей с документом
Существует четыре способа связывания документа и таблицы стилей:
Связывание – позволяет использовать одну таблицу стилей для форматирования многих страниц HTML
Внедрение – позволяет задавать все правила таблицы стилей непосредственно в самом документе
Импортирование – позволяет встраивать в документ таблицу стилей, расположенную на любом сервере в сети
Встраивание в теги документа – позволяет изменять форматирование конкретных элементов страницы
Связывание (рекомендуемый) позволяет хранить таблицу стилей в отдельном файле и присоединять ее к документам с помощью тега <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;
}