Primer CSS es un marco CSS gratuito de código abierto que se basa en un sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de GitHub. Crea 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 un modelo altamente reutilizable.
En este artículo, aprenderemos sobre el componente de encabezado de Primer CSS. Uno de esos componentes de Primer CSS es el componente de encabezado. El componente de encabezado, como sugiere el nombre, nos ayuda a crear un encabezado para nuestro sitio web. Ahora, ¿ qué es un encabezado? Un encabezado es un componente que tiene todos los elementos alineados verticalmente. En Primer CSS, podemos crear un encabezado agregando la clase «.header» al elemento, y también podemos crear los elementos agregando la clase «.header-item» al elemento.
Componentes básicos del encabezado CSS:
- Encabezado: el encabezado se agrega al contenedor principal del elemento de encabezado. Envuelve todos los elementos que se alinearán verticalmente y le da al encabezado un fondo negro.
- Elemento de encabezado: el elemento de encabezado se agrega a todos los componentes secundarios dentro del encabezado. Esto hace que los elementos del encabezado se alineen verticalmente entre sí y también les da un margen predeterminado para que se vean hermosos.
- Header-item–full: la clase Header-item–full, cuando se agrega a un elemento en particular, lo estira para ocupar todo el espacio disponible y empuja todos los elementos restantes hacia el lado derecho.
- Enlace de encabezado : el enlace de encabezado se agrega a las etiquetas de anclaje dentro del encabezado. Hace que el texto del enlace sea blanco y en negrita y les da una opacidad del 70% cuando se desplazan sobre ellos.
Sintaxis:
<div class="Header">
<div class="Header-item">
...
</div>
<div class="Header-item">
...
</div>
...
</div>
Ejemplo 1: Hemos creado un encabezado simple con texto y campos de entrada.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Toast animation in </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body> <div class="Header"> <!-- Text item --> <div class="Header-item"> GeeksforGeeks </div> <div class="Header-item"> Articles </div> <div class="Header-item"> Practice QS </div> <!-- Form item --> <div class="Header-item"> <input class="form-control Header-input" type="text"/> </div> <!-- Image item --> <div class="Header-item"> <img class="avatar" height="20" alt="@octocat" src="https://github.com/octocat.png" width="20"> </div> </div> <div> <h2>GeeksforGeeks</h2> <h3>Primer CSS Header </h3> </div> </body> </html>
Producción:
Ejemplo 2: Hemos creado un encabezado con hipervínculos a los elementos.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Toast animation in </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body> <div class="Header"> <!-- Text item --> <div class="Header-item"> <a href="#" class="Header-link"> GeeksforGeeks </a> </div> <div class="Header-item"> <a href="/articles.html" class="Header-link"> Articles </a> </div> <div class="Header-item"> <a href="/DSA.html" class="Header-link"> DSA Q/s </a> </div> <!-- Form item --> <div class="Header-item--full"> <input class="form-control Header-input" type="text"/> </div> <!-- Image item --> <div class="Header-item"> <img class="avatar" height="20" alt="@octocat" src="https://github.com/octocat.png" width="20"> </div> </div> <div> <h2>GeeksforGeeks</h2> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/header
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA