Encyklopedia: Jak formatować listę definicji w CSS - Kurs HTML i CSS
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ź
- Jak tworzyć listę numerowaną w HTML
- Jak formatować listę numerowaną w CSS
- Jak tworzyć listę wypunktowaną w HTML
- Jak formatować listę wypunktowaną w CSS
- Jak tworzyć listę definicji w HTML
Praktyczne przykłady
Zobacz, jak praktycznie formatować odnośniki w samouczku: