Skapa och formatera länkar med CSS
Den här artikeln bygger vidare på den startsida som vi bygger upp med XHTML och CSS i guiden "Webbsida - praktiska exempel".
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;}
Slutresultat
Så här bör din webbsida se ut nu: HTML-version
Filer för nedladdning: XHTML (.txt) CSS (.txt)
<<< Kantlinjer, border || Lägga in bilder >>>
Relaterade artiklar
