CSS: propiedad de tipo de estilo de lista

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: propiedad de tipo de estilo de lista

Este tutorial de CSS explica cómo usar una propiedad de CSS llamada Tipo de estilo de lista Con sintaxis y ejemplos.

describir

La propiedad CSS list-style-type define la apariencia de los elementos de la lista.

sintaxis

La sintaxis de la propiedad CSS de tipo de estilo de lista es:

list-style-type: value;

parámetro o parámetro

valor

La apariencia del elemento del elemento de la lista. Puede ser uno de los siguientes:

valor describir
CD Círculo sólido. Esta es la configuración predeterminada.
ul {tipo de estilo de lista: disco;}
circulo circulo hueco
ul {tipo de estilo de lista: círculo;}
cuadrado cuadrado sólido
ul {tipo de estilo de lista: cuadrado;}
decimal Números decimales que comienzan con 1
ol { tipo de estilo de lista: decimal; }
ceros iniciales para decimales Números decimales que comienzan con 1, los números menores de 10 se completan con 0
ol { tipo de estilo de lista: ceros iniciales decimales; }
bajo romano números romanos en minúsculas
ol {tipo de estilo de lista: pequeño romano;}
roma alta números romanos en mayúsculas
ol { tipo de estilo de lista: mayúscula romana; }
bajo griego griego en minúsculas
ol { tipo de estilo de lista: bajo griego; }
bajo alfa letras minúsculas ASCII
ol {tipo de estilo de lista: alfa bajo;}
latín bajo Letras ASCII en minúsculas (no compatibles con IE7)
ol { tipo de estilo de lista: latín inferior; }
alfa superior letras mayúsculas ASCII
ol { tipo de estilo de lista: alfa superior; }
latín superior Letras ASCII en mayúsculas (no compatible con IE7)
ol { tipo de estilo de lista: latín superior; }
armenio número armenio
ol {tipo de estilo de lista: armenio;}
georgiano número georgia
ol {Tipo de estilo de lista: Georgia; }
no cualquiera No aparecerá ningún número o símbolo antes de cada elemento de la lista.
ol { tipo de estilo de lista: ninguno; }
ul { tipo de estilo de lista: ninguno; }
heredar El elemento heredará el tipo de estilo de lista de su elemento principal
ol { tipo de estilo de lista: herencia; }
ul {tipo de estilo de lista: herencia;}

notas

  • El atributo de tipo de estilo de lista se puede aplicar a
      ,

        o

      • Etiqueta.
      • list-style-type se aplica a los elementos con display: list-item.
      • IE7 no es compatible con latín inferior y superior, pero utiliza alfa inferior y alfa superior.
      • Después de que se enumeran 26 elementos, los estilos de letra como alfa inferior o alfa superior generarán números indefinidos.
      • Consulte también las propiedades list-style, list-style-image y list-style-position.

      Compatibilidad del navegador

      La propiedad CSS list-style-type tiene soporte básico para los siguientes navegadores:

      • Aleación de cromo
      • androide
      • Firefox (Geco)
      • Firefox móvil (Geco)
      • Navegador de Internet (IE)
      • es decir, móvil
      • ópera
      • Ópera Móvil
      • Safari (WebKit)
      • Safari para móvil

      ejemplo

      Discutiremos la propiedad de tipo de estilo de lista a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.

      Usar una lista ordenada

      Veamos un ejemplo de tipo de estilo de lista CSS donde aplicamos tipo de estilo de lista a una lista ordenada.

      HTML se ve así:

      <ol>
        <li>TechOnTheNet.com</li>
        <li>CheckYourMath.com</li>
        <li>BigActivities.com</li>
      </ol>

      CSS se ve así:

      ol { list-style-type: upper-roman; }

      La lista ordenada se ve así:

      En este ejemplo de estilo de lista CSS, elegimos

        Cada elemento de la lista en el marcado está precedido por un número romano en mayúsculas.

        Usar una lista desordenada

        A continuación, veamos un ejemplo de tipo de estilo de lista CSS en el que aplicamos el tipo de estilo de lista a una lista desordenada.

        HTML se ve así:

        <ul>
          <li>TechOnTheNet.com</li>
          <li>CheckYourMath.com</li>
          <li>BigActivities.com</li>
        </ul>

        CSS se ve así:

        ul { list-style-type: none; }

        La lista desordenada se ve así:

        En este ejemplo de tipo de estilo de lista CSS, comenzamos con

          El disco se quita delante de cada elemento de la lista en el marcado. Los elementos de la lista seguirán sangrándose (a menos que se anulen con CSS), pero no aparecerá nada antes de cada elemento de la lista.

          con elementos de lista

          Veamos un ejemplo de tipo de estilo de lista CSS donde aplicamos el tipo de estilo de lista a los elementos de la lista.

          HTML se ve así:

          <ul>
            <li>TechOnTheNet.com</li>
            <li>CheckYourMath.com</li>
            <li>BigActivities.com</li>
          </ul>

          CSS se ve así:

          li { list-style-type: square; }

          En este ejemplo de tipo de estilo de lista CSS, elegimos

        • Aparecen cuadrados rellenos (en lugar de discos de lista desordenados) delante del elemento.

          Esto también hará que los elementos de la lista aparezcan de la siguiente manera (independientemente de si el elemento de la lista es parte de una lista ordenada o desordenada):