Добавление стилей на веб-страницу

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

Внешняя таблица стилей

Стили располагаются в отдельном файле с расширением css, для связывания HTML-документа с CSS-файлом применяется элемент <link>. Он располагается внутри <head>, как показано в примере 1.

Пример 1. Подключение внешних стилей

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Стили</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster&amp;subset=cyrillic">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>Заголовок</h1>
  <p>Текст</p>
 </body>
</html>

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

Содержимое файла style.css показано в примере 2.

Пример 2. Содержимое файла style.css

h1 {
  font-family: 'Lobster', cursive;
  color: green;
}

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

Внутренняя таблица стилей

Стили пишутся в самом HTML-документе внутри элемента <style>, который в свою очередь располагается внутри <head>. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но часто применяется в ситуациях, когда речь идёт об одной веб-странице (пример 3).

Пример 3. Использование <style>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Стили</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster&amp;subset=cyrillic">
  <style>
   h1 {
    font-family: 'Lobster', cursive;
    color: green;
   }
  </style>
 </head>
 <body>
  <h1>Заголовок</h1>
  <p>Текст</p>
 </body>
</html>

В данном примере задан стиль элемента <h1>, который затем можно повсеместно использовать на данной веб-странице (рис. 1). Обратите внимание, что мы можем спокойно комбинировать <link> со <style>.

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

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

Встроенный стиль

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

Пример 4. Использование атрибута style

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

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

Использование встроенного стиля для изменения вида текста

Рис. 2. Использование встроенного стиля для изменения вида текста

Встроенные стили не рекомендуется применять на сайте, поскольку это усложняет редактирование стилей и нарушает принцип разделения кода и оформления.

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

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

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

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

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

Импорт CSS

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

@import url("имя файла");
@import "имя файла";

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Импорт</title>
  <style>
   @import url('https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic');
   h1 {
    font-family: 'Lobster', cursive;
    color: green;
   }
  </style>
 </head> 
 <body>
  <h1>Заголовок 1</h1>
  <h2>Заголовок 2</h2>
 </body>
</html>

В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.

Аналогично происходит импорт и в CSS-файле, который затем подключается к документу через элемент <link> (пример 7).

Пример 7. Импорт в файле style.css

@import url('https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic');
h1 {
  font-family: 'Lobster', cursive;
  color: green;
}

Импорт обычно применяется в тех случаях, когда доступ есть только к стилевому файлу и нет возможности отредактировать HTML-документ.

Перейти к заданиям

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 13.08.2017
Редакторы: Влад Мержевич