Formater links
Med denne css kode kan du selv definere udseendet
på dine links. Det er muligt at lave mouse-over effekt og fx give
allerede besøgte links en særlig farve.
I vores eksempel finder du også
flere forskellige eksempler på styling af links ... og ikke mindst
de tilhørende css koder lige til at sætte ind på dine sider
Sådan gør du:
Med denne kode kan du lave selv
definere, hvordan dine links skal se ud. Du skal bare indsætte
nedenstående kode i din head sektion:
<style type="text/css">
a { text-decoration:
none;
font-family:
arial;
font-weight:
bold;
font-style:
italic;
font-size:
12px;
color:
#009933}
a:hover { text-decoration: none;
font-family:
arial;
font-weight:
bold;
font-style:
italic;
font-size:
12px;
color:
#009933}
a:visited { text-decoration: none;
font-family:
arial;
font-weight:
none;
font-style:
italic;
color:
#000000}
</style>
Definer selv værdierne markeret med rød farve:
|
text-decoration
|
Her definerer du, om
links skal være understreget eller ej (underline - none)
|
|
font-family
|
Her skriver du hvilken font,
der skal anvendes. Hvis du bruger fonte med todelte navne
skal de skrives i citationstegn - fx "times new roman".
|
|
font-weight
|
Her bestemmer du, om
links skal være fremhævet med fed eller ej (bold - none)
|
|
font-style
|
Her kan du vælge at lave
links i kursiv eller ej (italic - none)
|
|
font-size
|
Her defineres font
størrelsen i pixel.
|
|
color
|
Her defineres tekstfarven
i hexakode.
|
Disse værdier defineres først
for links generelt (kaldet 'a') og herefter for links som
musen køres hen over (kaldet 'a:hover'). Endelig kan man også
definere et særligt udseende for links, som allerede er besøgt
(kaldet 'a:visited'). Hvis du ikke ønsker, at have en særlig
style for besøgte links, kan du bare helt udelade denne del af
koden.
Eksempel >>
Forbedring af koden
Koden kan naturligvis også anvendes
i et typografiark ... eller stylesheet som det hedder på
engelsk. Faktisk er det nok en bedre løsning, da du så styler
links på alle dine sider.
Hvis du anvender css, skal denne
kode indsættes i dit stylesheet:
a { text-decoration:
none;
font-family:
arial;
font-weight:
bold;
font-style:
italic;
font-size:
12px;
color:
#009933}
a:hover { text-decoration: none;
font-family:
arial;
font-weight:
bold;
font-style:
italic;
font-size:
12px;
color:
#009933}
a:visited { text-decoration: none;
font-family:
arial;
font-weight:
none;
font-style:
italic;
color:
#000000}
Bemærk:
Der angives ikke en fontstørrelse
til besøgte links (a:visited), fordi disse automatisk vil følge den størrelse,
du har defineret til links generelt.
Til toppen >>
|
