Связь каскадной таблицы стилей с HTML-документом

Опубликовано MuHyc в Вс, 09/04/2011 - 11:54

Существуют четыре способа связи CSS с HTML-документом:

1. Таблица стилей существует в виде отдельного текстового файла с расширением CSS (желательно, чтобы он находился в той же папке, что и HTML-документ) и подключается к нему с помощью метки <link>, помещаемой в раздел <head>:

<LINK REL="stylesheet" TYPE="text/css" HREF="mystyle.css">

Параметру rel присвоено значение "stylesheet". Это означает, что подключаемая таблица стилей будет использоваться браузером по умолчанию.

Параметр type предназначен для указания языка стилей (в нашем случае CSS).

Параметр href позволяет задать имя CSS-файла.

Для примера создадим CSS-файл в Блокноте и поместим в него строку определений для метки <р>, приведенную в начале главы. Сохраним файл под именем mystyle.css.

Достоинство метода подключения CSS заключается в том, что одна таблица может быть подключена к большому количеству документов, придав им единый стиль оформления.

2. Таблица стилей непосредственно размещается в разделе <head> документа, внутри блока, отмеченного метками

<style>... </style>. Например:

<head>

<STYLE TYPE="text/css">

P {font-size: 48pt; color: red; background-color: blue}

В {font-size: 96pt; color: blue; font-weight: 800} </STYLE>

</head>

3. Файл с таблицей стилей импортируется в начало блока <style> или другой таблицы стилей с помощью инструкции "©import: url (имя_файла.с88)". Например:

<head>

<STYLE TYPE="text/css"> @import: url (mystyle.ess); P {font-size: 4 8pt; color: red; background-color:

blue}

В {font-size: 96pt; color: blue; font-weight: 800} </STYLE>

</head>

Добавив перед таблицей стилей имя файла, содержащего другую таблицу стилей, мы создали тот самый каскад, который и дал название таблицам стилей. Причем в созданном ранее файле mystyle.css были установлены значения свойств метки <р> "font-size" и "color", которые противоречат значениям этих же свойств, заданным непосредственно в блоке <style>. Браузер будет считать более приоритетными те значения, которые следуют ниже по тексту. В нашем случае это значения, заданные непосредственно в блоке <style>.

4. Каждая метка может иметь параметр style, в котором указываются свойства и их значения. Например:

<В STYLE="font-size: 48pt; color: yellow">

Такой способ задания свойств каскадной таблицы стилей придает максимальный приоритет значениям свойств по сравнению с другими способами, так как они задаются непосредственно в самой метке. Недостатком способа является высокая трудоемкость создания и коррекции документа, увеличение его объема, поэтому его целесообразно использовать только для изменения свойств отдельных элементов, число которых невелико.