Статистика |
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |
|
Таблица связанных стилей При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK>. Данный тег помещается в контейнер <HEAD>, как показано в примере 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=windows-1251">
<title>Стили</title>
<link rel="stylesheet" type="text/css" href="mysite.css">
<link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html> Значения параметров тега <LINK> — rel и type остаются неизменными, как приведено в данном примере. Параметр href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.
Содержимое файла mysite.css подключаемого посредством тега <LINK> приведено в примере 2.
Пример 2. Файл со стилем
H1 {
color: navy;
font-size: 200%;
font-family: Arial, Verdana, sans-serif;
text-align: center;
}
P {
padding-left: 20px;
}
Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т.е. таким способом в полной мере реализуется принцип разделения содержимого и оформления сайта. Поэтому использование таблицы связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.
Таблица глобальных стилей При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера <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=windows-1251">
<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>, который затем можно повсеместно использовать на данной веб-странице.
Замечание
Таблица глобальных стилей может размещаться не только внутри контейнера <HEAD>, но также в любом месте кода HTML-документа. Внутренние стили
Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр тега style, а его атрибуты указываются с помощью языка таблицы стилей, см. пример 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=windows-1251">
<title>Внутренние стили</title>
</head>
<body>
<h1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif;
color: #336">Заголовок</h1>
</body>
</html> В данном примере стиль тега <H1> задается с помощью параметра style, в котором через точку с запятой перечисляются стилевые атрибуты.
Замечание
Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере 5 применяется сразу два метода добавления таблиц стилей в документ.
Пример 5. Сочетание разных методов подключения стилей
<!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=windows-1251">
<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">Заголовок
1</h1>
<h1>Заголовок 2</h1>
</body>
</html> В данном примере первый заголовок задается красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий — зеленым цветом через таблицу глобальных стилей.
Импорт CSS В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно с таблицей связанных или глобальных стилей, но никак не со встроенными стилями. Общий синтаксис следующий.
@import url("имя файла") типы носителей;
@import "имя файла" типы носителей;
После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов — с помощью директивы url или без нее. В примере 6 показано, как можно импортировать стиль из внешнего файла в таблицу глобальных стилей.
Пример 6. Импорт CSS в глобальную таблицу стилей
<!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=windows-1251">
<title>Импорт</title>
<style type="text/css">
@import url("/style/header.css");
H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green;
}
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
</body>
</html> В данном примере показано подключение файла header.css, который расположен в папке style.
Аналогично происходит импорт и в файле со стилем, который затем подключается к документу, см. пример 7.
Пример 7. Импорт в таблице связанных стилей
@import "/style/print.css" print;
@import "/style/palm.css" handheld;
BODY {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 90%;
background: white;
color: black;
}
В данном примере показано содержимое файла mysite.css, который добавляется к нужным документам способом, показанным в примере 1, а именно с помощью тега <LINK>.
Учтите, что конструкция @import должна быть первой в таблице стилей. В противном случае, многие браузеры её просто проигнорируют.
|
|
Календарь |
« Май 2024 » | Пн | Вт | Ср | Чт | Пт | Сб | Вс | | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
|
|