Лекция: Подключение CSS

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

Таблица связанных стилей

При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK>. Данный тег помещается в контейнер <HEAD>, как показано в следующем примере.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" «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=«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" «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>