• Artykuł

          

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

Autor: Norbert Blandzi

Opublikowano: 2011-10-17

Listę definicji można określić jako wyrażenie-definicja. Przykład takich list możemy znaleźć przeglądając encyklopedie, w których występują zagadnienia, a pod nimi ich opisy. Przykład takiej listy przedstawiony został na Rys. 1.

Rys. 1. Lista definicji.

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

dl{ atrybut: wartość; }
dt{ atrybut: wartość; }
dd{ atrybut: wartość; }

gdzie:

  • dl – lista definicji,
  • dt – wyrażenie,
  • dd – definicja.

Podstawowe atrybuty, które można wykorzystać do formatowania listy definicji 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">
        dt {
            font-size: 40px;
            font-weight: bold;
            color: red; }
        dd {
            font-size: 30px;
            color: green; }
        </style>
    </head> 
    <body> 
    <dl>
        <dt>młotek</dt> 
            <dd>jedno z najstarszych narzędzi używanych przez człowieka, służące do uderzania w materiał w celu jego obróbki, do uderzania w inne narzędzie (np. dłuto, przecinak) lub do wbijania w różne powierzchnie gwoździ</dd>
        <dt>łopata</dt> 
            <dd>to narzędzie służące do podnoszenia i przenoszenia materiałów sypkich, takich jak węgiel, gruz, śnieg, piasek, ziemia</dd>
        <dt>kilof</dt> 
            <dd>narzędzie służące do rozdrabniania większych części skalnych i wstępnego rozdrabniania twardego podłoża</dd>
</dl>
</body> 
</html>

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

Rys. 2. Lista definicji po zastosowaniu formatowania.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie formatować odnośniki w samouczku: