Способы добавления стилей на страницу
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением.
ü Связанные стили
При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением 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>
<meta charset="utf-8">
<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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#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. Информация от валидатора о корректной странице