• Artykuł

          

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

Autor: Norbert Blandzi

Opublikowano: 2011-10-12

Lista numerowana, to lista, w której kolejne elementy mają ściśle określoną kolejność. Elementy listy numerowane są np. kolejnymi literami alfabetu lub liczbami arabskimi. Przykład takiej listy znajduje się na Rys. 1.

Rys. 1. Lista numerowana.

Częstym problemem, podczas tworzenia listy numerowanej, jest dostosowanie jej wyglądu do reszty elementów na stronie. Można to wykonać za pomocą Kaskadowych Arkuszy Stylów (CSS), wykorzystując następującą konstrukcję:

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

gdzie:

  • ol – lista numerowana,
  • li – element na liście numerowanej.

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

  • list-style-type – sposób numerowania listy. Możliwe wartości:
    decimal – liczby arabskie (domyślne),
    lower-alpha – małe litery alfabetu łacińskiego,
    upper-alpha – duże litery alfabetu łacińskiego,
    lower-roman – małe liczby rzymskie,
    upper-roman – duże liczby rzymskie.
  • list-style-position – określa pozycję znaku listy numerowanej. Możliwe wartości:
    outside – numerowanie na zewnątrz listy (domyślnie),
    inside – numerowanie wewnątrz listy.
  • list-style-image – definiuje graficzny znak listy numerowanej. Możliwe wartości:
    none – brak grafiki (domyślnie),
    url("adres") – adres do grafiki.
  • 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. ol {decimal 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>Formatowanie list</title> 
      <style type="text/css">
        ol { 
            list-style-type:lower-alpha;
            list-style-position:inside; }
        li{
            font-weight:800;
            font-size:20px;
            color:Green; }
        </style>
    </head> 
    <body> 
        <ol>
            <li>Aurelia</li>
            <li>Barbara</li>
            <li>Kasia</li>
        </ol>
    </body> 
</html>

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

Rys. 2. Plik index.html w przeglądarce.

Sprawdź

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