Y la última parte... empecemos.
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:
block (un salto de línea antes y después del elemento)
inline (ningún salto de línea antes ni después del elemento)
list-item (igual que block, salvo que se agrega un marcador de ítems de lista)
none (sin visualización)
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:
normal (contrae múltiples espacios en uno)
pre (no contrae múltiples espacios)
nowrap (no permite el ajuste de línea sin una etiqueta <BR>
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 }
Unidades CSS
Unidades de longitud
Un valor de longitud se forma por un signo + o - opcional, seguido de un número y de una abreviación de dos letras que indica la unidad. No hay espacios en un valor de longitud; por ej., 1.3 em no es un valor de longitud válido, pero 1.3em si lo es. Una longitud de 0 no necesita las dos letras para identificar la unidad.
Tanto las unidades de longitud relativas y absolutas están soportadas en CSS1. Las unidades relativas dan una longitud relativa a otra propiedad longitud, y se prefieren ya que se ajustarán mejor a medios diferentes. Las siguientes unidades relativas están disponibles:
em (ems, la altura de la fuente de los elementos)
ex (x-height, altura de la letra "x"
px (pixels, relativa a la resolución del lienzo)
Las unidades de longitud absolutas son muy dependientes del medio de salida, y son por lo tanto menos útiles que las unidades relativas. Las siguientes unidades absolutas están disponibles:
in (pulgadas; 1 pulgada=2.54 cm)
cm (centímetros; 1 cm = 10 mm)
mm (milímetros)
pt (puntos; 1pt = 1/72 pulgada)
pc (picas; 1 pc = 12 pt)
Unidades de porcentaje
Un valor de porcentaje se forma por un signo + o - opcional, seguido de un número y de %. No hay espacios en un valor de porcentaje.
Los valores de porcentaje son relativos a otros, tal como están definidos en cada propiedad. Generalmente, el valor de porcentaje es relativo al tamaño de fuente del elemento.
Unidades de color
Un valor de color es una palabra clave o una especificación numérica RGB.
Las 16 palabras clave se toman de la paleta Windows VGA: celeste, negro, azul, fucsia, gris, verde, verde claro, marrón, azul marino, olivo, morado, rojo, plata, turquesa, blanco, y amarillo.
Los colores RGB se dan en una de cuatro maneras:
#rrggbb (por ej., #00cc00)
#rgb (por ej., #0c0)
rgb(x,x,x) donde x es un entero entre 0 y 255 inclusive (por ej., rgb(0,204.0))
rgb(y%,y%,y%) donde y es un número entre 0.0 y 100.0 inclusive (por ej., rgb(0%,80%,0%))
Los ejemplos de arriba especifican el mismo color.
Douglas R. Jacobson también ha dearrollado una práctica Carta de colores RGB de referencia rápida (61 kB).
URLs
Un valor URL es dado por url(foo), donde foo es la URL. La URL puede ser opcionalmente entrecomillada con comillas simples (') o dobles (" y puede contener espacios en blanco antes o después de la URL (opcionalmente entrecomillada).
Los paréntesesis, comas, espacios, comillas simples o dobles en una URL deben ser encerradas con diagonales invertidas. Las URLs parciales son interpretadas en relación a la fuente de la hoja de estilo, no a la fuente de HTML.
Note que Netscape Navigator 4.x interpreta incorrectamente las URLs parciales relativas a la fuente HTML. Teniendo en cuenta este defecto, los autores pueden preferir usar las URLs completas siempre que sea posible.
Ejemplos:
BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url(stripe.gif) }
BODY { background: url("stripe.gif" }
BODY { background: url("Ulalume".png) } /* comillas en URL encerradas */
Fin del curso, espero te haya servido mucho. Gracias!
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:
block (un salto de línea antes y después del elemento)
inline (ningún salto de línea antes ni después del elemento)
list-item (igual que block, salvo que se agrega un marcador de ítems de lista)
none (sin visualización)
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:
normal (contrae múltiples espacios en uno)
pre (no contrae múltiples espacios)
nowrap (no permite el ajuste de línea sin una etiqueta <BR>
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 }
Unidades CSS
Unidades de longitud
Un valor de longitud se forma por un signo + o - opcional, seguido de un número y de una abreviación de dos letras que indica la unidad. No hay espacios en un valor de longitud; por ej., 1.3 em no es un valor de longitud válido, pero 1.3em si lo es. Una longitud de 0 no necesita las dos letras para identificar la unidad.
Tanto las unidades de longitud relativas y absolutas están soportadas en CSS1. Las unidades relativas dan una longitud relativa a otra propiedad longitud, y se prefieren ya que se ajustarán mejor a medios diferentes. Las siguientes unidades relativas están disponibles:
em (ems, la altura de la fuente de los elementos)
ex (x-height, altura de la letra "x"
px (pixels, relativa a la resolución del lienzo)
Las unidades de longitud absolutas son muy dependientes del medio de salida, y son por lo tanto menos útiles que las unidades relativas. Las siguientes unidades absolutas están disponibles:
in (pulgadas; 1 pulgada=2.54 cm)
cm (centímetros; 1 cm = 10 mm)
mm (milímetros)
pt (puntos; 1pt = 1/72 pulgada)
pc (picas; 1 pc = 12 pt)
Unidades de porcentaje
Un valor de porcentaje se forma por un signo + o - opcional, seguido de un número y de %. No hay espacios en un valor de porcentaje.
Los valores de porcentaje son relativos a otros, tal como están definidos en cada propiedad. Generalmente, el valor de porcentaje es relativo al tamaño de fuente del elemento.
Unidades de color
Un valor de color es una palabra clave o una especificación numérica RGB.
Las 16 palabras clave se toman de la paleta Windows VGA: celeste, negro, azul, fucsia, gris, verde, verde claro, marrón, azul marino, olivo, morado, rojo, plata, turquesa, blanco, y amarillo.
Los colores RGB se dan en una de cuatro maneras:
#rrggbb (por ej., #00cc00)
#rgb (por ej., #0c0)
rgb(x,x,x) donde x es un entero entre 0 y 255 inclusive (por ej., rgb(0,204.0))
rgb(y%,y%,y%) donde y es un número entre 0.0 y 100.0 inclusive (por ej., rgb(0%,80%,0%))
Los ejemplos de arriba especifican el mismo color.
Douglas R. Jacobson también ha dearrollado una práctica Carta de colores RGB de referencia rápida (61 kB).
URLs
Un valor URL es dado por url(foo), donde foo es la URL. La URL puede ser opcionalmente entrecomillada con comillas simples (') o dobles (" y puede contener espacios en blanco antes o después de la URL (opcionalmente entrecomillada).
Los paréntesesis, comas, espacios, comillas simples o dobles en una URL deben ser encerradas con diagonales invertidas. Las URLs parciales son interpretadas en relación a la fuente de la hoja de estilo, no a la fuente de HTML.
Note que Netscape Navigator 4.x interpreta incorrectamente las URLs parciales relativas a la fuente HTML. Teniendo en cuenta este defecto, los autores pueden preferir usar las URLs completas siempre que sea posible.
Ejemplos:
BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url(stripe.gif) }
BODY { background: url("stripe.gif" }
BODY { background: url("Ulalume".png) } /* comillas en URL encerradas */
Fin del curso, espero te haya servido mucho. Gracias!