Hvordan importere stilark med @import i CSS

Det kan være flere stilark i et nettprosjekt. For å bruke alle egenskapene deres på HTML -elementene, er det påkrevd å integrere dem alle i ett stilark. For å gjøre det, CSS “@import”Regel kan brukes. Ved hjelp av @import -regelen inneholder en CSS -fil alle stilene som brukes på hele prosjektet. Dessuten kan denne CSS -filen kobles til HTML ved hjelp av elementet i HTML -hodeseksjonen.

Denne oppskrivningen vil forklare metoden for å importere stilark med @import i CSS.

For bedre forståelse, analyser eksemplet nedenfor!

Hvordan importere stilark med @import i CSS?

Vi oppretter en HTML -fil og to CSS -filer med navnene “stil.CSS”Og“Btnstyle.CSS”:

• HTML -filen inneholder et DIV -element. Inne i denne diven er knappelementet spesifisert.
• Stilen.CSS vil inneholde stylingegenskapene til DIV -elementet.
• Btnstyle.CSS vil omfatte stylingegenskapene til knappelementet.
• Btnstyle.CSS -filen vil importere til stilen.CSS, og da vil HTML -filen lenke til stilen.CSS -fil.

Trinn 1: Opprett HTML -fil

I HTML, først, legg til et DIV -element med klassenavnet “innhold”. Innenfor dette elementet, legg til et knappelement:

Klikk på meg

Her er utgangen:

HTML -filen opprettes vellykket. La oss nå gå over til stilen.CSS -fil.

Trinn 2: Lag stil.CSS -fil

Nedenfor er CSS -egenskapene lagt til "stil.CSS”Fil.

Stil alle elementer

*
Margin: 0;
polstring: 0;

Stjernen “*”Tegn brukes til å referere til alle HTML -elementene. Følgende egenskaper brukes på dem:

• “margin”Eiendom gir plass rundt elementet.
• “polstring”Eiendom gir plass rundt elementets innhold eller inne i elementets grense.

Stil “innhold” div

.innhold
Bredde: 350px;
Høyde: 150px;
Grense: 1px fast RGB (252, 198, 117);
Bakgrunnsfarge: Blanchedalmond;
Margin: Auto;
Display: Flex;
Justify-Content: Center;
Align-elementer: sentrum;

Følgende er egenskapene som brukes på DIV -elementet:

• “bredde”Eiendom brukes til å sette elementets bredde.
• “høyde”Eiendom brukes til å sette elementets høyde.
• “grense”Eiendom spesifiserer elementets grense ved å spesifisere verdiene for grensebredde, grensestil og grensefarge.
• “bakgrunnsfarge”Eiendom gir farge til elementets bakgrunn.
• “vise”Eiendom med verdien”Flex”Vil gjøre elementets utforming fleksibel for varene sine.
• “Justify-Content”Eiendom setter plasseringen av de fleksible gjenstandene horisontalt.
• “Align-elementer”Eiendom setter posisjonen til de fleksible gjenstandene vertikalt, og“margin”Eiendom fungerer som forklart ovenfor.

Trinn 3: Link CSS til HTML -fil

Neste trinn er å koble stilen.CSS -fil til HTML -filen ved å bruke “”Element tilknyttet attributtene:

• rel: Denne attributtet brukes til å spesifisere typen dokument.
• href: Denne attributtet brukes til å legge til nettadressen til filen.

Dette koblingselementet er spesifisert i hodeelementet i HTML -filen:

Så her er utgangen etter å ha koblet stilen.CSS -fil til HTML -filen:

Så ta turen over til “Btnstyle.CSS”Fil som vil inneholde stylingegenskapene til knappelementet.

Trinn 4: Lag btnstyle.CSS -fil

Denne filen har CSS -egenskapene til HTML -knappelementet.

Stil "knapp" -element

knapp
Border-Radius: 5px;
polstring: 10px;
Bredde: 200px;
bakgrunnsfarge: RGB (253, 207, 137);
grense: 1px fast RGB (245, 156, 21);
Bokseskygge: 1px 1px 1px grå;

Knappelementet er spesifisert med følgende egenskaper:

• “Border-Radius”Eiendom brukes til å gjøre elementets kanter rundt.
• “Bokseskygge”Er en korthåndsegenskap som setter en skygge rundt et element ved å spesifisere verdiene for X-offset, Y-offset, Blur-Radius, Spread-Radius og fargen på skyggen.
• “polstring”,“bredde”,“bakgrunnsfarge”, Og“grense”Egenskaper fungerer som beskrevet ovenfor.

Trinn 5: Stil "knapp" -element på svevet

Knapp: Hopp
Transform: Translatey (2px);

På Hover er knappelementet spesifisert med følgende egenskap:

• “forvandle”Eiendom spesifiserer elementets transformasjon der“Translatey ()”Funksjon posisjonerer elementet på y-aksen.

Trinn 6: Bruk @importregel

Nå skal vi integrere btnstyle.CSS -fil inn i stilen.CSS -fil. For dette, spesifiser BtnStyle.CSS -fil ved å bruke @import -regelen øverst i stilen.CSS -fil som følger:

@import "BtnStyle.CSS ";

Produksjon

Du har vellykket lært hvordan du importerer stilark med @import i CSS.

Konklusjon

For å bruke alle egenskapene på prosjektets HTML -fil, er det påkrevd å integrere dem. For å gjøre det importeres CSS -stilarkene til stilarket ved å bruke @import -regelen. Deretter kan denne filen kobles til HTML -filen ved å bruke HTML -koblingselementet. Denne artikkelen har demonstrert hvordan man importerer stilark med @import i CSS.