Contenitori W3.CSS
Questa è la mia intestazione
Questo è il mio articolo
Questo articolo è grigio chiaro e il testo è marrone. Questo articolo è grigio chiaro e il testo è marrone. Questo articolo è grigio chiaro e il testo è marrone. Questo articolo è grigio chiaro e il testo è marrone. Questo articolo è grigio chiaro e il testo è marrone.
Questo è il mio piè di pagina
La classe dei contenitori
La classe w3-container aggiunge un riempimento sinistro e destro di 16px a qualsiasi elemento HTML.
La classe w3-container è la classe perfetta da usare per tutti gli elementi del contenitore HTML come:
<div>, <articolo>, <sezione>, <intestazione>, <piè di pagina>, <modulo> e altro.
I contenitori forniscono uguaglianza
Il contenitore w3 fornisce l'uguaglianza per tutti gli elementi del contenitore HTML:
- Margini comuni
- Imbottiture comuni
- Allineamenti comuni
- Font comuni
- Colori comuni
Per utilizzare un contenitore, aggiungi semplicemente una classe w3-container a qualsiasi elemento:
Esempio
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
Per aggiungere un colore, aggiungi semplicemente una classe di colori w3 :
Esempio
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
Intestazioni e piè di pagina
La classe w3-container può essere utilizzata per definire lo stile delle intestazioni:
Intestazione
Esempio
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
Esempio
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
Non vi è alcuna differenza nel modo in cui W3.CSS tratta gli elementi <div> e <header>.
La classe w3-container può essere utilizzata per applicare uno stile ai piè di pagina:
Esempio
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
Esempio
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Molte pagine web utilizzano elementi <div> invece di elementi <header> e <footer>.
Articoli e Sezioni
La classe w3-container può essere utilizzata per definire lo stile degli elementi <articolo> e <sezione>:
Esempio
<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>
Molte pagine web utilizzano elementi <div> invece di elementi <articolo> e <sezione>.
Esempio di pagina web
Intestazione
Un'auto è un veicolo a motore a ruote e autoalimentato utilizzato per il trasporto. La maggior parte delle definizioni del termine specifica che le auto sono progettate per funzionare principalmente su strade. (Wikipedia)
Esempio utilizzando elementi 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>
Esempio utilizzando elementi semantici 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>
Imbottitura del contenitore
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>