Udostępnij za pośrednictwem

  • Artykuł

          

Encyklopedia: Jak formatować listę wypunktowaną w CSS - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Norbert Blandzi

Opublikowano: 2011-10-13

Częstym problemem, podczas tworzenia listy wypunktowanej, jest dostosowanie jej wyglądu do reszty elementów na stronie. Można tego dokonać za pomocą CSS, wykorzystując następującą konstrukcję:

ul { atrybut: wartość; }
li { atrybut: wartość; }

gdzie:

  • ul – nowa lista wypunktowana,
  • li – nowy element na liście wypunktowanej.

Podstawowe atrybuty, które można wykorzystać do formatowania znacznika <ul> w CSS to:

  • list-style-type – sposób numerowania listy. Możliwe wartości:
    square – kwadrat,
    disc – koło,
    circle – okrąg,
    none – brak wypunktowania.
  • list-style-position – określa pozycję znaku listy wypunktowanej. Możliwe wartości:
    outside – wypunktowanie na zewnątrz listy (domyślnie),
    inside – wypunktowanie wewnątrz listy,
    inherit – dziedziczy wartość po rodzicu.
  • list-style-image – definiuje graficzny znak listy wypunktowanej. Możliwe wartości:
    none – brak grafiki (domyślnie),
    url("adres") – adres do grafiki,
    inherit – dziedziczy po rodzicu.
  • list-style – definiuje właściwości listy. Umożliwia połączenie powyższych atrybutów w jednym poleceniu. Kolejność podawanych elementów ma znaczenie. Wymagane jest podanie wartości atrybutów w kolejności list-style-image, list-style-position, list-style-type, oddzielonych od siebie spacjami, np. ul {circle url(obrazek.gif) inside;}

Podstawowe atrybuty , które można wykorzystać do formatowania znacznika <li> w CSS to:

  • color – kolor elementu,
  • font-size – rozmiar czcionki,
  • font-weight – grubość czcionki,
  • font-style – styl czcionki,
  • font-family – rodzaj oraz rodzina czcionki,
  • text-decoration – wygląd tekstu.

Przykład          

<html>
    <head>
        <title>Lista wypunktowana</title>
    </head>
    <body>
        <ul type="square">
            <li>Polska</li>
            <li>Hiszpania</li>
            <li>Francja</li>
            <li>Portugalia</li>
        </ul> 
    </body>
</html>

W przeglądarce przykład wygląda tak, jak na Rys. 1.

Rys. 1. Lista wypunktowana.

Sprawdź

Praktyczne przykłady Zobacz, jak praktycznie formatować listy w samouczku: