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.
  |
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 7 y anteriores no eran capaces de representar lower-latin ni upper-latin, 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 e Internet Explorer sólo ponen 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 -noviembre de 2009- en fase de borrador), aunque sí en el módulo CSS3: listas (actualmente -noviembre de 2009- en fase de borrador). Amaya muestra un mensaje de error cuando se utiliza alguno de estos estilos.
Volver al principio de la página
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");
}
|
|
Volver al principio de la página
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;
}
|
|
Volver al principio de la página
La propiedad marker-offset debería establecer la distancia del marcador al elemento de la lista. Esta propiedad afectaría 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, ni probablemente lo hagan nunca, ya que ni la propiedad marker-offset ni el valor marker de la propiedad display están incluidas en la recomendación CSS 2.1 (actualmente -noviembre de 2010- en fase de borrador) ni en la futura recomendación CSS3 Listas, actualmente (noviembre de 2010) en elaboración. La recomendación CSS3 Listas introducirá el pseudo-elemento ::marker para establecer el estilo del marcador.
Volver al principio de la página
Autor: Bartolomé Sintes Marco