Но при написании кода сложно включить одни и те же свойства CSS для каждой веб-страницы по отдельности. Таким образом, необходимо использовать решение, с помощью которого можно создать единую таблицу стилей, а затем легко получить доступ к нескольким файлам.
Что такое правило @import в CSS?
Лучший способ включить свойства стиля CSS — использовать правило @import. @import используется для импорта или доступа к таблице стилей CSS из другой таблицы стилей. Это снижает усилия разработчика, так как все свойства, добавленные в импортированную таблицу стилей, реализуются напрямую, просто написав @import, а затем точное имя таблицы стилей.
Синтаксис правила @import
Синтаксис добавления правила @import для доступа к таблице стилей из другой таблицы стилей следующий:
@Импортировать 'имя таблицы стилей.css' ;
Правило @import также можно добавить следующим способом:
@Импортировать URL ( имя таблицы стилей.css ) ;
Просто добавьте имя файла таблицы стилей CSS либо в кавычках, либо в круглых скобках с помощью « URL 'после написания' @Импортировать ».
Пример: добавление правила @import
Чтобы понять, как работает правило @import, напишем простой фрагмент кода:
< h1 > Это простой текст! < / h1 >В приведенном выше фрагменте кода есть заголовок
с простым однострочным предложением, добавленным в HTML-документ. Этот простой код будет генерировать следующий вывод:
Давайте создадим таблицу стилей для определения некоторых свойств CSS, которые впоследствии можно будет импортировать из файла, с помощью которого создается вышеуказанный интерфейс веб-страницы. Создаем еще один файл и называем его « таблица стилей ” с типом файла, объявленным как “ css ”, и просто добавьте некоторые свойства для заголовка и тела
: h1 {
цвет : темно-синий ;
фоновый цвет : лазурь ;
выравнивание текста : центр ;
}
тело {
фоновый цвет : светло-синий ;
}
Чтобы получить доступ к файлу таблицы стилей, содержащему свойства стиля для заголовка и тела
, нам нужно просто добавить правило @import в любой из файлов CSS, где требуется этот стиль.
Добавление простого правила @import реализует все свойства стиля в интерфейсе веб-страницы без необходимости вводить свойства отдельно на каждой веб-странице.
Итак, требуется написать правило @import как:
@Импортировать 'таблица стилей.css' ;Добавьте правило @import, написав « URL ” и имя файла CSS в круглых скобках также отобразит те же результаты:
@Импортировать URL ( таблица стилей.css ) ;Свойства, определенные в « таблица стилей » реализуются простым добавлением простого « @Импортировать правило для него:
Это самый простой способ включить свойства CSS в файл без каких-либо дополнительных усилий.
Преимущества правила @import в CSS
Правило @import обычно используется по следующим причинам:
- Использование правила @import сокращает время и усилия разработчика, поскольку оно реализует все свойства конкретной таблицы стилей, просто написав имя этой таблицы после @import.
- В больших и сложных веб-приложениях правило @import оказывается очень полезным, поскольку одни и те же свойства стиля можно реализовать в нескольких файлах, просто добавив имя файла таблицы стилей.
- Элементы таблицы стилей, такие как заголовки, нижние колонтитулы, основной текст и т. д., можно хранить в отдельных файлах таблиц стилей, а затем с помощью правила @import можно импортировать любые требуемые стили без необходимости добавления, удаления или комментирования свойств стиля из файла. файл.
Это подводит итог использованию правила @import и объясняет, почему это правило считается лучшим способом включения CSS.
Заключение
Таблицу стилей CSS можно импортировать или получить к ней доступ непосредственно из другой таблицы стилей, и все свойства в импортированной таблице стилей непосредственно реализуются на веб-странице файла, в который она была импортирована. Нет необходимости писать каждое свойство CSS отдельно для каждого интерфейса веб-страницы. Все, что нужно, это добавить имя файла таблицы стилей CSS с помощью @import. И это считается лучшим способом добавления CSS.