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:
| Propiedad | Descripción | Posibles 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-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. |
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:
| 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.
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.
| 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. |
17.4. 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);
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:
| 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.
 |
 Hojas de estilo | Lenguajes de script |
