Как импортировать файлы в css
Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме @charset или другого @import .
Синтаксис
В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.
| Тип | Описание |
|---|---|
| all | Все типы. Это значение используется по умолчанию. |
| Печатающие устройства вроде принтера. | |
| screen | Экран монитора. |
Использование типов носителей совместно с импортом файла дает возможность указывать стиль только для определенных устройств.
Обозначения
Значения
В качестве значения используется путь к стилевому файлу, который указывается внутри необязательной конструкции url() . Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.
Пример
Примечание
Браузер Internet Explorer до версии 7 включительно не поддерживает типы носителей при импорте стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается.
Спецификация
| Спецификация | Статус |
|---|---|
| Media Queries | Рекомендация |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендация |
| CSS Level 1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor's draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
CSS правило @import используется для импорта содержимого CSS файла в текущую таблицу стилей. Это правило должно предшествовать всем другим видам правил, за исключением правила @charset, которое задает кодировку символов.
С использованием медиазапросов вы можете импортировать CSS стили для опреденных типов устройств, будь-то принтер или телевизор. Браузеры могут избегать загрузки (импорта) тех стилей, которые не поддерживаются на этом типе устройства. Медиазапросы указываются через пробел после URL адреса с которого происходит загрузка CSS стилей. Обращаю Ваше внимание, что необходимо разделять каждый медиазапрос запятой.
Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.
Кроме того, в некоторых случаях правило @import может замедлять загрузку таблиц стилей, либо загружать их не в заданном порядке, что может быть критично для конечного отображения конкретной страницы.
Поддержка браузерами
| Свойство | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| @import | Да | Да | Да | Да | Да | Да |
CSS синтаксис
Значения правила
| Значение | Описание |
|---|---|
| url | Определяет URL адрес ресурса для импорта. URL-адрес может быть как абсолютным, так и относительным. |
| list-of-media-queries | Разделенный запятыми список медиазапросов. Если браузер не поддерживает эти запросы, он не загружает связанный ресурс. |
Версия CSS
Пример использования
Внешняя таблица стилей может быть подключена к веб-странице с помощью HTML тега <link>, или с использованием встроенного в CSS правила @import, которое по большому счету делает тоже самое. Оба варианта позволяют присоединить таблицы стилей к веб-странице.
Основное отличие правила @import заключается в том, что с использованием этого правила вы можете присоединить одну внешнюю таблицу стилей к другой.
Импортирование к внешней таблице стилей
Давайте рассмотрим пример, который позволит нам присоединить несколько таблиц стилей к одной внешней таблице стилей:
Чтобы присоединить один внешний файл таблиц стилей к другому, необходимо внутри файла к которому добавляется содержимое объявить правило @import и указать URL путь к этому файлу. Чтобы задать путь необходимо после правила @import указать url("path/to/file") . При этом путь, который указывается в круглых скобках может быть как абсолютным, так и относительным. Информацию о том как задавать абсолютные и относительные пути вы можете узнать в статье учебника HTML 5 "HTML ссылки".
Как и с помощью нескольких тегов <link> вы можете разместить несколько правил @import, чтобы присоединить необходимое количество внешних таблиц стилей.
Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе таблицы стилей будут проигнорированы браузерами и не импортированы в файл.
Импортирование к внутренней таблице стилей
Кроме того, с использованием правила @import существует возможность привязать внешние таблицы стилей к внутренней таблице стилей документа. Для этого необходимо объявить правило или правила сразу после открывающего тега <style>:
Использование медиазапросов при импорте
Используя медиазапросы вы можете импортировать CSS стили на основании определенных характеристик и типа устройства. Браузеры могут избегать загрузки (импорта) тех стилей, которые не поддерживаются на этом типе устройства.
Медиазапросы указываются через пробел после URL адреса с которого происходит загрузка CSS стилей. Обращаю Ваше внимание, что необходимо разделять каждый медиазапрос запятой, допускается использование логических операторов. Использование медиазапросов подробно рассмотрено в описании правила @media.
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.
Связанные стили
При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <link> . Данный тег помещается в контейнер <head> , как показано в примере 3.1.
Пример 3.1. Подключение связанных стилей
HTML5 CSS 2.1 IE Cr Op Sa Fx
Содержимое файла mysite.css подключаемого посредством тега <link> приведено в примере 3.2.
Пример 3.2. Файл со стилем
Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т. е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.
Глобальные стили
При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на той же странице с помощью контейнера <style> , как показано в примере 3.3.
Пример 3.3. Использование глобального стиля
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере задан стиль тега <h1> , который затем можно повсеместно использовать на данной веб-странице (рис. 3.1).
Рис. 3.1. Вид заголовка, оформленного с помощью стилей
Внутренние стили
Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут style , а его значением выступает набор стилевых правил (пример 3.4).
Пример 3.4. Использование внутреннего стиля
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере стиль тега <p> задаётся с помощью атрибута style , в котором через точку с запятой перечисляются стилевые свойства (рис. 3.2).
Рис. 3.2. Использование внутренних стилей для изменения вида текста
Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объём файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым имеет приоритет внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль. В примере 3.5 применяется сразу два метода добавления стиля в документ.
Пример 3.5. Сочетание разных методов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Рис. 3.3. Результат применения стилей
Импорт CSS
В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import . Этот метод допускается использовать совместно со связанными или глобальными стилями, но никак не с внутренними стилями. Общий синтаксис следующий.
Пример 3.6. Импорт CSS
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере показано подключение файла header.css , который расположен в папке style.
Аналогично происходит импорт и в файле со стилем, который затем подключается к документу (пример 3.7).
Пример 3.7. Импорт в таблице связанных стилей
В данном примере показано содержимое файла mysite.css , который добавляется к нужным документам способом, показанным в примере 3.1, а именно с помощью тега <link> .
Вопросы для проверки
1. Сайт имеет более ста HTML-документов, имеющих одинаковое стилевое оформление. Какой способ подключения CSS подходит лучше всего?
- Связанные стили.
- Глобальные стили.
- Блочные стили.
- Внутренние стили.
- Экспорт стиля.
2. В данном примере, какой цвет будет у текста на веб-странице?
3. Какой HTML-код применяется для подключения внешнего CSS-файла?
- <style>mystyle.css</style>
- <style>@mystyle.css</style>
- <link rel="stylesheet" href="http://htmlbook.ru/mystyle.css">
- <link>@import url(mystyle.css)</link>
- <stylesheet>mystyle.css</stylesheet>
4. Какой атрибут используется для определения внутреннего стиля?
Как уже упоминалась в предыдущих статьях, к одному файлу HTML можно подключать несколько файлов CSS с прописанием стилей. Данная процедура относится к понятию таблицы внешних стилей, а тег, с помощью которого формировалась система взаимосвязи HTML и CSS - link. Для примера рассмотрим следующую запись кода:
Данное разделение оформления сайта на несколько файлов приносит выгоду только в частном случае. Это действенно, если для практически идентичных элементов сайта нужно разное оформление.
Самой негативной чертой использования данного подхода является то, что растет количество обращений к серверу из-за наличия нескольких файлов CSS, что приводит к повышению трафика и роста времени обработки информации.
Однако, если все же пришлось использовать данную систему присвоения стилей, то стоит поговорить об операторе @import и его возможностях и функционале.
Объединение нескольких файлов CSS с import
Для опытного веб мастера не секрет, что в CSS-файлах нельзя использовать кодировку HTML. Следовательно пользоваться тегом < link > следует только в рамках файлов с расширением html внутри тега .
В то время как оператор @import осуществляет взаимосвязь файлов стиля и основного контента в файле с расширением css. Указанное содержимое этой директивы связывается с тем css-файлом, в котором сдержится этот самый @import.
Синтаксис
Разберем данную запись. Первым в import указан url (относительный, или абсолютный) требуемого файла, который более удобен для веб-мастера.
Далее следует разновидность устройства. Ее указание не является принципиально обязательным, а соответствует она атрибуту media в случае использования тегов link.
Далее следует более конкретный пример:
Некоторые полезные замечания
- Директива @import должна располагаться в самом начале css-файла. Причем принципиально, чтобы команды оформления были строго после директивы. Иначе робот не сможет считать данную команду.
- Также стоит отметить тот факт, что невозможно использовать директиву @import для конструкции встроенных стилей.
Структура создания CSS по блочной методике может осуществляться двумя путями:
- связь файлов контента и файлов оформления посредством тега < link >
- объединение таблиц внешних стилей в рамках одного файла с расширением css.
Блочную методику целесообразно использовать в том случае, когда с кодом работают несколько специалистов. Объединение стилей в один документ способствует сокращению времени обработки информации роботом.
Читайте также: