Podczas opracowywania stron internetowych i aplikacji internetowych, ten sam styl na każdej stronie jest często wymagany do utrzymania spójności aplikacji internetowej. Na przykład, jeśli kolory strony głównej aplikacji internetowej są kombinacją różu i fioletu, będzie wyglądać dziwnie, jeśli następna strona aplikacji internetowej jest w dowolnym innym kolorze, takim jak czarny i pomarańczowy.

Ale podczas kodowania trudno jest podać te same właściwości CSS dla każdej strony internetowej osobno. Zatem konieczne jest użycie rozwiązania, za pomocą którego można łatwo utworzyć pojedynczy arkusz stylów, a następnie uzyskać dostęp do wielu plików.

Jaka jest reguła @import w CSS?

Najlepszym sposobem na włączenie właściwości stylu CSS jest użycie reguły @Import. @Import służy do importowania lub uzyskiwania dostępu do arkusza stylów CSS z innego arkusza stylów. Zmniejsza to wysiłek dewelopera, ponieważ wszystkie właściwości dodane w arkuszu importowanego stylu są implementowane bezpośrednio poprzez pisanie @import, a następnie dokładną nazwę arkusza stylów.

Składnia reguły @import

Składnia, aby dodać regułę @Import, aby uzyskać dostęp do arkusza stylów z innego arkusza stylów, jest następująca:

@Import "StylesheetName.CSS ”;

Regułę @Import można również dodać następującą metodą:

@Import URL (StylesheetName.CSS);

Po prostu dodaj nazwę pliku arkusza stylów CSS w odwróconych przecinkach lub w okrągłych nawiasach z „URL”Po napisaniu„@import".

Przykład: dodanie reguły @import

Aby zrozumieć, jak działa reguła @Import, piszemy prosty fragment kodu:

To jest prosty tekst!

W powyższym fragmencie kodu jest

Kierowanie się prostym zdaniem jednoczęściowym dodanym w dokumencie HTML. Ten prosty kod wygeneruje następujące dane wyjściowe:

Utwórzmy arkusz stylów, aby zdefiniować niektóre właściwości CSS, które można później zaimportować z pliku, przez który tworzony jest powyższy interfejs strony internetowej. Tworzymy inny plik i nazywamy go „arkusz stylów”Z typem pliku zadeklarowanym jako„CSS”I po prostu dodaj niektóre właściwości dla

nagłówek i ciało:

H1
Kolor: Midnightblue;
kolor tła: Azure;
Text-Align: Center;

ciało
kolor tła: Lightblue;

Aby uzyskać dostęp do pliku arkusza stylów zawierających właściwości stylu dla

Nagłówek i nadwozie musimy po prostu dodać regułę @import w dowolnym pliku CSS, w którym potrzebny jest ten styl.

Dodanie zwykłej reguły @Import zaimplementuje wszystkie właściwości stylu do interfejsu strony internetowej bez konieczności pisania właściwości osobno na każdej stronie internetowej.

Zatem konieczne jest napisanie reguły @Import jako:

@Import „Stylesheet.CSS ”;

Dodanie reguły @Import, pisząc „URL”A nazwa pliku CSS w okrągłych nawiasach wyświetli również te same wyniki:

@Import URL (Stylesheet.CSS);

Właściwości zdefiniowane w „arkusz stylów„Plik jest implementowany, po prostu dodając proste„@import„Zasada dla tego:

Ten najłatwiejszy sposób na włączenie właściwości CSS do pliku bez żadnych dodatkowych wysiłków.

Korzyści z reguły @import w CSS

Reguła @Import jest powszechnie używana z następujących powodów:

• Korzystanie z reguły @Import skraca czas i wysiłek programisty, ponieważ implementuje wszystkie właściwości konkretnego arkusza stylów, pisząc nazwę tego arkusza po @Import.
• W dużych i złożonych aplikacjach internetowych reguła @Import okazuje się bardzo korzystna, ponieważ te same właściwości stylu można zaimplementować w wielu plikach, dodając nazwę pliku arkusza stylów.
• Elementy arkusza stylów, takie jak nagłówki, stopki, nadwozie itp., Mogą być przechowywane w osobnych plikach arkusza stylów, a następnie za pomocą reguły @Import, dowolny z wymaganych stylizacji można importować bez konieczności dodawania, usuwania lub komentowania właściwości stylu z a plik.

To podsumowuje użycie reguły @Import i wyjaśnia, w jaki sposób ta reguła jest uważana za najlepszą metodę zawierającą CSS.

Wniosek

Arkusz stylów CSS może być importowany lub dostępny bezpośrednio z innego arkusza stylów, a wszystkie właściwości w zaimportowanym arkuszu stylów są bezpośrednio zaimplementowane na stronie pliku, w którym został zaimportowany. Nie ma potrzeby pisania każdej właściwości CSS osobno dla każdego interfejsu strony internetowej. Wystarczy dodać nazwę pliku arkusza stylów CSS z @Import. I jest to uważane za najlepszą metodę dodawania CSS.