Conteneurs W3.CSS
Ceci est mon en-tête
Ceci est mon article
Cet article est gris clair et le texte est marron. Cet article est gris clair et le texte est marron. Cet article est gris clair et le texte est marron. Cet article est gris clair et le texte est marron. Cet article est gris clair et le texte est marron.
Ceci est mon pied de page
La classe conteneur
La classe w3-container ajoute un rembourrage gauche et droit de 16 pixels à tout élément HTML.
La classe w3-container est la classe idéale à utiliser pour tous les éléments de conteneur HTML tels que :
<div>, <article>, <section>, <header>, <footer>, <form>, et plus encore.
Les conteneurs offrent l'égalité
Le conteneur w3 fournit l'égalité pour tous les éléments de conteneur HTML :
- Marges communes
- Rembourrages communs
- Alignements communs
- Polices courantes
- Couleurs communes
Pour utiliser un conteneur, ajoutez simplement une classe w3-container à n'importe quel élément :
Exemple
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
Pour ajouter une couleur, il suffit d'ajouter une classe de couleurs w3 :
Exemple
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
En-têtes et pieds de page
La classe w3-container peut être utilisée pour styliser les en-têtes :
Entête
Exemple
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
Exemple
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
Il n'y a aucune différence dans la façon dont W3.CSS traite les éléments <div> et <header>.
La classe w3-container peut être utilisée pour styliser les pieds de page :
Exemple
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
Exemple
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
De nombreuses pages Web utilisent des éléments <div> au lieu des éléments <header> et <footer>.
Articles et rubriques
La classe w3-container peut être utilisée pour styliser les éléments <article> et <section> :
Exemple
<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>
De nombreuses pages Web utilisent des éléments <div> au lieu des éléments <article> et <section>.
Exemple de page Web
Entête
Une voiture est un véhicule à moteur autonome à roues utilisé pour le transport. La plupart des définitions du terme précisent que les voitures sont conçues pour rouler principalement sur les routes. (Wikipédia)
Exemple utilisant des éléments HTML <div>
<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>
Exemple utilisant des éléments sémantiques HTML
<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>
Rembourrage du conteneur
The w3-container class has a default 16px left and right padding, and 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>