Богатство стилей

Прежде всего, CSS обеспечивают более богатое представление документа, чем когда либо, даже на пике своего репрезентативного пыла, позволял HTML. CSS позволяют задавать цвета текста и фона любых элементов, создавать рамки и увеличивать или уменьшать отступы вокруг элементов. Благодаря им можно сделать так, чтобы текст отображался прописными буквами, и добавить дополнительные элементы оформления (например, подчеркивание), разбивки и даже управлять тем, будет ли он отображаться вообще, а также они дают возможность реализовать многие другие эффекты.

Возьмем для примера первый (и основной) заголовок на странице, который обычно является заголовком самой страницы. Пример правильной разметки:

Паря над водой



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

h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline; background: yellow;}

Вот и все.


Как видите, все, что вы делали в HTML, можно сделать в CSS. Однако не надо ограничивать себя только тем, что умеет HTML:

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

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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Альтернативные таблицы стилей
Атрибуты
Веб спускается с Олимпа
Действительные правила стилей
Директива @import

Вернуться в раздел: CSS / 1. CSS и документы