Подключение CSS

В этой статье мы разберем различные способы подключения CSS стилей в HTML документ. Существует четыре способа подключения.

1. Встроенные стили

Встроенные стили используются для определения стилей элементов целой web-страницы. В теге <head> определяется тег style, в котором задаются все стили для web-страницы. Пример подключения:

<head>
<title>Пример CSS</title>
<style type="text/css">
      p {
         color: green;
      }
      a {
         color: blue;
      }
</style>
</head>

Данный способ рекомендуется избегать т.к. лучше когда HTML документ полностью свободен от элементов и атрибутов визуального представления.

2. Внутриэлементные стили

При внутриэлементном подключении стиля, он определяется непосредственно внутри тега HTML при помощи атрибута style. Рассмотрим пример где сделаем текст зеленого цвета:

<p style="color: green">текст</p>

Данный способ лучше избегать как и в первом варианте.

3. Внешние стили

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

p {
   color: green;
}

a {
   color: blue;
}

Если имя этого файла будет «style.css», то его подключают к HTML документу следующим образом при помощи тега <link>:

<head>
   <title>Пример CSS</title>
   <link href='style.css' type="text/css" rel="stylesheet" />
</head>

Атрибут href указывает на путь до файла стилей. Тут можно указывать, как абсолютные, так и относительные пути. В данном случае подразумевается, что наш файл style.css находится в одной директории с файлом, в котором мы подключаем стили. Атрибут type=»type/css» указывает, что тип документа — css, атрибут rel=»stylesheet» говорит браузеру, что мы подключаем стили (rel с англ «relationship» — отношения).

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

4. Импортированные стили

@import подключает одну каскадную таблицу стилей к другой. Например, если вы хотите добавить стили другой каскадной таблицы стилей к своей, то вам нужно написать:

@import url(mystyle.css);

Очень часто его используют вместо элемента <link>, чтобы подключить файл CSS к странице HTML, по сути, используя внутренние стили. Это выглядит следующим образом:

<style type="text/css" media="all">@import url(mystyle.css);</style>