CSS, hojas de estilos

1. Introduccin a las CSS

El lenguaje HTML est limitado a la hora de aplicarle forma a un documento. Esto es as porque fue concebido para otros usos (cientficos sobre todo), distinto a los actuales, mucho ms amplios. Para solucionar estos problemas los diseadores han utilizado tcnicas tales como la utilizacin de tablas, imgenes transparentes para ajustarlas, utilizacin de etiquetas que no son estndares del HTML y otras. Estas "trampas" han causado a menudo problemas en las pginas a la hora de su visualizacin en distintas plataformas. Adems, los diseadores se han visto frustrados por la dificultad con la que, aun utilizando estos trucos, se encontraban a la hora de maquetar las pginas, ya que muchos de ellos venan maquetando pginas sobre el papel, donde el control sobre la forma del documento es absoluto. Finalmente, otro antecedente que ha hecho necesario el desarrollo de esta tecnologa consiste en que las pginas web tienen mezclado en su cdigo HTML el contenido del documento con las etiquetas necesarias para darle forma. Esto tiene sus inconvenientes ya que la lectura del cdigo HTML se hace pesada y difcil a la hora de buscar errores o depurar las pginas. Aunque, desde el punto de vista de la riqueza de la informacin y la utilidad de las pginas a la hora de almacenar su contenido, es un gran problema que estos textos est entre mezclados con etiquetas incrustadas para dar forma a estos: se degrada su utilidad. En estas pginas de CSS se pretende dar a conocer la tecnologa con un enfoque prctico para que en pocos captulos se pueda usar las CSS de una manera depurada, reflejando toda nuestra experiencia en su uso.

2. Caractersticas y ventajas de las CSS

El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentacin que se le aplicar a: Un web entero, de modo que se puede definir la forma de todo el web de una sola vez. Un documento HTML o pgina, se puede definir la forma, en un pequeo trozo de cdigo en la cabecera, a toda la pgina. Una porcin del documento, aplicando estilos visibles en un trozo de la pgina. Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta. Esto es muy importante ya que ofrece potencia en la

programacin. Se puede definir, por ejemplo, varios tipos de prrafos: en rojo, en azul, con mrgenes, sin ellos, etc. La potencia de la tecnologa salta a la vista. Pero no solo se queda aqu, ya que adems esta sintaxis CSS permite aplicar al documento formato de modo mucho ms exacto. Si antes el HTML se quedaba corto para maquetar las pginas y se tenan que utilizar trucos para conseguir los efectos, ahora se tienen muchas ms herramientas que permiten definir esta forma: Se puede definir la distancia entre lneas del documento. Se puede aplicar identado a las primeras lneas del prrafo. Se pueden colocar elementos en la pgina con mayor precisin, y sin lugar a errores. Y mucho ms, como definir la visibilidad de los elementos, mrgenes, subrayados, tachados...

Y muchas ms ventajas, ya que si con el HTML tan slo se podan definir atributos en las pginas con pixeles y porcentajes, ahora se pueden definir utilizando muchas ms unidades como: Pixels (px) y porcentaje (%), como antes. Pulgadas (in) Puntos (pt) Centmetros (cm)

3. Navegadores que lo soportan

Esta tecnologa es bastante nueva, por lo que no todos los navegadores la soportan. En concreto, slo los navegadores de Netscape versiones de la 4 en adelante y de Microsoft a partir de la versin 3 son capaces de comprender los estilos en sintaxis CSS. Adems cabe destacar que no todos los navegadores implementan las mismas funciones de hojas de estilos, por ejemplo, Microsoft Internet Explorer 3 no soporta todo lo relativo a capas. Esto quiere decir que se debe de usar esta tecnologa con cuidado, ya que muchos usuarios no podrn ver los formatos que se apliquen a las pginas con CSS. As pues, hay que utilizar las hojas de estilos cuando estas no vayan a suponer un problema.

4. Usos de las CSS

A continuacin se describirn los diferentes usos de las CSS introducidos en el anterior captulo. Primero se describen los puntos segn su dificultad e importancia. Partiendo este captulo en dos partes por su extensin y por haber varias formas distintas de aplicar estilos, aqu se vern las ms sencillas y en el captulo siguiente otras ms complicadas pero ms potentes.

4.1 Pequeas partes de la pgina Para definir estilos en secciones reducidas de una pgina se utiliza la etiqueta <SPAN>. Con su atributo style se indica en la sintaxis CSS las caractersticas de estilos. Lo cual se ve con un ejemplo, poniendo un prrafo en el que determinadas palabras se visualizarn en color verde. <p> Esto es un prrafo en varias palabras <SPAN style="color:green"> en color verde </SPAN> resulta muy fcil. </p> Que tiene como resultado: Esto es un prrafo con varias palabras en color verde resulta muy fcil. 4.2 Estilo definido para una etiqueta De este modo se puede hacer que toda una etiqueta muestre un estilo determinado. Por ejemplo, podemos definir un prrafo entero en color rojo y otro en color azul. Para ello se utiliza el atributo style, que es admitido por todas las etiquetas del HTML (siempre y cuando se disponga de un navegador compatible con CSS). <p style="color:#990000"> Esto es un prrafo de color rojo. </p> <p style="color:#000099"> Esto es un prrafo de color azul. </p> Que tiene como resultado: Esto es un prrafo de color rojo. Esto es un prrafo de color azul. 4.3 Estilo definido en una parte de la pgina Con la etiqueta <DIV> se pueden definir secciones de una pgina y aplicarle estilos con el atributo style, es decir, se pueden definir estilos de una vez a todo un bloque de la pgina. <div style="color:#000099; font-weight:bold"> <h3> Estas etiquetas van en <i>azul y negrita</i></h3> <p> Seguimos dentro del DIV, luego permanecen los etilos </p> </div> Que tiene como resultado:

Estas etiquetas van en azul y negrita Seguimos dentro del DIV, luego permanecen los etilos

5. Usos avanzados de las CSS

5.1 Estilo definido para toda una pgina Se puede definir, en la cabecera del documento, estilos para que sean aplicados a toda la pgina. Es una manera muy cmoda de darle forma al documento y muy potente, ya que estos estilos sern seguidos en toda la pgina y nos ahorra as muchas etiquetas HTML que apliquen forma al documento. Adems, si deseamos cambiar los estilos de la pgina se har de una sola vez. Este ejemplo es ms complicado, puesto que se utiliza la sintaxis CSS de manera ms avanzada. Pero no hay que preocuparse puesto que con los ejemplos se va aprendiendo su uso y ms tarde se comentar la sintaxis en profundidad. En el ejemplo se ve que se utiliza la etiqueta <STYLE> colocada en la cabecera de la pgina para definir los distintos estilos del documento. A grandes rasgos, entre <STYLE> y </STYLE>, se coloca el nombre de la etiqueta que se quieren definir los estilos y entre llaves -{}- se colocan en sintaxis CSS las caractersticas de estilos. <html> <head> <title>Ejemplo de estilos para toda una p&aacute;gina </title> <STYLE type="text/css"> <!-H1 {text-decoration: underline; text-align:center} P {font-Family:arial,verdana; color: white; background-color: black} BODY {color:black;background-color: #cccccc; text-indent:1cm} // --> </STYLE> </head> <body> <h1> P&aacute;gina con estilos </h1> Bienvenidos... <p>Siento ser tan simple, pero esto es un ejemplo sin m&aacute;s importancia </p> </body> </html> Como se puede apreciar en el cdigo, se ha definido que la etiqueta <H1> se presentar Subrayado Centrada

Tambin, por ejemplo, hemos definido que el cuerpo entero de la pgina (etiqueta <BODY>) se le apliquen los estilos siguientes: Color del texto negro Color del fondo grisceo Margen lateral de 1 centmetro

Caber destacar que si aplicamos estilos a la etiqueta <BODY>, estos sern heredados por el resto de las etiquetas del documento. Esto es as siempre y cuando no se vuelvan a definir esos estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta ms concreta ser el que mande. Puede verse este detalle en la etiqueta <P>, que tiene definidos estilos que ya fueron definidos para <BODY>. Los estilos que se tienen en cuenta son los de la etiqueta <P>, que es ms concreta. Por ltimo, ha de apreciarse los comentarios HTML que engloban toda la declaracin de estilos: <!--Declaracin de estilos-->. Estos comentarios se utilizan para que los navegadores antiguos, que no comprenden la sintaxis CSS, no incluyan ese texto en el cuerpo de la pgina. Si no se pusiera, los navegadores antiguos (por ejemplo Netscape 3) escribiran ese "feo cdigo" en la pgina. Se ha preparado la misma pgina, pero con declaraciones de estilos distintas, para que se comprueben las diferencias en la forma del documento con slo unos cambios en sus estilos. 5.2 Estilo definido para todo un sitio web Una de las caractersticas ms potentes de la programacin con hojas de estilos consiste en que, de una vez, se puedan definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan slo se colocan las declaraciones de estilos de la pgina y enlazando todas las pginas del sitio con ese archivo. De este modo, todas las pginas comparten una misma declaracin de estilos y, por tanto, si la cambiamos, cambiarn todas las pginas. Con las ventajas aadidas de que se ahorra en lneas de cdigo HTML (lo que reduce el peso del documento) y se evita la molestia de definir una y otra vez los estilos con el HTML, tal como se coment anteriormente. El proceso para incluir estilos con un fichero externo es: 1- Crear el fichero con la declaracin de estilos Es un fichero de texto normal, que puede tener cualquier extensin, aunque se le puede asignar la extensin .css para aclarar qu tipo de archivo es. El texto que se debe incluir debe ser escrito exclusivamente en sintaxis CSS, es decir, sera errneo incluir cdigo HTML en l: etiquetas y dems. P{ font-size : 12pt; font-family : arial,helvetica; font-weight : normal; }

H1 { font-size : 36pt; font-family : verdana,arial; text-decoration : underline; text-align : center; background-color : Teal; } TD { font-size : 10pt; font-family : verdana,arial; text-align : center; background-color : 666666; } BODY { background-color : #006600; font-family : arial; color : White; } 2- Se enlaza la pgina web con la hoja de estilos Para ello, vamos a colocar la etiqueta <LINK> con los atributos rel="STYLESHEET" indicando que el enlace es con una hoja de estilos type="text/css" porque el archivo es de texto, en sintaxis CSS l href="estilos.css" indica el nombre del fichero fuente de los estilos

A continuacin se muestra una pgina web entera que enlaza con la declaracin de estilos anterior: <html> <head> <link rel="STYLESHEET" type="text/css" href="estilos.css"> <title>P&aacute;gina que lee estilos</title> </head> <body> <h1>P&aacute;gina que lee estilos </h1> Esta p&aacute;gina tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy f&aacute;cil. <br> <br> <table width="300" cellspacing="2" cellpadding="2" border="0"> <tr> <td>Esto est&aacute; dentro de un TD, luego tiene estilo propio, declarado en el fichero externo </td> </tr> <tr> <td> La segunda fila del TD </td> </tr>

</table> </body> </html> 5.3 Reglas de importancia en los estilos Los estilos se heredan de una etiqueta a otra, como se indic anteriormente. Por ejemplo, si se tiene declarado en el <BODY> unos estilos, por lo general, estas declaraciones tambin afectarn a etiquetas que estn dentro de esta etiqueta, o lo que es lo mismo, dentro de todo el cuerpo. En muchas ocasiones ms de una declaracin de estilos afecta a la misma porcin de la pgina. Siempre se tiene en cuenta la declaracin ms particular. Pero las declaraciones de estilos se pueden realizar de mltiples modos y con varias etiquetas, tambin entre estos modos hay una jerarqua de importancia para resolver conflictos entre varias declaraciones de estilos distintas para una misma porcin de pgina. Se puede ver a continuacin esta jerarqua, primero se ponen las formas de declaracin ms generales, y por tanto menos respetadas en caso de conflicto: Declaracin de estilos con fichero externo. (Para todo un sitio web) Declaracin de estilos para toda la pgina. (Con la etiqueta <STYLE> en la cabecera de la pgina) Estilos definidos en una parte de la pgina. (Con la etiqueta <DIV>) Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en cuestin) Declaracin de estilo para una porcin pequea del documento. (Con la etiqueta <SPAN>)

Ya se vio cmo incluir estilos en la pgina, de todas las maneras posibles y se hizo un repaso con la lista anterior. Ahora ests en condiciones de empezar a usar las hojas de estilo en cascada para mejorar las pginas y aumentar la productividad de tu trabajo. 5.4 Otra manera de definir estilos en un archivo externo Otra manera de importar una declaracin externa de estilos CSS: @import url("archivo_a_importar.css"), que se utiliza para importar unas declaraciones de estilos guardadas en la ruta que se indica entre parntesis (Las comillas son opcionales, pero los parntesis son obligatorios, por lo menos, en Explorer). Se debe incluir en la declaracin de estilos global a una pgina, es decir entre las etiquetas <style type="text/css"> y </style>, que se colocan en la cabecera del documento. Es importante sealar que la sentencia de importacin del archivo CSS se debe escribir en la primera lnea de la declaracin de estilos, algo parecido al cdigo siguiente. <style type="text/css"> @import url ("estilo.css");

body{ background-color:#ffffcc; } </style> El funcionamiento es el mismo que si se escribiera todo el fichero a importar dentro de las etiquetas de los estilos, con la salvedad de que, si se redefine dentro del cdigo HTML (entre las etiquetas </style>) estilos que haban quedado definidos en el archivo externo, los que se aplicarn sern los que hayamos redefinido. As, en el ejemplo anterior, aunque se hubiera definido en estilo.css un color de fondo para la pgina, el color que prevalecera sera el definido a continuacin de la importacin: #ffffcc La diferencia entre este tipo de importacin del tipo y la que hemos visto anteriormente: <link rel="stylesheel" type="text/css" href="hoja.css"> Es que @import url ("estilo.css") se suele utilizar cuando hay unas pautas bsicas en el trabajo con los estilos (que se definen en un archivo a importar) y unos estilos especficos para cada pgina, que se definen a continuacin, dentro del cdigo HTML entre las etiquetas </style>, como es el caso del ejemplo visto anteriormente.

6. Sintaxis CSS
Tal como se vio en los ejemplos la sintaxis es bastante sencilla y repetitiva: Para definir un estilo se utilizan atributos como font-size, text-decoration, etc. seguidos de dos puntos y el valor que le deseemos asignar. Podemos definir un estilo a base de definir muchos atributos separados por punto y coma. Ejemplo: font-size:10pt; text-decoration:underline; color:black; (el ltimo punto y coma de la lista de atributos es opcional) Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de atributos encerrados entre llaves. Ejemplo: H1 {text-align: center; color: black} Los valores que se pueden asignar a los atributos de estilo se pueden ver en una tabla en el siguiente captulo. Muchos estos valores son unidades de medida, por ejemplo, el valor del tamao de un margen o el tamao de la fuente. Las unidades de medida son las siguientes: Puntos pt Pulgadas in

Centmetros cm pixels px

7. Atributos de las hojas de estilo

Tanto para practicar en el aprendizaje como para trabajar con las CSS lo mejor es disponer de una tabla donde se vean los distintos atributos y valores de estilos que se les puede aplicar a las pginas web. Aqu se puede ver la tabla de los atributos CSS. Posibles valores Ejemplos FUENTES - FONT Valor RGB o nombre de color: #009900; color color color: red; Sirve para indicar el color del texto. Lo admiten casi todas las etiquetas de HTML. No todos los nombres de colores son admitidos en el estndar, es aconsejable entonces utilizar el valor RGB. xx-small | x-small | small | medium | large | x- font-size:12pt; font-size large | xxlarge font-size: x-large; Unidades de CSS Sirve para indicar el tamao de las fuentes de manera ms rgida y con mayor exactitud. serif | sans-serif | cursive | fantasy | font-family: arial, font-family monospace helvetica; Todas las fuentes font-size: fantasy; habituales Con este atributo se indica la familia de tipografa del texto. Los primeros valores son genricos, es decir, los exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema. Tambin se pueden definir con tipografas normales, como ocurra en html. Si el nombre de una fuente tiene espacios se utilizan comillas para que se entienda bien. normal | bold | bolder | lighter | 100 | 200 | font-weight:bold; font-weight 300 | 400 | 500 | 600 | font-weight: 200; 700 | 800 | 900 Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas con total libertad. Normal y 400, son el mismo valor, as como bold y 700. font-style normal | italic | oblique font-style:normal; font-style: italic; Nombre del atributo

Es el estilo de la fuente, que puede ser normal, itlica u oblicua. El estilo oblique es similar al itlica. PRRAFOS - TEXT line-height: 12px; line-height: normal; El alto de una lnea, y por tanto, el espaciado entre lneas. Es una de esas caractersticas que no se podan modificar utilizando HTML. line-height normal y unidades CSS text-decoration: none |[underline || none; text-decoration overline || text-decoration: linethrough ] underline; Para establecer la decoracin de un texto, es decir, si est subrayado, sobrerayado o tachado. left | right | center | text-align: right; justify text-align: center; Sirve para indicar la alineacin del texto. Es interesante destacar que las hojas de estilo permiten el justificado de texto, aunque recuerda que no tiene por que funcionar en todos los sistemas. text-align text-indent: 10px; text-indent: 2in; Un atributo que sirve para hacer sangrado o mrgenes en las pginas. Muy til y novedoso. text-indent Unidades CSS capitalize | text-transform: none; uppercase | text-transform: lowercase | none capitalize; Permite transformar el texto, haciendo que tenga la primera letra en maysculas de todas las palabras, todo en maysculas o minsculas. text-transform FONDO - BACKGROUND background-color: Un color, con su green; Background-color nombre o su valor RGB background-color: #000055; Sirve para indicar el color de fondo de un elemento de la pgina. background-image: url El nombre de la (mrmol.gif) ; Background-image imagen con su camino background-image: relativo o absoluto url(http:// www.x.com/fondo.gif) Colocamos con este atributo una imagen de fondo en cualquier elemento de la pgina.

BOX - CAJA margin-left: 1cm; margin-left: 0,5in; Indicamos con este atributo el tamao del margen a la izquierda Margin-left Unidades CSS Margin-right Unidades CSS margin-right: 5%; margin-right: 1in; margin-top: 0px; margin-top: 10px;

Se utiliza para definir el tamao del margen a la derecha Margin-top Unidades CSS

Indicamos con este atributo el tamao del margen arriba de la pgina margin-bottom: 0pt; margin-top: 1px; Con l se indica el tamao del margen en la parte de abajo de la pgina Margin-bottom Unidades CSS padding-left: 0.5in; padding-left: 1px; Indica el espacio insertado, por la izquierda, entre el borde del elemento continente y el contenido de este. Es parecido a el atributo cellpadding de las tablas. Padding-left Unidades CSS El espacio insertado tiene el mismo fondo que el fondo del elemento-continente. padding-right: 0.5cm; padding-right: 1pt; Indica el espacio insertado, en este caso por la derecha, entre el borde del elemento-continente y el contenido de este. Es parecido a el atributo cellpadding de las tablas. Padding-right Unidades CSS El espacio insertado tiene el mismo fondo que el fondo del elemento-continente. padding-top: 10pt; padding-top: 5px; Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el contenido de este. Padding-top Unidades CSS padding-right: 0.5cm; padding-right: 1pt; Indica el espacio insertado, en este caso por abajo, entre el borde del elemento continente y el contenido de este. Padding-bottom Unidades CSS Border-color color RGB y nombre border-color: red; de color border-color: #ffccff;

Para indicar el color del borde del elemento de la pgina al que se lo aplicamos. Se puede poner colores por separado con los atributos border-top-color, border-right-color, border-bottom-color, border-left-color. none | dotted | solid border-style: solid; Border-style | double | groove | border-style: ridge | inset | outset double; El estilo del borde, los valores significan: none=ningn, borde, dotted=punteado (no parece funcionar), solid=slido, double=doble borde, y desde groove hasta outset son bordes con varios efectos 3D. Border-width Unidades CSS border-width: 10px; border-width: 0.5in;

El tamao del borde del elemento al que se le aplica. float none | left | right float: right; Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe alrededor de dicho elemento. Igual que el atributo align en imgenes en sus valores right y left. clear none | right | left clear: right Si este elemento tiene a su altura imgenes u otros elementos alineados a la derecha o la izquierda, con el atributo clear hacemos que se coloque en un lugar donde ya no tenga esos elementos al lado que se indique.

8. Trucos avanzados con CSS

Las hojas de estilos son un tema largo del que se han escrito libros enteros. Aqu se centra en los temas prcticos y por ello se consideran unos cuantos puntos 8.1 Definir estilos utilizando clases Las clases nos sirven para crear definiciones de estilos que se pueden utilizar repetidas veces. Una clase se puede definir entre las etiquetas <STYLE> (en la cabecera del documento), o en un archivo externo a la pgina. Para definirlas se utiliza la siguiente sintaxis, un punto seguido del nombre de la clase y entre llaves los atributos de estilos deseados. De esta manera: .nombreDeLaClase {atributo: valor;atributo2:valor2; ...} Una vez que se tiene una clase, podemos utilizarla en cualquier etiqueta HTML. Para ello se utiliza el atributo class, ponindole como valor el nombre de la clase, de esta forma: <ETIQUETA class="nombredelaclase">

Ejemplo de la utilizacin de clases <html> <head> <title>Ejemplo de la utilizaci&oacute;n de clases</title> <STYLE type="text/css"> .fondonegroletrasblancas {background-color:black;color:white;fontsize:12;font-family:arial} .letrasverdes {color:#009900} </STYLE> </head> <body> <h1 class=letrasverdes>Titulo 1</h1> <h1 class=fondonegroletrasblancas>Titulo 2</h1> <p class=letrasverdes> Esto es un p&aacute;rrafo con estilo de letras verdes</p> <p class=fondonegroletrasblancas> Esto es un p&aacute;rrafo con estilo de fondo negro y las letras blancas. Es todo!</p> </body> </html> 8.2 Estilo en los enlaces Una tcnica muy habitual, que se puede realizar utilizando las hojas de estilo en cascada y no se poda en HTML, es la definicin de estilos en los enlaces, quitndoles el subrayado o hacer enlaces en la misma pgina con distintos colores. Para aplicar estilo a los enlaces se deben definirlos para los distintos tipos de enlaces que existen (visitados, activos...). Se utiliza la siguiente sintaxis, en la declaracin de estilos global de la pgina (<STYLE>) o del sitio (Definicin en un archivo externo): Enlaces normales A:link {atributos} Enlaces visitados A:visited {atributos} Enlaces activos (Los enlaces estn activos en el preciso momento en que se pincha sobre ellos) A:active {atributos} Enlaces hover (Cuando el ratn est encima de ellos, solo funciona en Iexplorer) A:hover {atributos} El atributo para definir enlaces sin subrayado es text-decoration:none, y para dar color es color:tu_color.

Tambin podemos definir el estilo de cada enlace en la propia etiqueta <A>, con el atributo style. De esta manera podemos hacer que determinados enlaces de la pgina se vean de manera distinta Ejemplo de estilos en enlaces <html> <head> <title>Ejemplos de estilo en enlaces</title> <STYLE type="text/css"> A:link {text-decoration:none;color:#0000cc;} A:visited {text-decoration:none;color:#ffcc33;} A:active {text-decoration:none;color:#ff0000;} A:hover {text-decoration:underline;color:#999999;fontweight:bold} </STYLE> </head> <body> <a href="http://dominioinexistente.nofunciona.com"> Enlace normal</a> <br><br> <a href="enlaces.html">Enlace visitado</a> Pulsar este enlace para verlo activo, poner el rat&oacute;n por encima para que cambie. </body> </html> 8.3 URL como valor de un atributo: Determinados atributos de estilos, como background-image necesitan una URL como valor, para indicarlas podemos definir tanto caminos relativos como absolutos. As pues, podemos indicar la URL de la imagen de fondo de estas dos maneras: backgroundimage: url(fondo.gif) en caso de que la imagen est en el mismo directorio que la pgina. background-image: url(http://www.desarrolloweb.com/images/fondo.gif). 8.4 Ocultar estilos en navegadores antiguos En caso de definir dentro de la etiqueta <STYLE> unas declaraciones de estilos se debe asegurar que estas no se imprimirn en la pgina web con navegadores antiguos. Pensar en un navegador que no reconozca la etiqueta <STYLE>, pensar que corresponde con algo que no entiende y se olvidar de la etiqueta. Lo siguiente que encuentra es texto normal y har que este se vea en la pgina, como con cualquier otro texto. Para evitarlo se debe ocultar con comentarios HTML (<!-- esto es un comentario ->) todo lo que hay dentro de la etiqueta <STYLE>.

9. Aplicacin de estilo avanzada a los enlaces

Se presenta a continuacin cmo se podra crear una barra de navegacin bastante dinmica utilizando nicamente las Hojas de Estilo en Cascada. En el ejemplo vamos a construir una barra de navegacin que contiene enlaces de varios colores que cambian de tonalidad al pasar el ratn por encima. 9.1 Cmo poner estilo a los enlaces Ya se vio en captulos anteriores de este manual de CSS, se define el estilo de los enlaces asignando su apariencia en sus distintos estados: Enlace no visitado. Se define con el atributo link. Enlace visitado. Se define con el atributo visited. Enlace activo (cuando se est pulsando). Se define con active. Enlace con el ratn encima. Se define con hover.

Esta definicin se realiza en la cabecera de la pgina, entre las etiquetas <STYLE> y </ STYLE>, y es global a toda la pgina. Un ejemplo de esto se puede ver en esta declaracin de estilos: <STYLE type="text/css"> A:link {text-decoration:none;color:#0000cc;} A:visited {text-decoration:none;color:#ffcc33;} A:active {text-decoration:none;color:#ff0000;} A:hover {text-decoration:underline;color:#999999;} </STYLE> 9.2 Cmo dar estilo a un enlace en concreto Si se quiere resaltar la barra de navegacin probablemente quererla colocarla en una tabla de la pgina web, con un color que contraste un poco con el fondo. En un caso como este, ser necesario que los enlaces de la barra de navegacin y los enlaces normales de la pgina tengan colores distintos, por estar situados sobre dos tipos de fondos distintos. Es por esto que los enlaces de la barra van a tener un color distinto de los definidos en la cabecera de la pgina, con los estilos. Esto se puede conseguir de esta manera. <a href="#" style="color:#ff0000">Mi enlace</a> Se ha definido el color de un enlace de una manera especfica, utilizando el atributo style, de modo que este enlace siempre tendr el color indicado, independientemente de su estado. Es un enlace amarillo, que quedara muy bien resaltado sobre un fondo oscuro, como se puede ver en el ejemplo de barra de navegacin siguiente.

En la tabla anterior tenemos enlaces amarillos en una web donde los enlaces son azules por defecto. 9.3 Cmo utilizar las clases al aplicar estilo a los enlaces Tambin se puede ver que en anteriores captulos que el uso de clases puede ser muy til a la hora de definir estilos especiales que podemos aplicar a las etiquetas que queramos. A la hora de trabajar con los enlaces tambin podemos aplicar las clases para definir distintos tipos de enlaces, que tienen distintos tipos de estilos. A.clase1:visited {color:#ff0000;} A.clase1:active {color:#ff0000;} A.clase1:link {color:#ff0000} A.clase1:hover {color:#00ff00} La ventaja al utilizar las clases con los estilos de los enlaces es que se puede especificar un formato distinto al enlace dependiendo de su estado: visitado o no, activo o con el ratn sobre l. Por si no qued claro, al especificar el estilo con el atributo style del enlace slo se agregara que el enlace lo que se quiere en amarillo, y siempre se tendr en amarillo (sea visitado o no, activo, o est o no con el ratn encima). Con las clases se define un nuevo tipo de enlace al que se le pueden dar distintos formatos dependiendo su estado. Otras ventajas de utilizar las clases consisten en que se escribe una nica vez los estilos y que se pueden cambiar el color de todos los enlaces de la clase con cambiar la declaracin. A partir de lo que se acaba de aprender se puede crear el ejemplo de barra de navegacin dinmica utilizando CSS que se haba visto al principio del captulo. El cdigo sera el siguiente: <html> <head> <title>Ejemplo CSS para enlaces</title> <style type="text/css"> A:link {color:#0000cc;} A:visited {color:#0000cc;} A:active {color:#0000cc;} A:hover {color:#0000ff;} A.clase1:visited {color:#ffff00;} A.clase1:active {color:#ffff00;}

A.clase1:link {color:#ffff00} A.clase1:hover {color:#00ff00} A.clase2:visited {font-size:12;color:#ffffff;} A.clase2:active {font-size:12;color:#ffffff;} A.clase2:link {font-size:12;color:#ffffff;} A.clase2:hover {font-size:12;color:#ffff33;} body {font-family:arial;font-size:11;font-weight:bold} td {font-family:arial;font-size:11;font-weight:bold} </style> </head> <body> <a href="#">Este enlace es normal</a> <br> <br> <br> <span style="font-weight:normal;font-size:10"> Los enlaces de esta barra son especiales, <br> estn definidos por clases </span> <br> <table width="110" cellspacing="1" cellpadding="2" border="0"> <tr> <td bgcolor="#aa0000"><a href="#" class="clase2"> Opciones 1 </a></td> </tr> <tr> <td bgcolor="red"><a href="#" class="clase1"> Enlace clase 1 </a></td> </tr> <tr> <td bgcolor="red"><a href="#" class="clase1"> Otro de clase 1 </a></td> </tr> <tr> <td bgcolor="red"><a href="#" class="clase1"> Ms enlaces </a></td> </tr> <tr> <td bgcolor="red"><a href="#" class="clase1"> Todava ms </a></td> </tr> </table> </body> </html>

10.Qu son las capas

Como una pequea introduccin a lo que son las capas, la etiqueta HTML <DIV> utilizada para construirla y los atributos CSS con los que se puede aplicar estilos.

Como ya se ha visto en el manual de CSS, <SPAN> sirve para aplicarle estilo a una pequea parte de una pgina HTML. Por ejemplo, con ella se podra hacer que una parte de un prrafo se coloree en rojo. Con <SPAN> no es habitual englobar un trozo muy grande de texto, por ejemplo el que comprenda a varios prrafos. Con <DIV> tambin se puede aplicar estilo a partes de la pgina HTML. La diferencia entre <SPAN> y <DIV> es que con esta ltima s que se puede aplicar estilo a una parte ms amplia de la pgina, por ejemplo a tres prrafos. Adems que la etiqueta <DIV> tiene un uso adicional que es el de crear divisiones en la pgina a las que podremos aplicar una cantidad adicional de atributos para modificar sus comportamientos. Por ejemplo, con el atributo align de HTML podemos alinear la divisin al centro, izquierda, derecha o justificada. Pero su uso ms destacado es el de convertir esa divisin en una capa. Una capa es una divisin, una parte de la pgina, que tiene un comportamiento muy independiente dentro de la ventana del navegador, ya que se puede colocar en cualquier parte de la misma y la se podr mover por ella independientemente, por poner dos ejemplos. En el uso de capas se basan muchos de los efectos ms comunes del DHTML. Las etiquetas <LAYER> e <ILAYER> tienen como objetivo construir capas, pero estas no son compatibles ms que con Netscape, por lo que es recomendable utilizar la etiqueta <DIV> para hacer capas preferentemente a las otras dos. Los atributos que se pueden aplicar a estas etiquetas, pero en concreto a las dos recomendadas <SPAN> y <DIV>, son principalmente de estilos CSS. Estos atributos permiten, como se ha podido ver, a las hojas de estilo en cascada de desarrollo web, modificar de una manera muy exhaustiva la presentacin de los contenidos en la pgina. Para aplicar estilos a estas etiquetas se utiliza el atributo de HTML style, de esta manera: <SPAN style="text-decoration:underline;font-weight:bold"> ... </SPAN> <DIV style="color:red;font-size:10px">...</DIV> Existe una serie de atributos que sirven para posicionar la divisin en la pgina como una capa. Estos atributos se pueden aplicar a la etiqueta <DIV> que es la que serva para crear capas compatibles con todos los navegadores. Los atributos para que la divisin sea una capa son varios y se pueden ver a continuacin. <div id="c1" style="position:absolute; left: 200px; top: 100px;"> Hola! </div> El primero, position, indica que se posicione de manera absoluta en la pgina y los segundos, left y top, son la distancia desde el borde izquierdo de la pgina y el borde superior. Hay otros atributos especiales para capas como width y height para indicar la anchura y altura de la capa, Z-index que sirve para indicar qu capas se ven encima de qu otras, clip que sirve para recortar una capa y hacer que partes de ella no sean visibles, o visibility para definir si la capa es visible o no. Estos y otros atributos se vern en el siguiente captulo, donde se hablar del posicionamiento de capas.

11.Atributos para capas

Como se ha visto en el captulo anterior qu son las capas y algunas pequeas muestras sobre cmo crearlas y darle algn estilo. Ahora vamos a ver en detenimiento los atributos especficos para aplicar posicionamiento a una capa y otros estilos. Antes que nada cabe decir que una capa puede tener cualquier atributo de estilos de los que se han visto en el manual. As, el atributo color indica el color del texto de la capa, el atributo font-size indica el tamao del texto y as con todos los atributos ya vistos. Ahora bien, existen una serie de atributos que sirven para indicar la forma, el tamao de las capas, la visibilidad, etc, que no se han visto en captulos anteriores y que se vern a continuacin. 11.1 Atributo position Indica el tipo de posicionamiento de la capa. Puede tener dos valores, relative o absolute. relative indica que la posicin de la capa es relativa a el lugar donde se estaba escribiendo en la pgina en el momento de escribir la capa con su etiqueta absolute indica que la posicin de la capa se calcula con respecto al punto superior izquierdo de la pgina.

11.2 Atributo top Indica la distancia en vertical donde se colocar la capa. Si el atributo position es absolute, top indica la distancia del borde superior de la capa con respecto al borde superior de la pgina. Si el atributo position es relative, top indica la distancia desde donde se estaba escribiendo en ese momento en la pgina hasta el borde superior de la capa. 11.3 Atributo left Bsicamente funciona igual que el atributo top, con la diferencia que el atributo left indica la distancia en horizontal a la que estar situada la capa. 11.4 Atributo height Sirve para indicar el tamao de la capa en vertical, es decir, su altura. 11.5 Atributo width Indica la anchura de la capa

11.6 Atributo visibility Sirve para indicar si la capa se puede ver en la pgina o permanece oculta al usuario. Este atributo puede tener tres valores. visible sirve para indicar que la capa se podr ver. hidden indicar que la capa est oculta. inherit es el valor por defecto, que quiere decir que hereda la visibilidad de la capa donde est metida la capa en cuestin. Si la capa no est metida dentro de ninguna otra se supone que est metida en la capa documento, que es toda la pgina y que siempre est visible.

11.7 Atributo z-index Sirve para indicar la posicin sobre el eje z que tendrn las distintas capas de la pgina. Dicho de otra forma, con z-index podemos decir qu capas se vern encima o debajo de otras, en caso de que estn superpuestas. El atributo z-index toma valores numricos y a mayor z-index, ms arriba se ver la pgina. 11. 8 Atributo clip Es un atributo un poco difcil de explicar. En concreto sirve para recortar determinadas reas de la capa y que no se puedan ver. Una capa que est visible se puede recortar para que se vea, pero que no se vea algn trozo de esta. El cliping se indica por medio de 4 valores, con esta sintaxis. rect (<top>, <right>, <bottom>, <left>) Los valores <top>, <right>, <bottom> y <left> indican distancias que se pueden apreciar en este esquema.
Punto top-left posicionamiento de la capa right top

Regin visible

height de la capa

bottom

width de la capa

Este es un ejemplo de capa que utiliza todos los atributos que hemos visto en este artculo y alguno ms para aplicar estilo a la capa. <div style="clip: rect(0,158,148,15); height: 250px; width: 170px; left: 10px; top: 220px; position: absolute;

visibility: visible; z-index:10; font-size: 14pt; font-family: verdana; text-align: center; background-color: #bbbbbb"> Esta capa tiene un cliping, por eso se ve entrecortada. <br> <br> Esto es una capa de prueba </div>

12.Problema con el posicionamiento absoluto de capas

Primero que todo, se debe saber que si se trabaja con el position relative las capas se colocan en el lugar donde aparecen dentro del cdigo HTML. De este modo, si se coloca una capa con position relative dentro de una celda de una tabla, dicha capa aparecera dentro de la celda donde la estamos colocando, independientemente del lugar donde se site la celda al cambiar la definicin de la pantalla. El problema de esta solucin es que la capa hara crecer la celda de la tabla donde queremos colocarla (al igual que cualquier otro elemento HTML que colocsemos dentro de la tabla) y es muy probable que nuestro diseo no nos permita este hecho. Seguramente ya se habr notado este problema y si no es as genera una capa que intentas colocar con el atributo position a relative para ver si con eso tu problema ya est resuelto. En casi todos los casos, la capa que se intenta colocar va a tener que tener el position absolute, porque con relative no se arregla totalmente el problema. Entonces se vuelve al problema inicial, que era situar la capa con position absolute en el lugar exacto, independientemente de la definicin de pantalla. La solucin final que se propone pasa por aplicar algn truquillo. La idea es un poco compleja y para su puesta en marcha se deben realizar una serie de acciones que, sinceramente, considero excesivas para un problema inicialmente sencillo. El esquema de trabajo consistir en una capa con posicin relativa, que servir de "ancla" y otra con la posicin absoluta, donde se colocar el contenido final a mostrar en la capa. La capa relativa se colocar en el lugar aproximado donde se necesite que aparezca la capa absoluta. La capa absoluta la se le posicionar, una vez cargada la pgina, en un lugar prximo a la capa relativa. Por supuesto, estas acciones se tienen que realizar con Javascript, que es el lenguaje que nos permite actualizar las posiciones de las capas dinmicamente. Hay que colocar una capa relativa cercana al lugar donde tiene que aparecer la capa con position absolute. Las capas relativas se colocan en el lugar donde las colocan dentro del cdigo HTML, por lo que ser fcil colocar la capa relativa en el lugar exacto y que este lugar sea vlido para cualquier definicin.

La segunda capa, la que tiene el contenido final, la se pondr inicialmente en una posicin cualquiera y escondida, de manera que no se vea que est mal colocada. Una vez terminada de cargar la pgina, se podr acceder a la posicin de la capa relativa, extrayendo sus valores top y left y colocndolos en los correspondientes top y left de la capa con posicin absoluta. Una vez marcada la posicin de la capa absoluta se puede volverla visible.
(x, y) de la capa relativa

Opcin 1

Opcin 1 Sub 2.1

Opcin 1

(x, y) de la capa absoluta

Sub 2.2 Sub 2.3

A la vista de la imagen anterior, la capa con posicin relativa la se ha colocado en el enlace. En realidad habra tres capas con posicin relativa para poder posicionar otras tantas capas con posicin absoluta. La parte que esta sombreada de verde corresponde al espacio que abarcara la capa relativa. Su posicin sera la que est marcada por con la flecha que aparece en su esquina superior izquierda. Dicha posicin depende del lugar donde aparezcan los enlaces en la pgina. Luego, con Javascript se debera asignar la posicin de la capa absoluta de una manera parecida a esta. left de la capa absoluta = left de la capa relativa top de la capa absoluta = top de la capa relativa + altura de la capa relativa Se puede sumarle algn pxel ms a la posicin de la capa, si es que se requiere moverla un poco abajo y a la derecha, tal como se ha visto en la imagen.

13.Cmo evitar que una pgina se imprima

Para ello, hay que echar mano de las hojas de estilo. Tanto si el documento tiene una hoja ya asociada como si no, lo que vamos a hacer es asociarle un nueva hoja de estilos. Dicha hoja contendr un nico estilo, con el cdigo necesario para ocultar un elemento: .nover{ visibility:hidden }

A la hora de asociar la hoja de estilos, se le aade un modificador a la etiqueta HTML que enlaza con el fichero .css que permite especificar para qu tipo de medio se aplicar esta hoja. En este caso, se aplica en el mbito de la impresin, por lo que se utiliza el atributo media="print". <link href="nombre_hoja" rel="stylesheet" type="text/css" media="print"> Una vez hecho esto, basta que toda nuestra pgina este dentro de un elemento div, que pertenezca a la clase nover. <body> <div class="nover"> -- Contenido -</div> </body> Al hacer esto se provoca que en pantalla se visualice la pgina, pero que si por el contrario se decide imprimir, se le aplicar la hoja de estilos de impresin, en la que el elemento esta puesto como no visible, por lo que no se imprimir. Codigo Completo: El cdigo ntegro de la pgina web y la hoja de estilos asociada. Pgina HTML <html> <head> <link href="estilos.css" rel="stylesheet" type="text/css" media="print"> </head> <body> <div class="nover"> contenido de la pagina </div> </body> </html> Hoja estilos: estilos.css .nover{ visibility:hidden }