LISTAS CSS

list-style-type

La propiedad list-style-type especifica la apariencia del marcador del elemento de lista.
[Sintaxis]

list-style-type: disc | circle | square | decimal | decimal-leading-zero |

lower-roman | upper-roman | lower-greek | lower-latin | upper-latin |

armenian | georgian | lower-alpha | upper-alpha | none

Para la lista desordenada.

•  disc: ●
•  circle: ○
•  square: ■

    Para la lista ordenada.

•         dicimal: 1, 2, 3, ...
•         decimal-leading-zero: 01, 02, 03, ...
•         lower-roman: i, ii, iii, ...
•         upper-roman: I, II, III, ...
•         lower-greek: α, β, γ, ...
•         lower-latin: a, b, c, ...
•         upper-latin: A, B, C, ...
•         armenian: 1, 2, 3, ...
•         georgian: an, ban, gan, ...
•         lower-alpha: a, b, c, ...
•         upper-alpha: A, B, C, ...

Ejemplo

[style.css]

ul{
  list-style-type: square;
}
ol{
  list-style-type: lower-alpha;
}

[index.html]

<ul>
  <li>list item1</li>
  <li>list item2</li>
  <li>list item3</li>
</ul>
<ol>
  <li>list item1</li>
  <li>list item2</li>
  <li>list item3</li>
</ol>

 

list-style-image

La propiedad list-style-image establece la imagen que se usará como marcador de elemento de lista.

[Sintaxis]

list-style-image: <uri> | none

• uri

La notación funcional utilizada para designar los URI en los valores de las propiedades es "url ()": 

list-style-image: url(http://www.example.com/image.png);

Ejemplo

[style.css]

ul{
  list-style-image: url(images/list.gif);
}

[index.html]

<ul>
  <li>list item1</li>
  <li>list item2</li>
  <li>list item3</li>
</ul>

 

Ver también 12.5 Lists.

Reto

1. Quita el marcador de la navegación lateral. Porque aprenderás la decoración de la lista. Es decir, el marcador de lista no es necesario.

[style.css]

nav ul{
  list-style-type: none;
}

 

Fuente: www.w3.org.