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 Box se utiliza para mostrar el contenido en el cuadro de esquina redondeada simple. Primer CSS Blue Box Header Theme se usa para crear el encabezado con un borde azul y un fondo azul usando la clase Box-header–blue . En este artículo, discutiremos el tema de encabezado de caja azul de Primer CSS.
Primer CSS Clase de tema de encabezado de caja azul:
- Box-header–blue: esta clase se utiliza para cambiar el color del borde del encabezado y el color de fondo a azul.
Sintaxis:
<div class="Box">
<div class="Box-header Box-header--blue">
...
</div>
</div>
Ejemplo 1: El siguiente código demuestra el tema de encabezado de caja azul de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Blue Box Header Theme </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 Blue Box Header Theme </h3> </div><br><br> <div class="Box"> <div class="Box-header Box-header--blue"> <h4 class="Box-title"> GeeksforGeeks Blue header </h4> </div> </div> </body> </html>
Producción:
Primer CSS Tema de encabezado de caja azul
Ejemplo 2: El siguiente código demuestra el tema de encabezado de caja azul de Primer CSS con icono y cuerpo de caja.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Blue Box Header Theme </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 Blue Box Header Theme </h3> </div> <br> <br> <div class="Box"> <div class="Box-header Box-header--blue"> <svg class="octicon" viewBox="0 0 14 16" width="18" height="20" > <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"> </path> </svg> <span> GeeksforGeeks Blue header </span> </div> <div class="Box-body"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" > </div> </div> </body> </html>
Producción:
Primer CSS Tema de encabezado de caja azul
Referencia: https://primer.style/css/components/box#blue-box-header-theme
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