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

Czym jest reguła @import w CSS?

Najlepszym sposobem uwzględnienia 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 programisty, ponieważ wszystkie właściwości dodane w zaimportowanym arkuszu stylów są implementowane bezpośrednio, po prostu pisząc @import, a następnie dokładną nazwę arkusza stylów.

Składnia reguły @import

Składnia dodawania reguły @import w celu uzyskania dostępu do arkusza stylów z innego arkusza stylów jest następująca:

Regułę @import można również dodać w następujący sposób:

Po prostu dodaj nazwę pliku arkusza stylów CSS w cudzysłowie lub w okrągłych nawiasach z „ adres URL „po napisaniu” @import ”.

Przykład: Dodanie reguły @import

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

W powyższym fragmencie kodu znajduje się nagłówek

z prostym jednowierszowym zdaniem 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, za pomocą którego tworzony jest powyższy interfejs strony internetowej. Tworzymy kolejny plik i nazywamy go „ arkusz stylów ” z typem pliku zadeklarowanym jako „ css ” i po prostu dodaj właściwości dla nagłówka

i treści:

h1 {

kolor : niebieska północ ;

kolor tła : lazur ;

wyrównanie tekstu : Centrum ;

}

ciało {

kolor tła : jasny niebieski ;

}

Aby uzyskać dostęp do pliku arkusza stylów zawierającego właściwości stylu dla nagłówka i treści

, musimy po prostu dodać regułę @import do dowolnego pliku CSS, w którym ta stylizacja jest potrzebna.

Dodanie prostej reguły @import zaimplementuje wszystkie właściwości stylu do interfejsu strony internetowej bez konieczności wpisywania właściwości osobno na każdej stronie internetowej.

Wymagane jest więc napisanie reguły @import jako:

@import 'arkusz stylów.css' ;

Dodanie reguły @import poprzez napisanie „ adres URL ” i nazwa pliku CSS w nawiasach okrągłych również spowoduje wyświetlenie tych samych wyników:

@import adres URL ( arkusz stylów.css ) ;

Właściwości określone w „ arkusz stylów ” są implementowane przez dodanie prostego pliku „ @import ”Zasada dla tego:

To najłatwiejszy sposób na włączenie właściwości CSS do pliku bez 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 zmniejsza czas i wysiłek programisty, ponieważ implementuje wszystkie właściwości określonego arkusza stylów, po prostu wpisują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, po prostu dodając nazwę pliku arkusza stylów.
• Elementy arkusza stylów, takie jak nagłówki, stopki, treść itp., można przechowywać w oddzielnych plikach arkuszy stylów, a następnie za pomocą reguły @import można zaimportować dowolną wymaganą stylizację bez konieczności dodawania, usuwania lub komentowania właściwości stylu z pliku plik.

To podsumowuje użycie reguły @import i wyjaśnia, dlaczego ta reguła jest uważana za najlepszą metodę dołączania CSS.

Wniosek

Arkusz stylów CSS można zaimportować lub uzyskać do niego dostęp bezpośrednio z innego arkusza stylów, a wszystkie właściwości importowanego arkusza stylów są bezpośrednio implementowane na stronie internetowej pliku, do którego 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. Jest to uważane za najlepszą metodę dodawania CSS.