Estas propiedades, más que especificar parámetros visuales específicos, lo que hacen es clasificar elementos en categorías.
Las propiedades de estilo de lista describen cómo dar formato a los objetos de una lista (es decir, a los elementos con un valor de 'display' igual a 'list-item'). Las propiedades de estilo de lista pueden establecerse para cualquier elemento, y normalmente se heredarán de padres a hijos. Sin embargo, sólo tendrán efecto en aquellos elementos que tengan un valor de 'display' igual a 'list-item'. En HTML éste normalmente el caso de los elementos 'LI'.
Valor: block | inline | list-item | none
Inicial: block
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta propiedad describe si un elemento se muestra en el lienzo (ya sea una página impresa, una pantalla de computadora, etc.) y cómo se muestra.
Un elemento con un valor de 'display' igual a 'block' abre un nuevo cuadro. El cuadro se posiciona relativamente a los cuadros adyacentes de acuerdo al modelo de formato de CSS. Normalmente, elementos tales como 'H1' y 'P' son del tipo 'block'. El valor 'list-item' es similar a 'block', excepto que se añade un marcador de objeto de lista. En HTML, 'LI' tendrá normalmente este valor.
Un elemento con un valor de 'display' igual a 'inline' da como resultado un nuevo cuadro de línea en la misma línea que el contenido previo. El cuadro se dimensiona de acuerdo con el tamaño del contenido una vez formateado. Si el contenido es textual, puede abarcar varias líneas, y habrá un cuadro en cada línea. Las propiedades de margen, borde y relleno se aplican a los elementos 'inline', pero no tendrán ningún efecto en los saltos de línea.
Un valor de 'none' desactiva la presentación del documento, incluyendo los elementos hijos y el cuadro circundante.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
La última regla desactiva la presentación de las imágenes.
El valor inicial de 'display' es 'block', pero un AU tendrá por lo general valores por defecto para cada elemento HTML de acuerdo con la representación de elementos sugerida por la especificación HTML [2].
CSS1 básico: Los AAUU pueden no tener en cuenta el valor de 'display' y usar solamente los valores por defecto del AU (véase la sección 7).
Valor: normal | pre | nowrap
Inicial: normal
Se aplica a: elementos en bloque
Se hereda: sí
Valores porcentuales: N/A
Esta propiedad declara cómo se manipulan los espacios existentes en el interior del elemento: con el modo 'normal' (según el cual los espacios en blanco se colapsan), 'pre' (que se comporta como el elemento 'PRE' de HTML) o 'nowrap' (según el cual los cambios de línea sólo ocurren por la presencia de elementos BR):
PRE { white-space: pre }
P { white-space: normal }
El valor inicial de 'white-space' es 'normal', pero un AU tendrá normalmente valores por defecto para cada elemento HTML de acuerdo con la representación de elementos sugerida por la especificación HTML [2].
CSS1 básico: Los AAUU pueden no tener en cuenta la propiedad 'white-space' en las hojas de estilo del autor y del lector, y usar en su lugar los valores por defecto del AU (véase la sección 7).
Valor: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Inicial: disc
Se aplica a: elementos con valor de 'display' igual a 'list-item'
Se hereda: sí
Valores porcentuales: N/A
Esta propiedad se utiliza para determinar la apariencia del marcador de objetos de lista si 'list-style-image' es 'none' o si la imagen a la que apunta su URL no puede ser mostrada.
OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
OL { list-style-type: lower-alpha } /* a b c d e etc. */
OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
Valor: <url> | none
Inicial: none
Se aplica a: elementos con valor de 'display' igual a 'list-item'
Se hereda: sí
Valores porcentuales: N/A
Esta propiedad establece la imagen que se usará como marcador de objetos de lista. Si la imagen está disponible reemplazará al marcador establecido con la propiedad 'list-style-type'.
UL { list-style-image: url(http://png.com/elipse.png) }
Valor: inside | outside
Inicial: outside
Se aplica a: elementos con valor de 'display' igual a 'list-item'
Se hereda: sí
Valores porcentuales: N/A
El valor de 'list-style-position' determina cómo se dibuja el marcador de objetos de lista con relación al contenido. Para ver un ejemplo de formato véase la sección 4.1.3.
Valor: [disc | circle | square | decimal | lower-roman |
upper-roman | lower-alpha | upper-alpha | none] || [inside | outside]
|| [<url> | none]
Inicial: no definida para propiedades abreviadas
Se aplica a: elementos con valor de 'display' igual a 'list-item'
Se hereda: sí
Valores porcentuales: N/A
La propiedad 'list-style' es una notación abreviada para establecer las tres propiedades 'list-style-type', 'list-style-image' y 'list-style-position' en un mismo lugar de una hoja de estilo.
UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }
Establecer 'list-style' directamente en un elemento 'LI' puede dar lugar a resultados inesperados. Considérese el siguiente ejemplo:
<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>nivel 1
<UL>
<LI>nivel 2
</UL>
</OL>
</BODY>
Al ser mayor la especificidad (definida en el orden de cascada) de la primera regla de la hoja de estilo del ejemplo, prevalecerá sobre la segunda regla en todos los elementos 'LI' y sólo se utilizarán estilos de lista 'lower-alpha'. Por ello se recomienda establecer la propiedad 'list-style' únicamente en los elementos de tipo lista:
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
En este ejemplo, la herencia transmitirá los valores de 'list-style' de los elementos 'OL' y 'UL' a los elementos 'LI'.
Un valor de tipo URL puede combinarse con cualquier otro valor:
UL { list-style: url(http://png.com/elipse.png) disc }
En este ejemplo, se usará 'disc' si la imagen no está disponible.