- El último grupo son las propiedades de clasificación, que nos permiten especificar cómo se comporta el elemento. Son las siguientes: display, white-space, list-style-type, list-style-image, list-style-position y list-style.
- Muy bien, empieza.
- display dice si un elemento es en bloque (display:block), en línea (display:inline), si es un objeto de lista (display:list-item) o si no debe ser representado (display:none).
- No entiendo, ¿esto quiere decir que puedo decir por ejemplo em { display : block }?
- Sí, lo que eso querría decir es que los elementos EM, en vez de abrir un cuadro en la misma línea, abrirían un nuevo cuadro en bloque. Pero lo mejor es no hacer estas cosas a menos que sea absolutamente necesario.
- Ok, muy bien.
- white-space es una propiedad que dice cómo tratar a los espacios contenidos en un elemento en bloque. Con el valor normal, varios espacios seguidos se convierten en uno solo, que es a lo que estamos acostumbrados. Con el valor pre obtienes el comportamiento del elemento de HTML PRE, en el que todos los espacios se conservan. Y con el valor nowrap sólo se producen saltos de línea donde haya elementos BR.
- Mmmm, muy bien.
- Bien, y para finalizar, una serie de propiedades que se aplican a elementos con display:list-item. La propiedad list-style-type dice el tipo de estilo de numeración de la lista. Puede ser: disc (un círculo relleno), circle (un círculo hueco), square (un cuadrado), decimal (números), lower-roman (números romanos en minúscula), upper-roman (números romanos en mayúscula), lower-alpha (letras minúsculas), upper-alpha (letras mayúsculas) o none (ningún marcador).
- Muy bien.
- A no ser que pongamos una imagen con list-style-image:
ul { list-style-image: url(imagenes/flecha.gif) }
- Anda, mira qué bien.
- La propiedad list-style-position indica el tipo de presentación de la lista, según dónde se coloque el marcador, y puede tomar los valores inside (interior) y outside (exterior):

Y por último la propiedad list-style es un resumen de las anteriores, y puedes indicar al mismo tiempo: el tipo de marcador, el estilo de posición y la imagen del marcador. Si la imagen no está disponible, se colocará un marcador del tipo especificado:
ul { list-style : url(imagenes/flecha.gif) circle }
- Estupendo, bien pensado.
- Muy bien, estamos a punto de terminar, pero tenemos que hablar aún de dos cosas importantes: las pseudo-clases y los pseudo-elementos, y en especial del mecanismo de cascada.
- Venga, vamos.