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. En este artículo, aprenderemos sobre los enlaces secundarios de Primer CSS.
Primer CSS Secondary Links se utiliza para realizar 2 tareas. En primer lugar, proporciona un color grisáceo al texto (cuando no se está desplazando). En segundo lugar, cambiará el color del texto a azul cuando pases el cursor sobre él.
Primera clase de enlace secundario CSS utilizada:
- Enlace secundario: proporciona un color grisáceo al texto (cuando no se desplaza) y cambia el color del texto a azul cuando se desplaza sobre él.
Sintaxis:
<a class="Link--secondary" href="#">
...
</a>
Ejemplo 1: En este ejemplo, aprenderemos sobre Link–secundario. Observe el color del enlace también antes de pasar el mouse también.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Links Secondary</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Links Secondary</h3> <p style="color:red"> Please notice Link Color also when not hovering </p> <p> To go to GeeksforGeeks <a href="https://www.geeksforgeeks.org" class="Link--secondary"> Click Me </a> </p> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, usaremos Enlace secundario debajo de la etiqueta de encabezado.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Links Secondary</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Links Secondary</h3> <p style="color:red"> Please notice Link Color also when not hovering. </p> <h2>To go to GeeksforGeeks <a href="https://www.geeksforgeeks.org" class="Link--secondary">Click Me</a> </h2> </body> </html>
Producción:
Referencia: https://primer.style/css/components/links#secondary-link
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA