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

Подключение стилей с помощью тега <link>
Подключение стилей с помощью правила @import

Таблицы стилей бывают двух видов - внутренние и внешние - в зависимости от того, где определены стили: непосредственно на самой странице или во внешнем файле, связанном с веб-страницей.

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

Для подключения внешней таблицы стилей, вам нужно прикрепить ее к HTML-документу с помощью тега <link>, который должен располагаться внутри тега <head> или с помощью встроенного в CSS правила @import.

Подключение стилей с помощью тега <link>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

тег <link> должен содержать три атрибута:

rel="stylesheet" - указывает тип ссылки; в данном случае это ссылка на таблицу стилей
type="text/css" - указывает тип файла, на который ссылается тег
href="styles.css" - определяет путь к внешнему CSS-файлу, который может отличаться в зависимости от того, где вы его храните

К страницам можно присоединять множество таблиц стилей, добавляя несколько тегов <link>, каждый из которых будет указывать на свой файл с таблицей.

Подключение стилей с помощью правила @import

В отличие от тега <link>, правило @import используется внутри тега <style>. Для подключения внешней таблицы стилей после ключевого слова @import используется url(), в скобках указывается путь к внешнему CSS-файлу, который может быть заключен в кавычки: url("main.css");. Использование url() для указания пути к CSS-файлу необязательно, можно просто написать: @import "путь_к_файлу";, в этом случае путь обязательно должен быть указан в кавычках.

Используя правило @import можно подключить любое количество внешних таблиц:

<style>
  @import url(main.css);
  @import url(каталог/main2.css);
</style>

После правила @import можно добавлять обычные CSS-стили, если, например, вы хотите создать стиль, который нужно применить только к одной веб-странице, используя для форматирования остального содержимого таблицу стилей, описанную во внешнем CSS-файле:

<style>
  @import url(main.css);
  @import url(каталог/main2.css);
  p { color: red;}
</style>

Примечание: правило @import не обязательно должно располагаться в теге <style>, его так же можно включать во внешние таблицы стилей.

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

С этой темой смотрят: