Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Каскадные Таблицы Стилей.doc
Скачиваний:
2
Добавлен:
21.12.2018
Размер:
594.43 Кб
Скачать

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 вместо H1Font-Weight вместо font-weight и т .д. Тем не менее в целях единообразия в данном справочнике мы пишем имена селекторов прописными буквами, а названия свойств — строчными. Значения свойств, которые в документе могут зависеть от регистра, определяются языком документа. Так, названия тегов HTML не зависят от регистра, а названия тегов XML — зависят.

Таблицы стилей могут содержать комментарии. Комментарий начинается с символов /* и заканчивается символами */. Вложенные комментарии не допускаются. Пример:

H1 {

font-weight: bold; /* жирность шрифта */

font-size: 12pt; /* размер шрифта */

font-family: Helvetica; /* название шрифта */

font-variant: normal; /* вариант шрифта */

font-style: normal /* стиль шрифта */

}

Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.

Оставленные комментарии видны всем.