Een div
tag wordt eigenlijk alleen maar gebruikt voor de opmaak van een pagina. De tag zelf doet niets. Belangrijk om te weten is dat een div regel vullend is.
<style> .bg-gray { background-color: lightgray; } </style> <div class="bg-gray">Ik ben een tekst</div>
Door de achtergrond kleur kan je zien dat het div element de hele pagina breedte gebruikt.
Vaak worden delen van een pagina in een div
geplaatst om deze een margin / padding te geven.
Hieronder het verschil tussen beide
Margin geef ruimte om het div-element. En padding geeft ruimte binnen het div-element.
Gebruikte code voor het voorbeeld
<style> div { background-color: lightgray; } .blok1 { margin: 20px; } .blok2 { padding: 20px; } </style> <div class="blok1">Margin 20px</div> <div class="blok2">Padding 20px</div>
Een div element kan je met CSS ook een achtergrond afbeelding geven.
Hiervoor plaats je een afbeelding in je map 'images' in dit geval 'twinkel.jpg'
<style> .twinkel { background-image: url("images/twinkel.jpg"); /* de achtergrond afbeelding*/ /* overige opmaak*/ color: white; font-size: 3rem; height: 150px; padding: 10px; } </style> <div class="twinkel">Zie mijn achtergrond</div>
Je kan ook de doorzichtigheid van je afbeelding aanpassen. (dit kan ook bij kleuren)
opacity: 0.25;
Waarde van 0-1 waarbij 0 volledig doorzichtig en 1 niet doorzichtig.