Webbplatser är en kombination av stil och struktur, och på dagens webbsida är det en bra praxis att hålla dessa två aspekter av en webbplats skild från varandra.
HTML har alltid varit det som ger en webbplats med sin struktur. I de tidiga dagarna på webben innehöll HTML också stilinformation. Element som taggen skrävdes över HTML-koden och lade ut och känna information tillsammans med strukturell information. Webstandardrörelsen drev oss för att ändra denna övning och istället trycka all stilinformation i CSS eller Cascading Style Sheets. Med det här ett steg längre, är nuvarande rekommendationer att du använder det som kallas ett "externt stilark" för din webbplatsens stylingbehov.
Fördelar och nackdelar med externa stilark
En av de bästa sakerna om Cascading Style Sheets är att du kan använda dem för att hålla hela 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 stilark för varje sida på din webbplats kan du vara säker på att alla sidor kommer att ha samma stil. Du kan också göra det enklare att göra ändringar för framtiden. Eftersom alla sidor använder samma externa stilark, påverkar alla ändringar i det arket varje sida. Det här är mycket bättre än att ändra varje sida individuellt!
Fördelar med externa stilark
- Du kan styra utseendet på flera dokument samtidigt.
- Detta är särskilt användbart om du arbetar med ett team av människor för att skapa din webbplats. Många stilregler kan vara svåra att komma ihåg, och medan du kanske har en tryckt stilguide är det ineffektivt och tråkigt att kontinuerligt bläddra igenom det för att bestämma om exemplet text ska skrivas i 12 punkter Arial-typsnitt eller 14-punkts bud. Genom att ha allt på ett ställe, och sedan det där är också där du skulle göra förändringar, kan du göra underhåll så mycket enklare.
- Du kan skapa klasser av stilar som sedan kan användas på många olika HTML-element.
- Om du ofta använder en viss typsnittstilställning för att lägga tonvikten på olika saker på din sida kan du använda en klassattribut som du har ställt in i stilarket för att få det här utseendet, snarare än att definiera en specifik stil för varje förekomst av betoning.
- Du kan enkelt gruppera dina stilar för att vara effektivare.
- Alla grupperingsmetoder som är tillgängliga för CSS kan användas i externa stilark, vilket ger dig mer kontroll och flexibilitet på dina sidor.
Nackdelar med externa stilark
- Externa stilark kan öka nedladdningstiden, särskilt om de är extremt stora. Eftersom CSS-filen är ett separat dokument som måste laddas, påverkar det prestanda för att utföra den nedladdningen.
- Externa stilarkar blir stora väldigt snabbt, eftersom det är svårt att berätta när en stil inte längre används, eftersom den inte raderas när sidan tas bort. Korrekt hantering av dina CSS-filer är viktigt, särskilt om flera personer arbetar på samma fil.
- Om du bara har en webbplats med en sida kan det hända att det inte är nödvändigt att ha en extern fil för CSS eftersom du bara har den ena sidan att stila. Många av fördelarna med extern CSS går vilse när du bara har en enda sida.
Så här skapar du ett externt stilark
Externa stilark skapas med en liknande syntax till stilark i dokumentnivå. Men allt du behöver inkludera är väljaren och deklarationen. Precis som i ett stilark på dokumentnivå är syntaxen för en regel:
selector {property: value;}
Spara dessa regler i en textfil med förlängningen .css. Detta är inte nödvändigt, men det är en bra vana att komma in, så du kan genast känna igen dina stilark i en kataloglista.
När du har ett stilark dokument måste du länka det till dina webbsidor. Detta kan göras på två sätt:
- länka
- För att länka ett stilark använder du HTML-taggen. Detta har attributen rel, typ, och href. Rel attributet anger vad du länkar (i detta fall ett stylesheet), definierar typen MIME-Type för webbläsaren, och href är sökvägen till .css-filen.
- importera
- Du skulle använda ett importerat stilark i ett stilark för dokumentnivå så att du kan importera attributen till ett externt stilark medan du inte förlorar några dokumentspecifika. Du kallar det på ett liknande sätt som att ringa ett länkat stilark, bara det måste kallas inom en stämningsdeklaration på dokumentnivå. Du kan importera så många externa stilark som du behöver för att behålla din webbplats.
Originalartikel av Jennifer Krynin. Redigerad av Jeremy Girard den 8/8/17
