Под способами применением 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 позволяет определить стиль отображения для:
стандартных элементов HTML-разметки
произвольных классов (селектор class)
HTML-объектов (селектор id)
К сожалению, работа с селекторами в браузерах различных производителей может преподнести различного рода сюрпризы. Особенно это касается работы с селектором 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.
Ниже приведен пример ссылки на внешнее описание стилей:
Важными здесь являются значения атрибутов rel и type. Rel обязан иметь значение "stylesheet". Type может принимать значения: "text/css" или "text/javascript". Второй тип описания стилей введен Netscape. Его мы в данном учебном курсе не обсуждаем.
Атрибут href задает универсальный локатор ресурса (URL) для внешнего файла описания стилей. Это может быть ссылка на файл с любым именем, а не только на файл с расширением *.css.
Импорт описателей стилей - это в некотором смысле конкурент описанному выше указанию на внешний описатель стиля
.
Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей:
<style>
@import:url(http://cattus.ru/templates/cattus/css/style.css)
a {color:cyan;text-decoration:underline;}
</style>
Импортируемый стиль можно переопределить либо через описатель элемента в STYLE, либо через атрибут элемента style.