Hvordan ta med en CSS -fil i en annen?

Mens du utvikler omfattende prosjekter, er det bedre å lage separate filer for HTML og CSS. Som vi er klar over, gir CSS mange egenskaper som utviklere kan bruke til å lage websider og HTML -dokumenter mer estetikk. Derfor er den ideelle tilnærmingen å lage flere CSS -filer for forskjellige prosjektkomponenter. Dette hjelper utviklere til å søke i den spesifikke koden for modifisering.

Dette innlegget vil forklare hvordan du legger til en CSS -fil til en annen.

Hvordan innlemme en CSS -fil i en annen?

CSS “@import -regel”Brukes til å innlemme en CSS -fil i en annen. Sjekk ut eksemplet for en klar forståelse.

Eksempel: inkludert en CSS -fil i en annen

Lag først tre filer, en HTML og to CSS -filer.

Trinn 1: Opprett HTML -fil

Lag en HTML -fil, "indeks.html”, Legg deretter til“”Element i“”Seksjon som gitt nedenfor. Her “rel”Attributt brukes til å definere forholdet mellom HTML og den koblede filen, og“href”Brukes til å spesifisere filkilde:

I “”Seksjon, utfør følgende trinn:

• Legg til en "”Element og tilordne det to klasser”Innholdsdiv”Og“bok”.
• Legg til "

  ”Element for overskrift og“

  ”Element for å lage en liste.
  • For å liste opp varene, legg til “
  • ”Tagger:
  
  

  Bøker

  
  
  
  
  • Al-Chemist
  
  
  • Drageløperen
  
  
  
  

  Trinn 2: Opprett CSS -fil

  Etter det opprette “hoved-.CSS”Fil og legg til følgende kode:

  .innholdsdiv
  Bredde: 400px;
  Høyde: 300px;
  Margin: Auto;
  bakgrunnsfarge: RGB (245, 230, 212);
  

  “.Innholdsdiv”Brukes for å få tilgang til“”Element som har klassen kalt som“Innholdsdiv”Og følgende egenskaper brukes på det:

  • “bredde”Bestemmer elementets bredde.
  • “høyde”Justerer elementets høyde.
  • “margin”Genererer plassen rundt HTML -elementet.
  • “bakgrunnsfarge”Endrer HTML -elementets bakgrunnsfarge.

  Produksjon

  Trinn 3: Opprett andre CSS -fil

  Deretter oppretter du en andre CSS -fil, "bok.CSS”. Få tilgang til andre klasse navn “.bok”Og tilordne det følgende CSS -egenskaper:

  .bok
  Bakgrunnsbilde: URL (/bilder/blader-.jpg);
  Bakgrunnsstørrelse: Deksel;
  polstring: 15px;
  Font-størrelse: 40px;
  Fontvekt: fet;
  Farge: RGB (243, 243, 243);
  

  Her:

  • “bakgrunnsbilde”Brukes til å stille bakgrunnsbildet ved å definere nettadressen til bildet.
  • “bakgrunnsstørrelse”Angir størrelsen på elementets bakgrunnsbilde.
  • “polstring”Bruker plass inne i elementets grense.
  • “skriftstørrelse”Angir skriftstørrelsen.
  • “Fontvekt”Betegner skrifttypen.
  • “farge”Bestemmer skriftfargen.

  Legg til "@import”Regel øverst i“hoved-.CSS”Fil:

  @import url (bøker.CSS);

  “@import”Regel importerer CSS -filen til en annen CSS -fil. For eksempel "bøker.CSS”Er inkludert i“hoved-.CSS”Fil.

  Utgangen verifiserer at CSS -egenskapene til begge filene har blitt brukt med hell:

  Vi har inkludert en CSS -fil i en annen.

  Konklusjon

  For å inkludere en CSS -fil i en annen, bruk CSS “@import" regel. "@Import" -regelen må spesifiseres øverst i CSS -filen der du vil inkludere en annen CSS -fil. For å koble CSS -filene i HTML, "”Tag, sammen med“href”Attributt, brukes. Dette innlegget har forklart hvordan du kan integrere en CSS -fil i en annen.