Las clases de servicios públicos
La mayor parte de W3.CSS se construye alrededor de clases de utilidad que proporciona el relleno, márgenes, tamaños y posicionamiento.
Las clases de relleno
Las clases detamaño W3-padding- añade el relleno a cualquier elemento HTML:
La clase W3-padding-jumbo añade 32px superior e inferior y 64px a la izquierda y la derecha.
La clase W3-padding-Xxlarge añade 24px superior e inferior y 48px a la izquierda y la derecha.
La clase W3-padding-XLarge añade 16px superior e inferior y 32px a la izquierda y la derecha.
La clase W3-padding-grande añade 12 píxeles superior e inferior y 24px a la izquierda y la derecha.
La clase W3-padding-medio agrega 8px 16px arriba y abajo y de izquierda a derecha.
La clase W3-padding-pequeña añade 4PX superior e inferior y 8 píxeles izquierda y derecha.
La clase W3-padding-diminuta añade 2px superior e inferior y 4PX izquierda y derecha.
Ejemplo
<div class="w3-container w3-padding-xlarge">
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>
Inténtalo tú mismo " Elnúmero monas clases w3-padding-añadeel relleno horizontal (superior e inferior) a cualquier elemento HTML:
La clase W3-padding-hor-4 añade relleno superior e inferior 4 píxeles.
La clase W3-padding-hor-8 añade relleno superior e inferior 8 píxeles.
La clase W3-padding-hor-16 añade 16px parte superior e inferior de relleno.
La clase W3-padding-hor-32 añade 32px parte superior e inferior de relleno.
La clase W3-padding-hor-64 añade 64px parte superior e inferior de relleno.
Ejemplo
<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
Inténtalo tú mismo " Las clasesde números w3-padding-versión añade el relleno vertical (izquierda y derecha) para cualquier elemento HTML:
El-ver-W3-padding 4 clase añade el relleno 4PX izquierda y derecha.
El 8-ver-W3-padding clase añade el relleno 8 píxeles izquierda y derecha.
El W3-padding-ver-16 clase añade 16x relleno a la izquierda y la derecha.
El W3-padding-ver-32 clase añade 32px relleno a la izquierda y la derecha.
La clase W3-padding-hor-48 añade 64px relleno a la izquierda y la derecha.
Ejemplo
<div class="w3-container w3-padding-ver-16">
<p>I have 16px left and right padding</p>
</div>
Inténtalo tú mismo " Las clases de margen
Las clasesw3 margen añadir márgenes a un elemento:
La clase W3-añade margen de 16px margen de todos los lados de un elemento.
La clase W3-margin-bottom agrega un margen inferior 16px a un elemento.
El W3-margin-left clase agrega un 16px margen izquierdo de un elemento.
La clase W3-margin-right añade un margen derecho 16px a un elemento.
La clase W3-margin-top agrega un margen superior 16px a un elemento.
Ejemplo
<div class="w3-container w3-margin">
I have 16px margin on all sides
</div>
Inténtalo tú mismo " dimensionamiento de las clases
La clase de tamaño w3- cambia el tamaño de fuente de un elemento:
Estoy muy pequeña (usando w3-minúscula)
Estoy pequeña (usando w3-pequeño)
Estoy medio. El valor por defecto.
Estoy grande (utilizando w3-grande)
Estoy XLarge (usando w3-XLarge)
Ejemplo
<p class="w3-small">I'm small (using w3-small)</p>
<p>I'm medium. The default.</p>
<p class="w3-large">I'm
large (using w3-large)</p>
<p class="w3-xlarge">I'm xlarge (using
w3-xlarge)</p> Inténtalo tú mismo " Puede leer más sobre dimensionamiento de las clases en el capítulo de la tipografía W3.CSS .
Las clases de redondeo
El tamaño de la clase W3-redonda añade redondeado fronteras a un elemento:
Ejemplo
<div class="w3-round w3-teal w3-padding">Round</div>
<div class="w3-round-large w3-teal w3-padding">Rounder</div>
<div class="w3-round-xlarge w3-teal w3-padding">Rounder</div>
<div class="w3-round-jumbo w3-teal w3-padding">Roundest</div>
Inténtalo tú mismo " La clase Circle
El Centro de Clase
La clase W3-centro se centra en un elemento:
Ejemplo
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.jpg" alt="Car">
</div> Inténtalo tú mismo " Las clases flotante
La clase W3-izquierda flota un elemento a la izquierda, la clase W3-derecha flota un elemento a la derecha:
Ejemplo
<div class="w3-container w3-light-grey">
<div class="w3-left
w3-red">Float left</div>
<div class="w3-right w3-blue">Float
right</div>
</div> Inténtalo tú mismo " Mostrar / Ocultar Clases
El W3-ocultar-Small | amplia clase esconde un elemento en un tamaño de pantalla específico.
Nota: Cambiar el tamaño de la ventana del navegador para entender cómo funciona:
Ejemplo
<p class="w3-hide-small">I will be hidden on small screens (phone)</p>
<p class="w3-hide-medium">I will be hidden on medium screens (tablet)</p>
<p class="w3-hide-large">I will be hidden
on large screens (laptop/desktop)</p> Inténtalo tú mismo "