Способы применения CSS
Под способами применением CSS мы в данном разделе понимаем форму декларирования стиля на HTML-странице и форму связывания описания стиля отображения элемента разметки с самим этим элементом. Речь идет о том, где и в какой форме автор страницы (или дизайнер) описывает стиль, и как и в какой форме на него ссылается.
Итак, различают четыре способа применения стилей:
Здесь мы следуем за George Young из Microsoft (Cascading Style Sheets in Internet Explorer 4.0. Microsoft, 1997). Следует отметить, что импорт стиля не поддерживается в браузерах других производителей. Однако, т.к. патент на CSS1 принадлежит Microsoft, опустить импорт в нашем описании мы считаем неправильным.
Под переопределением стиля в элементе разметки мы понимаем применение атрибута STYLE у данного элемента разметки:
<h1 style="font-weight:normal;
font-style:italic;
font-size:10pt;">
Заголовок первого уровня
</h1>
Атрибут style можно применить внутри любого элемента разметки. Например, мы можем через style определить ширину и выравнивание элемента hr(горизонтальное отчеркивание):
<hr style="width:100px;">
Очевидно, что не всякие параметры стиля можно установить для конкретного элемента разметки. О типах элементов и соответсвующих парамерах стилей мы поговорим в разделе "Понятие блочного и строкового элемента".
Здесь же следует отметить следующее: стили разработаны в первую очередь для управления отображением текста. Не следует увлекаться стилями при управлении отображением нетекстовых элементов HTML-разметки.
[ начало страницы ]
Применение элемента STYLE - это основной способ внедрения каскадных таблиц стилей в ткань HTML-документа. Кроме управления отображением элементов разметки элемент STYLE позволяет описывать стилевые свойства элементов, которые можно изменять при программировании на JavaScript.
Элемент STYLE позволяет определить стиль отображения для:
К сожалению, работа с селекторами в браузерах различных производителей может преподнести различного рода сюрпризы. Особенно это касается работы с селектором ID. Будем считать правильной интерпретацию Microsoft как держателя патента на спецификацию CSS.
Понятие селектора, применение селекторов и формальный синтаксис CSS мы обсудим в разделах "Синтаксис" и "Наследование и переопределение".
Стандартные элементы разметки описываются в элементе STYLE следующим способом:
<head>
<style>
p {color:darkred;text-align:justify;font-size:8pt;}
</style>
</head>
<body>
...
<p>
Этот параграф мы используем в качестве примера применения описания стиля для стандартного элемента HTML-разметки.
</p>
...
</body>
Теперь все параграфы документа будут отображаться стилем из элемента STYLE, если только стиль не будет переопределен каким-либо способом. В STYLE можно определить стиль любого элемента разметки.
[ начало страницы ]
Ссылка на описание стиля, расположенное за пределами документа, осуществляется при помощи элемента LINK, который размещают в элементе HEAD. Внешнее описание может представлять из себя файл, содержание которого - описание стилей. Описание стилей в этом файле будет по синтаксису в точности совпадать с содержанием элемента STYLE.
Ниже приведен пример ссылки на внешнее описание стилей:
<link type="text/css" rel="stylesheet" href="http://kuku.ru/my_css.css">
Важными здесь являются значения атрибутов rel и type. Rel обязан иметь значение "stylesheet". Type может принимать значения: "text/css" или "text/javascript". Второй тип описания стилей введен Netscape. Его мы в данном учебном курсе не обсуждаем.
Атрибут href задает универсальный локатор ресурса (URL) для внешнего файла описания стилей. Это может быть ссылка на файл с любым именем, а не только на файл с расширением *.css.
[ начало страницы ]
Импорт описателей стилей - это в некотором смысле конкурент описанному выше указанию на внешний описатель стиля.
Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей:
<style>
@import:url(http://kuku.ru/style.css)
a {color:cyan;text-decoration:underline;}
</style>
Импортируемый стиль можно переопределить либо через описатель элемента в STYLE, либо через атрибут элемента style.