Оформление веб-страницы с использованием стилей
Определение стилей в специальной таблице
Читая предыдущий раздел, некоторые, скорее всего, несколько раз поду мали: “Ну и где же здесь обещанное удобство? Неужели удобнее написать <SPAN STYLE="text-style: italic;">, чем просто <I>?”
Рис. 4.4. Веб-страница написанная с элементарным применением CSS
Все верно, в некоторых случаях Сев-запись действительно немного длиннее, но мы и не утверждали, что теперь нужно использовать только CSS, – в некоторых случаях можно воспользоваться и старыми тегами, ничего в этом предосудительного нет. Однако с помощью CSS мы имеем, во-первых, гораздо более широкие возможности, а во-вторых, получаем удобство работы над собственно стилями. В предыдущем разделе вы это удобство почувствовать не могли, поскольку в учебных целях мы записывали все свойства стилей как значения атрибута STYLE=. Этот способ широко применяется, но лишь в тех случаях, когда нужно применить какой-либо стиль к отдельно взятому фрагменту. А в большинстве случаев используют так называемые таблицы, стилей.
Вы, наверное, обратили внимание на то, что в предыдущем примере есть много повторений стилевых свойств. Повторяющиеся свойства можно определить для каждого тега HTML заранее, и они будут впоследствии применяться к нему автоматически.
Стили элементов
Таблица стилей обычно располагается в заголовке HTML-документа, в разделе <HEAD>. Она занимает место между тегами <STYLE> и </STYLE>. Синтаксис таблицы стилей таков. Вы пишете имя элемента HTML, для которого определяете стиль, а после него следует блок определения стиля, заключенный в фигурные скобки. Например, в нашем примере можно написать так:
<STYLE> BODY { background-color: #BABAA0; color: rgb(29.29.24); } </STYLE>Пробелы здесь не имеют никакого значения, так же, как и переводы строк. После этого в самом тексте HTML-документа достаточно указать тег <BODY>, и к нему автоматически будут применены данные цвета фона и текста.
Пока что мы вроде бы не получили никакой видимой экономии, хотя скоро вы увидите, что имеет смысл располагать стилевые свойства <BODY> именно в таблице стилей. Чтобы продемонстрировать экономию, пойдем дальше. В нашем примере мы три раза выравнивали заголовки по центру (еще хорошо, что три, а не пятьдесят шесть). Вместо этого можно просто написать в таб лице стилей:
<STYLE> H1, H2 { text-align: center; } </STYLE>…и после этого просто указывать в документе теги <Н1 > или <Н2>, содержи мое которых будет автоматически центрироваться. Обратите внимание на то, что в таблице стилей, чтобы определить стиль сразу для нескольких элементов, мы перечислили их через запятую.
Если вы помните, у нас еще оставались в теге <BODY> три “отмененных” атрибута: LINK=, ALINK= и VLINK=. Вместо них рекомендуется определить стили для различных псевдоклассов элемента <А>. Это делается так:
<STYLE> A:link, A:visited { color: #634438; } A:active { color: black; } </STYLE>Как видите, для элемента <А> определены три псевдокласса (имена которых отделяются двоеточием): link – для гиперссылок, visited – для посещенных гиперссылок и active – для активных.
Кроме того, во второй версии CSS (CSS Level 2) для тега <А> определены еще псевдоклассы hover (гиперссылка, над которой находится указатель мыши) и focus (выбранная гиперссылка). Однако в браузере Internet Explorer версии 5 поддерживается только первый из них. Например, если написать:
<STYLE> A:hover { color: white; } </STYLE>…то при наведении указателя мыши на ссылку она будет подсвечиваться белым цветом. Это уже похоже на динамическое взаимодействие с пользователем!
Далее, в нашем примере мы два раза определяли одинаковый стиль для горизонтальной линии. Проще, конечно, написать в таблице стилей:
<STYLE> HR { margin-top: 24px; width: 75%; } </STYLE>…и потом в текст документа вставлять только тег <HR>, и тогда, если не указано иное, линия получится такой, какой нужно.