Способы добавления стилей на страницу

23.09.2010

Влад Мержевич

Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.

Связанные стили

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <link>. Данный тег помещается в контейнер <head>, как показано в примере 3.1.

Пример 3.1. Подключение связанных стилей

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Стили</title>
  <link rel="stylesheet" href="mysite.css">
  <link rel="stylesheet" href="http://www.htmlbook.ru/main.css">
 </head>
 <body>
   <h1>Заголовок</h1>
   <p>Текст</p>
 </body>
</html>

Значение атрибута тега <link> — rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

Содержимое файла mysite.css подключаемого посредством тега <link> приведено в примере 3.2.

Пример 3.2. Файл со стилем

H1 {
  color: #000080;
  font-size: 200%;
  font-family: Arial, Verdana, sans-serif;
  text-align: center;
}
P {
  padding-left: 20px;
}

Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т. е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.

Глобальные стили

При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на той же странице с помощью контейнера <style>, как показано в примере 3.3.

Пример 3.3. Использование глобального стиля

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Глобальные стили</title>
  <style>
   H1 { 
    font-size: 120%; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    color: #333366; 
   }
  </style>
 </head>
 <body>
  <h1>Hello, world!</h1>
 </body>
</html>

В данном примере задан стиль тега <h1>, который затем можно повсеместно использовать на данной веб-странице (рис. 3.1).

Рис. 3.1

Рис. 3.1. Вид заголовка, оформленного с помощью стилей

Внутренние стили

Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил (пример 3.4).

Пример 3.4. Использование внутреннего стиля

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Внутренние стили</title>
 </head>
 <body>
  <p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</p>
</body>
</html>

В данном примере стиль тега <p> задаётся с помощью атрибута style, в котором через точку с запятой перечисляются стилевые свойства (рис. 3.2).

Рис. 3.2

Рис. 3.2. Использование внутренних стилей для изменения вида текста

Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объём файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.

Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым имеет приоритет внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль. В примере 3.5 применяется сразу два метода добавления стиля в документ.

Пример 3.5. Сочетание разных методов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подключение стиля</title>
  <style>
   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 пикселов с помощью внутреннего стиля, а следующий — зелёным цветом через таблицу глобальных стилей (рис. 3.3).

Рис. 3.3

Рис. 3.3. Результат применения стилей

Импорт CSS

В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно со связанными или глобальными стилями, но никак не с внутренними стилями. Общий синтаксис следующий.

@import url("имя файла") типы носителей;
@import "имя файла" типы носителей;

После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов — с помощью url или без него. В примере 3.6 показано, как можно импортировать стиль из внешнего файла в таблицу глобальных стилей.

Пример 3.6. Импорт CSS

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Импорт</title>
  <style>
   @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.

Аналогично происходит импорт и в файле со стилем, который затем подключается к документу (пример 3.7).

Пример 3.7. Импорт в таблице связанных стилей

@import "/style/print.css";
@import "/style/palm.css"; 
BODY {
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 90%;
 background: white;
 color: black;
}

В данном примере показано содержимое файла mysite.css, который добавляется к нужным документам способом, показанным в примере 3.1, а именно с помощью тега <link>.

Вопросы для проверки

1. Сайт имеет более ста HTML-документов, имеющих одинаковое стилевое оформление. Какой способ подключения CSS подходит лучше всего?

Связанные стили.
Глобальные стили.
Блочные стили.
Внутренние стили.
Экспорт стиля.

2. В данном примере, какой цвет будет у текста на веб-странице?

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет текста</title>
  <style>
   HTML { color: black; }  
   BODY { color: red; }
   P { color: green; }
  </style>
 </head>
 <body>
  <p style="color: blue;"><span style="color: olive;">Текст</span></p>
 </body>
</html>

Чёрный
Красный
Зелёный
Синий
Оливковый

3. Какой HTML-код применяется для подключения внешнего CSS-файла?

<style>mystyle.css</style>
<style>@mystyle.css</style>
<link rel="stylesheet" href="mystyle.css">
<link>@import url(mystyle.css)</link>
<stylesheet>mystyle.css</stylesheet>

4. Какой атрибут используется для определения внутреннего стиля?

style
class
styles
font
link

Ответы

1. Связанные стили.

2. Оливковый.

3. <link rel="stylesheet" href="mystyle.css">

4. style

CSS

Способы добавления стилей на страницу

Связанные стили

Глобальные стили

Внутренние стили

Импорт CSS

Вопросы для проверки

Ответы

HTML по теме

CSS по теме

Статьи по теме

Популярные рецепты