Для
добавления стилей на веб-страницу существует несколько способов,
которые различаются своими возможностями и назначением. Далее
рассмотрены способы подключения CSS.
Таблица связанных стилей
При использовании таблицы связанных
стилей описание селекторов и их свойств располагается в отдельном
файле, как правило, с расширением css, а для связывания документа
с этим файлом применяется тег <LINK>. Данный тег помещается
в контейнер <HEAD>, как показано в примере
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Стили</title>
<link rel="stylesheet" type="text/css"
href="mysite.css">
<link rel="stylesheet" type="text/css"
href="http://www.htmlbook.ru/main.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>
Значения параметров
тега <LINK> — rel и type остаются неизменными, как приведено
в данном примере. Аргумент href задает путь к CSS-файлу, он
может быть задан как относительно, так и абсолютно. Заметьте,
что таким образом можно подключать таблицу стилей, которая
находится на другом сайте.
Содержимое файла
mysite.css подключаемого посредством тега <LINK> приведено
в примере
H1 {
color: navy;
font-size: 200%;
font-family: Arial, Verdana, sans-serif;
text-align: center
}
P {
padding-left: 20px
}
Как видно из данного
примера, файл со стилем не хранит никаких данных, кроме синтаксиса
CSS. В свою очередь и HTML-документ содержит только ссылку
на файл со стилем, т.е. таким способом в полной мере реализуется
принцип разделения содержимого и оформления сайта. Поэтому
использование таблицы связанных стилей является наиболее универсальным
и удобным методом добавления стиля на сайт. Ведь стили хранятся
в одном файле, а в HTML-документах указывается только ссылка
на него.
Таблица глобальных стилей
При использовании
таблицы глобальных стилей свойства CSS описываются в самом
документе и обычно располагаются в заголовке веб-страницы.
По своей гибкости и возможностям этот способ добавления стиля
уступает предыдущему, но также позволяет размещать все стили
в одном месте. В данном случае, прямо в теле документа, с
помощью контейнера <STYLE>, как показано в примере
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Глобальные стили</title>
<style type="text/css">
H1 {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #336
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
В данном примере
определен стиль тега <H1>, который затем можно повсеместно
использовать на данной веб-странице.
Таблица глобальных стилей может размещаться не только внутри
контейнера <HEAD>, но также в любом месте кода HTML-документа.
Внутренние стили
Внутренний стиль
является по существу расширением для одиночного тега используемого
на веб-странице. Для определения стиля используется параметр
тега style, а его атрибуты указываются с помощью языка таблицы
стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Внутренние стили</title>
</head>
<body>
<h1 style="font-size: 120%; font-family:
Verdana, Arial, Helvetica, sans-serif; color: #336">Заголовок</h1>
</body>
</html>
В данном примере
стиль тега <H1> задается с помощью параметра style,
в котором через точку с запятой перечисляются стилевые атрибуты.
Внутренние
стили рекомендуется применять на сайте ограниченно или вообще
отказаться от их использования. Дело в том, что добавление
таких стилей увеличивает общий объем файлов, что ведет к повышению
времени их загрузки в браузере, и усложняет редактирование
документов для разработчиков.
Все описанные методы
использования CSS могут применяться как самостоятельно, так
и в сочетании друг с другом. В этом случае необходимо помнить
об их иерархии. Первым всегда применяется внутренний стиль,
затем таблица глобальных стилей и в последнюю очередь таблица
связанных стилей. В примере 2.5 применяется сразу два метода
добавления таблиц стилей в документ.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Подключение стиля</title>
<style type="text/css">
H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif;
color: green }
</style>
</head>
<body>
<h1 style="font-size: 36px; font-family:
Times, serif; color: red">Заголовок 1</h1>
<h1>Заголовок 2</h1>
</body>
</html>
В данном примере
первый заголовок задается красным цветом размером 36 пикселов
с помощью внутреннего стиля, а следующий — зеленым цветом
через таблицу глобальных стилей.
Импорт CSS
В текущую стилевую
таблицу можно импортировать содержимое CSS-файла с помощью
команды @import. Этот метод допускается использовать совместно
с таблицей связанных или глобальных стилей, но никак не со
встроенными стилями. Общий синтаксис следующий.
@import url("имя файла") типы носителей;
@import "имя файла" типы носителей;
После ключевого
слова @import указывается путь к стилевому файлу одним из
двух приведенных способов — с помощью директивы url или без
нее. В примере показано, как можно импортировать стиль из
внешнего файла в таблицу глобальных стилей.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Импорт</title>
<style type="text/css">
@import url("/style/header.css");
H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif;
color: green }
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
</body>
</html>
В данном примере
показано подключение файла header.css, который расположен
в папке style.
Аналогично происходит
импорт и в файле со стилем, который затем подключается к документу
@import "/style/print.css" print;
@import "/style/palm.css" handheld;
BODY {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 90%;
background: white;
color: black
}
В данном примере
показано содержимое файла mysite.css, который добавляется
к нужным документам способом, показанным в примере сверху,
а именно с помощью тега <LINK>
|
