Sådan styler du links med CSS | Dansk video-tutorial
NemProgrammering.dk logo
Læs mere om denne UnoEuro Rabatkode
UnoEuro rabatkode

Sådan styler du links med CSS

Lad NemProgrammering.dk´s eksperter lave din hjemmeside for dig
Vi tilbyder professionel hjælp til udvikling af hjemmesider og webshops. Læs mere om vores ydelser her!

Information om denne video

Underviser: Thomas Iversen, A-kasse priser

I denne video skal vi se på, hvordan du kan style dine links på din hjemmeside med CSS, så de bliver en lille smule mere unikke i forhold til den standardmåde som browseren viser links på. Vi skal kigge på fire forskellige stadier som et link kan være i, og style disse stadier individuelt. Vi skal også prøve at lave link-klasser, så du kan have mere end ét udseende på dine links.

Øvelser:
1 - Lav to link-klasser, hvor kun "hover"-stadiet har værdier, som er forskellige fra de øvrige stadier. Ændre evt. skriftstørrelsen og tekstfarven ved hover. Tilføj disse to klasser til to forskellige link-elementer.
2 - Gør de to klasser mere overskuelige, ved hjælp af CSS shorthand.

Video tags:

Denne video relaterer til emner såsom: CSS kursus for begyndere, CSS guides, Lær CSS fra bunden, CSS video-tutorials, introduktion til CSS styling af links med CSS

Her har du kildekoden

<!-- HTML filen: -->
<!DOCTYPE html>
<html>
    <head>
        <title>Lektion 7</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
     
        <p>
            
            <a href="#" >LINK</a><br/>
            <a href="#" class="linkstyling" >LINK</a>
            
        </p>
     
    </body>
</html>

<!--

Et link har 4 forskellige stadier!                              
 
        a:link                       -  ikke blevet besøgt              
        a:visited                    -  linket har været besøgt          
        a:hover                      - Når musen er over linket         
        a:active                     - Når man trykker på linket   

-->    
        

Her har du kildekoden

/* CSS filen */

a:link {
    color: blue;
    text-decoration: none;
}

a:visited {
    color: yellow;
}

a:hover {
    color: blue;
    text-decoration: underline;
}

a:active {
    color: red;
}



a.linkstyling:link, a.linkstyling:visited {
    color: red;
    text-decoration: none;
}

a.linkstyling:hover {
    color: blue;
    text-decoration: underline;
}

a.linkstyling:active {
    color: red;
}
        

Spørgsmål og kommentarer

Har du et spørgsmål eller en kommentar til denne video/artikel? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar til at hjælpe.

Url´er bliver automatisk omdannet til links (nofollow).

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    07-07-2015

Hej Thomas, Nej det skulle gerne virke i alle browsere. Mvh.


kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas Simonsen    07-07-2015

Kan det passe at dette ikke virker mere i Chrome??