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

<link rel="stylesheet" type="text/css" href="css/stylebasis.css" /> <!--основное базисное оформление -->
<link rel="stylesheet" type="text/css" href="css/stylegeneral.css" /> <!--стили внутренних страниц сайта-->
<link rel="stylesheet" type="text/css" href="css/stylyid.css" /> <!--специальные стили-->

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

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

Объединение нескольких файлов CSS с import

Для опытного веб мастера не секрет, что в CSS-файлах нельзя использовать кодировку HTML. Следовательно пользоваться тегом <link> следует только в рамках файлов с расширением html внутри тега .

В то время как оператор @import осуществляет взаимосвязь файлов стиля и основного контента в файле с расширением css. Указанное содержимое этой директивы связывается с тем css-файлом, в котором сдержится этот самый @import.

Синтаксис

@import url("<адрес файла стилей>") [разновидность устройства];

Разберем данную запись. Первым в import указан url (относительный, или абсолютный) требуемого файла, который более удобен для веб-мастера.

Далее следует разновидность устройства. Ее указание не является принципиально обязательным, а соответствует она атрибуту media в случае использования тегов link.

Далее следует более конкретный пример:

@import url(css/ stylebasis.css);
@import url(css/ stylegeneral.css);
@import url(css/ stylyid.css);
/* после данной записи идут операторы оформления */

Некоторые полезные замечания

• Директива @import должна располагаться в самом начале css-файла. Причем принципиально, чтобы команды оформления были строго после директивы. Иначе робот не сможет считать данную команду.
• Также стоит отметить тот факт, что невозможно использовать директиву @import для конструкции встроенных стилей.

Итог

Структура создания CSS по блочной методике может осуществляться двумя путями:

• связь файлов контента и файлов оформления посредством тега <link>
• объединение таблиц внешних стилей в рамках одного файла с расширением css.

Блочную методику целесообразно использовать в том случае, когда с кодом работают несколько специалистов. Объединение стилей в один документ способствует сокращению времени обработки информации роботом.

Поэтому использовать директиву @import следует с умом и пониманием дела.