¿Cómo crear viñetas usando elementos <li>?

Sabemos que, ya sea una lista ordenada o una lista desordenada, vienen con una numeración.

Puede ser:

Balas
Cuadrícula
Decimal
romano etc

Hay numerosas opciones que podemos usar, pero surge la pregunta ¿de qué propiedad depende esto?

En CSS, para etiquetas como <ol> y <ul>, hay una propiedad llamada list-style-type.

Enfoque: la propiedad de tipo de estilo de lista determina si las viñetas, los cuadrados, los decimales, etc. vienen con elementos li. Para cambiar o entender cómo impacta el HTML es usar CSS apuntando al selector <ul> o <ol>.

Sintaxis: CSS dirigido a elementos <li>:

ol {
    list-style-type: decimal
}
ul {
    list-style-type: disc
}

Entendamos con ejemplos:

El tipo de estilo de lista predeterminado para la lista ordenada es Decimal y el desordenado es Disco. Como se desprende del código anterior.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content=
          "width=device-width">
  <title>Lists</title>
</head>
<body>
  <p>Ordered List:</p>
  <ol>
      <li>Eggs</li>
      <li>Bacon</li>
      <li>Leeks</li>
  </ol>
  <p>Unordered List:</p>
  <ul>
      <li>Coriander</li>
      <li>Basil</li>
      <li>Onion</li>
  </ul>
</body>
</html>

Producción:

Con el estilo predeterminado, la etiqueta <ol> viene con Decimal y <ul> viene con Disc/Bullets como se define en CSS arriba.

A partir de aquí entendemos cómo las viñetas llegan a los elementos <li>, pero también podemos cambiarlas por otra cosa.

Ahora que sabemos de dónde vienen las viñetas en los elementos de la lista, podemos cambiarlo en consecuencia. Configurémoslo en Números romanos en Lista ordenada y Cuadrado en Lista desordenada.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content=
        "width=device-width">
  <title>Lists</title>
  
  <style>
    ol{
      list-style-type: upper-roman
    }
    ul{
      list-style-type: square
    }
</style>
</head>
  
<body>
  <p>Ordered List:</p>
  <ol>
      <li>Eggs</li>
      <li>Bacon</li>
      <li>Leeks</li>
  </ol>
  <p>Unordered List:</p>
  <ul>
      <li>Coriander</li>
      <li>Basil</li>
      <li>Onion</li>
  </ul>
</body>
</html>

Producción:

Aquí podemos ver claramente que las viñetas/disco se reemplazan con cuadrados y los decimales con números romanos.

Código completo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content
         ="width=device-width">
  <title>Lists</title>
</head>
  
<body>
  <p>Ordered List:</p>
  <ol>
      <li>Eggs</li>
      <li>Bacon</li>
      <li>Leeks</li>
  </ol>
  <p>Unordered List:</p>
  <ul>
      <li>Coriander</li>
      <li>Basil</li>
      <li>Onion</li>
  </ul>
  <p>Ordered List:</p>
  <ol style="list-style-type:
            upper-roman;">
    <li>Eggs</li>
    <li>Bacon</li>
    <li>Leeks</li>
  </ol>
  <p>Unordered List:</p>
  <ul style="list-style-type:
                  square;">
    <li>Coriander</li>
    <li>Basil</li>
    <li>Onion</li>
  </ul>
</body>
</html>                    

Producción:

Using both Default and Custom Inline CSS

Uso de CSS en línea predeterminado y personalizado

Del mismo modo, podemos cambiar el tipo de estilo de lista a numerosos tipos:

alfa superior
bajo-alfa
ninguna
circulo

y muchos más….

Publicación traducida automáticamente

Artículo escrito por imarchit19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta