Способы добавления стилей на страницу

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

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

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

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

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Стили</title>

<link rel="stylesheet" href="http://htmlbook.ru/mysite.css">

<link rel="stylesheet" href="http://www.htmlbook.ru/main.css">

</head>

<body>

<h1>Заголовок</h1>

<p>Текст</p>

</body>

</html>

Значение атрибута тега <link> — rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

Содержимое файла mysite.css подключаемого посредством тега <link> приведено в примере 3.2.

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

H1 {

color: #000080;

font-size: 200%;

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

text-align: center;

}

P {

padding-left: 20px;

}

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

Глобальные стили

При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на той же странице с помощью контейнера <style>, как показано в примере 3.3.

Пример 3.3. Использование глобального стиля

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Глобальные стили</title>

<style>

H1 {

font-size: 120%;

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

color: #333366;

}

</style>

</head>

<body>

<h1>Hello, world!</h1>

</body>

</html>