ListasListasEn esta página aprenderás las propiedades que se pueden aplicar a una lista:
La propiedad compuesta list-style permite establecer en una sola propiedad los valores de las propiedades list-style-type, list-style-image y list-style-position.
El marcador de las listas ordenadas (<ol>) o no ordenadas (<ul>) se modifica con la propiedad list-style-type. Hay muchos tipos de marcadores predefinidos, aunque algunos navegadores no muestran todos los estilos existentes. Estos son algunos de ellos:
  |
ul {
list-style-type: none;
}
|
|
| |
ul {
list-style-type: disc;
}
|
|
| |
ul {
list-style-type: circle;
}
|
|
| |
ul {
list-style-type: square;
}
|
|
| |
ul {
list-style-type: decimal;
}
|
|
 |
ul {
list-style-type: decimal-leading-zero;
}
|
|
| |
ul {
list-style-type: lower-roman;
}
|
|
| |
ul {
list-style-type: upper-roman;
}
|
|
| |
ul {
list-style-type: lower-greek;
}
|
|
| |
ul {
list-style-type: lower-alpha;
}
|
|
| |
ul {
list-style-type: lower-latin;
}
|
|
| |
ul {
list-style-type: upper-alpha;
}
|
|
| |
ul {
list-style-type: upper-latin;
}
|
|
| |
ul {
list-style-type: hebrew;
}
|
|
| |
ul {
list-style-type: georgian;
}
|
|
| |
ul {
list-style-type: armenian;
}
|
|
| |
ul {
list-style-type: cjk-ideographic;
}
|
|
| |
ul {
list-style-type: hiragana;
}
|
|
| |
ul {
list-style-type: katakana;
}
|
|
| |
ul {
list-style-type: hiragana-iroha;
}
|
|
| |
ul {
list-style-type: katakana-iroha;
}
|
|
Las listas ordenadas y no ordenadas son equivalentes. Los navegadores muestran números en las listas ordenadas y símbolos en las listas no ordenadas, pero desde la hoja de estilo se puede invertir la presentación:
| |
<ul>
<li>Esto es un punto de una lista no ordenada</li>
<li>Esto es otro punto de la misma lista no ordenada
<ol>
<li>Esto es un punto de una sublista ordenada</li>
<li>Esto es otro punto de la misma sublista ordenada</li>
</ol>
</li>
</ul>
|
|
| |
ul {
list-style-type: decimal;
}
|
|
Los estilos lower-latin y lower-alpha son los mismos, así como los estilos upper-latin y upper-alpha. Como Internet Explorer no es capaz de representar lower-latin ni upper-latin (Firefox sí lo hace), es mejor utilizar sólo lower-alpha y upper-alpha.
Firefox es capaz de representar todos los estilos, pero en algunos casos es necesario tener instaladas las fuentes correspondientes. Si no están instaladas las fuentes, Firefox muestra un cuadro con el código Unicode del carácter no mostrado (en Firefox 2 y anteriores se mostraba un signo de interrogación (?)). Internet Explorer muestra el punto de las listas no ordenadas cuando no es capaz de representar el estilo.
La recomendación CSS 2 no especifica qué debe hacerse cuando se utiliza un estilo alfabético y la lista tiene más elementos que el alfabeto correspondiente. Tanto Firefox como Internet Explorer hacen como en las antiguas matrículas de los coches, es decir, después de Z ponen AA, como puede comprobarse en esta página de ejemplo de lista larga con upper-alpha.
En el estilo decimal-leading-zero, Firefox sólo pone un cero delante de los primeros nueve elementos (los que llevan los números del 1 al 9), aunque la lista tenga más de 100 elementos, como puede comprobarse en esta página de ejemplo de lista larga con decimal-leading-zero.
Los estilos hebrew, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha no aparecen en la recomendación CSS 2.1 (actualmente -diciembre de 2008- en fase de borrador), aunque sí en el módulo CSS3: listas (actualmente -diciembre de 2008- en fase de borrador). Amaya muestra un mensaje de error cuando se utiliza alguno de estos estilos.
Los navegadores suelen utilizar estilos de marcadores distintos para las sublistas no ordenadas, pero no en las listas ordenadas:
| |
|
|
| |
|
La propiedad list-style-image permite utilizar la imagen que se quiera como marcador de una lista. El único inconveniente es que el tamaño del marcador no cambia al cambiar desde el navegador el tamaño de la fuente.
| |
ul {
list-style-image: url("cruz7x7.png");
}
|
|
| |
ul {
list-style-image: url("smiley.png");
}
|
|
La propiedad list-style-position establece la posición del marcador con respecto al resto del elemento de la lista: dentro (inside) o fuera (outside). Firefox e Internet aplican por omisión el valor outside.
| |
ul {
}
|
|
| |
ul {
list-style-position: inside;
}
|
|
| |
ul {
list-style-position: outside;
}
|
|
La propiedad marker-offset establece la distancia del marcador al elemento de la lista. Esta propiedad afecta a los marcadores creados con los pseudo-elementos :before y :after.
 |
ul {
list-style-type: none;
}
|
|
Ni Firefox ni Internet Explorer son capaces de interpretar esta propiedad (Internet Explorer ni siquiera es capaz de mostrar el contenido generado con los pseudo-elementos :before y :after). Además, esta propiedad no está incluida en la recomendación CSS 2.1 (actualmente -diciembre de 2008- en fase de borrador).
Autor: Bartolomé Sintes Marco