Contêineres W3.CSS
Este é o meu cabeçalho
Este é o meu artigo
Este artigo é cinza claro e o texto é marrom. Este artigo é cinza claro e o texto é marrom. Este artigo é cinza claro e o texto é marrom. Este artigo é cinza claro e o texto é marrom. Este artigo é cinza claro e o texto é marrom.
Este é o meu rodapé
A Classe do Contêiner
A classe w3-container adiciona um preenchimento esquerdo e direito de 16px a qualquer elemento HTML.
A classe w3-container é a classe perfeita para usar para todos os elementos de contêiner HTML como:
<div>, <article>, <section>, <header>, <footer>, <form> e muito mais.
Containers Fornece Igualdade
O contêiner w3 fornece igualdade para todos os elementos do contêiner HTML:
- Margens comuns
- Preenchimentos comuns
- Alinhamentos comuns
- Fontes comuns
- Cores comuns
Para usar um contêiner, basta adicionar uma classe w3-container a qualquer elemento:
Exemplo
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
Para adicionar uma cor, basta adicionar uma classe w3 - color :
Exemplo
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
Cabeçalhos e Rodapés
A classe w3-container pode ser usada para estilizar cabeçalhos:
Cabeçalho
Exemplo
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
Exemplo
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
Não há diferença na forma como o W3.CSS trata os elementos <div> e <header>.
A classe w3-container pode ser usada para estilizar rodapés:
Exemplo
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
Exemplo
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Muitas páginas da web usam elementos <div> em vez de elementos <header> e <footer>.
Artigos e Seções
A classe w3-container pode ser usada para estilizar os elementos <article> e <section>:
Exemplo
<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>
Muitas páginas da web usam elementos <div> em vez de elementos <article> e <section>.
Exemplo de página da Web
Cabeçalho
Um carro é um veículo motorizado com rodas e automotor usado para transporte. A maioria das definições do termo especifica que os carros são projetados para rodar principalmente em estradas. (Wikipédia)
Exemplo usando elementos 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>
Exemplo usando elementos semânticos 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>
Acolchoamento do contêiner
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>