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

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

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

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

Пример:

<!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:

H1 {

color: #000080;

font-size: 200%;

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

text-align: center;

}

P {

padding-left: 20px;

}

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

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

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

Пример:

<!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>

В данном примере задан стиль тега <h1>, который затем можно повсеместно использовать на данной веб-странице (рисунок 7).

Рисунок 7. Вид заголовка, оформленного с помощью стилей

ü Внутренние стили

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

Пример:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Внутренние стили</title>

</head>

<body>

<p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</p>

</body>

</html>

В данном примере стиль тега <p> задаётся с помощью атрибута style, в котором через точку с запятой перечисляются стилевые свойства (рисунок 8).

Рисунок 8. Использование внутренних стилей для изменения вида текста

Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объём файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.

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

Пример:

<!DOCTYPE HTML>

<html>

<head>

<title>Подключение стиля</title>

<style>

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 пикселов с помощью внутреннего стиля, а следующий – зелёным цветом через таблицу глобальных стилей (рисунок 9).

Рисунок 9. Результат применения стилей

Валидация HTML и CSS

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

Эталонный валидатор Validator.W3C доступен бесплатно по адресу http://validator.w3.org/, однако его использование предполагает, что проверяемый сайт полностью доступен в Интернет, либо проверить можно будет только одиночные файлы.

Локальную проверку правильности разметки можно осуществить при помощи плагинов для браузера Mozilla Firefox, например HTML VALIDATOR (http://users.skynet.be/mgueury/mozilla/). Отметим также, что Mozilla Firefox имеет встроенную консоль ошибок, в которой отображаются ошибки разметки CSS. Существуют также коммерческие продукты для проверки правильности разметки, например CSE HTML Validator for Windows - http://www.htmlvalidator.com/.

Рассмотрим принципы работы с валидатором Validator.W3C (см. рисунки 9-12).

Для примера внесём несколько ошибок в разметку HTML и CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Проверка разметки</title>

#main {

position: absolute;

left: 100px;

top: 50px

border: 1px solid black;

padding: 0 100px 100px 0

}

#content {

position: relative;

left: 20px;

top: 10px;

border: 1px solid green;

}

</style>

</head>

<body>

<div id="main">Главное меню:

<div id="content"><p>Некоторый текст для проверки размещения элемента.</div>

</div>

</body>

</html>

Рисунок 9. Исходный код

При визуальном просмотре страницы ошибки могут быть не обнаружены. Однако валидатор показывает, что существует одна ошибка (рисунок 10).

Рисунок 10. Предупреждение валидатора о некорректной странице

Ошибки приведены ниже на той же странице (рисунок 11).

Рисунок 11. Просмотр ошибок кода

Помимо ошибок разметки всегда следует проверять правильность CSS (http://jigsaw.w3.org/css-validator/).

Для рассматриваемой страницы получаем сообщение, представленное на рисунке 12.

Рисунок 12. Предупреждение валидатора об ошибках CSS

Итак, по результатам проверки выявлено:

1. В разметке отсутствует атрибут xlmns для элемента HTML.

Вместо <html> согласно требованиям надо ввести
<html xmlns="http://www.w3.org/1999/xhtml">, т.к. в данном случае тип проверяемого документа установлен XHTML 1.0. Если тип документа отметить как HTML 5 (экспериментальная версия проверки), то данной ошибки не будет.

2. В разметке страницы отсутствует закрывающий тег </p> в строке

<div id="content"><p>Некоторый текст для проверки...</p></div>

3. Нарушены таблицы стилей, поскольку отсутствует разделитель ‘;’ между селекторами:

top: 50px;

border: 1px solid black;

Исправив ошибки получаем (рисунок 13):

Рисунок 13. Информация от валидатора о корректной странице