@import позволяет импортировать внешние стили в другой CSS файл.
Для подключения внешнего стилевого файла необходимо прописать следующее.
Важно! Перед строкой не может быть ничего, кроме других import строк.
Импорт в CSS файле
Базовый синтаксис:
@import url('/css/main.css');
Импорт в HTML файле
Ничем не отличается от импорта в CSS файле, кроме того, что нужно обернуть в тег <style>.
<style>
@import url('/css/main.css');
</style>
Расширенный синтаксис
Также можно указать условие импорта по типу устройства, например, монитор, принтер, TV и т.д.
Список устройств и пример будет ниже.
Тип | Описание |
---|---|
all | Все типы. По умолчанию. |
aural | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
braille | Устройства, основанные на системе Брайля, которые предназначены для слепых людей. |
handheld | Наладонные компьютеры и аналогичные им аппараты. |
Печатающие устройства вроде принтера. | |
projection | Проектор. |
screen | Экран монитора. |
tv | Телевизор. |
Пример для проектора и принтера:
@import url('/css/main.css' projection, print);