W3.CSS Houers


Dit is my kop

Dit is my artikel

Hierdie artikel is liggrys en die teks is bruin. Hierdie artikel is liggrys en die teks is bruin. Hierdie artikel is liggrys en die teks is bruin. Hierdie artikel is liggrys en die teks is bruin. Hierdie artikel is liggrys en die teks is bruin.

Dit is my voetskrif


Die houerklas

Die w3-houerklas voeg 'n 16px linker- en regtervulling by enige HTML-element.

Die w3-houerklas is die perfekte klas om te gebruik vir alle HTML-houerelemente soos:

<div>, <artikel>, <afdeling>, <header>, <footer>, <form>, en meer.


Houers bied gelykheid

Die w3-houer bied gelykheid vir alle HTML-houerelemente:

  • Algemene kantlyne
  • Algemene vulsels
  • Algemene belynings
  • Algemene lettertipes
  • Algemene kleure

Om 'n houer te gebruik, voeg net 'n w3-houerklas by enige element:

Voorbeeld

<div class="w3-container">
  <p>The w3-container class is an important w3.CSS class.</p>
</div>

Om 'n kleur by te voeg, voeg net 'n w3 - kleurklas by :

Voorbeeld

<div class="w3-container w3-red">
  <p>London is the capital city of England.</p>
</div>


Kop- en voettekste

Die w3-houerklas kan gebruik word om opskrifte te styl:

Opskrif

Voorbeeld

<div class="w3-container w3-teal">
  <h1>Header</h1>
</div>

Voorbeeld

<header class="w3-container w3-teal">
  <h1>Header</h1>
</header>

Daar is geen verskil in die manier waarop W3.CSS <div> en <header> elemente behandel nie.

Die w3-houerklas kan gebruik word om voettekste te styl:

Voetskrif

Footer inligting gaan hier

Voorbeeld

<div class="w3-container w3-teal">
  <h5>Footer</h5>
  <p>Footer information goes here</p>
</div>

Voorbeeld

<footer class="w3-container w3-teal">
  <h5>Footer</h5>
  <p>Footer information goes here</p>
</footer>

Baie webblaaie gebruik <div>-elemente in plaas van <header>- en <footer>-elemente.


Artikels en afdelings

Die w3-houerklas kan gebruik word om <artikel>- en <afdeling>-elemente te styl:

Voorbeeld

<div class="w3-container">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

<article class="w3-container">
  <h2>Paris</h2>
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 2 million inhabitants.</p>
</article>

<section class="w3-container">
  <h2>Tokyo</h2>
  <p>Tokyo is the center of the Greater Tokyo Area,
  and the most populous metropolitan area in the world.</p>
</section>

Baie webblaaie gebruik <div>-elemente in plaas van <artikel>- en <afdeling>-elemente.


Webblad voorbeeld

Opskrif

Voertuig

'n Motor is 'n wiel, selfaangedrewe motorvoertuig wat vir vervoer gebruik word. Die meeste definisies van die term spesifiseer dat motors ontwerp is om hoofsaaklik op paaie te hardloop. (Wikipedia)

Voetskrif

Voorbeeld met HTML <div> elemente

<div class="w3-container w3-red">
  <h1>Header</h1>
</div>

<img src="img_car.jpg" alt="Car" style="width:100%">

<div class="w3-container">
  <p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>

<div class="w3-container w3-red">
  <h5>Footer</h5>
</div>

Voorbeeld met HTML semantiese elemente

<header class="w3-container w3-teal">
  <h1>Header</h1>
</header>

<img src="img_car.jpg" alt="Car" style="width:100%">

<article class="w3-container">
  <p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>

<footer class="w3-container w3-teal">
  <h5>Footer</h5>
</footer>

Houervulling

The w3-container class has a default 16px left and right padding, and no top or bottom padding:

I have no top or bottom padding

Example

<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>

Normally you will not have to change the default padding of a container, because paragraphs and heading provide margins that will simulate padding.

I am a Heading

I am a paragraph.

Example

<div class="w3-container w3-blue">
  <h1>I am a Heading</h1>
  <p>I am a paragraph.</p>
</div>