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 Theme se usa para crear el cuadro con un borde azul y un encabezado azul usando la clase Box–blue . En este artículo, discutiremos el tema Primer CSS Blue Box.
Primer CSS Blue Box Tema Clase:
- Box–blue: esta clase se utiliza para crear un cuadro con un borde azul y un encabezado azul.
Sintaxis:
<div class="Box Box--blue"> ... </div>
Ejemplo 1: El siguiente código demuestra el tema de la caja azul de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Blue Box 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 Theme </h3> </div> <br> <br> <div class="Box Box--blue"> <div class="Box-header"> GeeksforGeeks Blue Box Theme </div> </div> </body> </html>
Producción:
Primer CSS Tema de caja azul
Ejemplo 2: el siguiente código demuestra el tema de caja azul de Primer CSS con contenido de encabezado y cuerpo.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Blue Box 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 Theme </h3> </div> <br> <br> <div class="Box Box--blue"> <div class="Box-header"> GeeksforGeeks Blue Box Theme </div> <div class="Box-row"> GFG Blue box </div> <div class="Box-row"> GFG Blue box </div> <div class="Box-row"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" > </div> </div> </body> </html>
Producción:
Primer CSS Tema de caja azul
Referencia: https://primer.style/css/components/box#blue-box-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