Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Es un sistema que nos ayuda a construir experiencias de usuario consistentes de manera eficiente con suficiente flexibilidad. Este enfoque sistemático garantiza que nuestros estilos sean coherentes e interoperables entre sí. Cuenta con una escala de espaciado altamente componible, tipografía personalizable y colores significativos. Es altamente reutilizable y flexible y se crea con el sistema de diseño de GitHub.
Una etiqueta es un componente importante de nuestro sitio web, ya que muestra información de contenido al usuario. Primer CSS nos proporciona una etiqueta para mostrar información.
Primer Clase predeterminada de etiquetas CSS:
- Etiqueta: Esta clase se utiliza para crear una etiqueta.
Sintaxis:
<span class="Label"> ... </span>
Ejemplo 1: El siguiente ejemplo demuestra cómo se crea una etiqueta utilizando la clase Label .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Labels Default </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-left"> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3> Primer CSS Labels Default </h3> </div> <br> <span class="Label"> <!--Label--> Label 1 </span> <span class="Label"> Label 2 </span> <span class="Label"> Label 3 </span> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra la diferencia entre una parte de la información que se muestra con una etiqueta y una parte de la información que se muestra directamente sin una etiqueta.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Labels Default </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-left"> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3> Primer CSS Labels Default </h3> </div> <br> <span class="no_label"> <!--Not A Label--> Not A Label </span> <span class="Label"> <!--Label--> Label </span> <span class="Label"> Label 2 </span> </body> </html>
Producción:
Referencia: https://primer.style/css/components/labels
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA