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 Colors se usa para dar colores a los enlaces usando las clases de utilidad de color. Podemos dar cualquier color con la ayuda de estas clases de utilidad.
Primer CSS Link Colors Clases:
- color-fg-*: estas clases de utilidad de color se utilizan para dar colores a los enlaces.
Sintaxis:
<a href="#" class="link-mktg color-fg-*"> .... </a>
Ejemplo 1: Este ejemplo demuestra la implementación de Primer CSS Link Colors.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Link Colors </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 Colors </h3> <br> <a href="#" class="link-mktg text-bold f2-mktg color-fg-danger"> This is link </a> </div> </body> </html>
Producción:
Primer CSS Enlace Colores
Ejemplo 2: Este ejemplo demuestra la implementación de Primer CSS Link Colors.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Link Colors </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 Colors </h3> <br> <a href="#" class="link-mktg text-bold f2-mktg color-fg-danger"> <svg class="octicon" viewBox="0 0 14 16" width="24" height="24"> <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"> </path> </svg> This is link 1 </a> <br> <a href="#" class="link-mktg text-bold f2-mktg color-fg-muted"> <svg class="octicon" viewBox="0 0 16 16" width="24" height="24" > <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> This is link 2 </a> </div> </body> </html>
Producción;
Primer CSS Enlace Colores
Referencia: https://primer.style/css/components/marketing-links#link-colors
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