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. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS ofrece etiquetas que proporcionan algunos metadatos al usuario o indican el estado de un elemento. Hay 3 tipos de etiquetas, Etiquetas para indicar metadatos, Estados para mostrar el estado y Contadores para indicar el recuento de una cantidad de elementos. En este artículo, analizaremos las etiquetas que proporcionan algunos metadatos. junto con ejemplos.
Primer CSS Labels clases usadas:
- Etiqueta: Esta clase se utiliza para definir una etiqueta.
- Label–primary: esta clase se utiliza para definir una etiqueta primaria que tiene un borde más fuerte.
- Etiqueta secundaria: esta clase se utiliza para definir una etiqueta secundaria que tiene un color de texto más sutil.
- Etiqueta-acento: esta clase se utiliza para definir una etiqueta de color azul.
- Label–success: Esta clase se utiliza para definir una etiqueta de color verde.
- Etiqueta–atención: Esta clase se utiliza para definir una etiqueta de color dorado.
- Label–severe: esta clase se utiliza para definir una etiqueta de color marrón.
- Etiqueta–peligro: Esta clase se utiliza para definir una etiqueta de color rojo.
- Etiqueta-patrocinadores: esta clase se utiliza para definir una etiqueta de color púrpura.
- Etiqueta grande: esta clase se usa para definir una etiqueta que tiene algo de relleno adicional.
- Label–inline: esta clase se utiliza para definir una etiqueta en línea.
Sintaxis:
<span class="Label <label-classes>">
...
</span>
Ejemplo 1: El siguiente ejemplo demuestra el uso de las etiquetas Primer CSS usando las clases State-primary y State-secundary .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Labels </title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Labels </h3> <span class="Label Label--primary mr-1 mt-2"> Primary Label </span> <span class="Label Label--secondary mr-1 mt-2"> Secondary Label </span> </center> </body> </html>
Producción:
Primer etiquetas CSS
Ejemplo 2: El siguiente ejemplo demuestra el uso de etiquetas Primer CSS usando etiquetas de diferentes colores.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Labels </title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <center> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3> Primer CSS Labels </h3> <span class="Label mr-2 mt-3 Label--accent"> Blue Color Label </span> <span class="Label mr-2 mt-3 Label--success"> Green Color Label </span> <span class="Label mr-2 mt-3 Label--danger"> Red Color Label </span> <span class="Label mr-2 mt-3 Label--sponsors"> Purple Color Label </span> </center> </body> </html>
Producción:
Primer etiquetas CSS
Ejemplo 3: El siguiente ejemplo demuestra el uso de las etiquetas Primer CSS con etiquetas de gran tamaño.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Labels </title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <center> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3>Primer CSS Labels</h3> <span class="Label mt-3 mr-1">Default Label</span> <span class="Label Label--large mt-3 mr-1"> Large sized Label </span> </center> </body> </html>
Producción:
Primer etiquetas CSS
Ejemplo 4: El siguiente ejemplo demuestra el uso de etiquetas Primer CSS usando etiquetas en línea.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Labels </title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Labels </h3> <p class="mt-3"> GeeksforGeeks is a Computer Science Portal <span class="Label Label--inline">for geeks</span> of india as well as overseas. </p> </center> </body> </html>
Producción:
Primer etiquetas CSS
Referencia: https://primer.style/css/components/labels#labels
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA