I den här artikeln lär du dig om id och class - två olika sätt att märka upp information på din hemsida som gör att du kan formatera dessa på olika sätt och länka till bestämda områden på en hemsida.
Den här artikeln blandar även in lite CSS som du kommer att lära dig senare. Det gör alltså inget om du inte riktigt hänger med i CSS-snacket.
Id
Den stora skillnaden mellan id och class är att ett id ska vara unikt på en webbsida. Det finns ingen speciell regler för vilka element som får använda sig av id, men typiskt använder man id på större områden som exempelvis sidomenyer, behållare för artikeltext, sidhuvud, sidfot och så vidare.
Exempel, id och CSS
När du har tilldelat ett unikt id till en tagg på din webbsida så kan du formatera innehållet för detta element precis som du vill. Låt säga att vi har en div-behållare som innehåller vår sidomeny och som vi tilldelat ett id "sidomeny":
<div id="sidomeny">Innehåll</div>
Det är allt som behövs för att sätta upp regler med CSS som formaterar endast ovanstående behållare med dess innehåll.
Låt säga att vi vill att behållaren ska ha en bredd som är 180px, font-storlek 12px och padding 5px.
I CSS-filen sätter vi då upp dessa regler för div-behållaren:
div#sidomeny {
width: 180px;
font-size: 12px;
padding: 5px;}
Kommentar: Du lär dig mer om CSS i min CSS-guide.
Länkning med id
Om du vill kunna länka direktlänka direkt till ett visst område på en webbsida så använder du också id.
Säg att du har ett stycke som du vill kunna direktlänka till. Då ser koden för detta ut så här:
<p id="intressantstycke">Den stycketext som du vill länka till</p>
För att länka direkt till stycket skriver du in sidans URL följt av #intressantstycke, exempel:
http://www.dinhemsida.se/om-mig.html#intressantstycke
Class
Class fungerar i princip på exakt samma sätt som id men med följande skillnader:
1. Samma class kan användas till flera element på en webbsida.
2. Du kan inte direktlänka till en class.
Exempel, class
Låt säga att du i en stycketext vill kunna märka upp text så att den helt plötsligt får en annan textstorlek och skrivas med röd text som är understruken:
"Det här är en text som jag använder som exempel och som inte är till för annat än att visa hur class används. Förhoppningsvis får du ett hum om hur class fungerar efter att du läst igenom hela det här avsnittet."
För att åstadkomma detta kan vi tänka oss att vi sätter upp en class som heter "rodtext".
För att använda denna class i texten kan vi då skapa denna deklaration i en CSS-fil
.rodtext {
color: red;
font-size:14px;
text-decoration: underline;
}
För att använda denna class ser XHTML-koden ut så här:
<p>Det här är en text som jag använder som <span class="rodtext">exempel</span> och som inte är till för annat än att visa hur <span class="rodtext">class</span> används. Förhoppningsvis får du ett hum om hur class fungerar efter att du läst igenom <span class="rodtext">hela det här avsnittet</span>.</p>
Om du istället skulle velat att hela stycket skulle använda den class vi just skapat hade du använt denna kod:
<p class="rodtext">Det här är en text som jag använder som exempel och som inte är till för annat än att visa hur class används. Förhoppningsvis får du ett hum om hur class fungerar efter att du läst igenom hela det här avsnittet.</p>
Dvs vi satte class "rodtext" på taggen p för stycke.
