17. Hojas de estilo: referencia

En este capítulo vamos a ver todas (o casi todas) las propiedades que se pueden alterar por medio de las hojas de estilo. Hay que indicar que algunos de ellos no los soporta el Explorer y en cambio otros no los entiende el Communicator. Así que es recomendable probarlos en ambos exploradores antes de incorporarlos a nuestras páginas.



17.1. Propiedades de bloque

Vamos a empezar con las propiedades de bloque, que definen cosas como los márgenes o la colocación de bloques de contenido HTML:

PropiedadDescripciónPosibles valores
margin-top, margin-right, margin-bottom, margin-left,
margin: top right bottom left
Distancia mínima entre un bloque y los demás elementos. Tanto margin como margins() se utilizan para cambiar todos estos atributos a la vez.tamaño, porcentaje o auto. Por defecto es cero.
padding-top, padding-right, padding-bottom, padding-left,
padding: top right bottom left
Distancia entre el borde y el contenido de un bloque.tamaño, porcentaje o auto. Por defecto es cero.
border-top-width, border-right-width, border-bottom-width, border-left-width,
border-width: top right bottom left
Anchura del borde de un bloque.numérico
border-styleEstilo del borde de un bloque.none, solid o 3D, por defecto ninguno (none).
border-colorColor del borde de un bloque.cualquier color
width, heightTamaño de un bloque. Su mayor utilidad está en su aplicación a un elemento gráfico.tamaño, porcentaje o auto, automático por defecto.
floatJustificación del contenido de un bloque.left, right o none, por defecto ninguna.
clearPermiso para que otro elemento se pueda colocar a su izquierda o derecha.left, right, both o none, por defecto ninguno.


17.2. Propiedades de tipo de letra

Ahora vamos a examinar las propiedades del tipo de letra que el usuario va a ver. Son las siguientes:

PropiedadDescripciónPosibles valores
font-familyTipo de letra (que puede ser genérico) que vamos a usar.lista de tipos, ya sean genéricos o no, separados por comas.
font-sizeTamaño del tipo de letra.xx-small, x-small, small, medium, large, x-large, xx-large, tamaño relativo o tamaño absoluto. Por defecto medium.
font-weightGrosor del tipo de letra (negrita).normal, bold, bolder, lighter o 100-900 (donde 900 es la negrita más gruesa). Por defecto normal.
font-styleEstilo del tipo de letra (cursiva).normal, italic, italic small-caps, oblique, oblique small-caps o small-caps. Por defecto normal.

Cabe recordar que los tipos genéricos son serif, sans-serif, cursive, fantasy y monospace. Cada uno de estos tipos serán equivalentes a alguno que pueda tener instalado el ordenador del usuario. Así, por ejemplo, en un PC con Windows instalado serif puede equivaler a Times New Roman y monospace a Courier.



17.3. Propiedades de formato del texto

Nuesto siguiente objetivo van a ser las propiedades de formato del texto que cualquier procesador de textos nos permite cambiar.

PropiedadDescripciónPosibles valores
line-heightInterlineado.número o porcentaje.
text-decorationEfectos variados sobre el texto.none, underline (subrayado), overline (como subrayado, pero por encima), line-through (tachado) o blink (parpadeante); por defecto ninguno.
vertical-alignPosición vertical del texto.baseline (normal), sub (subíndice), super (superíndice), top, text-top, middle, bottom, text-bottom o un porcentaje. Por defecto baseline
text-transformTransforma el texto a mayúsculas o minúsculas.capitalize (pone la primera letra en mayúsculas), uppercase (convierte todo a mayúsculas), lowecase (a minúsculas) o none, por defecto no hace nada.
text-alignJustificación del texto.left, right, center o justify
text-indentTabulación con que aparece la primera línea del texto.tamaño o porcentaje, por defecto cero.


17.4. Propiedades de color y fondo

También es posible cambiar los colores y el gráfico de fondo de un elemento.

PropiedadDescripciónPosibles valores
colorColor del texto.un color (en el formato habitual).
backgroundModifica tanto el gráfico el color de fondo.dirección del fichero que contiene la imagen o un color.

Hay que decir que, en la sintaxis en cascada, las direcciones se expresan del siguiente modo:

background: url(fondobonito.gif);


17.5. Propiedades de clasificación

Hasta ahora habíamos distinguido a la hora de ver las propiedades de un elemento en si estos eran tratados como bloques o no. Pero el ser bloques o no... ¿no es acaso otra propiedad? Estas y otras formas de clasificar los elementos se pueden cambiar usando las siguientes propiedades:

PropiedadDescripciónPosibles valores
displayDecide si un elemento es interior (como <I>), un bloque (<P>) o un elemento de una lista (<LI>).inline, block, list y none (que 'apaga' el elemento)
list-styleEstilo de un elemento de una lista, pudiendo incluir un gráfico al comienzo del mismo.disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none o la dirección de un gráfico
white-spaceDecide como se manejan los espacios, si de manera normal o como sucede dentro de la etiqueta <PRE>.normal y pre

Y ahora... ya no hay más... ¡por fín acabamos! Dejadme que respire un poco y ahora continuamos.

Hojas de estiloLenguajes de script