CSS-class

Fra Holstebro HTX Wiki
(Omdirigeret fra CSS-id)
Skift til: navigering, søgning

Når man bruger CSS-class, så er det når man skal have flere ting, som skal have det samme egenskab.

Generel class

Man kan definere en generel class der virker alle steder som f.x. fremhaev:

.fremhaev {
  font-weight:bold;
  color:red;
  background-color:yellow;
}

Med denne class kan man fremhæve dele af en tekst, som koden her viser:

<p>In my younger and more vulnerable years my father gave me some advice 
that I've been <span class="fremhaev">turning</span> over in my mind ever since. 
'Whenever you feel like criticizing anyone,' he told me, 'just remember that 
all the people in this world haven't had the 
<span class="fremhaev">advantages</span> that you've had.'</p>

Det giver følgende visning:

Class1.png

Speciel class på et tag

Hvis man ønsker det, så kan man begrænse en class til kun at fungere på en bestemt type tags, det kunne f.x. være ens billeder man ville formattere lidt forskelligt. Man kunne så oprette flere typer img-classes som følger:

img.normal {
  border-style:solid;
  border-width:  3px;
  width: 50px;
}
img.important {
  border-style:solid;
  border-width:15px;
  width: 130px;
}

Man ville så kunne angive to billeder med hver sin class, som i det viste eksempel, og andre tags vil ikke kunne reagere på "normal" og "important".

<img class="normal" src="smiley.gif" alt="Smiley face"  />
<img class="important" src="smiley.gif" alt="Smiley face"  />

Dette giver følgende visning:

Class2.png

id

Man bruger oftest CSS-id, når der er en ting, man gerne vil have, der skal være enestående, det kan f.x. være en del af siden som en menu.

Man definerer et id som følger:

#menu {
  float: left;
  width: 150px;
  padding: 10px;
}

Hvis dette sættes ind i en side, hvor der er menu og content defineret, så vil man med følgende kode:

<div id="menu"><h2>menu</h2>
Her skal stå noget der linker rundt til alle siderne
</div>
<div id="content">
<img class="normal" src="smiley.gif" alt="Smiley face"  />
<img class="important" src="smiley.gif" alt="Smiley face"  />
</div>

Kunne få følgende visning:

Class3.png


Forskellen mellem class og id

Så der er sådan set, ikke den helt store forskel på CSS-class og CSS-id - man kan anvende class til en enkelt ting, og man kan anvende id til flere ting på ens side, men den grundlæggende mening er som beskrevet.

Når man skal skrive en CSS-id selector, så skal man bruge "#".