Связанные стили

Дата добавления: 2015-07-09; просмотров: 1326; Нарушение авторских прав

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <link>. Данный тег помещается в контейнер <head>, как показано в примере 1.

Пример 1.Подключение связанных стилей

<!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=utf-8">

<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> приведено в примере 2.

Пример 2.Файл со стилем

H1 {

color: #000080;

font-size: 200%;

font-family: Arial, Verdana, sans-serif;

text-align: center;

}

P {

padding-left: 20px;

}

Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т.е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт, т.к. стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.

<== предыдущая лекция	\|	следующая лекция ==>
Типы стилей	\|	Глобальные стили