Klasser – vad är det och hur används det?
Tyvärr måste jag bli lite teknisk här för att kunna förklara vad klasser i css är. Jag ska göra mitt bästa för att även den oinvigde ska förstå eller i alla fall få ett hum om vad det handlar om.
En klass är enkelt beskrivet ett sätt att sätta attribut för flera olika html-element genom att ange attribut en gång. Denna klass fungerar som en mall för olika värden.
Vad är en klass i CSS?
Om man vill att attribut som storlek på text, färg på text och radhöjd på text ska vara samma för alla rubriker,så kan man skriva så här i html:
<h2 style="font-size:14px;line-height:28px;color:#ff0000;">Rubrik1</h2>
<h2 style="font-size:14px;line-height:28px;color:#ff0000;">Rubrik2</h2>
<h2 style="font-size:14px;line-height:28px;color:#ff0000;">Rubrik3</h2>
Om man gör på ovanstående sätt och har väldigt många rubriker så det blir svårt/jobbigt att ändra då man måste ändra på alla ställen i sin html-kod där denna rubrik finns. Det går då istället att göra så här:
<!-- HTML -->
<h2 class="title">Rubrik1</h2>
<h2 class="title">Rubrik2</h2>
<h2 class="title">Rubrik3</h2>
/* CSS */
.title {font-size:14px;line-height:28px;color:#ff0000;}
.title är i det här en klass i css.
W3C är en organisation som tar fram standarder som webbläsare bör följa och införandet av klasser gjorde det möjligt att på ett enkelt ändra dessa attribut på ett och samma ställe.
Kombinera klasser i CSS
Det går också att kombinera olika klasser där man använder attributen från bägge klasserna (eller attributen från fler klasser). Vill man t.ex. ha två stycken blå titlar så skulle man kunna gör så här:
<!-- HTML -->
<h2 class="title blue">Rubrik1</h2>
<h2 class="title blue">Rubrik2</h2>
<h2 class="title">Rubrik3</h2>
Jag tror det var här förvirringen började för mig. Rent logiskt borde man kunna skriva:.title blue {color:#0000FF;}
Detta hade varit logiskt då det ser ut likadant i html som i css (.title .blue). Även om det känns mest logiskt så kommer det inte .title .blue ha någon effekt på någon av html-elementen.
Detta beror egentligen på två saker.
- Klasser kan inte ha mellanslag i sina namn i html.
- I css betyder mellanslag nästa nivå i det s.k. DOM-trädet. Här finns en bra förklaring på vad DOM-trädet är (engelska)
Detta betyder alltså att rubriken H2 ska inkludera klasserna: title, webdesign och webdev
<h2 class="title webdesign webdev">Rubrik1</h2>
Att kunna ändra allt på ett ställe är givetvis en stor styrka med klasser i css men ytterligare en styrka är just att det går att kombinera klasser på ett flexibelt sätt för att uppnå olika resultat. Den klass som definieras sist i css innehåller de attributen som prioriteras högst.
css:
.title {font-size:14px;line-height:28px;color:#ff0000;}
.webdesign {color:#0000ff;}
.webdev {color:#cccccc;}
Denna HTML betyder alltså att rubriken H2 ska inkludera klasserna: webdesign och webdev
<h2 class="webdesign webdev">Rubrik1</h2>
Resultatet av ovanstående HTML är att rubriken blir grå (.webdev {color:#cccccc;}). eftersom den sista regeln i css prioriteras högst. Lägg märke till att klassen title inte finns med här och textstorleken och radhöjden blir det som är satt som standard av webbläsaren du använder.
Boktips? 1MiljonBoktips
Klasser är ett förvirrande begrepp
När jag började lära mig koda css (cascade styling sheets) så måste jag erkänna att jag hade väldigt svårt att förstå hur allt hängde ihop. Det pratades bland annat om klasser och jag förstår i ärlighetens namn inte än idag varför man valde att kalla det klasser i css. Det här med mellanslag som betyder olika beroende på om det är html eller css för samma sak kändes också förvirrande. Tilläggas kan att det finns ett begrepp inom objektorientering som också heter klasser – och då är det något helt annat man pratar om som bidrar till ytterligare förvirring. Men bara man förstår grundprincipen så är det väldigt kraftfullt och absolut värt att lära sig – om man är det minsta intresserad av att bygga en hemsida.
Även om klasser i css är extremt kraftfullt och logiskt – så är allting med klasser ändå inte logiskt!? Att vara webbutvecklare kräver alltså att man är extremt logisk samtidigt som man måste kompromissa med sin logik för att nå det resultat man önskar!
Författare till detta inlägg (till denna blogg som handlar om webbdesign, webbutveckling och SEO)
Jag heter Gustav Wiberg och driver Skövdes genuina webbyrå Wibergs Web. Kontakta mig genom att klicka här.