Самоучитель CSS Справочник CSS Единицы измерения Селекторы Цвета CSS

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

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

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

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

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

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

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

К страницам можно присоединять множество таблиц стилей, добавляя несколько тегов <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-документах.

    
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь