CSS Import: Adding External Styles to Your Web Pages Made Easy

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

Для использования CSS import необходимо создать основной файл, который будет подключать стили из других файлов. Этот файл может называться, например, style.css, и будет содержать следующую директиву:

css
@import url('reset.css');

В данном примере мы подключаем файл reset.css, который содержит стили для сброса дефолтных стилей браузера. Файл reset.css должен быть расположен в той же папке, что и основной файл style.css. Для пути к файлу можно также использовать абсолютный или относительный путь.

css
@import url('/css/reset.css');

css
@import url('../css/reset.css');

Второй и третий примеры показывают использование абсолютного и относительного пути соответственно. Если файл reset.css расположен в папке css на верхнем уровне, то в первом примере мы указываем абсолютный путь, а во втором относительный путь для доступа к этому файлу.

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

Пример кода с использованием CSS import:

html



  
  
  


  
CSS Import Example
  
This paragraph should have a red color.

Файл style.css:

css
/* Import reset.css */
@import url('reset.css');
/* Main styles */
body {
  background-color: #f5f5f5;
}
h1 {
  color: green;
}
p {
  color: red;
}

Файл reset.css:

css
/* Reset browser styles */
body, h1, p {
  margin: 0;
  padding: 0;
}
/* Set default font family and size */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}