Primer CSS es un framework CSS gratuito y de código abierto. Se basa en los sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Creado con el sistema de diseño de GitHub, es altamente reutilizable y flexible.
Primer CSS Links se utilizan para decorar enlaces en la página web. Primer CSS tiene muchas personalizaciones para los enlaces. Los enlaces generalmente tienen CSS predeterminado, pero se pueden personalizar fácilmente con las clases de enlace Primer CSS.
Primer CSS Enlaces Tipos y clases:
- Enlace predeterminado: utiliza la clase Enlace y muestra un texto de color azul.
- Enlace principal : utiliza la clase Enlace–primario y muestra texto de color azul con un subrayado al pasar el cursor sobre el texto.
- Enlace secundario : utiliza la clase Enlace secundario y muestra un texto de color azul sutil con un subrayado sobre el texto.
- Enlace silenciado : utiliza la clase Enlace-silenciado y muestra un texto de color azul sin subrayar sobre el texto.
- Alternativa de enlace silenciado: utiliza la clase sin subrayar con la clase Enlace–primario y muestra un texto de color azul sin un subrayado sobre el texto.
- On Hover Link : utiliza la clase Link–onHover para colorear parcialmente el texto con un subrayado al pasar el mouse.
- Enlace anidado : el enlace se puede anidar con la clase Enlace dentro de otra clase con alguna otra clase de enlace.
Sintaxis : Cree un texto con un enlace de la siguiente manera:
<a href="#" class="Link">...</a>
Ejemplo 1 : En el siguiente ejemplo, tenemos algunos párrafos HTML con enlaces dentro de ellos.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding:1em;"> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <strong>Primer CSS Links</strong> <br /><br /> <p> Tutorials for Data Structures can be found <a href= "https://www.geeksforgeeks.org/data-structures/" class="Link"> here </a> </p> <p> Tutorials for Algorithms can be found <a href= "https://www.geeksforgeeks.org/introduction-to-algorithms/" class="Link"> here </a> </p> </center> </div> </body> </html>
Producción:
Ejemplo 2 : en el siguiente ejemplo, tenemos enlaces de diferentes tipos como predeterminados, primarios, secundarios, silenciados, etc.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding:1em;"> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <strong>Primer CSS Links</strong> <br /><br /> <ul> <li><a class="Link" href="#"> Default Link </a></li> <li><a class="Link--primary" href="#"> Primary Link </a></li> <li><a class="Link--secondary" href="#"> Secondary Link </a></li> <li><a class="Link--muted" href="#"> Muted Link </a></li> <li><a class="Link--primary Link--onHover" href="#"> onHover Link </a></li> </ul> </center> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/links
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA