Listas

Tabla de contenidos

1. display (lista)
2. list-style
3. list-style-image
4. list-style-position
5. list-style-type

display (lista)

En esta sección recojo el valor de display que se refiere a listas. Faltan los valores relacionados con propiedades generales de cajas y con tablas.

Descripción

Representa los elementos como componentes de una lista.

Valores posibles

• list-item: Los elementos aparecen como ítems de una lista, y se les puede aplicar las propiedades descritas abajo.

Aplicable a

Todos los elementos.

¿Heredada?

No.

Notas

El sentido de esta propiedad es la de ofrecer una manera de presentar como listas enumeraciones en un lenguaje para el que no se haya definido un elemento de marcado con esta función concreta, por ejemplo si se presenta un archivo XML al que no se ha aplicado más que una hoja de estilo de CSS. No se debería aplicar a elementos de un documento HTML ni XHTML para indicar un listado, puesto que el principio de crear códigos semánticos implica que las enumeraciones deberían estar marcadas como ol o ul.

Ver un ejemplo de display:list-item.

El ejemplo es un archivo .xml con una hoja de estilo asociada, por lo que es posible que los navegadores antiguos no lo interpreten y traten de descargarlo.

list-style [propiedad de conjunto]

Descripción

Propiedad de conjunto para definir las propiedades de las viñetas de una lista. Agrupa las propiedades list-style-image, list-style-position y list-style-type.

Aplicable a

Elementos ul, ol y li, y a elementos a los que se haya aplicado display:list-item.

¿Heredada?

Sí.

list-style-image

Descripción

Indica una imagen que debe emplearse para sustituir las viñetas por defecto del navegador.

Valores posibles

• Un URL: Especifica la ubicación de la imagen que se quiere emplear como viñeta.
• none: Indica que no debe sustituirse la viñeta por una imagen personalizada. Si hay algún estilo de viñeta especificado, éste aparece en lugar de la imagen.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

none.

Aplicable a

Elementos ul, ol y li, y a elementos a los que se haya aplicado display:list-item.

¿Heredada?

Sí.

Ver ejemplos de los valores de list-style-image.

list-style-position

Descripción

Indica la posición de la viñeta con respecto al ítem de lista, para el caso de que éste ocupe más de una línea.

Valores posibles

• inside: Indica que la viñeta debe situarse dentro de la caja de texto que componen las líneas del ítem de lista.
• outside: Indica que la viñeta debe situarse fuera de la caja de texto que componen las líneas del ítem de lista.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

outside.

Aplicable a

Elementos ul, ol y li, y a elementos a los que se haya aplicado display:list-item.

¿Heredada?

Sí.

Notas

¿Y dónde se sitúan las viñetas cuando el valor es outside? ¿En el margen o en el relleno? La respuesta es: donde pueden. Las viñetas se sitúan en el espacio disponible que venga dado por la distancia entre la arista del contenedor y la del elemento ul, o bien entre la arista del elemento ul y la de los li, se deba ésta a un margen o a un relleno. Aquí dejo una página de prueba.

Ver ejemplos de los valores de list-style-position.

list-style-type

Descripción

Indica el tipo de viñeta o numeración a aplicar en los items de lista.

Valores posibles

• disc: La viñeta es un círculo opaco.
• circle: La viñeta es un círculo transparente y sólo se marca su circunferencia.
• square: La viñeta es un cuadrado.
• decimal: La viñeta se sustituye por una numeración que comienza en 1.
• decimal-leading-zero: La viñeta se sustituye por una numeración que comienza en 01.
• lower-roman: La viñeta se sustituye por la numeración romana, en minúsculas.
• upper-roman: La viñeta se sustituye por la numeración romana, en mayúsculas.
• lower-greek: La viñeta se sustituye por las letras del alfabeto griego, en minúsculas.
• lower-latin: La viñeta se sustituye por las letras del alfabeto latino, en minúsculas.
• upper-latin: La viñeta se sustituye por las letras del alfabeto latino, en mayúsculas.
• armenian: La viñeta se sustituye por la numeración tradicional armenia.
• georgian: La viñeta se sustituye por la numeración tradicional georgiana.
• lower-alpha: La viñeta se sustituye por las letras del alfabeto occidental, en minúsculas. Es igual a lower-latin.
• upper-alpha: La viñeta se sustituye por las letras del alfabeto occidental, en minúsculas. Es igual a upper-latin.
• none: No se muestra viñeta alguna.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

disc.

Aplicable a

Elementos ul, ol y li, y a elementos a los que se haya aplicado display:list-item.

¿Heredada?

Sí.

Ver ejemplos de los valores de list-style-type.