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

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

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

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

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

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

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 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>
  <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> приведено в примере 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. Использование глобального стиля

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 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: 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. Использование внутреннего стиля

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 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>
 </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. Сочетание разных методов подключения стилей

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 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">Заголовок 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 в глобальную таблицу стилей

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 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">
   @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>.

   Отправить статью как PDF