Acerca del Web Design Group

Propiedades de clasificación

Display (Visualización)

Sintaxis: display: <valor>
Valores posibles: block | inline | list-item | none
Valor inicial: block
Se aplica a: Todos los elementos
Heredado: No

La propiedad display se usa para definir un elemento con uno de cuatro valores:

A cada elemento típicamente se le da un valor de display (visualización) por defecto para el navegador, basado en la interpretación sugerida en la especificación HTML.

La propiedad display puede ser peligrosa debido a su capacidad de mostrar elementos en lo que de otro modo sería un formato inapropiado. El uso del valor none desactivará la visualización del elemento al que está asignado, incluyendo cualquier elemento hijo.

Whitespace (Espacio en blanco)

Sintaxis: white-space: <valor>
Valores posibles: normal | pre | nowrap
Valor inicial: normal
Se aplica a: Elementos de nivel bloque
Heredado: Si

La propiedad white-space determinará cómo se tratan los espacios dentro del elemento. Esta propiedad toma uno de tres valores:

List Style Type (Tipo de estilo de lista)

Sintaxis: list-style-type: <valor>
Valores posibles: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Valor inicial: disc
Se aplica a: Elementos con la propiedad display list-item
Heredado: Si

La propiedad list-style-type especifica el tipo de marcador de ítems de lista, y se usa si list-style-image es none o si la carga de imágenes está desactivada.

Ejemplos:

LI.cuadrado { list-style-type: square }
UL.simple { list-style-type: none }
OL        { list-style-type: upper-alpha }  /* A B C D E etc. */
OL OL     { list-style-type: decimal }      /* 1 2 3 4 5 etc. */
OL OL OL  { list-style-type: lower-roman }  /* i ii iii iv v etc. */

List Style Image (Imagen de estilo de lista)

Sintaxis: list-style-image: <valor>
Valores posibles: <url> | none
Valor inicial: none
Se aplica a: Elementos con la propiedad display list-item
Heredado: Si

La propiedad list-style-image especifica la imagen que se usará como marcador de ítems de lista cuando se active la carga de imágenes, reemplazando al marcador especificado en la propiedad list-style-type.

Ejemplos:

UL.marca { list-style-image: url(/LI-marcadores/visto.gif) }
UL LI.x { list-style-image: url(x.png) }

List Style Position (Posición de estilo de lista)

Sintaxis: list-style-position: <valor>
Valores posibles: inside | outside
Valor inicial: outside
Se aplica a: Elementos con la propiedad display list-item
Heredado: Si

La propiedad list-style-position toma el valor inside o outside, donde outside es el valor por defecto. Esta propiedad determina donde se coloca el marcador en relación al ítem de lista. Si se usa el valor inside, las líneas se ajustarán debajo del marcador en vez de estar con sangría. Ejemplo:

Posición exterior (outside):
 * Item de lista 1
   segunda línea de ítem de la lista

Posición interior (inside):
   * Item de lista 1
   segunda línea de ítem de la lista

List Style (Estilo de lista)

Sintaxis: list-style: <valor>
Valores posibles: <list-style-type> || <list-style-position> || <url>
Valor inicial: No definido
Se aplica a: Elementos con la propiedad display list-item
Heredado: Si

La propiedad list-style property es una forma rápida de las propiedades list-style-type, list-style-position y list-style-image.

Ejemplos:

LI.cuadrado { list-style: square inside }
UL.simple  { list-style: none }
UL.marca  { list-style: url(/LI-marcadores/visto.gif) circle }
OL        { list-style: upper-alpha }
OL OL     { list-style: lower-roman inside }

Mantenido por John Pozadzides y Liam Quinn

Web Design Group ~ ÍndiceCSS ~ Estructura CSS ~ Propiedades CSS

Copyright © 1997 John Pozadzides y Liam Quinn. Todos los derechos reservados.