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.
Primer CSS Header se usa para hacer un encabezado con elementos alineados verticalmente y espaciado horizontal. Primer CSS Header-Link se usa para crear el enlace del elemento de encabezado usando la clase Header-link . En este artículo, discutiremos el Primer CSS Header-Link.
Primer clase de enlace de encabezado CSS:
- Enlace de encabezado: esta clase se utiliza para crear el enlace del elemento de encabezado.
Sintaxis:
<div class="Header">
<div class="Header-item">
<a href="#" class="Header-link">
...
</a>
</div>
</div>
Ejemplo 1: El siguiente código demuestra el enlace de encabezado de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Header-Link </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Header-Link </h3> </div> <br> <br> <div class="Header"> <div class="Header-item"> <a href="#" class="Header-link"> GFG Link 1 </a> </div> <div class="Header-item"> <a href="#" class="Header-link"> GFG Link 2 </a> </div> </div> </body> </html>
Producción:
Primer enlace de encabezado CSS
Ejemplo 2: El siguiente código demuestra el enlace de encabezado de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Header-Link </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Header-Link </h3> </div><br><br> <div class="Header"> <div class="Header-item"> <a href="#" class="Header-link"> GFG Link 1 </a> </div> <div class="Header-item Header-item--full"> <a href="#" class="Header-link"> GFG Link 2 </a> </div> <div class="Header-item"> <a href="#" class="Header-link"> Logn In </a> </div> <div class="Header-item"> <a href="#" class="Header-link"> Sign Up </a> </div> </div> </body> </html>
Producción:
Primer enlace de encabezado CSS
Referencia: https://primer.style/css/components/header#header-link
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA