Primer enlace principal de CSS

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 primarios de Primer CSS. Primer CSS Primary Links se usa para cambiar el color del enlace a azul solo cuando se desplaza sobre él. 

Clase de enlace principal de Primer CSS:

  • Enlace–primario: esta clase se usa para cambiar el color del enlace a azul solo cuando se desplaza sobre él. 

Sintaxis

<a class="Link--primary" href="#">
     ...
</a>

Ejemplo 1: El siguiente ejemplo demuestra el uso del enlace principal de Primer CSS.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Links Primary</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 Primary</h3>
  
    To go to GeeksforGeeks
    <a href="https://www.geeksforgeeks.org" 
        class="Link--primary">
        Click Me
    </a>
</body>
  
</html>

Producción:

 

Ejemplo 2: El siguiente ejemplo demuestra el uso del enlace principal de Primer CSS debajo de la etiqueta del encabezado.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Links Primary</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 Primary</h3>
    <h2>To go to GeeksforGeeks
        <a href="https://www.geeksforgeeks.org" 
            class="Link--primary">
            Click Me
        </a>
    </h2>
</body>
  
</html>

Producción:

 

Referencias: https://primer.style/css/components/links#primary-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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *