Curso de HTML 4.0

• Hojas de estilo: referencia
• Propiedades de bloque
• Propiedades de tipo de letra
• Propiedades de formato del texto
• Propiedades de color y fondo
• Propiedades de clasificación

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.

 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:

Propiedad	Descripción	Posibles valores
margin-top, margin-right, margin-bottom, margin-left,<br/> 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,<br/> 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,<br/> border-width: top right bottom left	Anchura del borde de un bloque.	numérico
border-style	Estilo del borde de un bloque.	none, solid o 3D, por defecto ninguno (none).
border-color	Color del borde de un bloque.	cualquier color
width, height	Tamañ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.
float	Justificación del contenido de un bloque.	left, right o none, por defecto ninguna.
clear	Permiso para que otro elemento se pueda colocar a su izquierda o derecha.	left, right, both o none, por defecto ninguno.

 Propiedades de tipo de letra

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

Propiedad	Descripción	Posibles valores
font-family	Tipo de letra (que puede ser genérico) que vamos a usar.	lista de tipos, ya sean genéricos o no, separados por comas.
font-size	Tamañ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-weight	Grosor del tipo de letra (negrita).	normal, bold, bolder, lighter o 100-900 (donde 900 es la negrita más gruesa). Por defecto normal.
font-style	Estilo 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.

 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.

Propiedad	Descripción	Posibles valores
line-height	Interlineado.	número o porcentaje.
text-decoration	Efectos variados sobre el texto.	none, underline (subrayado), overline (como subrayado, pero por encima), line-through (tachado) o blink (parpadeante); por defecto ninguno.
vertical-align	Posició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-transform	Transforma 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-align	Justificación del texto.	left, right, center o justify
text-indent	Tabulación con que aparece la primera línea del texto.	tamaño o porcentaje, por defecto cero.

 Propiedades de color y fondo

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

Propiedad	Descripción	Posibles valores
color	Color del texto.	un color (en el formato habitual).
background	Modifica 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);

 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:

Propiedad	Descripción	Posibles valores
display	Decide 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-style	Estilo 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-space	Decide 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.