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 anidados de Primer CSS. Los enlaces anidados CSS de Primer se utilizan solo cuando se va a diseñar una parte del enlace.
Primera clase de enlace anidado CSS utilizada:
- Enlace: esta clase se utiliza para diseñar solo una parte del enlace. Están anidados dentro de un elemento <a> en la parte que se va a diseñar. Hace que esa parte parezca azul.
Sintaxis:
<a class="color-fg-default no-underline" href="#">
... <span class="Link">...</span>
</a>
Ejemplo 1: El siguiente ejemplo demuestra el uso de Primer CSS Nested Link.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Nested Links</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 Nested Links</h3> <h2> <a class="no-underline" href="#url" style="color: black;"> A nested <span class="Link">Link</span> </a> </h2> </body> </html>
Producción:
Primer enlace anidado CSS
Ejemplo 2: Este ejemplo muestra que también podemos usar enlaces anidados con etiquetas de encabezado.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Nested Links</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 Nested Links</h3> <h2> <a class="no-underline" href="#" style="color: black;"> A nested Link<h2 class="Link">GeeksforGeeks</h2> </a> </h2> </body> </html>
Producción:
Primer enlace anidado CSS
Referencia: https://primer.style/css/components/links#nested-link
Publicación traducida automáticamente
Artículo escrito por nikitamehrotra99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA