CSS, eller Cascading Style Sheets, är webbdesignindustrins accepterade sätt att lägga till visuella stilar på en webbplats. Med CSS kan du styra sidlayout, färger, typografi, bakgrundsbild och mycket mer. I grund och botten, om det är en visuell stil, är CSS sättet att föra dessa stilar till din webbplats.
När du lägger till CSS-format i ett dokument kanske du märker att dokumentet börjar bli längre och längre. Även en liten webbplats med bara en handfull sidor kan sluta med en betydande CSS-fil - och en mycket stor webbplats med massor av sidor med unikt innehåll kan ha mycket stora CSS-filer. Detta förvärras av lyhörda webbplatser som har massor av mediefrågor ingår i stilarket för att ändra hur bilderna ser ut och sidan läggs ut för olika skärmar.
Ja, CSS-filer kan bli långa. Detta är inte ett stort problem när det gäller webbplatsens prestanda och nedladdningshastighet, för även en lång CSS-fil är sannolikt ganska liten (eftersom det egentligen bara är ett textdokument). Ändå räknas varje liten bit när det gäller sidhastighet, så om du kan göra ditt stilblad smalare är det en bra idé. Det är här "komma" kan komma mycket bra i ditt stilark!
Kommatecken och CSS
Du kanske har undrat vilken roll kommatecken spelar i CSS-väljarsyntaxen. Som i meningar ger kommatecken klarhet - inte kod - för separatorerna. Kommatecken i en CSS-väljare separerar flera väljare inom samma stilar.
Låt oss till exempel titta på några CSS nedan.
th {färg: röd; }
td {färg: röd; }
p.red {färg: röd; }
div # firstred {färg: röd; }
Med denna syntax säger du att du vill th taggar, td taggar, stycke taggar med klassen röd och div taggen med ID firstred alla för att ha stilfärgen röd.
Detta är helt acceptabelt CSS, men det finns två betydande nackdelar med att skriva det på detta sätt:
- I framtiden, om du väljer att ändra fontfärg av dessa egenskaper till blått måste du göra den ändringen fyra gånger i ditt stilblad.
- Det lägger till många extra tecken i ditt stilark som du inte behöver. Dessa fyra stilar kanske inte verkar vara överdrivna, men om du fortsätter att göra detta över hela stilarket kommer raderna att läggas till och det arket blir mycket, mycket större än det behöver vara.
För att undvika dessa nackdelar och för att effektivisera din CSS-fil, försöker vi använda kommatecken.
Använda kommatecken för att separera väljare
Istället för att skriva 4 separata CSS-väljare och fyra regler kan du kombinera alla dessa stilar i en regelegenskap genom att separera de enskilda väljarna med ett komma. Så här skulle det göras:
th, td, p.red, div # firstred {färg: röd; }
Kommatecknet fungerar i princip som ordet "eller" inuti väljaren. Så detta gäller th taggar ELLER td taggar ELLER stycke taggar med klassen röd ELLER div-taggen med ID-strängen. Det var precis vad vi hade tidigare, men istället för att behöva fyra CSS-regler har vi en enda regel med flera väljare. Detta är vad komma gör i väljaren, det gör att vi kan ha flera väljare i en regel.
Inte bara gör detta tillvägagångssätt för smalare, renare CSS-filer, det gör också framtida uppdateringar så mycket enklare. Om du nu vill ändra färgen från röd till blå, behöver du bara göra ändringen på en plats istället för över de ursprungliga fyra stilreglerna vi hade! Tänk på dessa tidsbesparingar i en hel CSS-fil och du kan se hur detta kommer att spara både tid och utrymme på lång sikt!
Syntaxvariation
Vissa människor väljer att göra CSS mer läsbar genom att separera varje väljare på sin egen rad, istället för att skriva allt på en rad som ovan. Så här skulle det göras:
th,
td,
p.red,
div # firstred
{
färgen röd;
}
Lägg märke till att du placerar ett komma efter varje väljare och använder sedan "enter" för att bryta nästa väljare till sin egen linje. Du lägger INTE till ett komma efter den slutliga väljaren.
Genom att använda komma mellan dina väljare skapar du en mer kompakt stilark det är lättare att uppdatera i framtiden och det är lättare att läsa idag!