Kaskaderende stilark har mange fordeler. De lar deg bruke samme stilark på hele nettstedet ditt. Det er to måter å gjøre dette på:
- kobling til LINK-elementet
- importerer med kommandoen @import
Fordeler og ulemper ved eksterne stilark
En av de beste tingene med cascading stilark er at du kan bruke dem til å holde nettstedet ditt konsistent. Den enkleste måten å gjøre dette på er å koble til eller importere et eksternt stilark. Hvis du bruker det samme eksterne stilarket for hver side på nettstedet ditt, kan du være sikker på at alle sidene har det samme stiler.
Noen av fordelene med å bruke eksterne stilark inkluderer at du kan kontrollere utseendet og følelsen til flere dokumenter samtidig. Dette er spesielt nyttig hvis du jobber med et team av mennesker for å lage nettstedet ditt. Mange stilregler kan være vanskelig å huske, og selv om du kanskje har en trykte stilguide, er det kjedelig å ha å bla hele tiden gjennom den for å avgjøre om eksempelteksten skal skrives med 12-punkts Arial-skrift eller 14-punkts Kurer.
Du kan lage klasser av stiler som deretter kan brukes på mange forskjellige HTML-elementer. Hvis du ofte bruker en spesiell Wingdings-skrift for å legge vekt på forskjellige ting på siden din, kan du bruke Wingdings klasse du setter opp i stilarket ditt for å lage dem i stedet for å definere en bestemt stil for hver forekomst av vektlegging.
Du kan enkelt gruppere stilene dine for å være mer effektive. Alle grupperingsmetodene som er tilgjengelige for CSS, kan brukes i eksterne stilark, og dette gir deg mer kontroll og fleksibilitet på sidene dine.
Når det er sagt, er det også veldig gode grunner til ikke å bruke eksterne stilark. For det første kan de øke nedlastingstiden hvis du lenker til mange av dem.
Hver gang du oppretter en ny CSS-fil og lenker eller importerer den til dokumentet, krever nettleseren å ringe til webserveren for å hente filen. Og serveranrop reduserer sidetidenes innlasting.
Hvis du bare har et lite antall stiler, kan de øke kompleksiteten på siden din. Fordi stilene ikke er synlige rett i HTML-en, må alle som ser på siden skaffe et annet dokument (CSS-filen) for å finne ut hva som skjer.
Hvordan lage et eksternt stilark
Eksterne stilark skrives på samme måte som innebygde og integrerte stilark. Men alt du trenger å skrive er stilen velgeren og erklæring. Du trenger ikke et STYLE-element eller attributt i dokumentet.
Som med alle andre CSS, syntaksen for en regel er:
selector {eiendom: verdi; }
Disse reglene er skrevet til en tekstfil med utvidelsen.
.css. For eksempel kan du gi navnet på stilarket ditt.
styles.css.
Kobling av CSS-dokumenter
For å koble et stilark bruker du LINK-elementet. Dette har attributtene rel og href. Rel-attributtet forteller nettleseren hva du kobler til (i dette tilfellet et stilark) og href-attributtet holder banen til CSS-filen.
Det er også en valgfri attributtype som du kan bruke til å definere MIME-typen til det koblede dokumentet. Dette er ikke nødvendig i HTML5, men skal brukes i HTML 4-dokumenter.
Her er koden du vil bruke til å koble et CSS-stilark kalt styles.css:
Og i et HTML 4-dokument vil du skrive:
type = "tekst / css">
Importerer CSS Style Sheets
Importerte stilark plasseres i STYLE-elementet. Du kan da også bruke innebygde stiler hvis du vil. Du kan også inkludere importerte stiler i koblede stilark. Inne i STYLE- eller CSS-dokumentet, skriv:
@import url (' http://www.yoursite.com/styles.css');