• Estilos CSS
• Propiedades de bloque
• Propiedades de tipo de letra
• Propiedades de formato del texto
• Propiedades de color y fondo
• Otros

arriba

Los estilos CSS son una forma de separar el contenido de la página web de su formato. Es decir por un lado nos preocupamos de dar contenido a la página y por otro de definir como se deberá ver. Es una idea magnífica que nos permite, por ejemplo, cambiar el estilo de diseño de todo un sitio web sin necesidad de reeditar todas sus páginas: solo modificaríamos el archivo donde se desribe el formato de las páginas, como esquemas de color, imágenes de fondo, etc. Pero no todo es perfecto: los navegadores Explorer y Netscape no entienden los estilos exactamente igual por lo que es conveniente probar las cosas en ambos para asegurarnos que todo se verá como nosotros queremos.

arriba

Cuando hablabamos del formato en las páginas HTML diferenciamos entre elementos de bloque y elementos en linea, Los bloques eran elementos como el <p> (párrafo) o las <div> (capas). Entonces de entrada veamos que propiedades se les puede aplicar a este tipo de elementos:

Propiedad	Significado	Valores
margin-top, margin-right, margin-bottom, margin-left, margin: top right bottom left	Márgenes dntro del bloque. 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 del 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	Tipo de borde de un bloque.	none, ruged, solid, 3D,... por defecto ninguno (none).
border-color	Color del borde de un bloque.	Código o nombre de color
width, height	Ancho y alto del bloque.	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.

arriba

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.

Recordemos lo dicho al hablar del tipo de letras: no todos tus tipos tienen que estar en los ordenadores de tus visitantes.

arriba

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.

arriba

También es posible cambiar el color o la imagen de fondo de cualqueir 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.

Las direcciones URL (para la imagen de fondo por ejemplo) se expresan del siguiente modo:

background: url(fondobonito.gif);

arriba

 

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.

arriba