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 Link y Color Utilities se utilizan para agregar las clases de utilidad de color con los enlaces para mostrar claramente la información dentro del enlace usando colores. Cuando pasemos el mouse sobre los enlaces, se convertirán en un solo color.
Primer CSS Link y clases de utilidades de color:
- color-fg-*: estas clases de utilidad de color se utilizan para dar colores al texto y los enlaces.
Sintaxis:
<a class="Link--primary" href="#url">
<span class="color-fg-*">
...
</span>
</a>
Ejemplo 1: Este ejemplo demuestra la implementación de Primer CSS Link y Color Utilities.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Link and Color Utilities </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Link and Color Utilities </h3> <br> <a class="Link--primary text-bold" href="#"> <h3 class="color-fg-attention"> GeeksforGeeks website </h3> </a> </div> </body> </html>
Producción:
Primer CSS Enlace y utilidades de color
Ejemplo 2: Este ejemplo demuestra la implementación de Primer CSS Link y Color Utilities usando el ícono SVG .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Link and Color Utilities </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Link and Color Utilities </h3> <br> <a class="Link--primary text-bold" href="#"> <svg class="octicon octicon-octoface color-fg-danger" viewBox="0 0 16 16" width="18" height="18" > <path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"> </path> </svg> <span class="color-fg-success"> Open </span> <span class="color-fg-muted"> GeeksforGeeks </span> <span class="color-fg-danger"> website </span> </a> </div> </body> </html>
Producción:
Primer CSS Enlace y utilidades de color
Referencia: https://primer.style/css/components/links#link-and-color-utilities
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA