[ Forrige | Indhold | Næste]

Lektion 8: Elementer til gruppering (span og div)

Elementerne <span> og <div> benyttes til at gruppere og strukturere et dokument. Elementerne vil ofte blive benyttet sammen med atributterne class og id i forbindelse strukturering til stylesheets.

I denne lektion vil vi se nærmere på anvendelsen af <span> og <div>, da netop disse to HTML-elementer spiller en central rolle i forbindelse med CSS.

• Gruppering med <span>
• Gruppering med <div>

Gruppering med <span>

Elementet <span> er hvad man kunne kalde et "neutralt" element - det tilføjer ikke noget selvstændigt til dokumentet. Men i sammenhæng med CSS kan <span> i høj grad anvendes til at opmarkere en del af et dokument, som man ønsker præsenteret på en speciel måde.

Et eksempel kunne være dette Gasolin citat:

<p>...det var Inga, Katinka
og smukke Charlie på sin Harley...</p>

Lad os så sige at vi gerne vil have personnavnene i citatet fremhævet med rød tekst. Til dette formål kan vi passende markere navnene med <span>. Hvert span tildeles herefter en class, som vi kan benytte i vores stylesheet:

<p>...det var <span class="navn">Inga</span>, 
<span class="navn">Katinka</span> og 
smukke <span class="navn">Charlie</span> på sin Harley...</p>

Den tilhørende CSS:

span.navn {
	color:red;
}

 Vis som eksempel

For god ordens skyld skal det med at <span> naturligvis også kan udstyres med id.

Gruppering med <div>

Hvor <span> bruges inde i et blok-element, som i forrige eksempel, bruges <div> til at gruppere et eller flere blok-elementer.

Bortset fra denne forskel fungerer gruppering med <div> på stort set samme måde. Lad os kigge på et eksempel med to lister med danske statsministre opdelt efter deres politiske tilhørsforhold:

<div id="A">
<ul>
<li>Hans Hedtoft</li>
<li>H.C. Hansen</li>
<li>Viggo Kampmann</li>
<li>Jens Otto Krag</li>
<li>Anker Jørgensen</li>
<li>Poul Nyrup Rasmussen</li>
</ul>
</div>

<div id="R-K-V">
<ul>
<li>Erik Eriksen</li>
<li>Hilmar Baunsgaard</li>
<li>Poul Hartling</li>
<li>Poul Schlüter</li>
</ul>
</div>

Og på nøjagtig samme måde som ovenfor kan vi i vores stylesheet udnytte grupperingen:

#A {
	background:red;
}
#R-K-V {
	background:blue;
}

 Vis som eksempel

I vores eksempler her har vi kun benyttet <div> og <span> til meget simple ting som tekst- og baggrundsfarver. Begge elementer giver dog muligheder for langt mere avancerede ting, som dog ikke vil blive gennemgået i denne tutorial.

Browser-kompatibelitet

Stort set alle browsere understøtter det du lige har lært. Hvis du er i tvivl kan prøve dig frem, eller referere til nedenstående tabel:

Tabellen viser fra og med hvilken version browseren understøtter den pågældende egenskab.

Opsummering

I lektion 7 og 8 har du lært om selektorerne id og class, og elementerne span og div.

Det vil sige at du på nuværende tidspunkt er istand til at gruppere og identificere stort set alle dele af et dokument - dette er et stort skridt på vejen til at mestre CSS.

[ Forrige | Indhold | Næste]