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