- 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.
Sitio Web mantenido por Juan R. Pozo (jrpozo arroba conclase punto net).
Última modificación: 14/10/2001 - © 2001 Juan R. Pozo y conclase.net