Kaskad stilark har många fördelar. De låter dig använda samma stilark på hela din webbplats. Det finns två sätt att göra detta:
- länkar till LINK-elementet
- importerar med kommandot @import
Fördelar och nackdelar med externa stilark
En av de bästa sakerna med kaskad stilark är att du kan använda dem för att hålla din webbplats konsekvent. Det enklaste sättet att göra detta är att länka eller importera ett externt stilark. Om du använder samma externa formatmall för varje sida på din webbplats kan du vara säker på att alla sidor kommer att ha samma stilar.
Några av fördelarna med att använda externa formatmallar är att du kan styra utseendet på flera dokument samtidigt. Detta är särskilt användbart om du arbetar med ett team människor för att skapa din webbplats. Många stilregler kan vara svåra att komma ihåg, och även om du kanske har en tryckt stilguide är det tråkigt att ha att ständigt bläddra igenom den för att avgöra om exempeltext ska skrivas med 12-punkts Arial-teckensnitt eller 14-punkts Kurir.
Du kan skapa klasser av stilar som sedan kan användas på många olika HTML-element. Om du ofta använder ett speciellt Wingdings-teckensnitt för att betona olika saker på din sida kan du använda Wingdings klass som du ställer in i ditt stilark för att skapa dem snarare än att definiera en specifik stil för varje instans av betoning.
Du kan enkelt gruppera dina stilar för att bli effektivare. Alla grupperingsmetoder som är tillgängliga för CSS kan användas i externa formatmallar, och detta ger dig mer kontroll och flexibilitet på dina sidor.
Som sagt, det finns också mycket goda skäl att inte använda externa stilark. För det första kan de öka nedladdningstiden om du länkar till många av dem.
Varje gång du skapar en ny CSS-fil och länkar eller importerar den till ditt dokument krävs det att webbläsaren ringer ett annat samtal till webbservern för att hämta filen. Och serversamtal bromsar sidladdningstiderna.
Om du bara har ett litet antal stilar kan de öka komplexiteten på din sida. Eftersom stilarna inte är synliga direkt i HTML-filen måste alla som tittar på sidan skaffa ett annat dokument (CSS-filen) för att ta reda på vad som händer.
Hur man skapar ett externt stilark
Externa stilark skrivs på samma sätt som inbäddade och integrerade stilark. Men allt du behöver skriva är stilen väljare och den deklaration. Du behöver inte ett STYLE-element eller attribut i dokumentet.
Som med alla andra CSSär syntaxen för en regel:
väljare {property: value; }
Dessa regler skrivs till en textfil med tillägget.
.css. Du kan till exempel namnge ditt stilark.
styles.css.
Länka CSS-dokument
För att länka ett stilark använder du LINK-elementet. Detta har attributen rel och href. Rel-attributet berättar för webbläsaren vad du länkar (i det här fallet ett formatmall) och attributet href håller vägen till CSS-filen.
Det finns också en valfri attributtyp som du kan använda för att definiera MIME-typen för det länkade dokumentet. Detta krävs inte i HTML5, men bör användas i HTML 4-dokument.
Här är koden som du skulle använda för att länka ett CSS-formatmall som heter styles.css:
Och i ett HTML 4-dokument skulle du skriva:
typ = "text / css">
Importera CSS Style Sheets
Importerade stilark placeras i STYLE-elementet. Du kan sedan använda inbäddade stilar också om du vill. Du kan också inkludera importerade stilar i länkade stilark. Skriv in STYLE- eller CSS-dokumentet:
@import url (' http://www.yoursite.com/styles.css');