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