Ocena użytkowników: 5 / 5

Gwiazdka aktywnaGwiazdka aktywnaGwiazdka aktywnaGwiazdka aktywnaGwiazdka aktywna
 

Listy numerowane przydają się m.in. na stronach internetowych, kiedy chcemy zaprezentować np. listę książek, spis treści książki, listę ulubionych kolorów czy artykułów. Są proste w użyciu, możemy je zagnieżdżać. Niestety przy listach zagnieżdżonych np. przy spisach treści tytułów i podtytułów rozdziałów książek, dodawanie numerów przed tekstem za pomocą kodu CSS jest skomplikowane i nie zawsze spełnia taki kod nasze oczekiwania.

W pierwszym przykładzie poznamy proste listy numerowane (Listing 1). Listing 2 zawiera listę zagnieżdżoną. Listing 3 jest najbardziej rozbudowany, aby prawidłowo wyświetlić numery rozdziałów i podrozdziałów za pomocą kodu CSS. Dodawanie numerowania za pomocą kodu CSS jest skomplikowane, dlatego lepiej jest dodawać numery jako zwykły tekst przed nazwą rozdziału. Numerowanie automatyczne możemy wyłączyć za pomocą kodu CSS (Listing 4).

 

Listing 1. Plik 1-listy-numerowane.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="author" content="Piotr Klimek" />
   <meta name="description" content="Tworzenie listy numerowanej HTML.” />
   <title>Listy HTML ćwiczenia</title>
</head>
<body>
Owoce (element type="1" jest domyślny):
<ol>
   <li>Truskawka</li>
   <li>Jabłko</li>
   <li>Cytryna</li>
</ol>

Owoce (element type="a"):
<ol type="a">
   <li>Truskawka</li>
   <li>Jabłko</li>
   <li>Cytryna</li>
</ol>

Owoce (element type="A"):
<ol type="A">
   <li>Truskawka</li>
   <li>Jabłko</li>
   <li>Cytryna</li>
</ol>

Owoce (element type="i"):
<ol type="i">
   <li>Truskawka</li>
   <li>Jabłko</li>
   <li>Cytryna</li>
</ol>

Owoce (element type="I"):
<ol type="I">
   <li>Truskawka</li>
   <li>Jabłko</li>
   <li>Cytryna</li>
</ol>

Kolory (element reversed, kolejność listy malejąca):
<ol reversed="reversed">
   <li>Pomarańczowy</li>
   <li>Niebieski</li>
   <li>Fioletowy</li>
   <li>Czerwony</li>
</ol>

Kolory:
<ol>
   <li>Pomarańczowy</li>
   <li>Niebieski</li>
   <li>Fioletowy</li>
   <li>Czerwony</li>
</ol>
</body>
</html> 

 

Rys. 1. Przykładowe listy w HTML5, przeglądarka Chrome

Rys. 1. Przykładowe listy w HTML5, przeglądarka Chrome

 

Listing 2. Plik 2-listy-wielopoziomowe.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="author" content="Piotr Klimek" />
   <meta name="description" content="Listy zagnieżdżone HTML.” />
   <title>Listy HTML ćwiczenia</title>
</head>
<body>
<ol>
   <li>Kolory:
   <ol>
      <li>Biały</li>
      <li>Niebieski</li>
      <li>Pomarańczowy</li>
   </ol>
   <li>Imiona:
   <ol>
      <li>Piotr</li>
      <li>Tomek</li>
      <li>Paweł</li>
   </ol>
   </li>
</ol>
</body>
</html> 

 

Rys. 2. Przykładowa lista zagnieżdżona HTML5, przeglądarka Chrome

Rys. 2. Przykładowa lista zagnieżdżona HTML5, przeglądarka Chrome

 

Listing 3. Plik 3-lista-numerowana-css.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="author" content="Piotr Klimek" />
   <meta name="description" content="Tworzenie wielopoziomowej listy HTML przy pomocy CSS." />
   <title>Listy HTML ćwiczenia (HTML lista numerowana 1.1)</title>
   <style type="text/css">
   ol.own-list > li {list-style-type:none;}
   ol.own-list > li li {list-style-type:decimal;}
   ol.own-list > li > ol > li {font-weight: bold;}
   ol.own-list > li > ol > li li {font-weight:normal;}

   ol.own-list > li > ol li:first-child {counter-reset: item;}
   ol.own-list > li > ol li {counter-increment: item;}
   ol.own-list > li > ol li:before {content: counters(item, ". ")". "; margin-left:-3px; margin-right: 1px;}
</style>
</head>
<body>
<ol class="own-list">
   <li>Rozdział 2. Informatyka
   <ol start="2">
      <li>Programowanie
      <ol>
         <li value="2">C++</li>
         <li value="2">C#</li>
         <li value="2">Java</li>
      </ol>
      </li>
      <li value="2">Systemy operacyjne
      <ol>
         <li value="2">Windows 10</li>
         <li value="2">macOS</li>
         <li value="2">Linux Fedora</li>
      </ol>
      </li>
   </ol>
   </li>
</ol>
</body>
</html> 

 

Rys. 3. Listy Wielopoziomowe HTML, przeglądarka Chrome

Rys. 3. Listy Wielopoziomowe HTML, przeglądarka Chrome

 

Listing 4. Plik 4-listy-wielopoziomowe.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="author" content="Piotr Klimek" />
   <meta name="description" content="Tworzenie wielopoziomowej listy HTML z własnymi numerami rozdziałów i podrozdziałów." />
   <title>Listy HTML ćwiczenia (HTML lista numerowana 1.1)</title>
   <style type="text/css">
      ol.own-list li { list-style-type:none;}
   </style>
</head>
<body>
<ol class="own-list">
   <li>Rozdział 2. Informatyka
   <ol>
      <li><b>2.1. Programowanie</b>
      <ol>
         <li>2.1.1. C++</li>
         <li>2.1.2. C#</li>
         <li>2.1.3. Java</li>
      </ol>
      </li>
      <li><b>2.2. Systemy operacyjne</b>
      <ol>
         <li>2.2.1. Windows 10</li>
         <li>2.2.2. macOS</li>
         <li>2.2.3. Linux Fedora</li>
      </ol>
      </li>
   </ol>
   </li>
</ol>
</body>
</html> 

 

Rys. 4. Lista zagnieżdżona HTML, przeglądarka Chrome

Rys. 4. Lista zagnieżdżona HTML, przeglądarka Chrome

 

Zaprezentowany sposób na listingu 4, jest najprostszym rozwiązaniem. Nie wymaga użycia dużej ilości kodu CSS, który nie zawsze działa zgodnie z naszymi oczekiwaniami. Bardzo dobrze sprawdza się w systemach CMS (edytor WYSIWYG).

 

Wybrane książki:

Wybrane strony:

Książki Helion