Ediciones ENI Editorial | líder en informática
Las listas
Objetivo
En este capítulo vamos a ver todas las propiedades CSS que se aplican a las listas. Las listas de valores utilizan varias propiedades CSS:
-
list-style-type, que determina el estilo de las marcas de enumeración.
-
list-style-image, que permite utilizar una imagen en lugar de marcas de enumeración.
-
list-style-position, que sirve para indicar la posición de la marca de enumeración en relación con el texto.
Los estilos de marcas
La propiedad list-style-type le permite elegir qué tipo de marca de enumeración desea para sus listas: viñetas o números. Encontramos los mismos tipos que se ofrecen con las listas HTML <ul>.
Propiedad: list-style-type
Valor: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none
Valor inicial: disc
Se aplica a: elementos de tipo lista
Herencia: sí
Estos son los valores que puede usarse:
-
disc: inserta una viñeta en forma de topo (círculo lleno).
-
circle: inserta una viñeta en forma de circunferencia (círculo vacío).
-
square: inserta una viñeta cuadrada y llena.
-
decimal: una numeración con cifras arábigas: 1, 2, 3...
-
decimal-leading-zero: inserta una numeración con cifras arábigas, con el 0 como prefijo: 01, 02, 03...
-
lower-roman: inserta una numeración con cifras romanas minúsculas: i, ii, iii...
-
upper-roman: inserta una numeración con cifras romanas mayúsculas: I, II, III...
-
lower-alpha: inserta una numeración alfabética con minúsculas: a, b, c...
-
upper-alpha: inserta una numeración alfabética con mayúsculas: A, B, C...
-
none: no inserta ningún valor de enumeración.
Veamos un ejemplo sencillo (05_01.html), con una lista que utiliza...
Las marcas con imágenes
Es posible utilizar una imagen en lugar de las marcas de enumeración habituales. Para ello, use la propiedad list-style-image.
Propiedad: list-style-image
Valor: url | none
Valor inicial: none
Se aplica a: elementos de tipo lista
Herencia: sí
El valor url indica la ruta de acceso a la imagen que se usa como viñeta.
He aquí un ejemplo sencillo (05_02.html) con una marca en estrella. Observe que se puede usar tanto un elemento <ol> como <ul>.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Las imágenes de enumeración</title>
<meta charset="UTF-8" />
<style>
.estrella {
list-style-image: url(estrella.png);
}
</style>
</head>
<body>
<ol class="estrella">
<li>Manzanas</li>
<li>Peras</li>
<li>Melocotones</li>
</ol>
</body>
</html>
Este es el resultado obtenido:
La posición de las marcas
La propiedad list-style-position sirve para indicar si la marca de enumeración se encuentra «dentro» de la lista, cuando el texto está distribuido en varias líneas, o bien «fuera» de la lista.
Propiedad: list-style-position
Valor: inside | outside
Valor inicial: outside
Se aplica a: elementos de tipo lista
Herencia: sí
Estos son los dos valores posibles:
-
inside: la marca de enumeración se ubica dentro del espacio destinado a la lista.
-
outside: la marca de enumeración se ubica fuera del espacio destinado a la lista.
Veamos un ejemplo sencillo (05_03.html) en el que se propone una lista con la marca dentro y otra lista con la marca fuera.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Las posiciones de las marcas</title>
<meta charset="UTF-8" />
<style>
.estrella-fuera{
list-style-image:url(estrella.png);
list-style-position:outside;
}
.estrella-dentro {
list-style-image:url(estrella.png);
list-style-position: inside; ...La sintaxis corta
La propiedad list-style es la forma abreviada de sintaxis que permite agrupar en una sola las tres propiedades que hemos visto en los apartados anteriores.
Propiedad: list-style
Valor: [disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none] | [inside | outside] | [<url> | none]
Valor inicial: none
Se aplica a: elementos de tipo lista
Herencia: sí
He aquí un ejemplo sencillo (05_04.html):
<!DOCTYPE html>
<html lang="es">
<head>
<title>La sintaxis corta</title>
<meta charset="UTF-8" />
<style>
.estrella{
list-style: url(estrella.png);
list-style-position: outside;
}
</style>
</head>
<body>
<ol class="estrella">
<li>Donec sed odio...</li>
<li>Nullam id dolor...</li>
<li>Aenean eu leo quam...</li> ...Las CSS3
El W3C trabaja en el módulo Lists and Counters Module Level 3 (en Working Draft, 20 March 2014), para redefinir las propiedades relacionadas con el formato de las listas.
