Техника Web-дизайна для студента
Связь каскадной таблицы стилей с HTML-документом
Существуют четыре способа связи CSS с HTML-документом:
1. Таблица стилей существует в виде отдельного текстового файла с расширением CSS (желательно, чтобы он находился в той же папке, что и HTML-документ) и подключается к нему с помощью метки <link>, помещаемой в раздел <head>:
CLINK REL="stylesheet" TYPE="text/css" HREF="mystyle. css">
Параметру rel присвоено значение "stylesheet". Это означает, что подключаемая таблица стилей будет использоваться браузером по умолчанию.
Параметр type предназначен для указания языка стилей (в нашем случае CSS).
Параметр href позволяет задать имя CSS-файла.
Для примера создадим CSS-файл в Блокноте и поместим в него строку определений для метки <р>, приведенную в начале главы. Сохраним файл под именем mystyle. css. Далее в Блокноте создадим HTML-документ, приведенный в листинге 7.1.
Листинг 7.1. НТМ1_-документ, в котором форматирование текста осуществляется каскадной таблицей стилей, находящейся в отдельном файле туз1у]е. с88
<HTML>
<HEAD>
<LINK REI^"stylesheet" TYPE="text/css" HREF="mystyle. css"> <TITLE>
Каскадные таблицы стилей </TITLE>
</HEAD>
<BODY>
<р>Это абзац (font-size: 4Qpt; color: green; font-family: "Comic Sans MS")</p>
</BODY>
</HTML>
Сохраним документ под именем mydoc. htm в той же папке, что и mystyle. css, и, открыв его в браузере, увидим результат (рис. 7.1).
|
'3 каскадные таблицы стилей - Microsoft Internet Explorer |
ГЛпП
Файл Правка Вид Избранное Сервис Справка I •"
В
Это абзац (font - size:40pt; color:green; font-family: "Comic Sans MS")
_______________________________________ В
Рис. 7.1. Результат форматирования текста с использованием каскадной таблицы стилей
Достоинство метода подключения 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. css);
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">
Такой способ задания свойств каскадной таблицы стилей придает максимальный приоритет значениям свойств по сравнению с другими способами, так как они задаются непосредственно в самой метке. Недостатком способа является высокая трудоемкость создания и коррекции документа, увеличение его объема, поэтому его целесообразно использовать только для изменения свойств отдельных элементов, число которых невелико.
