HOME -> CSS_TUTORIAL -> css-09 Tirsdag, 22. august 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2002 - Opdateret n/a

CSS lektion 09

Attributterne class og id

Via attributterne class og id har man mulighed for at specificere specielle egenskaber for udvalgte elementer.
Class anvendes som regel til gruppering af to (2) eller flere elementer, hvor man har et ønske om at hver gruppe af elementer har sin egen egenskab.
Id anvendes til at specifisere et (1) unikt elements egenskab. Der må derfor ikke være to elementer med samme id.
Anvendelse af class
Lad os antage at vi har to afdelinger i en virksomhed, afdeling x og y. Alle links der refererer til afdeling x skal være røde, og alle links til afdeling y skal være gule.
Ved at anvende class kommer vores html kode til at se ud som følgende:


<html>
<head>
<title>class</title>
<link rel="stylesheet" type="text/css" href="class.css" />
</head>
<body>
<p>links til afdeling x</p>
<a href="kamera.htm" class="x">kamera</a><br />
<a href="linse.htm" class="x">linse</a><br />

<p>links til afdeling y</p>
<a href="kuglepen.htm" class="y">kuglepen</a><br />
<a href="lineal.htm" class="y">lineal</a><br />
</body>
</html>


Det tilhørende stylesheet (jeg har døbt den "class.css") ser ud som følgende:


a {
color: blue;
}
a.x {
color: #cc0000;
}
a.y {
color: #ffff00;
}


Note: Alle andre links bliver ikke berørt, og forbliver blå som standard.
Anvendelse af id
Jeg vælger at anvende eksemplet fra før. Dog skal overskriften til afdeling x være gul, og afdeling y er grøn.


<html>
<head>
<title>id</title>
<link rel="stylesheet" type="text/css" href="id.css" />
</head>
<body>
<p id="afd_x">links til afdeling x</p>
<a href="kamera.htm">kamera</a><br />
<a href="linse.htm">linse</a><br />

<p id="afd_y">links til afdeling y</p>
<a href="kuglepen.htm">kugleben</a><br />
<a href="lineal.htm">lineal</a><br />
</body>
</html>


Det tilhørende stylesheet (jeg har døbt den "id.css") ser ud som følgende:


#afd_x {
color: #ffff00;
}
#afd_y {
color: #33ff00;
}





Slut med class og id, og videre til næste lektion ;-)

DIV OG SPAN >>

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top