5. Форматирование страницы с использованием каскадных таблиц стилей

Если вам уже приходилось пользоваться серьезным текстовым процессором, например, таким как Microsoft Word, то вы уже сталкивались с понятием стиля в своей работе.

Стиль – это комбинация двух или нескольких параметров форматирования, собранных в один компактный пакет.

На web-странице стиль выполняет схожую функцию. То есть он позволяет вам задать последовательность параметров форматирования для данного тега, например <P> или <H1>. Объединение нескольких настроек форматирования в один-единственный пакет, с которым легко иметь дело, позволяет сэкономить значительное время. Можно определить все ваши стили на отдельной странице, а затем сказать браузеру, где эта страница расположена, поэтому такие страницы напоминают старинные таблицы стилей. В общем, таблица стилей HTML – это любое собрание стилей, независимо от того, где оно расположено, на отдельной странице или на текущей. Использование каскадных таблиц стилей (CSS – Cascading style shuts) дает два больших преимущества:

– они позволяют сэкономить время, поскольку вам нужно один раз задать определение стилевого форматирования, а затем браузер применяет это форматирование каждый раз, когда вы используете соответствующий тег;

– они облегчают изменение страниц, поскольку все, что вам нужно сделать, – это отредактировать определение стиля, а потом все места, в которых использовался данный стиль, будут автоматически обновлены.

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

5.1. Формирование каскадных таблиц стилей

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

описание

Селектор { Свойство: Значение; }

правило

Правило CSS состоит из двух частей: селектора и описания.

Селектором называется элемент, к которому относится определенный стиль. Элементами могут быть не только простые теги, например заголовок <H1> или <P>, но и более сложные теги, например <A> или таблица <TD>.

Например, в записи

P {color: red;}

P является селектором, а заключенное в скобки выражение {color: red;} – описанием.

Описание, в свою очередь, также состоит из двух частей: свойства и значения.

Свойство – это параметр стилевого оформления документа, который определяется спецификацией CSS. Каждый элемент характеризуется своими свойствами, например цвет заголовка, начертание шрифта и другими.

Значение – это параметр, который характеризует свойство. Каждое свойство достигает определенного значения. Различают числовые и символьные значения свойств. Числовые значения применяются для задания размеров, например, ширины и высоты блока, размера шрифта, толщины рамки, межстрочных интервалов и т. д. Значение выражается десятичным числом, за которым обычно следует размерность. Размерность записывается после числа без дополнительного пробела, например, 8pt, 1cm. В случае отрицательного значения перед числом ставится знак минус (например, –15px). Числовые значения могут выражаться в абсолютных или относительных единицах (табл. 5.1).

P { font-size: 14pt;}

В данном примере размер символов для абзаца устанавливается в 14 пунктов.

Таблица 5.1