Способы добавления стилей на страницу. CSS. Учебник от Маржевича
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.
Связанные стили
При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег link, как показано в примере 3.1.
Пример 3.1. Подключение связанных стилей
HTML5 CSS2.1 IE Cr Op Sa Fx
<title>Стили</title> <link rel=stylesheet href=1.css> <link rel=stylesheet href=//1.ru/2.css> <h1>Заголовок</h1> <p>Текст
Значение атрибута тега link - rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.
Содержимое файла 1.css подключаемого посредством тега link приведено в примере 3.2.
Пример 3.2. Файл со стилем
H1{color:red;font-size:88%;font-family:arial;text-align:center}
p{padding:20px}
Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т.е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в 1 файле, а в HTML-документах указывается только ссылка на него.
Глобальные стили
При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в 1 месте, в данном случае прямо на той же странице с помощью контейнера style, как показано в примере 3.3.
Пример 3.3. Использование глобального стиля
HTML5 CSS2.1 IE Cr Op Sa Fx
<title>Глобальные стили</title>
<style>
H1{font-size:88%;font-family:arial;color:red}
</style>
<h1>Hello, world!</h1>
В данном примере задан стиль тега h1, который затем можно повсеместно использовать на данной веб-странице (рис.3.1).
Рис.3.1. Вид заголовка, оформленного с помощью стилей
Внутренние стили
Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил (пример 3.4).
Пример 3.4. Использование внутреннего стиля
HTML5 CSS2.1 IE Cr Op Sa Fx
<title>Внутренние стили</title>
<p style=font-size:88%;font-family:monospace;color:red>Пример текста
В данном примере стиль тега <p> задаётся с помощью атрибута style, в котором через точку с запятой перечисляются стилевые свойства (рис.3.2).
Рис.3.2. Использование внутренних стилей для изменения вида текста
Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объём файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым имеет приоритет внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль. В примере 3.5 применяется сразу 2 метода добавления стиля в документ.
Пример 3.5. Сочетание разных методов
HTML5 CSS2.1 IE Cr Op Sa Fx
<title>Подключение стиля</title>
<style>
H1{font-size:88%;font-family:arial;color:red}
</style>
<h1 style=font-size:36px;font-family:arial;color:red>Заголовок 1</h1>
<h1>Заголовок 2</h1>
В данном примере первый заголовок задаётся красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий - зелёным цветом через таблицу глобальных стилей (рис.3.3).
Рис.3.3. Применение стилей
Импорт CSS
В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно со связанными или глобальными стилями, но никак не с внутренними стилями. Общий синтаксис следующий.
@import url("имя файла") типы носителей; @import "имя файла" типы носителей;
После ключевого слова @import указывается путь к стилевому файлу 1 из 2 приведенных способов - с помощью url или без него. В примере 3.6 показано, как можно импортировать стиль из внешнего файла в таблицу глобальных стилей.
Пример 3.6. Импорт CSS
HTML5 CSS2.1 IE Cr Op Sa Fx
<title>Импорт</title>
<style>
@import url(1/3.css);H1{font-size:88%;font-family:arial;color:red}
</style>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
В данном примере показано подключение файла header.css, который расположен в папке style.
Аналогично происходит импорт и в файле со стилем, который затем подключается к документу (пример 3.7).
Пример 3.7. Импорт в таблице связанных стилей
@import "/1/1.css";
@import "/1/2.css";
BODY{font-family:arial;font-size:88%;background:red;color:black}
В данном примере показано содержимое файла 1.css, который добавляется к нужным документам способом, показанным в примере 3.1, а именно с помощью тега link.
