Las hojas de estilo intentan separar el contenido de un página de la forma de presentarlo en pantalla. Esto lo hacen personificando los cambios que las etiquetas de formato HTML realizan en nuestro texto. Por ejemplo, sabemos que usando <P> tendremos una párrafo nuevo con una separación del anterior determinada, etc.. Con las hojas de estilo también podremos decirle a un párrafo que todo su texto sea verde y que además va a tener un margen izquierdo de 30 pixeles.
Vamos a detenernos en todos los elementos. Para empezar, la etiqueta HTML con la que deberemos englobar las hojas de estilo será <STYLE>, que sólo podrá estar situada en la cabecera de la página. Su parámetro TYPE indica la sintaxis que utilizaremos para definirlas. En el caso de las hojas en cascada deberá ser text/css.
Ahora examinemos la hoja de estilo propiamente dicha. Indicaremos primero la etiqueta que deseamos personalizar. Será <P>. Después, entre llaves, pondremos una lista de las cosas que queremos modificar. En nuestro caso son dos, el color (en el formato habitual) y el margen, que se define en pixels.
Hay que destacar que, aunque muchas veces los navegadores tengan una cierta flexibilidad, la sintaxis CSS (Cascading Style Sheet) es sensible a la diferencia entre maysculas y minsculas. Conviene tener cuidado.
El HTML 4.0 permite declarar fuera de la página las hojas de estilo, llevando de este modo al extremo su filosofa de separar forma y contenido. Si colocamos nuestras hojas de estilo en un fichero llamado estilos.css (solo las hojas, no la etiqueta <STYLE>) no tendremos más que incluir la siguiente línea en la cabecera de nuestro documento HTML para incluirlas en nuestras páginas:
<LINK REL="stylesheet" HREF="estilos.css" TYPE="text/css">
Clases
Hasta ahora habíamos definido estilos para una etiqueta determinada. Pero también podemos hacerlo para una clase determinada. ¿Esto qué significa? Pues que si, por ejemplo, definimos la hoja de estilo de la clase verde de la siguiente manera:
P.verde {color: green; margin-left: 30px;}
sólo estarán verdes y con un margen izquierdo de 30 pixels aquellos párrafos definidos con <P CLASS="verde">. Así de sencillo.
Ampliando un poco más las posibilidades de las clases, se pueden realizar excepciones. Supongamos que tenemos unos párrafos que queremos que tengan unos márgenes determinados y color verde. Y deseamos que uno solo de esos párrafos, con los mismo márgenes, sea azul. Podríamos definir dos clases distintas, pero hay un mtodo mejor: usar el parámetro ID. Por ejemplo:
all.verde {color: green; margin-left: 10px;}
#ej1 { color: blue;}
Ahora todos los párrafos de clase verde serían, obviamente, verdes y con un margen de 10 pixeles. Sin embargo el párrafo definido por <P CLASS="verde" ID="ej1"> será azul:
Este párrafo es muy verde.
Y anda que este...
Sin embargo, este no, fíjate que curioso.
Etiquetas <SPAN> y <DIV>
Puede que, a veces, no queramos modificar el comportamiento de un elemento sino que creemos un estilo que queremos actúe sólo, un estilo completo creado de la nada. Una etiqueta nueva y propia. Entonces, ¿qué hacemos? Utilizar las etiqueta <SPAN> y <DIV>.
El método es simple. Definimos una clase rojo que simplemente modifique el color (que será rojo). Ahora, si queremos que una sección de texto esté en rojo lo encerraremos entre las etiquetas <SPAN CLASS="rojo">y </SPAN> o entre <DIV CLASS="rojo">y </DIV>.
La diferencia entre ambas es que, mientras SPAN realmente no hace nada por sí misma, DIV convierte a todo lo que encierra en un bloque aparte (poniendo un salto de línea tanto al comienzo como al final). Veremos en otra parte que a las etiquetas que se comportan como bloques (<P>, <H1>, las que dijimos modifican un párrafo entero) se les pueden definir atributos propios desde las hojas de estilo.
Hojas de estilo: referencia
En este apartado vamos a ver casi todas las propiedades que se pueden alterar por medio de las hojas de estilo. Hay que indicar que algunas de ellos no los soporta el Explorer y en cambio otros no las entienden algunos navegadores. Así que es recomendable probarlos en distintos navegadores 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 MS, 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
Nuestro siguiente objetivo va 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), 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 fin acabamos! Dejadme que respire un poco y ahora continuamos.
