Глава 1. Основные понятия

Общие положения

До появления таблиц стилей форматирование документов HTML осуществлялось с помощью атрибутов, определяющих цвет, выравнивание, шрифты, размеры и т.д. Например, чтобы выделить текст жирным, красным и большого размера, использовалась конструкция вида: 

<B><FONT color="red" size="5">текст</FONT></B>

При создании объемных документов такое форматирование требовало много времени. Если позже возникала необходимость изменить дизайн страницы, приходилось редактировать множество таких конструкций. Также декоративное оформление текста требовало вставки графики, что увеличивало время загрузки документа из-за большого объема кода.

Использование таблиц стилей стало решением этой проблемы. Предварительно задав стиль для определенного элемента документа, он будет применяться везде, где встречается этот элемент. Такой подход упрощает создание и редактирование документов.

В CSS можно создать стиль в отдельном файле и подключить его ко многим страницам сайта. Таким образом, изменяя один файл стилей, можно менять внешний вид всех страниц. Есть три вида таблиц стилей: внешние, внедренные и включенные. Если на странице есть ссылка на внешнюю таблицу стилей и определена внедренная таблица, то последняя имеет приоритет. Но наивысший приоритет у включенных стилей. Этот метод позволяет комбинировать лучшие качества всех видов таблиц стилей.

Синтаксис стиля

Синтаксис стиля не слишком сильно отличается от синтаксиса HTML, он записывается следующим образом:

Синтаксис: селектор{атрибут: значение}

Здесь под селектором подразумевается элемент, для которого задается стиль, далее в фигурных скобках, через ";" записываются пары атрибут:значение, где ":" является заменителем знака "=". Например, для окрашивания всех заголовков второго уровня в красный цвет достаточно просто указать в описании стиля следующее: 

H2 {color: red}

Селекторы могут описывать следующие элементы:

В том случае, если свойств у тэга предположительно много, то их разделяют точкой с запятой:

H2 {color: red; font-size: 15pt}

Если какой-либо тэг в документе вставлен внутри другого тэга, то он наследует все его свойства, и для того, чтобы задать ему особые свойства, необходимо использовать следующий синтаксис: 

H3 B {color: green}

Здесь назначается зеленый цвет для текста, выделенного тэгами <B> и </B>, если он является заголовком третьего уровня.

Включенные таблицы стилей

Включенные таблицы стилей позволяют управлять форматированием при помощи стандартных тэгов HTML, включая определения конкретного стиля для содержимого конкретного тэга, подобно его атрибутам. Сам по себе метод включения таблиц стилей в некотором смысле противоречит основной идее каскадных таблиц стилей. Так как ключевым моментом этой технологии является управление стилями отдельных страниц или узла целиком. Явное включение стилей аналогично использованию элемента <FONT> и должно применяться только в тех случаях, когда необходимо определить стиль только небольшого фрагмента текста.

Пример: <P style="color:blue;"> стиль применяется к тэгу <P>, данный единичный абзац будет иметь синий текст.

Внедренные таблицы стилей

Внедренные таблицы стилей позволяют управлять отдельными страницами при помощи пары тэгов <STYLE> и </STYLE>. Эта пара со всем её содержимым помещается между тэгами <HTML> и <BODY>. При написании кода внедренной таблицы выбираются тэги, которые будут являться контейнерами текста. Действие таблицы стилей будет распространяться только на те фрагменты текста, которые будут заключены именно в эти тэги. Точно также, как и скрипты, таблицы стилей могут быть спрятаны от старых браузеров в комментарии <!-- и -->. Внедренные таблицы используют наиболее часто. 

<HTML>
<HEAD>
</HEAD>
<STYLE>
BODY {color: #000000;}
H3 {color: #0000ff;}
A {color: #ff0000;}
</STYLE>
<BODY>
содержимое
</BODY>
</HTML>

Внешние таблицы стилей

Этот метод требует создания отдельного файла таблицы с основными стилями. Такой файл должен иметь расширение файл.css. Затем необходимо связать нужные документы с данной таблицей. Нужно поместить в связываемом документе где-нибудь между тэгами <HEAD> и </HEAD> следующую строку: 

<LINK rel=stylesheet href="файл.css" type="text/css">

либо

<STYLE>
@import URL("файл.css");
</STYLE>

Все содержимое будет впредь форматироваться с помощью стилей заданных в таблице файл.css. Метод очень удобен для создания узлов страниц посвященных родственным темам или принадлежащих одному владельцу, в едином хорошо продуманном и легко узнаваемом стиле.

Аппаратно-зависимые таблицы стилей

Одной из ключевых особенностей таблиц стилей является их способность адаптировать представление документа для различных устройств вывода: монитора, синтезатора речи, устройства печати азбуки Брайля, принтеров и прочих. В CSS определены следующие типы устройств:

Существуют разные способы применения аппаратно-зависимых таблиц стилей:

  1. С использованием правила @import:
<STYLE>
@import URL("файл.css") print;
</STYLE>
  1. Через правило @media:
<STYLE>
@media print{...};
</STYLE>
  1. Задав стиль непосредственно в элементе <LINK>:
<LINK rel="stylesheet" type="text/css" media="print, handheld" href="file.css">
  1. Прямо в элементе <STYLE>:
<STYLE media=print>
селектор{атрибут: значение}
</STYLE>