La etiqueta .w3 se usa para agregar información adicional al contenido. Por ejemplo, algunos sitios web resaltan algunas secciones como nuevas o cuando han actualizado una sección, agregan una etiqueta actualizada con esa división para que el usuario pueda ver que se han actualizado para agregar nuevas divisiones en su sitio. Esta clase, cuando se usa, crea una etiqueta rectangular que actúa como etiqueta o signo en el sitio. Su color predeterminado es el negro.
Ejemplo: Agregar etiquetas 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> <!-- Tags in W3.CSS --> <div class="w3-container"> <h5>Updates <!-- Adding Tag with value "More later" --> <span class="w3-tag">More Later</span> </h5> <h5>Messages <!-- Adding Tag with value "New" --> <span class="w3-tag">New</span> </h5> <h5>Request <!-- Adding Tag with value "Done" --> <span class="w3-tag">Done</span> </h5> </div> </body> </html>
Producción:
Se pueden agregar colores a las etiquetas utilizando las clases de color de W3.CSS.
Ejemplo: agregar etiquetas de colores 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> <!-- Tags in W3.CSS --> <div class="w3-container"> <h5>Updates <!-- Adding Tag with value "More later" --> <span class="w3-tag w3-teal">More Later</span> </h5> <h5>Messages <!-- Adding Tag with value "New" --> <span class="w3-tag w3-blue">New</span> </h5> <h5>Request <!-- Adding Tag with value "Done" --> <span class="w3-tag w3-purple">Done</span> </h5> </div> </body> </html>
Producción:
Podemos agregar etiquetas de varios tamaños utilizando los tamaños de fuente disponibles en las clases W3.CSS.
Ejemplo: Agregar etiquetas de diferentes tamaños.
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> <!-- Tags in W3.CSS --> <div class="w3-container"> <h5>Updates <!-- Adding Tag with value "More later" --> <span class="w3-tag w3-teal w3-small"> More Later</span> </h5> <h5>Messages <!-- Adding Tag with value "New" --> <span class="w3-tag w3-blue w3-large">New</span> </h5> <h5>Request <!-- Adding Tag with value "Done" --> <span class="w3-tag w3-purple w3-jumbo">Done</span> </h5> </div> </body> </html>
Producción:
También podemos agregar etiquetas de bordes redondeados usando clases de radio de borde en 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"> Welcome To GFG </h2> </div> <!-- Tags in W3.CSS --> <div class="w3-container"> <h5>Updates <!-- Adding Tag with value "More later" --> <span class="w3-tag w3-teal w3-round">More Later</span> </h5> <h5>Messages <!-- Adding Tag with value "New" --> <span class="w3-tag w3-blue w3-round-large">New</span> </h5> <h5>Request <!-- Adding Tag with value "Done" --> <span class="w3-tag w3-purple w3-round-xlarge">Done</span> </h5> </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