De blockquote en definition list.
Bron: http://www.sceneone.nl/tekst/blockquote.php
Titel: HTML en CSS tutorials
Auteur: Wybe Weysters
De <blockquote> en het <dl> element zijn beiden zeer geschikt
om je teksten wat mee op te vrolijken en een beetje variatie aan te brengen
in wat langere stukken tekst.
Daarnaast (en eigenlijk om te beginnen) zijn het beiden elementen die met
een bepaalde bedoeling in het leven geroepen zijn.
De blockquote
Bedoeld om stukken tekst te benadrukken. Je kunt een stuk tekst benadrukken door het cursief te maken, vetgedrukt of te onderstrepen. Al deze manieren gaan alleen op voor een heel kort stukje tekst: 1 á 2 woorden, hooguit een kort zinnetje. Als je een langer stuk tekst hebt wat je wilt laten uitspringen kun je daar beter de blockquote voor gebruiken:
CSS: blockquote{
border: 1px solid #000;
} HTML: <p>Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</p>
<blockquote>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.</blockquote>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
Doordat ik een border om de blockquote heen gezet heb kun je duidelijk
zien dat hij een margin aan alle kanten heeft waardoor hij inspringt en
opvalt.
Je begrijpt dat je in je css allerlei opmaak van de blockquote
kunt beschrijven:
CSS: blockquote{
color: #B36B00;
border: 1px dotted #B36B00;
background: #FFE6BF;
margin: 15px 75px 15px 75px;
padding: 5px;
} HTML: <p>Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</p>
<blockquote>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.</blockquote>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
Het dl element
De letters dl staan voor definition list. Het dl element
is dan ook een list. Oorspronkelijk gemaakt om termen op te sommen en te
omschrijven.
En wel op de volgende manier:
CSS: GEEN HTML:
<dl>
<dt>Eerste term</dt>
<dd>Omschrijving van de eerste term Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat</dd>
<dt>Tweede term</dt>
<dd>Omschrijving van de tweede term Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat</dd>
<dt>Derde term</dt>
<dd>Omschrijving van de derde term Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat</dd>
</dl>
Je ziet dat de definition list al een aantal eigenschappen van zichzelf heeft. Ik heb in mijn css geen enkele opmaak voor de <dl> beschreven en toch gebeurd er van alles. Als je precies wilt uitzoeken wat nou eigenlijk de natuurlijke eigenschappen van de <dl> zijn kun je dat op dezelfde manier doen als ik met de unordered list gedaan heb in het onderdeel over de list.
Omdat de <dl> in feite bestaat uit 3 elementen: de parent <dl> en de twee children <dt> en <dd> zijn er heel wat mogelijkheden om via je css de definition list van een aardige opmaak te voorzien. Je kunt immers al die elementen direct vanuit je css aanspreken:
CSS: dl{
margin: 15px;
padding: 10px;
border: 2px solid #12127D;
background: #C8C8FF;
}
dt{
font-weight: bold;
color: #12127D;
padding: 0 0 0 10px;
}
dd{
color: #1919B3;
padding: 0 0 20px 25px;
background: url(../_img/uitroepteken.gif) no-repeat 0 0;
} HTML: <dl>
<dt>Eerste term</dt>
<dd>Omschrijving van de eerste term Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat</dd>
<dt>Tweede term</dt>
<dd>Omschrijving van de tweede term Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat</dd>
<dt>Derde term</dt>
<dd>Omschrijving van de derde term Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat</dd>
</dl>
Zoals je ziet kun je met eenvoudige middelen een aardig visueel effect voor elkaar krijgen. En het mooie is dat je er in je markup niets meer voor nodig hebt dan een html element.
je hebt geen tabel nodig om de boel te structureren. Geen aparte <td> voor je plaatje en een aparte <td> voor je tekst. Sterker nog, het plaatje zit helemaal niet in je markup, maar in je css.
Ziedaar de kracht van css en de flexibiliteit van html elementen. Als je maar begrijpt hoe ze in elkaar steken en wat je er allemaal mee kunt.