Estilos CSS: referencia

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 describe 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.

Aqui te muestro una referencia de los atributos del estandard CSS2 más usados en la creación de páginas web. Se podría ahondar más pero esta selección es suficiente para comenzar a conocer el uso de las reglas de estilo. Con el actual estándar, CSS3, ahondamos un poco más.

Cuando hablabamos del formato en las páginas html diferenciamos entre elementos de bloque y elementos en linea, Los bloques son elementos como el <p> (párrafo) o las <div> (capas) que incluyen un salto de linea antes y después de su contenido. Los estilos en linea no rompen el flujo del texto. Las etiquetas <br> y <hr> son excepciones, no tienen contenido y provocan saltos de linea.

Si consideramos un elemento como una caja (sea tipo bloque o en linea) esta puede tener márgenes interiores como un relleno vacío (padding), márgenes exteriores, dimensiones o bordes (CSS3 amplia las opciones para los bordes)

Así que de entrada veamos que propiedades nos ofrece CSS para dar formato a bloques y elmentos en linea, algunas tendrán más sentido en los bloques:

Propiedad	Significado	Valores
margin-top, margin-right, margin-bottom, margin-left, margin: top right bottom left	Márgenes del elemento. margin 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 elemento. Se puede definir en forma abreviada con padding	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 elemento.	numérico
border-style	Tipo de borde de un elemento.	none, ruged, solid, 3D,... por defecto ninguno (none).
border-color	Color del borde de un elemento.	Código o nombre de color
width, height	Ancho y alto del elemento.	tamaño, porcentaje o auto, automático por defecto.
float	Justificación del contenido de un elemento.	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.

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 o tienes que adjuntarlos en la página.

Nuestro 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.

Las propiedades como margin, padding, border pueden definirse de manera abreviada. Margin y paddign se definirian como margin o padding seguido de cuatro valores para : top, right, bottom, left. Mientras que border se definiría como border: grosor estilo color (el orden no importa).

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-color	Color de fondo.	código o nombre del color
background-image	Imagen que se usa para el fondo	url de la imagen
background-repeat	Si la imagen se debe repetir como patrón o no	repeat, repeat-X, repeat-y, no-repeat
background-position	Posición de la imagen	combinaciones de top, right, left, bottom, middle o un par de valore numéricos: X, Y (si se omite uno se toma 50%)
background-attachment	Si ha de permanecer fija o moverse cuano se haga scroll	fixed (fija), scroll (se desplaza)

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

background: url(fondobonito.gif) repeat;

Otras propiedades que pueden definirse mediante las hojas de estilo CSS

Propiedad	Descripción	Posibles valores
display	Define la forma de mostrar el elemento: bloque, en linea, lista.	inline, block, list y none (que oculta 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	Como usar los espacios, normal (espacios seguidos los une en uno solo) o como etiqueta <pre> (respeta todos los espacios).	normal y pre

 

Estas dos páginas sirven como introducción a los estilos en HTML. Se puede escribir mucho más sobre ellos, pero eso lo dejo para el tutor de CSS3 que es el estandard actualmente en vigor (emepzó en 2011). Pero con esto que te pongo aquí puedes practicar bastante.