Таблицы стилей могут быть добавлены на страницу тремя разными способами, которые
различаются по своим возможностям.
Таблицы
связанных стилей (linked style sheet)
Самый мощный и
удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном
файле, который может быть использован для любых веб-страниц. Для подключения
таблицы связанных стилей используется тег LINK в заголовке страницы. Пример 1.
Подключение таблицы связанных стилей
<html>
<head>
<link
rel="stylesheet" type="text/css" href=mysite.css>
или
<link
rel="stylesheet" type="text/css"
href="http://wm-help.net/other_site_redirect.php?http/www.mysite.ru/main.css></head>
<body>
<h1>Hello,
world!</h1>
</body>
</html>
Достоинства
данного способа:
1. Используется один файл со стилем для любого
количества веб-страниц, а также возможно его применять на других сайтах;
2.
Можно изменять таблицу стилей без модификации веб-страниц;
3. При изменении
стиля в одном единственном файле, стиль автоматически применяется ко всем
страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта
в одном только месте, и он изменяется на всех сто или больше веб-страницах
нашего сайта.
4. Файл со стилем при первой загрузке помещается в кэш на
локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит
быстрее.
Таблицы глобальных стилей (global style
sheet)
Стиль определяется в самом документе и обычно
располагается в заголовке веб-страницы. По своей гибкости и возможностям этот
способ использования стиля уступает предыдущему, но также позволяет размещать
все стили в одном месте. В данном случае, прямо в теле документа. Определение
стиля задается тегом STYLE.
Пример 2. Использование таблицы глобальных
стилей
<html>
<head>
<style
type="text/css">
H1 { font-size: 120%; font-family: Verdana, Arial,
Helvetica, sans-serif; color: #333366;
}
</style>
</head>
<body>
<H1>Hello,
world!</H1>
</body>
</html>
В
заголовке определен стиль тега H1, который затем можно повсеместно использовать
на данной веб-странице.
Внутренние стили (inline
style)
Внутренний стиль являются по существу расширением
для одиночного тега используемого на веб-странице. Для определения стиля
используется параметр style, а его атрибуты указываются с помощью языка таблицы
стилей.
Пример 3. Использование внутренних стилей
<html>
<body>
<H1
style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333366;">Hello, world!</H1>
</body>
</html>
Рекомендуется
использовать внутренний стиль для одиночных тегов или отказаться от его
использования вообще, поскольку изменение ряда элементов становится
проблематичным. Внутренние стили не соответствуют идеологии структурного
документа, когда содержимое и его оформление разделены.
Все описанные
методы использования CSS могут применяться как самостоятельно, так и в сочетании
друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда
применяется внутренний стиль, затем таблица глобальных стилей и в последнюю
очередь таблица связанных стилей. В примере используются сразу два метода
добавления таблиц стилей в документ.
Пример 4. Сочетание разных методов
подключения стилей
<html>
<head>
<style
type="text/css">
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;">Hello,
world!</H1>
<H1>Hello,
world!</H1>
</body>
</html>
В
приведенном примере первый заголовок задается красным цветом размером 36
пикселов, а следующий — зеленым и другим шрифтом
Главная
