CSS. Каскадные таблицы стилей. Подробное руководство.Символ-Плюс 2008

hi {color:maroon; font:italic 2em Times, serif; text-decoration:underline; background:yellow url(titlebg.png) repeat-x; border:1px solid red; margin-bottom:0; padding:5px;}

Теперь в качестве фона элемента hi выступает изображение, которое повторяется в горизонтальном направлении, а вокруг элемента добавлена рамка, отстоящая от текста минимум на пять пикселов. Вы также удалили поле (пустое пространство) в нижней части элемента. Это те возможности, к которым HTML даже и близко не мог подобраться, и это всего лишь малая часть того, что могут CSS.

Простота применения

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

Во-первых, таблицы стилей концентрируют команды, реализующие визуальные эффекты, в одном легкодоступном месте, а не разбрасывают их по всему документу. В качестве примера предположим, что в документе все заголовки h2 должны быть фиолетовыми. Работая с HTML, можно поместить тег font в каждый заголовок:

<h2xfont со1ог="ригр1е^,,>Зто фиолетовый! </fontx/h2>

Это должно быть сделано для каждого заголовка второго уровня. Если в документе 40 заголовков, то надо вставить 40 элементов font, по одному для каждого заголовка] Слишком много труда требует один небольшой эффект.

Предположим, что вы вставили все эти элементы font. Вы закончили, вы счастливы, а затем решаете (или начальник решает за вас), что заголовки h2 должны быть темно-зелеными, а не фиолетовыми. Надо возвращаться назад и вновь заменять каждый из элементов font. Конечно, можно обратиться к командам поиска и замены, поскольку заголовки являются единственным текстом фиолетового цвета в вашем документе. Но если вы ввели и другие элементы font фиолетового цвета, вы не можете применить автоматический поиск и замену, потому что тогда будут изменены и эти элементы.

Вместо этого намного лучше было бы иметь одно правило:

h2 {color:purple;}

Его не только намного быстрее набрать на клавиатуре, но и намного проще изменять. Для перехода от фиолетового цвета к темно-зеленому достаточно изменить одно-единственное правило.

Вернемся к нагруженному стилями элементу hi из предыдущего раздела:

hi {color:maroon; font; italic 2em Times, serif; text-decoration:underlino; background: yellow;)