W3.CSS proporciona a los desarrolladores web las dos clases más útiles, es decir, contenedores y paneles. Se utilizan para colocar contenido junto con el mismo color de fuente, color de fondo, tamaño de fuente, familia de fuentes, etc.
w3-container: esta clase se usa para agregar un relleno de 16 px en el lado izquierdo y derecho del elemento. Se puede usar con todos los elementos contenedores de HTML5, es decir, div, artículo, sección, encabezado, pie de página, etc. Todos los elementos dentro de esta clase comparten el mismo tamaño de fuente, color de fuente, relleno, alineación, etc.
Ejemplo: uso de la clase de contenedor w3 en la página HTML.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- w3-pink sets the background color pink --> <div class="w3-container w3-pink"> <!-- w3-text-white sets the text color to white --> <p class="w3-text-white "> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </p> </div> </body> </html>
Producción:
w3-panel: esta clase agrega un relleno de 16px en todos los lados, es decir, arriba, a la derecha, abajo, a la izquierda. También se puede usar con todos los elementos contenedores de HTML5, es decir, div, artículo, sección, encabezado, pie de página, etc. Todos los elementos dentro de esta clase comparten el mismo tamaño de fuente, color de fuente, relleno, alineación, etc.
Ejemplo: Uso de la clase w3-panel en la página HTML.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- w3-pink sets the background color pink --> <!-- w3-panel is used to 16px padding from all the direction --> <div class="w3-panel w3-pink"> <!-- w3-text-white sets the text colur to white. --> <p class="w3-text-white"> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </p> </div> </body> </html>
Producción:
Puede ver que la brecha entre el encabezado y el párrafo aumenta porque tenemos la clase w3-panel.
Nota:
- Si usa la etiqueta de párrafo, se agrega automáticamente relleno entre el contenido y la división.
- Puede usar paneles y contenedores para crear estilos como notas, citas, alertas, tarjetas y muchos más.
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA