Но докато кодирате, е трудно да включите едни и същи CSS свойства за всяка уеб страница поотделно. Така че е необходимо да се използва решение, чрез което може да се създаде един стилов лист и след това да се достъпва лесно от множество файлове.

Какво представлява правилото @import в CSS?

Най-добрият начин да включите свойствата на стила на CSS е като използвате правилото @import. @import се използва за импортиране или достъп до CSS лист със стилове от друг лист със стилове. Това намалява усилията на разработчика, тъй като всички свойства, добавени в импортирания стилов лист, се внедряват директно чрез просто написване на @import и след това точното име на стиловия лист.

Синтаксис на @import правило

Синтаксисът за добавяне на правилото @import за достъп до стилов лист от друг стилов лист е следният:

Правилото @import може да се добави и по следния метод:

Просто добавете името на CSS файла със стилова таблица в обърнати запетаи или в кръгли скоби с „ URL адрес 'след писане' @импортиране ”.

Пример: Добавяне на @import правило

За да разберем как работи правилото @import, ние пишем прост кодов фрагмент:

В горния кодов фрагмент има заглавие

с просто изречение от един ред, добавено в HTML документ. Този прост код ще генерира следния изход:

Нека създадем лист със стилове, за да дефинираме някои CSS свойства, които по-късно могат да бъдат импортирани от файла, чрез който е създаден горният интерфейс на уеб страницата. Създаваме друг файл и го именуваме ' таблица със стилове ” с тип файл, деклариран като „ css ”, и просто добавете някои свойства за

заглавие и тяло:

h1 {

цвят : среднощно синьо ;

Цвят на фона : лазурен ;

подравняване на текст : център ;

}

тяло {

Цвят на фона : светло синьо ;

}

За достъп до файла със стиловата таблица, съдържащ стиловите свойства за

заглавие и тяло, трябва просто да добавим правилото @import във всеки от CSS файловете, където този стил е необходим.

Добавянето само на просто правило @import ще приложи всички стилови свойства към интерфейса на уеб страницата, без да се налага да въвеждате свойствата отделно на всяка уеб страница.

Така че се изисква да напишете правилото @import като:

@импортиране 'stylesheet.css' ;

Добавяне на правилото @import чрез писане на „ URL адрес ” и името на CSS файла в кръглите скоби също ще покаже същите резултати:

@импортиране URL адрес ( stylesheet.css ) ;

Свойствата, дефинирани в „ таблица със стилове ” файл се изпълняват чрез просто добавяне на прост „ @импортиране ” правило за него:

Това е най-лесният начин да включите CSS свойствата във файл без допълнителни усилия.

Предимства на @import Rule в CSS

Правилото @import се използва често поради следните причини:

• Използването на правилото @import намалява времето и усилията на разработчика, тъй като прилага всички свойства на конкретен стилов лист, като просто изписва името на този лист след @import.
• В големи и сложни уеб приложения правилото @import се оказва много полезно, тъй като едни и същи стилови свойства могат да бъдат внедрени в множество файлове само чрез добавяне на името на файла със стиловия лист.
• Елементи на стиловия лист, като горни колонтитули, долни колонтитули, основен текст и т.н., могат да се съхраняват в отделни файлове със стилов лист и след това чрез използване на правилото @import всеки от необходимите стилове може да бъде импортиран, без да е необходимо да добавяте, премахвате или коментирате стилови свойства от файл.

Това обобщава използването на правилото @import и обяснява как това правило се счита за най-добрия метод за включване на CSS.

Заключение

CSS лист със стилове може да бъде импортиран или достъпен директно от друг лист със стилове и всички свойства в импортирания лист със стилове се прилагат директно на уеб страницата на файла, където е бил импортиран. Няма нужда да пишете всяко CSS свойство отделно за всеки интерфейс на уеб страница. Всичко, което е необходимо, е да добавите името на файла със стиловия лист на CSS с @import. И това се счита за най-добрият метод за добавяне на CSS.