Listas CSS

list-style-type

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

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 lista desordenada.

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

• Para 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. 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