Добавление CSS
Таблицы стилей могут быть добавлены на
страницу тремя разными способами,
которые различаются по своим
возможностям.
Таблицы связанных стилей (linked style sheet)
Самый мощный и удобный способ
определения стилей и правил для сайта.
Стили хранятся в отдельном файле, который
может быть использован для любых веб-страниц.
Для подключения таблицы связанных стилей
используется тег LINK в заголовке страницы.
Пример 1. Подключение таблицы связанных
стилей
<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>
Достоинства данного способа:
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
пикселов, а следующий — зеленым и другим
шрифтом
<< предыдущая
||
следующая >>
|
Статьи веб-мастеру
Новичкам
