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. Es un sistema que nos ayuda a construir experiencias de usuario consistentes de manera eficiente con suficiente flexibilidad. Este enfoque sistemático garantiza que nuestros estilos sean coherentes e interoperables entre sí. Cuenta con una escala de espaciado altamente componible, tipografía personalizable y colores significativos. Es altamente reutilizable y flexible y se crea con el sistema de diseño de GitHub.
Un borde es un componente que se utiliza para crear bordes de varias formas, tamaños y estilos. El borde más básico y simple que nos proporciona Primer CSS es el borde predeterminado . El borde predeterminado tiene una forma sólida, con un tamaño de 1 px y con un color gris predeterminado.
Clase de borde predeterminada de Primer CSS:
- borde: esta clase se utiliza para crear un borde predeterminado.
Sintaxis:
<div class="border">
...
</div>
Ejemplo 1: El siguiente ejemplo demostrará los bordes predeterminados en Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Default Border </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-left"> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3> Primer CSS Default Border </h3> </div> <br> <div class="border"> <!--Default Border--> This Is A Default Border </div> <div class="border"> This Is Another Default Border </div> <div class="border"> This Is A Default Border Again </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demostrará la diferencia entre un texto sin ningún borde y un texto con un borde predeterminado en Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Default Border </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-left"> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3> Primer CSS Default Border </h3> </div> <br> <div class="not_border"> This Is Without A Border </div> <div class="border"> <!--Default Border--> This Is A Default Border </div> <div class="not_border"> This Is Without A Border Again </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/borders#default-border
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA