W3.CSS es uno de los marcos front-end de código abierto más populares que nos ayuda a desarrollar sitios web y aplicaciones web con capacidad de respuesta y móviles. Como parte de su oferta, nos proporciona una colección de clases, llamadas clases de utilidad de texto , que controlan varias propiedades del texto, como la alineación del texto, el tamaño del texto, la opacidad del texto.
Alineación de texto: W3.CSS tiene tres clases para alinear el texto al centro, a la izquierda y a la derecha. La descripción de los mismos es la siguiente:
| No Señor. | Nombre de la clase | Descripción |
|---|---|---|
| 1. | w3-alinear a la izquierda | Se utiliza para alinear el texto a la izquierda. |
| 2. | w3-alinear a la derecha | Se utiliza para alinear el texto a la derecha. |
| 3. | w3-centro | Se utiliza para alinear el texto al centro. |
Ejemplo:
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"> GeeksForGeeks </h2> </div> <!-- Text Alignment Classes in W3.CSS --> <div class="w3-container"> <!-- Text Alignment Classes --> <h3 class="w3-text-blue">Text Alignment Classes:</h3> <div class="w3-container w3-pink w3-round-large"> <!-- w3-left-align class --> <p class="w3-left-align"> Using w3-left-align class... </p> <!-- w3-center class --> <p class="w3-center"> Using w3-center class... </p> <!-- w3-right-align class --> <p class="w3-right-align"> Using w3-right-align class... </p> </div> </div> </body> </html>
Producción:
Texto ancho: para que el texto parezca más ancho, utilizamos una clase w3-wide de W3.CSS.
Ejemplo:
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">GeeksForGeeks</h2> </div> <!-- Wide Text Class in W3.CSS --> <div class="w3-container"> <div class="w3-container"> <!-- Normal text --> <h4 class="w3-text-pink">Normal Text:</h4> <p> GeeksforGeeks is a Computer Science portal for geeks. </p> <!-- Wide text --> <h4 class="w3-text-pink">Wide Text:</h4> <p class="w3-wide"> GeeksforGeeks is a Computer Science portal for geeks. </p> </div> </div> </body> </html>
Producción:
Tamaños de fuente:
Puede establecer la fuente del texto utilizando las clases de tamaño de W3.CSS. Las clases que entran en esta categoría son las siguientes:
| No Señor. | Nombre de la clase | Descripción |
|---|---|---|
| 1. | w3-pequeño | Esta clase establece el tamaño de fuente del elemento de destino en 10 px. |
| 2. | w3-pequeño | Esta clase establece el tamaño de fuente del elemento de destino en 12 px. |
| 3. | w3-grande | Esta clase establece el tamaño de fuente del elemento de destino en 18 px. |
| 4. | w3-xgrande | Esta clase establece el tamaño de fuente del elemento de destino en 24 px. |
| 5. | w3-xxgrande | Esta clase establece el tamaño de fuente del elemento de destino en 32 px. |
| 6. | w3-xxxgrande | Esta clase establece el tamaño de fuente del elemento de destino en 48 px. |
| 7. | w3-jumbo | Esta clase establece el tamaño de fuente del elemento de destino en 64 px. |
Ejemplo:
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"> GeeksForGeeks </h2> </div> <!-- Different Text Sizes in W3.CSS --> <div class="w3-container"> <div class="w3-container"> <!-- w3-tiny text --> <h4 class="w3-text-pink w3-tiny"> w3-tiny Text: </h4> <p class="w3-tiny"> GeeksforGeeks is a Computer Science portal for geeks. </p> <!-- w3-small text --> <h4 class="w3-text-pink w3-small"> w3-small Text: </h4> <p class="w3-small"> GeeksforGeeks is a Computer Science portal for geeks. </p> <!-- w3-large text --> <h4 class="w3-text-pink w3-large"> w3-large Text: </h4> <p class="w3-large"> GeeksforGeeks is a Computer Science portal for geeks. </p> <!-- w3-xlarge text --> <h4 class="w3-text-pink w3-xlarge"> w3-xlarge Text: </h4> <p class="w3-xlarge"> GeeksforGeeks is a Computer Science portal for geeks. </p> <!-- w3-xxlarge text --> <h4 class="w3-text-pink w3-xxlarge"> w3-xxlarge Text: </h4> <p class="w3-xxlarge"> GeeksforGeeks is a Computer Science portal for geeks. </p> <!-- w3-xxxlarge text --> <h4 class="w3-text-pink w3-xxxlarge"> w3-xxxlarge Text: </h4> <p class="w3-xxxlarge"> GeeksforGeeks is a Computer Science portal for geeks. </p> <!-- w3-jumbo text --> <h4 class="w3-text-pink w3-jumbo"> w3-jumbo Text: </h4> <p class="w3-jumbo"> GeeksforGeeks is a Computer Science portal for geeks. </p> </div> </div> </body> </html>
Producción:
Estilos de fuente: W3.CSS también tiene algunos estilos de fuente incorporados que se pueden usar ampliamente para decorar páginas web. La lista de las clases para los estilos de fuente es la siguiente:
|
No Señor. |
Nombre de la clase |
Descripción |
|---|---|---|
|
1. |
w3-serif |
El estilo de fuente se cambia a serif. |
|
2. |
w3-sans-serif |
El estilo de fuente se cambia a sans-serif. |
|
3. |
w3-cursiva |
El estilo de fuente se cambia a cursiva. |
|
4. |
w3-monoespaciado |
El estilo de fuente se cambia a monoespaciado. |
Ejemplo:
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 colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> GeeksForGeeks </h2> </div> <!-- Different Font Styles in W3.CSS --> <div class="w3-container"> <div class="w3-container"> <!-- w3-serif Styled Text --> <h4 class="w3-text-pink"> w3-serif Styled Text: </h4> <p class="w3-serif"> GeeksforGeeks is a Computer Science portal for geeks. </p> <!-- w3-sans-serif Styled Text --> <h4 class="w3-text-pink"> w3-sans-serif Styled Text: </h4> <p class="w3-sans-serif"> GeeksforGeeks is a Computer Science portal for geeks. </p> <!-- w3-cursive Styled Text --> <h4 class="w3-text-pink"> w3-cursive Styled Text: </h4> <p class="w3-cursive"> GeeksforGeeks is a Computer Science portal for geeks. </p> <!-- w3-monospace Styled Text --> <h4 class="w3-text-pink"> w3-monospace Styled Text: </h4> <p class="w3-monospace"> GeeksforGeeks is a Computer Science portal for geeks. </p> </div> </div> </body> </html>
Producción:
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