Formatering af links

Links kan formateres med alle de CSS egenskaber vi har kigget på (e.g. color, font-family, background, etc.).

Specielt for links er det, at de kan formateres forskelligt afhængigt af hvilken tilstand de er i

De 4 tilstande et link kan være i er:

• a:link - et normalt link, der ikke har været besøgt
• a:visited - et link brugeren har besøgt
• a:hover - et link mens brugeren har musen hen over linket
• a:active - et link mens brugeren klikker på det

Eksempel:

a:link    {color:#FF0000;}  /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover   {color:#FF00FF;}  /* mouse over link */
a:active  {color:#0000FF;}  /* selected link */

Der er et par regler du skal overholde:

• a:hover SKAL komme efter a:link og a:visited
• a:active SKAL komme efter a:hover

Typiske link formateringer

Ovenfor skriftede vi bare farve på linket afhængigt af tilstanden. Lad os kigge på nogle af de typiske måder links formateres

Text Decoration

text-decoration bruges typisk til at fjerne stregen under linket

Eksempel:

a:link     {text-decoration:none;}
a:visited  {text-decoration:none;}
a:hover    {text-decoration:underline;}
a:active   {text-decoration:underline;}

Background Color

Background-color definerer baggrundsfaven:

a:link    {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover   {background-color:#FF704D;}
a:active  {background-color:#FF704D;}