NemProgrammering.dk logo
nordicway webhotel

Sådan styler du lister 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 lektion skal vi arbejde med lister i CSS. Vi skal blandt andet prøve at ændre vores liste-ikoner samt tilføje baggrundsfarver til vores lister.

Øvelser:
1 - Find et ikon på nettet og prøv at indsætte dette som liste-ikon på din unordered liste. Prøv også at fjerne liste-ikonerne ved hjælp af liste-style-type: none;
2 - Lav en unordered liste inde i en ordered liste. Prøv at style disse to lister forskelligt ved hjælp af to klasser.

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, stylig af lister

Her har du kildekoden

<!DOCTYPE html>
<html>
<head>
  <title>Lektion 8</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="Lektion8.css">
</head>
<body>
  <ul class="unordered1">
    <li class="punkt1">Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
  </ul>

  <ul class="unordered2">
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
  </ul>

  <ol class="ordered">
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
  </ol>
</body>
</html>

Her har du kildekoden

ul.unordered1 {
  list-style-type:square;
  background-color: green;
}

li.punkt1 {
  background-color: red;
}

li {
  text-decoration: underline;
}

ul.unordered2 {
  list-style-image: url(Lektion8pil.png);
}

ol.ordered {
  list-style-type: upper-roman;
}

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).

Vær den første til at skrive en kommentar!