Primer CSS es un marco CSS gratuito de código abierto que se crea con el sistema de diseño de GitHub para brindar soporte a la amplia gama 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 asegura que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientados a objetos, CSS funcional y arquitectura BEM. Es un modelo altamente reutilizable.
En este artículo, aprenderemos los principios HTML de Primer CSS.
Formateo general:
- Use sangría de dos espacios.
- Nunca use múltiples etiquetas <br> y los párrafos de texto se colocan en etiquetas HTML <p> .
- Use las etiquetas <ol> , <ul> , <dl> para los elementos de la lista en lugar de usar las etiquetas <div> o <p> .
- La radio y las casillas de verificación deben tener una etiqueta <label> .
- Siempre ponga comillas alrededor de los atributos para mejorar la legibilidad.
- Evite escribir comentarios de etiquetas de cierre.
- Evite las barras diagonales finales en los elementos de cierre automático <br> , <hr> , <img> y <input> .
Atributos booleanos:
- No establezca atributos que no requieran que se establezca un valor, como marcado
Marcado esbelto:
- Evite los elementos principales superfluos al escribir HTML. Por ejemplo , etiqueta <span> alrededor del elemento <img> .
Formas:
- Aplique listas de opciones o casillas de verificación en lugar de seleccionar menús.
- No es necesario usar para el atributo, en lugar de envolver las entradas de radio y casilla de verificación y su texto en <label> .
- Use botones principales para el botón type=”submit” y botones normales para type=”button” .
Mesas:
- Utilice las etiquetas <thead> , <tfoot> , <tbody> y <th> (y el atributo de alcance) cuando corresponda.
Sintaxis:
<element class="class-name" >
...
</element>
Ejemplo 1: el siguiente código demuestra algunos de los principios generales de formato de HTML.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS HTML</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h2> Primer CSS HTML</h2> <p class="line-note m-0"> This is <b>paragraph</b> with no multiple br tags. special text paragraph </p> <b>No div tags are used for list items</b> <ol> <li>list item 1</li> <li>list item 2</li> </ol> <b> Checked input</b> <input type="checkbox" value="1"><br /> <b>Select input options</b> <select> <option value="1" selected> first option </option> <option value="2"> second option </option> </select> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra algunos de los elementos del formulario HTML siguiendo los principios.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS HTML</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h2> Primer CSS HTML</h2> <b> Lean on radio and checkbox instead of select menus </b> <form> <input type="radio" id="Netflix" name="brand" value="Netflix"> <label for="Netflix">Netflix</label> <input type="radio" id="amazon" name="brand" value="Amazon"> <label for="Amazon">Amazon</label> <br> <input type="checkbox" name="check" id="GFG" value="1" checked> Checked by default <br> <input type="checkbox" name="check" value="2"> Not checked by default </form> </center> </body> </html>
Producción:
Referencia: https://primer.style/css/principles/html/
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA