chevron-left chevron-right

[CSS] Jak tworzyć style dla listy definicyjnej? – 8 sposobów, aby ją ogarnąć

W dzisiejszym artykule opiszę sposoby ostylowania listy definicyjnej.
Lista definicyjna lub definicji składa się z trzech znaczników: ‹dl›, ‹dt› oraz ‹dd›.
Pierwszy z tych znaczników jest kontenerem (podobnym do ‹ul› czy ‹ol›), drugi z nich jest odpowiedzialny za termin, czyli to co będzie opisywane, a ostatni z nich odpowiada za definicję terminu.
To tyle tytułem wstępu. Teraz możemy przejść do sposobów budowania listy definicji.

  1. Lista definicji z podstawowymi stylami

    HTML 

    <dl class="podstawowe">
  <dt>Jakiś tekst</dt>
  <dd>Nisl ut aliquip ex ea commodo consequat</dd>
  <dt>Jakiś inny tekst</dt>
  <dd>Lorem ipsum dolor sit amet elit...</dd>
  <dt>Jeszcze inny tekst</dt>
  <dd>Facilisis at vero eros et accumsan</dd>
</dl>
    CSS 
    dl.podstawowe {
	margin: 0;
	padding: 0;
}
.podstawowe dt {
	margin: 0;
	padding: 0;
	font-weight: bold;
}
.podstawowe dd {
	margin: 0 0 16px 0;
	padding: 0;
}
    Wynik takiego zapisu będzie wyglądał następująco: Lista definicji z podstawowymi stylami

  2. Lista definicji z obrazkami w tle

    HTML 

    <dl class="obrazki-w-tle">
  <dt>Jakiś tekst</dt>
  <dd>Nisl ut aliquip ex ea commodo consequat</dd>
  <dt>Jakiś inny tekst</dt>
  <dd>Lorem ipsum dolor sit amet elit...</dd>
  <dt>Jeszcze inny tekst</dt>
  <dd>Facilisis at vero eros et accumsan</dd>
</dl>
    CSS 
    .obrazki-w-tle dt {
	color: #000;
	font-weight: bold;
	padding: 0;
}
.obrazki-w-tle dd {
	margin: 0 0 16px 0;
	padding: 0 0 0 10px;
	background: url(arrow.gif) no-repeat 0 8px;
}
    Wynik takiego zapisu będzie wyglądał następująco: Lista definicji z obrazkami w tle

  3. Lista definicji jako boxy

    HTML 

    <dl class="box">
  <dt>Jakiś tekst</dt>
  <dd>Nisl ut aliquip ex ea commodo consequat</dd>
  <dt>Jakiś inny tekst</dt>
  <dd>Lorem ipsum dolor sit amet elit...</dd>
  <dt>Jeszcze inny tekst</dt>
  <dd>Facilisis at vero eros et accumsan</dd>
</dl>
    CSS 
    dl.box {
	margin: 2em 0;
	padding: 0;
	width: 20em;
}
.box dt {
	background-color: #131210;
	color: #959289;
	padding: 8px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	border-left: 1px solid #131210;
	border-right: 1px solid #131210;
	border-top: 1px solid #131210;
}
.box dd {
	margin: 0 0 16px 0;
	background: #DBD8D8;
	text-align: center;
	padding: 16px 8px;
	font-style: italic;
	border-left: 1px solid #131210;
	border-right: 1px solid #131210;
	border-bottom: 1px solid #131210;
}
    Wynik takiego zapisu będzie wyglądał następująco: Lista definicji jako boxy

  4. Lista definicji jako tabela

    HTML 

    <dl class="tabela">
  <dt>Jakiś tekst</dt>
  <dd>Nisl ut aliquip ex ea commodo consequat</dd>
  <dt>Jakiś inny tekst</dt>
  <dd>Lorem ipsum dolor sit amet elit...</dd>
  <dt>Jeszcze inny tekst</dt>
  <dd>Facilisis at vero eros et accumsan</dd>
</dl>
    CSS 
    dl.tabela {
	float: left;
	width: 520px;
	margin: 16px 0;
	padding: 0;
	border-bottom: 1px solid #999;
}
.tabela dt {
	clear: left;
	float: left;
	width: 200px;
	margin: 0;
	padding: 5px;
	border-top: 1px solid #999;
	font-weight: bold;
}
.tabela dd {
	float: left;
	width: 300px;
	margin: 0;
	padding: 5px;
	border-top: 1px solid #999;
}
    Wynik takiego zapisu będzie wyglądał następująco: Lista definicji jako tabela

  5. Lista definicji jako "obrazek" z prawej strony treści

    HTML 

    <p>
<dl class="obrazek-prawy">
  <dt>Czerwony samochód</dt>
  <dd><img src="car.jpg" alt=""/></dd>
  <dd><em>Banksius maximus</em></dd>
  <dd>Found off the coast of Australia</dd>
</dl>
Jakaś treść ....
</p>
    CSS 
    dl.obrazek-prawy {
	border: 1px solid #000;
	background-color: #ddd;
	width: 142px;
	text-align: center;
	padding: 0 0 10px 0;
	float: right;
	margin: 0 0 16px 16px;
}
.obrazek-prawy dt {
	font-weight: bold;
	background-color: #131210;
	color: #959289;
	padding: 5px 10px;
	margin-bottom: 10px;
}
.obrazek-prawy dd img {
	border: 1px solid #000;
	width: 100px;
	height: auto;
}
.obrazek-prawy dd {
	margin: 0;
	padding: 0 10px 5px 10px;
	font-size: 12px;
}
    Wynik takiego zapisu będzie wyglądał następująco: Lista definicji jako obrazek z prawej strony treści

  6. Lista definicji jako galeria obrazków

    HTML 

    <dl class="galeria">
  <dt><img src="car.jpg" alt=""/></dt>
  <dt>Tytuł</dt>
  <dd>A tutaj opis</dd>
</dl>
<dl class="galeria">
  <dt><img src="car.jpg" alt=""/></dt>
  <dt>Tytuł</dt>
  <dd>A tutaj opis</dd>
</dl>
<dl class="galeria">
  <dt><img src="car.jpg" alt=""/></dt>
  <dt>Tytuł</dt>
  <dd>A tutaj opis</dd>
</dl>
    CSS 
    dl.galeria {
	border: 1px solid #000;
	background-color: #ddd;
	width: 102px;
	text-align: center;
	padding: 10px;
	float: left;
	margin-right: 16px;
}
.galeria dt {
	font-weight: bold;
}
.galeria dt img {
	border: 1px solid #000;
	width: 100px;
	height: auto;
}
.galeria dd {
	margin: 0;
	padding: 0;
}
    Wynik takiego zapisu będzie wyglądał następująco: Lista definicji jako galeria obrazków

  7. Lista definicji jako kalendarz

    HTML 

    <dl class="kalendarz">
  <dt>20 październik</dt>
  <dd>Spotkanie</dd>
  <dd>10.00</dd>
  <dd>Pojedź tam i się spotkaj ... </dd>
  <dt>25 październik</dt>
  <dd>Artykuł</dd>
  <dd>21.00</dd>
  <dd>Napisz artykuł na bloga ... </dd>
</dl>
    CSS 
    dl.kalendarz {
	margin: 32px 0;
	padding: 0;
	font-family: georgia, times, serif;
}
.kalendarz dt {
	position: relative;
	left: 0;
	top: 18px;
	width: 80px;
	font-weight: bold;
}
.kalendarz dd {
	border-left: 1px solid #000;
	margin: 0 0 0 96px;
	padding: 0 0 8px 8px;
}
    Wynik takiego zapisu będzie wyglądał następująco: Lista definicji jako kalendarz

  8. Lista definicji jako tabela - wersja 2

    HTML 

    <dl class="tabela2">
  <dt>Jakiś tekst</dt>
  <dd>Nisl ut aliquip ex ea commodo consequat</dd>
  <dt>Jakiś inny tekst</dt>
  <dd>Lorem ipsum dolor sit amet elit...</dd>
  <dt>Jeszcze inny tekst</dt>
  <dd>Facilisis at vero eros et accumsan</dd>
</dl>
    CSS 
    dl.tabela2 { 
	border-bottom: 1px solid #999;
}
dl.tabela2 dt {
	clear: left;
	float: left;
	width: 220px;
	margin: 0;
	padding: 5px;
	border-top: 1px solid #999;
	font-weight: bold;
}
dl.tabela2 dd {
	margin-left: 230px;
	padding: 5px;
}
dl.tabela2 dd.first { 
	border-top: 1px solid #999;
}
    Wynik takiego zapisu będzie wyglądał następująco: Lista definicji jako tabela - wersja 2

Mam nadzieję, że powyższa lista przykładów okaże się użyteczna dla Ciebie.
Demo z tego artykułu możesz zobaczyć tutaj: lista definicji z wykorzystaniem CSS.