Primeros estilos de lista de tipografía CSS

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *