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, aprenderemos sobre los estilos de lista de tipografía de Primer CSS . Primer CSS Typography List Styles elimina viñetas de una lista desordenada o números de una lista ordenada.
Clase de estilo de lista de tipografía:
- list-style-none: esta clase se usa para eliminar viñetas de una lista desordenada o números de una lista ordenada.
Sintaxis:
<list-type class="list-style-none"> <li>List-Item</li> </list-type>
- El tipo de lista se puede ordenar o desordenar.
Aprenderemos más sobre esto usando ejemplos.
Ejemplo 1: en este ejemplo, aprenderemos sobre el estilo de lista en una lista ordenada.
HTML
<!DOCTYPE html> <html> <head> <title>Flash</title> <meta name="viewport" content="width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Typography List Styles</h3> <ol class="list-style-none"> <li>Geeks</li> <li>For</li> <li>Geeks</li> </ol> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, aprenderemos sobre el estilo de lista en una lista desordenada.
HTML
<!DOCTYPE html> <html> <head> <title>Flash</title> <meta name="viewport" content="width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Typography List Styles</h3> <ul class="list-style-none"> <li>Geeks</li> <li>For</li> <li>Geeks</li> </ul> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/typography#list-styles
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA