Webbplatser består av ett antal enskilda bitar, inklusive bilder, text och olika dokument. Dessa dokument omfattar inte bara de som kan länkas till från olika sidor, som PDF-filer, men även 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 att diktera utseendet på en sida. Denna artikel kommer att dyka in i CSS, som täcker vad det är och var det används på webbplatser idag.
En CSS-historielektion
CSS utvecklades första gången 1997 som ett sätt för webbutvecklare att definiera visuellt utseende på de webbsidor som de skapade. Det var tänkt att tillåta webbproffs att skilja innehållet och strukturen i en webbplats kod från den visuella designen, något som inte 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 var baserad på - upptagning av innehåll utan att behöva oroa sig för själva sidans utformning och layout, något som allmänt kallas "look and feel" av sidan.
CSS vunnit inte popularitet tills omkring 2000 när webbläsare började använda mer än de grundläggande teckensnitts- och färgaspekterna i detta markup-språk. Idag stöder alla moderna webbläsare alla CSS Level 1, mest av CSS Level 2, och även de flesta aspekterna av CSS Level 3. Eftersom CSS fortsätter att utvecklas och nya stilar introduceras har webbläsare börjat implementera moduler som ger nya CSS-stöd in i dessa webbläsare och ge webbdesigners kraftfulla nya stylingverktyg att arbeta med.
Under (många) år tidigare fanns det valda webbdesigners som vägrade använda CSS för design och utveckling av webbplatser, men den här övningen är allt utom borta från branschen idag. CSS är nu en van vid standard i webbdesign och du skulle vara hårt pressad för att hitta någon som arbetar i branschen idag, som inte hade minst en grundläggande förståelse för detta språk.
CSS är en förkortning
Som tidigare nämnts står termen CSS för "Cascading Style Sheet." Låt oss bryta ner den här frasen för att förtydliga vad de här dokumenten gör.
Ordet "stylesheet" refererar till själva dokumentet (som HTML, CSS-filer är egentligen bara textdokument som kan redigeras med en mängd olika program). Style sheets har använts för dokumentdesign i många år. De är tekniska specifikationer för en layout, antingen tryck eller online. Utskriftsdesigners har länge använt stilark för att se till att deras mönster skrivs ut exakt enligt deras specifikationer. Ett stilark för en webbsida tjänar samma syfte, men med den extra funktionaliteten att även webbläsaren berättar hur man gör dokumentet att se. Idag kan CSS-stilark också använda mediefrågor för att ändra hur en sida letar efter olika enheter och skärmstorlekar. Detta är oerhört viktigt eftersom det gör att ett enda HTML-dokument kan göras annorlunda beroende på vilken skärm som används för att komma åt den.
Cascade är den riktigt speciella delen av termen "cascading style sheet". En webbstilark är avsedd att kaskad genom en serie stilar på det arket, som en flod över ett vattenfall. Vattnet i floden träffar alla klipporna i vattenfallet, men endast de som på botten påverkar exakt vattnet kommer att flöda. Detsamma gäller kaskaden i webbsidor för webbsidor.
Varje webbsida påverkas av minst ett stilark, även om webbdesignern inte tillämpar några stilar. Detta stilark är användaragentens stilark - även känt som standardstilarna som webbläsaren ska använda 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 standard stilark. Om webbdesignern ger andra instruktioner måste webbläsaren dock veta vilka instruktioner som har företräde. Alla webbläsare har egna standardstilar, men många av dessa standardvärden (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äsars standard, i vår webbläsare, är standardtypen "Times New Roman" som visas i storlek 16. Nästan ingen av sidorna vi besöker displayen i den fontfamiljen och storleken. Detta beror på att kaskaden definierar att de andra stilarken, som fastställs av konstruktörerna själva, för att omdefiniera typstorleken och familjen, vilket överväger webbläsarens standardinställningar. Alla stilark som du skapar för en webbsida kommer att ha mer specificitet än en webbläsares standardstilar, så de här standardvärdena gäller bara om ditt stilark 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 webbplatsens CSS-fil säger att länkar ska vara gröna, kommer den här färgen att åsidosätta standardblått. Understrecket kommer att förbli i detta exempel 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 ses i andra medier än en webbläsare. Du kan till exempel skapa ett utskriftsformat som definierar hur webbsidan ska skrivas ut. Eftersom webbsidor som navigeringsknappar eller webbformulär inte har någon syfte på den utskrivna sidan kan ett utskriftsformat 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 möjligheten att skapa utskriftsformatarkar kraftfulla och attraktiva (enligt vår erfarenhet - gör de flesta webbproffs inte det här helt enkelt, eftersom en webbplatsens budgetutrymme inte kräver att detta ytterligare arbete ska utföras ).
Varför är CSS viktigt?
CSS är ett av de mest kraftfulla verktyg som en webbdesigner kan lära sig, för med det kan du påverka hela visuellt utseende på en webbplats. Välskrivna stilark kan uppdateras snabbt och låta webbplatser ändra vad som prioriteras visuellt på skärmen, vilket i sin tur visar värde och fokus för besökare, utan att några ändringar behöver göras till den underliggande HTML-uppteckningen.
Den viktigaste utmaningen hos CSS är att det finns ganska lite att lära sig - och med webbläsare som ändras varje dag, det som fungerar bra idag kanske det inte är meningen att imorgon kommer nya stilar att bli stödda och andra släpps eller faller av favör av en eller annan anledning .
Eftersom CSS kan kaskad och kombinera och överväga hur olika webbläsare kan tolka och implementera direktiven annorlunda kan CSS vara svårare än vanlig HTML för att behärska. CSS ändras också i webbläsare på ett sätt som HTML verkligen inte gör. När du börjar använda CSS ser du dock att utnyttja kraften i stilark ger dig otroligt flexibilitet i hur du layoutar webbsidor och definierar deras utseende. Under vägen kommer du att samla en "väska med tricks" av stilar och metoder som har fungerat för dig tidigare och som du kan vända dig till när du bygger nya webbsidor i framtiden.
Originalartikel av Jennifer Krynin. Redigerad av Jeremy Girard den 7/5/17
