Jak importować arkusze stylów z @Import w CSS

W projekcie internetowym może być kilka arkuszy stylów. Aby zastosować wszystkie ich nieruchomości do elementów HTML, konieczne jest zintegrowanie ich wszystkich z jednym arkuszem stylów. Aby to zrobić, CSS ”@import„Można wykorzystać zasadę. Korzystając z reguły @Import, jeden plik CSS zawiera wszystkie style zastosowane do całego projektu. Ponadto ten plik CSS można połączyć z HTML za pomocą elementu w sekcji HTML.

Ten zapis wyjaśni metodę importowania arkuszy stylów z @Import w CSS.

Aby lepiej zrozumieć, przeanalizuj poniższy przykład!

Jak importować arkusze stylów z @Import w CSS?

Utworzymy plik HTML i dwa pliki CSS z nazwami „styl.CSS" I "Btnstyle.CSS”:

• Plik HTML zawiera element DIV. Wewnątrz tej div podano element przycisku.
• Styl.CSS będzie zawierał właściwości stylistyczne elementu DIV.
• Btnstyle.CSS będzie zawierać właściwości stylizacji elementu przycisku.
• Btnstyle.Plik CSS zaimportuje styl.CSS, a następnie plik HTML będzie link do stylu.plik CSS.

Krok 1: Utwórz plik HTML

W HTML najpierw dodaj element div o nazwie klasy „treść". W tym elemencie dodaj element przycisku:

Kliknij

Oto wyjście:

Plik HTML jest tworzony pomyślnie. Teraz przejdźmy do stylu.plik CSS.

Krok 2: Utwórz styl.plik CSS

Poniżej znajdują się właściwości CSS dodane do „styl.CSS" plik.

Styl wszystkie elementy

*
Margines: 0;
Wyściółka: 0;

Gwiazdka „*„Znak jest wykorzystywany w odniesieniu do wszystkich elementów HTML. Zastosowane są do nich następujące właściwości:

• "margines„Właściwość dodaje przestrzeń wokół elementu.
• "wyściółka„Właściwość dodaje miejsce wokół zawartości elementu lub wewnątrz granicy elementu.

Styl „treść” div

.treść
Szerokość: 350px;
Wysokość: 150px;
granica: 1px Solid RGB (252, 198, 117);
kolor tła: Blanchedalmond;
Margines: Auto;
Wyświetlacz: Flex;
Justify-Content: Center;
Wyrównanie: Center;

Poniżej znajdują się właściwości stosowane do elementu DIV:

• "szerokość„Właściwość służy do ustawiania szerokości elementu.
• "wysokość„Właściwość jest wykorzystywana do ustawiania wysokości elementu.
• "granica”Właściwość określa granicę elementu, określając wartości szerokości granicy, stylu granicznego i koloru granicznego.
• "kolor tła„Właściwość dodaje kolor do tła elementu.
• "wyświetlacz„Własność o wartości”przewód”Sprawi, że układ elementu jest elastyczny dla jego przedmiotów.
• "justify-content”Właściwość ustawia pozycję elastycznych elementów poziomo.
• "Wyrównanie„Właściwość ustawia pozycję elastycznych elementów pionowo i„margines„Nieruchomość działa jak wyjaśniono powyżej.

Krok 3: Link CSS do pliku HTML

Następnym krokiem jest połączenie stylu.plik CSS do pliku HTML, wykorzystując „„Element powiązany z atrybutami:

• rel: Ten atrybut jest wykorzystywany do określenia typu dokumentu.
• Href: Ten atrybut służy do dodania adresu URL pliku.

Ten element łącza jest określony w elemencie głównym pliku HTML:

Oto wyjście po połączeniu stylu.plik CSS do pliku HTML:

Więc teraz przejdź do „Btnstyle.CSS„Plik, który pomieści właściwości stylizacji elementu przycisku.

Krok 4: Utwórz Btnstyle.plik CSS

Ten plik ma właściwości CSS elementu przycisku HTML.

Element „guzika” stylu

przycisk
RADIUS BERDER: 5px;
Wyściółka: 10px;
szerokość: 200px;
kolor tła: RGB (253, 207, 137);
granica: 1px stały RGB (245, 156, 21);
Box-shadow: 1px 1px 1px Gray;

Element przycisku jest określony z następującymi właściwościami:

• "Radiusz graniczny„Własność jest wykorzystywana do robienia krawędzi elementu.
• "Shadow Box”Jest właściwością skrótów, która ustawia cień wokół elementu, określając wartości x-offset, y-offset, blur-radus, radacz rozprzestrzeniania się i kolor cienia.
• „„wyściółka”,„szerokość”,„kolor tła", I "granica”Właściwości działają jak opisano powyżej.

Krok 5: Stylowy element „przycisku” na zawisie

Przycisk: Hover
Transform: Translatey (2px);

Na zawisie element przycisku jest określony w następującej właściwości:

• "przekształcać„Właściwość określa transformację elementu, w której„tłumacz ()”Funkcja ponownie pozycja elementu na osi y.

Krok 6: Użyj reguły @import

Teraz zintegrujemy Btnstyle.Plik CSS w stylu.plik CSS. W tym celu określ btnstyle.plik CSS za pomocą reguły @Import na górze stylu.Plik CSS w następujący sposób:

@Import "Btnstyle.CSS ”;

Wyjście

Z powodzeniem nauczyłeś się importować arkusze stylów z @Import w CSS.

Wniosek

Aby zastosować wszystkie właściwości do pliku HTML twojego projektu, należy je zintegrować. Aby to zrobić, arkusze stylów CSS są importowane do arkusza stylów, wykorzystując regułę @import. Następnie ten plik można połączyć z plik HTML, wykorzystując element łącza HTML. W tym artykule pokazano, jak importować arkusze stylów z @Import w CSS.