CSS база
Таблицы стилей могут быть
добавлены на веб-страницу тремя разными способами, которые различаются по своим
возможностям.
Таблицы
связанных стилей
Самый мощный и удобный
способ определения стилей и правил для сайта. Стили хранятся в отдельном файле,
который может быть использован для любых веб-страниц. Для подключения таблицы
связанных стилей используется тег <link> в заголовке
страницы (пример 1).
Пример 1. Подключение
таблицы связанных стилей
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Стили</title>
<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//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Стили</title>
<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//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Стили</title>
</head>
<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//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Стили</title>
<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 пикселов, а следующий —
зеленым цветом и другим шрифтом.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.