[ Forrige | Indhold | Næste]

Lektion 6: Links

I de forrige lektioner har vi gennemgået en række egenskaber. I denne lektion vil vi kigge nærmere på en selektor - nemlig links. CSS giver dig mulighed for at definere forskellige egenskaber alt efter om linket er ubesøgt, besøgt, aktivt, eller om musen føres over linket. Dette gøres ved hjælp af såkaldte pseudo-classes - og selvom det lyder lidt svært, er det faktisk ret let.

Når du har læst denne lektion vil du være istand til at lave smarte effekter med dine links, og styre udseendet helt nøjagtigt. Følgende vil blive gennegået i lektionen:

• Hvad er en pseudo-class?
• Pseudo-class :link
• Pseudo-class :visited
• Pseudo-class :active
• Pseudo-class :hover
• Eksempel 1: Effekt når musen føres over links
• Eksempel 2: Fjern understregning af links

Hvad er en pseudo-class?

Hvad er en pseudo-class spørger du sikkert som det første? Du behøver ikke hænge dig så meget i betegnelsen, som blot betyder at man istedet for bare at knytte en egenskab til et specielt HTML-tag, kan knytte egenskaberne til et elements forskellige tilstande eller fænomener - forvirret? Så prøv at kigge på dette eksempel:

Et link betegnes i HTML med <a> - derfor kan vi benytte a som selektor i CSS, f.eks:

a {
	color: blue;
}

Et link kan have forskellige tilstande - det kan f.eks. være besøgt eller ubesøgt, men i HTML-koden står det uanset hvad med <a> - derfor benytter man pseudo-classes for at kunne tildele forskellige egenskaber til f.eks. et besøgt og et ubesøgt link.

For et link som er besøgt skriver man således a:visited, mens et link, som ikke er besøgt skrives a:link, et link som er aktivt har pseudo-classen a:active, mens et link får pseudo-classen a:hover når musen føres over linket, og på tilsvarende måde mister denne pseudo-class når musen ikke længere er over linket.

I de næste 4 afsnit vil hver pseudo-class blive gennemgået hver for sig. Tilsidst kædes det hele sammen i to konkrete eksempler.

Pseudo-class :link

Som nævnt ovenfor benyttes :link til at angive egenskaber for links, som endnu ikke er besøgte (det vil sige at brugeren ikke har besøgt den side linket fører til).

Som et eksempel kan vi kigge på det tilfælde at vi ønsker alle ubesøgte links skal være grønne, syntaksen er da:

a:link {
	color: green;
}

 Vis som eksempel

Pseudo-class :visited

På samme måde benyttes :visited til at angive egenskaber for links, som er besøgte (det vil sige at brugeren har besøgt den side linket fører til).

Lad os sige at vi ønsker at alle besøgte links skal være gule, dette kan gøres sådan:

a:visited {
	color: yellow;
}

 Vis som eksempel

Pseudo-class :active

:active benyttes til at angive egenskaber for links, som aktiveres af brugeren (f.eks. for tidsrummet mellem en bruger klikker på et link, og indtil brugeren slipper musen igen).

I vores eksempel giver vi aktiverede links en rød baggrundsfarve:

a:active {
	background-color: red;
}

 Vis som eksempel

Pseudo-class :hover

Pseudo-classen :hover benyttes til at angive hvilke egenskaber, der skal gælde for links, som brugeren fører musen henover.

Lad os sige at vi ønsker vores links skal blive orange og stå med kursiv når musen føres over dem:

a:hover {
	color: orange;
	font-style: italic;
}

 Vis som eksempel

Eksempel 1: Effekt når musen føres over links

Det er populært at lave forskellige effekter når musen bliver ført over et link - derfor dette særskilte eksempel.

Som vi så ovenfor er det pseudo-classen :hover, som benyttes til at angive egenskaberne for disse effekter. Lad os prøve at kigge på et par eksempler:

Eksempel 1a: Skift af bogstav afstand

Som det blev gennemgået i lektion 5 kan man med letter-spacing ændre på aftanden mellem bogstaverne - dette kan vi prøve at benytte til en effekt:

a:hover {
	letter-spacing: 10px;
	font-weight:bold;
	color:red;
}

 Vis som eksempel

Eksempel 1b: Skift mellem store og små bogstaver

Som det blev gennemgået i lektion 5 kan man med text-transform skifte mellem STORE og små bogstaver - dette kan vi prøve at benytte til en effekt:

a:hover {
	text-transform: uppercase;
	font-weight:bold;
	color:blue;
	background-color:yellow;
}

 Vis som eksempel

Som eksempel 1a og 1b viser er der stort set ikke nogen grænser for de forskellige effekter man kan opnå ved at kombinere forskellige egenskaber.

Eksempel 2: Fjern understregning af links

Et ofte stillet spørgsmål er hvordan man fjerner understregningen på links. Generelt bør man overveje det grundigt før man fjerner understregningen, da det kan nedsætte brugervenligheden drastisk.

Det er i virkeligheden utroligt simpelt at fjerne understregningen, som vi lærte i lektion 5 styrer egenskaben text-decoration om en tekst skal understreges - derfor skal text-decoration blot sættes til none:

Hvis du ikke har behov for at benytte særskilte egenskaber for de 4 pseudo-classes, kan du blot definere egenskaben for <a>:

a {
	text-decoration:none;
}

Alternativt sættes egenskaben blot for alle 4 pseudo-classes, hvilket giver muligheden for at definere øvrige egenskaber:

a:link {
	color: blue;
	text-decoration:none;
}
a:visited {
	color: purple;
	text-decoration:none;
}
a:active {
	background-color: yellow;
	text-decoration:none;
}
a:hover {
	color:red;
	text-decoration:none;
}

 Vis som eksempel

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 denne lektion har vi prøvet nogle af egenskaberne fra de øvrige lektioner af. Men vi har også lært om pseudo-classes, og om hvordan CSS giver meget videre muligheder end HTML for at designe f.eks. links.

I næste lektion skal vi kigge på hvordan man kun definerer egenskaber for et enkelt element, eller grupper af elementer.

[ Forrige | Indhold | Næste]