Contenedores W3.CSS
Este es mi encabezado
Este es mi artículo
Este artículo es de color gris claro y el texto es de color marrón. Este artículo es de color gris claro y el texto es de color marrón. Este artículo es de color gris claro y el texto es de color marrón. Este artículo es de color gris claro y el texto es de color marrón. Este artículo es de color gris claro y el texto es de color marrón.
Este es mi pie de página
La clase de contenedor
La clase w3-container agrega un relleno izquierdo y derecho de 16px a cualquier elemento HTML.
La clase w3-container es la clase perfecta para usar con todos los elementos contenedores HTML como:
<div>, <artículo>, <sección>, <encabezado>, <pie de página>, <formulario> y más.
Los contenedores proporcionan igualdad
El contenedor w3 proporciona igualdad para todos los elementos del contenedor HTML:
- Márgenes comunes
- acolchados comunes
- Alineaciones comunes
- fuentes comunes
- colores comunes
Para usar un contenedor, simplemente agregue una clase de contenedor w3 a cualquier elemento:
Ejemplo
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
Para agregar un color, simplemente agregue una clase de color w3- :
Ejemplo
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
Encabezados y pies de pagina
La clase w3-container se puede usar para diseñar encabezados:
Encabezamiento
Ejemplo
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
Ejemplo
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
No hay diferencia en la forma en que W3.CSS trata los elementos <div> y <header>.
La clase w3-container se puede usar para aplicar estilo a los pies de página:
Ejemplo
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
Ejemplo
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Muchas páginas web utilizan elementos <div> en lugar de elementos <header> y <footer>.
Artículos y Secciones
La clase w3-container se puede usar para aplicar estilo a los elementos <article> y <section>:
Ejemplo
<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>
Muchas páginas web utilizan elementos <div> en lugar de elementos <article> y <section>.
Ejemplo de página web
Encabezamiento
Un automóvil es un vehículo autopropulsado con ruedas que se utiliza para el transporte. La mayoría de las definiciones del término especifican que los automóviles están diseñados para funcionar principalmente en carreteras. (Wikipedia)
Ejemplo 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>
Ejemplo 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>
Relleno de contenedores
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>