Webbplatser består av ett antal enskilda delar, inklusive bilder, text och olika dokument. Dessa dokument innehåller inte bara sådana som kan länkas till från olika sidor, som PDF-filer, utan också de dokument som används för att konstruera sidorna själva, som HTML-dokument för att bestämma strukturen på en sida och CSS (Cascading Style Sheet) -dokument för att diktera utseendet på en sida. Den här artikeln kommer att gräva i CSS och täcka vad det är och var det används på webbplatser idag.
En CSS-historielektion
CSS utvecklades först 1997 som ett sätt för webbutvecklare att definiera det visuella utseendet på de webbsidor som de skapade. Det var avsett att tillåta webbproffs att separera innehållet och struktur för en webbplats kod från den visuella designen, något som inte hade varit möjligt före denna tid.
Separationen av struktur och stil gör det möjligt för HTML att utföra mer av den funktion som den ursprungligen baserades på - markeringen av innehåll, utan att behöva oroa sig för utformningen och layouten på själva sidan, något som allmänt kallas "look and feel" av sida.
Utvecklingen av CSS
CSS fick inte popularitet förrän omkring 2000 när webbläsare började använda mer än de grundläggande aspekterna av typsnitt och färg i detta markeringsspråk. Idag stöder alla moderna webbläsare alla CSS nivå 1, de flesta av CSS nivå 2, och även de flesta aspekter av CSS nivå 3. När CSS fortsätter att utvecklas och nya stilar introduceras har webbläsare börjat implementera moduler som ger nytt CSS-stöd i dessa webbläsare och ger webbdesigners kraftfulla nya stylingverktyg att fungera med.
Under (många) år tidigare fanns det utvalda webbdesigners som vägrade att använda CSS för design och utveckling av webbplatser, men den praxis är nästan borta från branschen idag. CSS är nu en allmänt använd standard inom webbdesign och du skulle vara svårt att hitta någon som arbetar i branschen idag som inte åtminstone hade en grundläggande förståelse för detta språk.
CSS är en förkortning
Som redan nämnts står termen CSS för "Cascading Style Sheet." Låt oss bryta ner den här frasen för att förklara mer detaljerat vad dessa dokument gör.
Ordet "stilark" hänvisar till själva dokumentet (som HTML är CSS-filer egentligen bara textdokument som kan redigeras med en mängd olika program). Stilark har använts för dokumentdesign i många år. De är de tekniska specifikationerna för en layout, vare sig det är utskrift eller online. Tryckdesigners har länge använt stilark för att säkerställa att deras mönster skrivs ut exakt enligt deras specifikationer. Ett formatmall för en webbsida tjänar samma syfte, men med den extra funktionaliteten att också berätta för webbläsaren hur man gör det dokument som visas. Idag kan CSS-stilark också användas mediefrågor för att ändra hur en sida ser ut olika enheter och skärmstorlekar. Detta är oerhört viktigt eftersom det gör att ett enda HTML-dokument kan återges på olika sätt beroende på skärmen som används för att komma åt det.
Kaskad är den riktigt speciella delen av termen "kaskad stilark". Ett webbformatblad är avsedd att kaskad genom en serie stilar i det arket, som en flod över ett vattenfall. Vattnet i floden träffar alla stenarna i vattenfallet, men bara de längst ner påverkar exakt var vattnet kommer att strömma. Detsamma gäller kaskaden i webbplatsens stilark.
Designer Style Sheets åsidosätter webbläsarens standard Style Sheets
Varje webbsida påverkas av minst ett stilark, även om webbdesignern inte tillämpar några stilar. Det här stilarket är användaragentens stilark - även känd som standardformat som webbläsaren använder för att visa en sida om inga andra instruktioner tillhandahålls. Till exempel är hyperlänkar som standard utformade i blått och de är understrukna. Dessa stilar kommer från en webbläsares standardformat. Om webbdesignern ger andra instruktioner måste webbläsaren dock veta vilka instruktioner som har företräde. Alla webbläsare har sina egna standardstilar, men många av dessa standardinställningar (som de blå understrukna textlänkarna) delas över alla eller de flesta större webbläsare och versioner.
För ett annat exempel på en webbläsares standard är standardteckensnittet i vår webbläsare "Times New Roman"visas i storlek 16. Nästan ingen av de sidor vi besöker är dock i den typsnittfamiljen och storleken. Detta beror på att kaskaden definierar att de andra stilarken, som ställs av designarna själva, ska omdefiniera teckenstorleken och familj, vilket åsidosätter vår webbläsares standardinställningar. Alla formatmallar som du skapar för en webbsida kommer att ha mer specificitet än en webbläsares standardformat, så standardvärdena gäller endast om ditt formatmall inte åsidosätter dem. Om du vill att länkar ska vara blåa och understrukna behöver du inte göra någonting eftersom det är standard, men om din webbplats CSS-fil säger att länkar ska vara gröna, kommer den färgen att åsidosätta standardblått. Understrecket förblir i det här exemplet eftersom du inte angav något annat.
Var används CSS?
CSS kan också användas för att definiera hur webbsidor ska se ut när de visas i andra media än a webbläsare. Du kan till exempel skapa ett utskriftsformat som definierar hur webbsidan ska skrivas ut. Eftersom webbsidobjekt som navigeringsknappar eller webbformulär inte har något syfte med den utskrivna sidan kan ett utskriftsark användas för att "stänga av" dessa områden när en sida skrivs ut. Även om det inte är en vanlig praxis på många webbplatser är alternativet att skapa utskriftsformat kraftfullt och attraktivt (i vår erfarenhet - de flesta webbproffs gör inte detta bara för att webbplatsens budget inte kräver detta ytterligare arbete ske).
Varför är CSS viktigt?
CSS är ett av de mest kraftfulla verktygen en webbdesigner kan lära sig, för med det kan du påverka hela webbplatsens visuella utseende. Välskrivna stilark kan uppdateras snabbt och låta webbplatser ändra det som prioriteras visuellt på skärm, som i sin tur visar värde och fokus för besökare, utan att några ändringar behöver göras i underliggande HTML-markering.
Den viktigaste utmaningen med CSS är att det finns en hel del att lära sig - och när webbläsare ändras varje dag, fungerar det bra idag kanske inte är vettigt i morgon eftersom nya stilar stöds och andra tappas eller faller i favör av en anledning eller annan.
CSS-inlärningskurvan är värt det
Eftersom CSS kan kaskadas och kombineras, och med tanke på hur olika webbläsare kan tolka och implementera direktiven på olika sätt, kan CSS vara svårare att lära sig än vanlig HTML. CSS förändras också i webbläsare på ett sätt som HTML verkligen inte gör. När du väl börjar använda CSS ser du dock att utnyttja kraften i stilark ger dig otrolig flexibilitet i hur du utformar webbsidor och definierar deras utseende och känsla. Längs vägen kommer du att samla en "påse med knep" med stilar och tillvägagångssätt som har fungerat för dig tidigare och som du kan vända dig till igen när du bygga nya webbsidor i framtiden.