Länkar CSS - Skapa Länkar och Formatera med CSS

I den här artikeln jobbar vi vidare med vår webbsida och provara att skapa några länkar.

Skapa länkar

Nu är det dags att skapa några länkar. Ta bort den gamla texten i div-behållaren sidhud och skriv istället in följande:

Länk 1 Länk 2 Länk 3

Som du vet sedan tidigare så måste det till lite övrig XHTML-kod för att skapa en länk och därför kompletterar vi med detta:

<a href="#">Länk 1</a> <a href="#">Länk 2</a> <a href="#">Länk 3</a>

Ersätt # med URL till de sajter eller sidor som du önskar länka till - just nu länkar de inte till någonting speciellt.

En repetition av länkar hittas här.

Formatera länkarna med CSS

En länk representeras av taggen a, alltså blir det div#sidhuvud a som fungerar som selektor i CSS-filen.

Padding

Skriv alltså in följande kod på en ny rad i din CSS-fil:

div#sidhuvud a { padding-right: 20px; }

Som du märker så gör den högra paddingen att länkarna separeras från varandra med 20 pixlar och de blir enklare att läsa.

Color och text-decoration

Länkfärg kan enkelt ändras. Addera exempelvis följande kod för att få en mörk ganska röd färg:

div#sidhuvud a { padding-right: 20px; color: #990000; }

Om du inte vill att länken ska vara understruken så kan du lägga till:

div#sidhuvud a { padding-right: 20px; color: #990000; text-decoration:none; }

Det vanligaste är att använda text-decoration:underline;

Subclass

Med subclasses kan du bestämma hur länken ska bete sig om man exempelvis hovrar över den eller vilken färg den ska visas med om den redan besökts.

Lägg till följande text för att göra så att länkarna blir underline samt gröna när man hovrar med muspekaren och att besökta länkar visas i orange text.
Ursäkta färgvalet - det är inte meningen att det ska bli snyggt utan förklarande ;).

Lägg till dessa CSS-subclasses:

div#sidhuvud a:hover { text-decoration: underline; color: green;}

div#sidhuvud a:visited {color: orange;}