Импорт CSS

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

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


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Подключение стилей</title>
  <link rel="stylesheet" type="text/css" href="/design/style.css ">
</head>

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

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


@import url( /design/layout.css );
@import url( /design/modules.css );

/design/layout.css – путь к файлу layout.css, в котором записаны стили дизайна сайта

/design/modules.css – путь к файлу modules.css, где расположены стили содержимого сайта