Ir directamente al contenido de esta página

codexexempla.org

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.

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon

(cc) CodexExempla.org, 2007–2017 Mapa del sitio | XHTML | CSS | AA