Se usa para definir todos los valores de las listas a la vez.

Alguno o todos los siguientes valores y en orden:

• list-style-type: Tipo de estilo de lista.
• list-style-position: Posición de estilo de lista.
• list-style-image: Imagen de estilo de lista.

Si falta uno de los valores, se utilizará el valor predeterminado para esa propiedad.

Valor por defecto: disc outside none

Sintaxis: list-style: list-style-type list-style-position list-style-image | initial | inherit;

Posibles valores: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | URL | none | inside | outside | hebrew | cjk-ideographic | hiragana | hiragana-iroha | katakana | katakana-iroha | inherit.

<div>
    <h2>Propiedad list-style: disc outside none</h2>
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
        <li>Elemento 4</li>
    </ul>
</div>

<style>
ul {
    list-style: 
        disc outside none
        circle
        disc
        square
        decimal
        decimal-leading-zero outside
        lower-latin inside
        lower-latin outside
        lower-roman
        upper-roman
        url(URL-IMAGEN)
        none
        outside circle url(URL-IMAGEN)
        hebrew
        cjk-ideographic
        hiragana
        katakana
     ;
}
</style>

Define la imagen que va a ser usada como marca de cada ítem.

Esta propiedad se aplica a todo elemento con "display: list-item".

Sintaxis: selector { list-style-image: valor; }

Posibles valores: URL | none | initial | inherit

Por defecto, los navegadores muestran unos pequeños círculos rellenos para cada elemento de las listas no ordenadas <ul> y una numeración decimal para los elementos de las listas ordenadas <ol> Utilizando la propiedad list-style-type es posible seleccionar otros marcadores entre una serie de marcadores predefinidos.

Afortunadamente, la propiedad list-style-type permite mostrar cualquier imagen como marcador de los elementos de cualquier lista. Para ello, sólo es necesario indicar la URL de la imagen que se quiere mostrar.

La imagen utilizada como marcador puede ser de cualquier formato reconocido por los navegadores (normalmente jpeg, gif o png) y puede ser de cualquier tamaño. No obstante, si se utiliza una imagen muy grande, los elementos de la lista se muestran demasiado separados entre sí.

Por otra parte, la principal limitación de la propiedad list-style-image es que no se puede modificar la posición en la que se muestra la imagen del marcador. Además, tampoco se pueden indicar de forma global diferentes imágenes para cada elemento de la lista, por lo que normalmente no se utiliza en las listas ordenadas <ol>

Emplear simultáneamente las propiedades list-style-type y list-style-image no sólo no es redundante, sino que es una buena práctica que protege el diseño de la página frente a los innumerables errores que pueden provocar que la imagen del marcador no se pueda descargar.

<div>
    <h2>Propiedad list-style-image: none</h2>
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
        <li>Elemento 4</li>
    </ul>
</div>

<style>
ul {
    list-style: lower-latin;
    list-style-image: 
        none
        url(img/escribir.png)
        url(img/lupa.png)
        url(img/medicion.png)
        url(img/nuevo.png)
        initial
     ;
}
</style>

Especifica la posición del marcador de los ítems con respecto a la caja de la lista. Especifique que los marcadores de elementos de lista deben aparecer dentro del flujo de contenido (resulta en una sangría adicional):

Esta propiedad se aplica a todo elemento con "display: list-item".

Sintaxis: selector { list-style-position: valor; }

Posibles valores:

• inside - Significa que las viñetas estarán dentro del elemento de la lista. Como es parte del elemento de la lista, será parte del texto y empujará el texto al principio.
• outside - Valor predeterminado, significa que las viñetas estarán fuera del elemento de la lista. El inicio de cada línea de un elemento de la lista se alineará verticalmente.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div>
    <h2>Propiedad list-style-position: outside</h2>
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
        <li>Elemento 4</li>
    </ul>
</div>

<style>
ul {
    list-style: lower-latin;
    list-style-position: 
    outside
    inside
    initial
     ;
}
li { outline: 1px solid black; }
</style>

Especifica el formato visual de la lista.

Esta propiedad se aplica a todo elemento con "display: list-item".

• Aplicar diferentes marcadores a los Ítems de una lista desordenada.
• Aplicar números decimales y números romanos en listas ordenadas.
• Aplicar letras, números y blancos para listas ordenadas.

Nota: Internet Explorer y Opera 12 y versiones anteriores no soportan los valores: cjk-ideográfico, hebreo, hiragana, hiragana-iroha, katakana y katakana-iroha.

Nota: IE8, y anteriores, solo soportan los valores de propiedad: decimal-leading-zero, lower-grego, latino-latino, latino superior, armenio, georgiano y heredar si se especifica un DOCTYPE.

Sintaxis: selector { list-style-type: valor; }

Posibles valores: armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | disc | georgian | hebrew | hiragana | hiragana-iroha | inherit | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | none | square | upper-alpha | upper-latin | upper-roman | initial

<div>
    <h2>Propiedad list-style-type: disc</h2>
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
        <li>Elemento 4</li>
    </ul>
</div>

<style>
ul {
    list-style-type: 
        disc
        armenian
        circle
        cjk-ideographic
        decimal
        decimal-leading-zero
        georgian
        hebrew
        hiragana
        hiragana-iroha
        katakana
        katakana-iroha
        lower-alpha
        lower-greek
        lower-latin
        lower-roman
        none
        square
        upper-alpha
        upper-latin
        upper-roman
        initial
     ;
}
</style>