Как импортировать css в css
Для импорта одного css файла внутрь другого используется конструкция @import . Достаточно указать внутри url() путь к нужному файлу и его содержимое подставится в то место, где был указан импорт.
@import url("custom.css"); @import url("mega-style.css"); @import
Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме @charset или другого @import .
Синтаксис
@import url("имя файла") [типы носителей]; @import "имя файла" [типы носителей];В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.
| Тип | Описание |
|---|---|
| all | Все типы. Это значение используется по умолчанию. |
| aural | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
| braille | Устройства, основанные на системе Брайля, которые предназначены для слепых людей. |
| handheld | Наладонные компьютеры и аналогичные им аппараты. |
| Печатающие устройства вроде принтера. | |
| projection | Проектор. |
| screen | Экран монитора. |
| tv | Телевизор. |
Использование типов носителей совместно с импортом файла дает возможность указывать стиль только для определенных устройств.
Значения
В качестве значения используется путь к стилевому файлу, который указывается внутри необязательной конструкции url() . Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.
HTML5 CSS2.1 IE Cr Op Sa Fx
Импорт стиля .
Браузеры
Браузер Internet Explorer до версии 7.0 включительно не поддерживает типы носителей при импорте стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается.
Как импортировать css в css
Для импорта одного css файла внутрь другого используется конструкция @import . Достаточно указать внутри url() путь к нужному файлу и его содержимое подставится в то место, где был указан импорт.
@import url("custom.css"); @import url("mega-style.css"); Учимся использовать @import в CSS
Правило CSS import позволяет импортировать внешние таблицы стилей не только на HTML-страницу , но и в другой стилевой документ. Это упрощает управление файлами и их интеграцию.
Импорт в HTML
Чтобы воспользоваться правилом @import в HTML-файле , добавьте следующий код в шапку страницы:
Данный код импортирует CSS для использования на HTML-странице . Это позволяет редактировать все ее стили при помощи отдельного файла. Недостаток такого подхода заключается в отсутствии параллельной загрузки. То есть, страница не начнет загружаться до тех пор, пока браузер не загрузит файл CSS полностью. Это негативно скажется на скорости загрузки сайта и общей производительности.
В качестве альтернативного способа применения import url CSS в HTML можно сослаться на таблицу стилей следующим образом:
Эта ссылка работает по принципу @import , и позволяет управлять всем CSS-кодом с помощью отдельного файла. Данный метод предпочтительнее с точки зрения параллельной загрузки. Если вам все еще хочется распределить CSS по отдельным файлам, то можно воспользоваться @import внутри основного стилевого файла.
Импорт в CSS
Применение в приведенном выше примере позволит внедрить файл » default.css » в HTML-страницу . Внутри этого CSS-файла находятся различные правила стилизации. Эти стили можно разместить как на одной странице, так и разбить их на отдельные фрагменты. А также импортировать в основной файл CSS .
Предположим, что мы используем четыре отдельных CSS-файла : один для разметки, второй для шрифтов и третий для картинок. Четвертым будет основной файл, в котором указаны ссылки на все остальные файлы. В самом верху основного файла ( так как правила импорта должны размещаться над всем остальным содержимым ) добавьте следующий код CSS import :
@import url('/styles/layout.css'); @import url('/styles/type.css'); @import url('/styles/images.css');
Уже после этих правил можно добавлять любой CSS-код для оформления страниц.
При загрузке страницы сначала все отдельные файлы будут подгружены в основной CSS , а уже после этого файл загрузится в HTML-страницу . Таким образом у вас будет более простой доступ к отдельным сегментам стилизации.
Используем @import в медиа-запросах
Разделение основного CSS-файла может пригодиться при адаптации сайта под мобильные устройства, где для разных разрешений и размеров экрана применяются различные стили. Главная проблема заключается в том, что подключения CSS import расположены в самом верху страницы, поэтому медиа-запросы будут загружены после стилей. При разработке адаптивных дизайнов важно учитывать производительность сайта. Рекомендуется не разделять CSS адаптивного сайта и использовать @import для их загрузки на ресурс.
Всегда ли нужно использовать @import?
Вовсе нет. На многих сайтах весь CSS расположен прямо в коде страниц, и в этом нет ничего страшного.
Поддержка браузерами
У старых браузеров наблюдаются некоторые проблемы поддержки правила CSS import , но сейчас этими версиями программ практически никто не пользуется. Времена Internet Explorer уже давно позади.