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. los navegadores 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, los navegadores 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, aunque sí en la futura recomendación CSS3: listas (actualmente -noviembre de 2011- 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). los navegadores 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;
}
|
|
los navegadores no 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 ni en la futura recomendación CSS3: listas, actualmente (noviembre de 2011) 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
Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Esta obra está bajo una licencia de Creative
Commons Reconocimiento-CompartirIgual 3.0 España.