Primer enlace secundario 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 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

Deja una respuesta

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