Om denne webside - Overskrift 1
Designet på denne webside er styret af et stylesheet som er indeholdt i filen "teststyle.css". Websidens baggrundsfarve er en svag gråtone med farvekoden #F6F6F6.
Overskrift 1 er skrevet med fonten Arial i størrelsen 4, og med skriftfarven #0000FF.
Den brødtest du læser her er skrevet med fonten Verdana i størrelsen 2, og med skriftfarven sort defineret med farvekoden #000000.
Smarte link med StyleSheet - Overskrift 2
Med et stylesheet har du mulighed for at style dine link på en både smart og praktisk måde. Det er eksempelvis praktisk at dine link får en hover-farve ved mouse-over,
således at du tydeligt kan se hvilket link du er ved at aktivere. Det er også vældigt praktisk at linket skifter farve, når du har besøgt det pågældende link, således at du kan
holde styr på hvilke link du har besøgt, og hvilke du mangler at besøge.
Her er en række link til forskellige danske aviser. Som du kan se, så gør det ikke noget at linkene ligger ret tæt sammen. Hover-effekten gør at du ikke er i tvivl om hvilket link
du har fat i når du holder musen over linket:
|
|
|
Linkfarven er blå defineret med farvekoden #0000FF. Hoverfarven er rød defineret med farvekoden #FF0000. Ved mouse-over er der endvidere valgt at linket bliver understreget.
Besøgte link får farven lilla defineret med farvekoden #9933FF. Det senest besøgte link får den oprindelige blå farve igen. Alle farver kan ændres i stylesheetet hvis man ønsker det. |
Kend dit StyleSheet - Overskrift 3
For lige at gøre det lidt mere spændende, og for at vise at man godt kan styre flere forskellige overskrifter med et stylesheet, så er denne sidste overskrift lavet med
fonten Tahoma i størrelse 4, og med skriftfarven rød defineret med farvekoden #FF0000.
For at hjælpe dig med at identificere de forskellige tags i dit stylesheet, så følger der her en oversigt over de vigtigste elementer i stylesheetet samt hvilke tags de er defineret med:
Baggrundsfarven er defineret med dette tag:
body{ background-color:#f6f6f6; }
Overskrift 1 og 2 er defineret med dette tag:
h1{ font-size:18; } h2{ color:#ffff00; }
Overskrift 3 er defineret med dette tag:
h3{ font-family:Verdana; }
Brødtekst er defineret med dette tag:
body{ text-align:justify; }
Marginer er defineret med dette tag:
<div class="linjeafstand"></div>
Link-farve er defineret med dette tag:
a:link { color : #0000FF; text-decoration : none; }
Hover er defineret med dette tag:
a:hover { color :#FF0000; text-decoration : underline; }
Hover underline er defineret med dette tag:
text-decoration : underline; }
Besøgte link er defineret med dette tag:
a:visited { color : #9933FF; text-decoration : none; }
Seneste link er defineret med dette tag:
a:active { color : #0000FF; text-decoration : none; }
Credit for tekst og kodning:
Tekst og HTML-kodning: Flemming Nielsen Webmaster FN Support
(Spirituel inspirator og åndeligt vejledende guru: GnaXi fra Arden)
Cascading Style Sheet-kodning: Dreasen Webmaster & freelance-programmør Webstuff.dk
