NemProgrammering.dk logo
nordicway webhotel

Sådan styler du links med CSS

CSS kursus | Lær CSS for begyndere
WordPress hjemmeside hjælp

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

<!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="Lektion7.css">
</head>
<body>
  <p>
    <a href="#">Link</a><br/>
    <a href="#" class="linkstyling2">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

a:link {
  text-decoration: none;
}

a:visited {
  color:grey;
}

a:hover {
  text-decoration: underline;
}

a:active {
  color:yellow;
}

a.linkstyling2:link, a.linkstyling2:visited {
  text-decoration: none;
  font-size: 22px;
  color: blue;
}

a.linkstyling2:hover {
  text-decoration: underline;
  font-size: 30px;
}

a.linkstyling2:active {
  color:yellow;
}

        

Spørgsmål og kommentarer

Har du spørgsmål eller kommentarer? Så skriv herunder og vi eller en anden lœser vil svare hurtigst muligt!

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

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Line    05-02-2021

Hejsa, jeg ville meget gerne bruge et billede hvorpå man kan klikke (her tænker jeg 3 streger), og så laver den en drop down menu. Er dette IKKE svært at lave? Og muligt? Vh Line


kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    12-03-2019

Hej Steffen, Prøv at se denne artikel, der giver et par gode short-hand eksempler: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties


kommentar på NemProgrammering.dk - lav din egen hjemmeside
Steffen    12-03-2019

Ved øvelse opgaverne: "2 - Gør de to klasser mere overskuelige, ved hjælp af CSS shorthand." Er CSS shorthand blot der hvor du rykker flere selector sammen til at være gældende under de samme deklarationer? Ex. a:link, a:visited { text-decoration: none; font-size: 22px; color: blue } Som overstående ex. er beskrevet, dele link og visited samme deklarationer men det hvad der skal forstås med CSS Shorthand?


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??