2.1.2. Включение таблиц стилей в html-документ
Имеется три способа задания стилей в HTML-документе. Перечислим их в порядке предпочтения.
2.1.2.1. Внешние таблицы стилей
Для подключения к документу внешней таблицы стилей (т. е. таблицы стилей, хранящейся в отдельном файле) следует поместить в заголовок документа элемент LINK, как показано выше, например:
<LINK rel="stylesheet" href="style.css" type="text/css">
В элементе LINK можно дополнительно указать типы устройств, на которые распространяется данная таблица стилей, например:
<LINK rel="stylesheet" href="style.css" type="text/css" media="screen, print">
Внешние таблицы стилей следует использовать в том случае, когда несколько HTML-документов пользуются единой таблицей стилей.
2.1.2.2. Внутренние таблицы стилей
Для включения в документ внутренней таблицы стилей следует поместить в заголовок документа элемент STYLE. Пример:
<HEAD>
<STYLE type="text/css">
<!--
H1 {border-width: 1; border: solid; text-align: center}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Этот заголовок имеет указанный выше стиль</H1>
</BODY>
Внутренние таблицы стилей следует использовать в том случае, когда данная таблица стилей используется только в данном HTML-документе.
2.1.2.3. Таблицы стилей элементов
Последним способом задания стилей является определения таблицы стилей отдельного элемента путем задания его атрибута style. Например, стиль элемента H1 из предыдущего примера мог бы быть задан и так:
<H1 style="border-width: 1; border: solid; text-align: center">
Этот заголовок имеет указанный стиль</H1>
Вообще говоря, подобной практики следует избегать; она приемлема только в том случае, когда ваш документ содержит единственный элемент с данным набором стилей.
2.1.3. Синтаксис css
2.1.3.1. Кодировка символов
Таблица стилей CSS — это последовательность символов Unicode. Эти символы могут храниться в любой допустимой кодировке, при соблюдении следующих правил. Внутренние таблицы стилей должны иметь ту же кодировку символов, что и документ в целом. Кодировка внешних таблиц стилей определяется обозревателем в следующем порядке:
-
сначала анализируется charset в поле Content-Type метаописателя HTML-документа;
-
если его нет, то директива @charset;
-
если ее нет, то ссылка на таблицу стилей в документе (например, атрибут charset элемента LINK).
Для включения в таблицу стилей символов, отсутствующих в данной кодировке. следует использовать формат "\xxxx", где xxxx — шестнадцатеричный код символа в Unicode. Например, код "\410" задает прописную русскую букву А.
2.1.3.2. Директива @charset
Директива @charset задает кодировку символов таблицы стилей, например:
@charset "ISO-8859-1";
Данная директива должна быть первой в таблице стилей, причем таблица должна содержать не более одной директивы @charset. Список допустимых кодировок символов приведен в Приложении 7, но обозреватель не обязан поддерживать все перечисленные там кодировки.
Поддержка:
Соответствует стандарту (5.0+)
Не
поддерживается
2.1.3.3. Операторы, директивы и правила
Таблица стилей состоит из набора операторов. При этом каждый оператор является либо директивой, либо правилом. Операторы могут разделяться пробелами. В CSS пробелами считаются только следующие символы Unicode: пробел (код 32), табуляция (код 9), перевод строки (код 10), возврат каретки (код 13) и перевод формата (код 12).
Директива (at-rule) начинается с символа at (@) и соответствующего ключевого слова. CSS2 содержит следующие директивы:
|
Таблица 2.1. Директивы языка CSS |
|
|
@charset |
Задает кодировку символов. |
|
@font-face |
Задает описания шрифтов. |
|
@import |
Включает другую таблицу стилей в текущую. |
|
@media |
Задает имена устройств отображения. |
|
@page |
Задает свойства страницы для печати. |
Примеры директив:
@import "subs.css";
@media print {
BODY { font-size: 10pt }
}
Правило (rule) состоит из селектора и блока деклараций, заключенного в фигурные скобки, например:
H1 {
font-weight: bold;
font-size: 12pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal
}
Здесь H1 — это селектор, за которым следует блок деклараций. Каждая декларация, как видно из данного примера, состоит из названия свойства (например, font-weight), символа двоеточия (:) и значения свойства (например, bold). Декларации должны разделяться точкой с запятой (;).
Отметим, что согласно определению CSS все его элементы не зависят от регистра. Таким образом мы можем писать h1 вместо H1, Font-Weight вместо font-weight и т .д. Тем не менее в целях единообразия в данном справочнике мы пишем имена селекторов прописными буквами, а названия свойств — строчными. Значения свойств, которые в документе могут зависеть от регистра, определяются языком документа. Так, названия тегов HTML не зависят от регистра, а названия тегов XML — зависят.
Таблицы стилей могут содержать комментарии. Комментарий начинается с символов /* и заканчивается символами */. Вложенные комментарии не допускаются. Пример:
H1 {
font-weight: bold; /* жирность шрифта */
font-size: 12pt; /* размер шрифта */
font-family: Helvetica; /* название шрифта */
font-variant: normal; /* вариант шрифта */
font-style: normal /* стиль шрифта */
}