Глава 4. Каскадные списки стилей
В этой главе:
- Разделение содержимого и внешнего вида
- Создание списка стилей
- Терминология каскадных списков стилей
- Наследование
- Добавление на Web-страницу каскадного списка стилей
- Внедрение каскадного списка стилей
- Связывание с внешним списком стилей
- Импортирование внешнего списка стилей
- Включение стилей в HTML-дескрипторы
- Применение нескольких правил каскадных списков стилей к одному селектору
- Выбор типа шрифта с помощью свойства font-family
- Задание размера текста с помощью свойства font-size
- Создание перекрывающегося текста
- Выравнивание текста на Web-странице
- Установка полей и высоты строк
- Вывод текста в колонках
- Работа с границами
- Создание абзацного отступа и работа с интервалами между буквами, словами и строками
- Использование в тексте начальных заглавных букв
- Настройка внешнего вида гиперссылок
- Создание эффекта отбрасывания тени
- Использование графических границ
- Расположение фоновых изображений и "водяных знаков"
- Плавающие изображения и текст
- Настройка внешнего вида списков
- Создание эффектов текста и изображений с помощью фильтров
- Выравнивание надписей с элементами формы и добавление цветов в форму
- Вывод на странице галереи миниатюр с заголовками
- Управление курсором
- Расположение элементов Web-страницы по слоям
- Передача списка стилей через функцию проверки
Одна из задач, с которой вы постоянно встречаетесь при создании Web-страниц, — расположение элементов в требуемых местах страницы. Web-страница не имеет внутренней системы координат, по отношению к которой можно было бы располагать текст, изображения и другие объекты. В главе 2 книги было рассказано об использовании HTML-таблиц для создания ячеек, в которых могут располагаться элементы Web-страницы. К сожалению, применение невидимых таблиц для обеспечения плавильного расположения элементов за счет добавления дополнительных дескрипторов (по крайней мере, по два для каждой строки и столбца таблицы) существенно усложняет HTML-код страницы. Более того, скрытые таблицы усложняют процесс работы со страницей. Предположим, например, что в определенное место Web-страницы необходимо поместить изображение или текст. Чтобы добавить в таблицу новую ячейку в то место, куда должен быть помещен новый элемент, во многих случаях требуется перекодировать всю или часть таблицы.
Каскадный список стилей (Cascading Style Sheet, CSS), на который иногда ссы- лаются как на вложенную таблицу стилей, представляет собой набор спецификаций (называемых правилами), которые позволяют получить полный контроль над расположением элементов на Web-странице и внешним видом ее содержимого. Правила каскадных списков стилей могут использоваться для выбора цвета фона, графических изображений или "водяных знаков", которые будут выводиться под содержимым страницы. Кроме того, свойство position каскадных списков стилей исключает необходимость использования скрытых таблиц для расположения элементов страницы и позволяет указывать Web-браузеру, где располагать каждый конкретный элемент. И, наконец, правила каскадных списков стилей позволяют указывать тип и выбирать размер, цвет и вид текста. Помимо использования обычного, полужирного и курсивного начертаний, каскадные списки стилей дают возможность создавать затененный текст или текст с другими специальными эффектами без преобразования символьных данных в графические изображения, загрузка которых производится гораздо медленнее.
Несмотря на то что каскадный список стилей можно добавить в Web-документ несколькими различными способами, наверное, самый простой способ — поместить правила списка стилей непосредственно в заголовок Web-страницы, как показано на примере следующего кода:
<html><head>
<style type="text/css">
... правила списка стилей ...
</style>
</head><body>
... Содержимое Web-страницы ...
</body></html>
Несмотря на длинное название, "каскадный список стилей" представляет собой всего лишь набор операторов между начальным и конечным дескрипторами стиля (<style></style>), расположенными перед началом HTML-кода страницы. При считывании HTML-документа браузер применяет правила (т.е. операторы форматирования и позиционирования), приведенные в списке стилей, к элементам Web-страницы, описанным в разделе <body>. На рис. 4.1 показан простой каскадный список стилей с двумя правилами, которые указывают Web-браузеру, каким образом выводить на экран два элемента, описанные в дескрипторе <body> Web-страницы.
Рис. 4.1. Web-страница с каскадным списком стилей
Помимо позиционирования элементов страницы и форматирования текста, правила каскадных списков стилей позволяют управлять расстоянием между символами, словами, строками и абзацами. Более того, правила списков стилей дают возможность установить поля Web-страницы, ширину границы вокруг части текста или других элементов и управлять выравниванием "плавающего" текста и объектов (например, графических изображений), внедренных в текст. Для примера на рис. 4.2 показано, каким образом браузер Internet Explorer реализует правила каскадного списка стилей, которые выравнивают плавающее изображение по левому краю окружающего его текста:
<head>
<style type="text/css">
<!--
р {margin-left:5em; margin-right:5em; text-align:justify} img {float:left; border-width:25px; border-color:white}
-->
</style>
</head>
Обратите внимание, что правила каскадного списка стилей в этом примере создают поля между текстом и левой и правой границами Web-страницы и создают границу белого цвета между текстом и сторонами изображения.
Когда в конце 1996 года появились каскадные списки стилей, они существенно обогатили и облегчили процесс разработки Web-страниц, предоставляя дизайнерам Web-страниц следующие возможности:
Рис. 4.2. Web-страница с плавающим рисунком текстом с полями
- Четкий контроль над расположением, шрифтами, цветами, фоном и другими типографическими эффектами.
- Способ изменения внешнего вида и форматирования неограниченного количества Web-страниц при изменении всего одного элемента — каскадного списка стилей.
- Возможность создания зрелищных страниц, использующих меньший объем кода, что, в свою очередь, позволяет сократить объемы страниц и быстрее загружать и отображать их в Web-браузерах.
Несмотря на довольно-таки холодный прием (в качестве конкурента широко используемого в то время динамического HTML — DHTML), каскадные списки стилей набирают все большую и большую силу благодаря постоянно углубляющейся поддержке спецификаций каскадных списков стилей Web-браузерами компаний Microsoft и Netscape.