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
