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, discutiremos Primer CSS Header.
El encabezado se puede agregar usando la clase SelectMenu-header al elemento superior para mostrar el título claro de la lista del menú.
Primera clase de encabezado CSS:
- SelectMenu-header: esta clase se utiliza para agregar un elemento de encabezado adicional a la lista del menú.
Sintaxis:
<header class="SelectMenu-header">
<h3 class="SelectMenu-title">
.........
</h3>
</header>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de Primer CSS Header.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Header</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <div class="pl-12" > <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Header</h3> <details class="details-reset details-overlay mt-3" open> <summary class="btn" aria-haspopup="true"> Choose any Course </summary> <div class="SelectMenu"> <div class="SelectMenu-modal"> <header class="SelectMenu-header"> <h3 class="SelectMenu-title"> GeeksforGeeks Courses </h3> </header> <div class="SelectMenu-list"> <button class="SelectMenu-item" role="menuitem"> DSA Self-Paced </button> <button class="SelectMenu-item" role="menuitem"> Complete Interview Preparation </button> <button class="SelectMenu-item" role="menuitem"> C++ STL </button> <button class="SelectMenu-item" role="menuitem"> Fork Python </button> </div> </div> </div> </details> </div> </body> </html>
Producción:
Primer encabezado CSS
Ejemplo 2: Este es otro ejemplo que demuestra el uso de Primer CSS Header.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Header</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"/> </head> <body> <div class="pl-12" > <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Header</h3> <details class="details-reset details-overlay mt-3" open> <summary class="btn" aria-haspopup="true"> Choose any Events </summary> <div class="SelectMenu"> <div class="SelectMenu-modal"> <header class="SelectMenu-header"> <h3 class="SelectMenu-title"> GeeksforGeeks events </h3> </header> <div class="SelectMenu-list"> <button class="SelectMenu-item" role="menuitem"> Interview Series #46 </button> <button class="SelectMenu-item" role="menuitem"> Job-A-Thon 8: Hiring Challenge </button> <button class="SelectMenu-item" role="menuitem"> Get Hired with GeeksforGeeks at SuperK </button> <button class="SelectMenu-item" role="menuitem"> Bi-Wizard School Coding Tournament 4.0 </button> </div> </div> </div> </details> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/select-menu#header
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA