You are on page 1of 15

Hojas de estilo en cascada.

Introduccin Las hojas de estilo repesentan un gran avance con respecto a cmo los diseadores de pginas Web pueden aumentar grandemente su capacidad de mejorar la apariencia de sus pginas. En su origen el Web fue concebido en un entorno cientfico, como un medio de intercambio de documentacin, en el ue lo esencial era el contenido, siendo la presentacin algo completamente accesorio. !ero a medida ue el Web era descubierto por toda clase personas como un fantstico medio de difusin, las limitaciones del "#$L con respecto al control sobre la presentacin se convirtieron en una fuente continua de frustraciones. Los nuevos diseadores de pginas Web estaban acostumbrados a los medios tradicionales sobre papel, en los ue tenan un control total sobre la apariencia. "an ido aprendiendo a utili%ar diversos trucos para suplir las limitaciones estilsticas del "#$L. !ero aun ue su intencin ha sido buena & mejorar la presentacin de las pginas & las t'cnicas empleadas han tenido unos efectos secundarios a menudo desafortunados. Estas t'cnicas o trucos suelen funcionar para algunas personas, algunas veces, pero nunca para todas las personas ( en todos los casos. )arios ejemplos de estas t'cnicas son* +,tili%acin de eti uetas no estndar, inventadas por los creadores de algunos navegadores -como .etscape o E/plorer0. +1onvertir el te/to en imagen. +,sar imgenes transparentes para crear espacios en blanco. +,so de tablas para for%ar determinadas presentaciones. +,tili%ar programas o lenguajes ajenos al "#$L para conseguir determinados fines, etc. Estas t'cnicas aumentan considerablemente la complejidad de las pginas del Web, tienen una fle/ibilidad limitada, ( sobre todo, provocan problemas al ser utili%ados por distintos navegadores o plataformas. Las hojas de estilo devuelven la facilidad de controlar la presentacin ( sobrepasan la limitada gama de mecanismos de presentacin ue se han ido aadiendo al "#$L durante estos 2ltimos aos. !or ejemplo, con ellas es fcil determinar el espacio entre las lneas de te/to, el tipo ( tamao de las fuentes, el grosor de los mrgenes, los colores usados para el te/to o el fondo, as como el fomateo a voluntad de cual uier eti ueta. 3dems ha( otro aspecto mu( interesante de las hojas de estilo, ( es ue separan por completo la informacin para la presentacin de una pgina de su contenido, con lo ue se facilita mucho el diseo ( revisin de las pginas, pues se puede variar la presentacin de una pgina, o de todo el conjunto de ellas, sin cambiar una sola lnea del cdigo del "#$L. 1omo veremos ms adelante, se pueden definir variaciones de diseo por medio de las 4clases4. !or ejemplo, si se necesitan cinco estilos de prrafos diferentes, se pueden definir cinco clases para la eti ueta 5!6 * !.normal, !.indentado, !.subra(ado, !.rojo ( !.dobleespacio. En este captulo se hace una introduccin a las hojas de estilo, pues se trata de un tema mu( e/tenso. En los siguiente captulos se vern con detalle los distintos atributos ( valores as como distintos consejos para su mejor utili%acin. 78u' navegadores las soportan9
:

;ebido a ue se trata de una reciente innovacin, ha( un soporte todava limitado para las "ojas de estilo en cascada. 3ctualmente slo lo soportan el E/plorer <.= en adelante, as como el .etscape >.= en adelante. ?tros navegadores, o las versiones ms antiguas de los anteriormente mencionados, simplemente lo ignorarn. Las "ojas de estilo todava no han sido incorporadas al vigente estndar del "#$L , el "#$L <.@, pero lo van a ser en el pr/imo, el "#$L >.=, del cual se ha publicado (a un borrador. En concreto, la documentacin referida a las "ojas de estilo se puede encontrar en esta pgina. 71mo funcionan9 Las hojas de estilo en cascada nos permiten redefinir las reglas ue utili%a el navegador para presentar una pgina del Web. #odos los navegadores tienen sus reglas. 3s, por ejemplo &como vimos en el captulo :, el "#$L define ue las cabeceras del nivel uno -el te/to ue est entre las eti uetas 5":6 ( 5A":60 se muestre como un te/to alineado a la i% uierda, un par de puntos ma(or ue el resto, en negrita ( en la fuente #imes Boman. Ejemplo* 5":6 1abecera de nivel : 5A":6 se ver como* 1abecera de nivel : 1ada eti ueta define sus propias reglas para mostrar el te/to ue engloba. 1on las hojas de estilo podemos cambiar cada una de estas reglas si lo deseamos. Es decir, podemos modificar a nuestro antojo el comportamiento de cada eti ueta. "a( tres maneras de aadir estilos a nuestras pginas Web. :.3adiendo instrucciones de estilo slo a eti uetas concretas, o a un grupo de ellas. @.Inclu(endo las instrucciones de estilo en el documento "#$L de una pgina concreta & de una manera anloga a cmo se inclu(e un script de Cavascript. Esto permite cambiar la apariencia de una hoja entera, cambiando unas pocas lneas. <.Enla%ando todos documentos "#$L de todas las pginas ue componen un sitio del Web con un fichero de definicin del estilo. ;e esta manera, se puede cambiar la apariencia de m2ltiples pginas retocando un solo fichero. !odemos utili%ar en nuestras pginas uno, dos o los tres m'todos descritos, como se ver ms adelante. :. Estilo para eti uetas concretas o grupos de eti uetas Este m'todo es el apropiado si slo se desea cambiar el estilo en unas secciones determinadas de una pgina. 1on 'l podemos manipular las propiedades de alguna eti ueta o de alg2n grupo de eti uetas. De hace aadiendo el atributo D#ELE, ue contiene una serie de propiedades, dentro de la eti ueta correspondiente. )eamos el siguiente ejemplo* 5!6
@

4Este es un prrafo normal, sin mrgenes a la i% uierda ni a la derecha, con el color de su te/to en negro4. 5! D#ELEF4margin&left* =.GinH margin&right* =.GinH color*green46 48uiero ue este otro prrafo tenga un margen i% uierdo de media pulgada, al igual ue el margen derecho. 3dems uiero ue su te/to sea de color verde4. 8ue se ver -en los navegadores ue soportan hojas de estilo0 de esta manera* 4Este es un prrafo normal, sin mrgenes a la i% uierda ni a la derecha, con el color de su te/to en negro4. 48uiero ue este otro prrafo tenga un margen i% uierdo de media pulgada, al igual ue el margen derecho. 3dems uiero ue su te/to sea de color verde4. 1omo se ve en este ejemplo, hemos variado la manera de cmo se comporta habitualmente la eti ueta 5!6. !odamos haber conseguido otras muchas ms cosas, como se ver ms adelante. ?bs'rvese la sinta/is del atributo D#ELE. De ponen entre comillas una serie de propiedades -por ejemplo, margin&left0, ( despu's de dos puntos se pone el valor de esa propiedad -en este caso, =.Gin o sea, =.G pulgadas0. Las distintas propiedades debern estar separadas por punto ( coma. Di ueremos cambiar la apariencia de una seccin entera - ue agrupe un conjunto de eti uetas0, se puede utili%ar la eti ueta 5;I)6, con la ue definimos el estilo globalmente para esa seccin. En el siguiente ejemplo cambiamos el color -a rojo0 ( el tamao de la fuente -a :I puntos de altura0 de un blo ue de eti uetas por medio de la eti ueta 5;I)6, lo ue tiene el mismo efecto ue si hubi'ramos asignado este estilo separadamente a cada una de las eti uetas englobadas -5!6, 5,L6 ( 5LI60* 5;I) D#ELEF4font&si%e* :IptH color* red46 5!6La definicin del estilo -rojo ( :I puntos0, afecta a todo el blo ue de eti uetas. 5!6Este te/to tambi'n es rojo ( tiene :I puntos de altura. 5!63l igual ue esta lnea. 5A;I)6 8ue se ve de la siguiente manera* La definicin del estilo -rojo ( :I puntos0, afecta a todo el blo ue de eti uetas. Este te/to tambi'n es rojo ( tiene :I puntos de altura. 3l igual ue esta lnea. 78u' ocurre si a una de las eti uetas englobadas por ;I) le introducimos un estilo distinto9 1omprob'moslo introduciendo un estilo propio a la segunda eti ueta 5!6* 5;I) D#ELEF4font&si%e* :IptH color* red46 5!6 )eamos si la definicin del estilo -rojo ( :I puntos0, afecta a todo el blo ue de eti uetas, hasta la eti ueta de cierre de ;I).
<

5! D#ELEF4color* blue46Esta lnea es a%ul, a pesar de estar englobada dentro de ;I), por ue tiene su propio estilo. 5!6Esta otra cumple con el estilo de ;I), por ue no tiene estilo propio. 5A;I)6 Este es el resultado* )eamos si la definicin del estilo -rojo ( :I puntos0, afecta a todo el blo ue de eti uetas. Esta lnea es a%ul, a pesar de estar englobada dentro de ;I), por ue tiene su propio estilo. Esta otra cumple con el estilo de ;I), por ue no tiene estilo propio. 1omo se comprueba en este caso, el estilo dentro de una eti ueta concreta tiene precedencia sobre el estilo del blo ue, impuesto por ;I). 3 u comen%amos a ver la nocin de precedencia de unos m'todos sobre otros, ue como hemos visto antes, son mu( variados. Este es el motivo de ue se llamen "ojas de Estilo en 1ascada -ha( una cascada de m'todos para aplicar los estilos, teniendo un orden de precedencia riguroso de unos sobre otros0. De ver esto ms adelante. "a( otra eti ueta, 5D!3.6, ue tiene una misin parecida a 5;I)6, pero ue se usa para cambiar elementos ms pe ueos -por ejemplo, palabras o incluso letras0, en lugar de blo ues enteros. !or ejemplo* 5!6 En este prrafo slamente ueremos atribuir un estilo a esta 5D!3. D#ELEF4font&famil(* courierHfont&si%e* :GptHcolor* fuchsia46palabra5AD!3.6, ue ueremos ue su fuente sea courier, de :G puntos de altura ( de color fucsia. Besultado* En este prrafo slamente ueremos atribuir un estilo a esta palabra, ue ueremos ue su fuente sea courier, de :G puntos de altura ( de color fucsia. Este m'todo de introducir el estilo en eti uetas concretas o en conjuntos de eti uetas es sencillo de aplicar -como hemos visto0, ( es el adecuado si slo se desea hacer alg2n cambio puntual en una pgina. Din embargo, no es un adelanto mu( grande con respecto al "#$L, donde e/isten eti uetas ue hacen funciones similares. 3dems, si se desean hacer cambios, ha( ue e/aminar todo el documento en busca de eti uetas dispersas. Di se desean hacer cambios globales a una o ms pginas son ms conveniente los otros dos m'todos ue veremos a continuacin. @. Inclusin global del estilo en un documento "#$L De hace poniendo un blo ue de instrucciones dentro de las eti uetas 5D#ELE6 5AD#ELE6, ue deber estar colocado dentro de la cabecera del documento, despu's del ttulo, entre las eti uetas 5A#I#LE6 ( 5A"E3;6 -de igual manera ue se hace con los scripts de Cavascript0.
>

Esta eti ueta 5D#ELE6 tiene un atributo, #E!E, ue especifica el tipo de medio en ue va a ser publicado en Internet, en nuestro caso ser 4te/tAcss4 - ue permitir a los navegadores ue no soporten este tipo el ignorar la hoja de estilo0. Es decir, la eti ueta ueda de esta manera* 5D#ELE #E!EF4te/tAcss46 !or tanto, la estructura ser la siguiente* 5"#$L6 5"E3;6 5#I#LE6 5A#I#LE6 D#ELE #E!EF4te/tAcss46 Jblo ue de instruciones de estiloK 5AD#ELE6 5A"E3;6 5L?;E6 Jconjunto de todas las eti uetas ue componen la pginaK 5AL?;E6 5A"#$L6 )eamos ahora con un ejemplo, cmo se escribe el blo ue de instrucciones del estilo, incluido dentro de la eti ueta 5D#ELE6 -en el captulo siguiente se ve con detalle cada uno de los atributos0* 5D#ELE #E!EF4te/tAcss46 L?;E MbacNground* (elloO Hfont&si%e* :=ptH font&famil(* 3rialH margin&left* =.GinH margin&right* =.GinP ": MbacNground* blueH font&si%e* :>ptHfont&Oeight* boldH color* redP "@ Mfont&si%e* :@ptHfont&Oeight* boldH color* redP ;I) MbacNground* ,BL-nubes.jpg0P 5AD#ELE6 1omo se ve en este ejemplo, se ponen las distintas eti uetas a las ue se uiere atribuir un estilo -en este caso L?;E, ":, "@ ( ;I), pero podran haber sido otras cuales uiera0H a continuacin del nombre de cada eti ueta, ( englobadas por los signos 4M4 ( 4P4 van las distintas propiedades con sus respectivos valores, separadas unas de otras por un punto ( coma. Di se coloca este blo ue en la cabecera del documento "#$L, donde se ha indicado antes, veremos ue cada ve% ue se usa una de las eti uetas ue tienen una definicin de estilo, no se comportar de la forma habitual, sino tal como la hemos definido. El resto de las eti uetas, ue no estn incluidas en el blo ue de definicin del estilo, se comportarn de la forma habitual. !uede comprobarse lo dicho, viendo una pgina a la ue se le ha aplicado el estilo del ejemplo anterior. <. Enla%ando distintos documentos a una hoja de estilo Di nuestro sitio del Web est compuesto por muchas pginas, ( ueremos darles un estilo uniforme a unas cuantas, en ve% de incluir un blo ue de definicin de estilo repetido en cada una de ellas -como se ha visto en la seccin anterior0, se puede establecer un enlace a un fichero de te/to ue contiene el blo ue de definicin del estilo. Dupongamos ue ueremos aplicar a unas cuantas pginas el estilo visto en el ejemplo anterior. #endramos ue crear un fichero de te/to como este* L?;E MbacNground* (elloO Hfont&si%e* :=ptH font&famil(* 3rialH margin&left* =.GinH margin&right* =.GinP
G

": MbacNground* blueH font&si%e* :>ptHfont&Oeight* boldH color* redP "@ Mfont&si%e* :@ptHfont&Oeight* boldH color* redP ;I) MbacNground* ,BL-nubes.jpg0P ?bs'rvese ue no tiene ninguna eti ueta, pues no es un documento normal "#$L, sino ue es un fichero de te/to ue slo contiene el blo ue de definicin del estilo. De guarda con el nombre ue se uiera, pero tiene ue tener necesariamente la e/tensin .css Dupongamos ue lo guardamos con el nombre de miestilo.css En todas las pginas ue ueremos ue tengan este estilo concreto, slamente deberemos de aadir -en el mismo sitio de la cabecera ue para el caso anterior, es decir entre 5A#I#LE6 ( 5A"E3;6, la siguiente eti ueta* 5LI.Q BELFst(lesheet "BERF4miestilo.css4 #E!EF4te/tAcss46 3 u se ha supuesto ue el fichero miestilo.css se ha dejado en el mismo directorio donde estn los documentos "#$L. Di no es as, es decir, si est en otro subdirectorio en el servidor, habra ue indicar la ruta -por, ejemplo* "BERF4subdirectorioAmiestilo.css40. ,n ejemplo de este m'todo lo constitu(e este manual, en donde todos los captulos estn enla%ados con un fichero ue contiene la hoja de estilo para todos ellos, llamado Omst(le.css -se puede ver en esta pgina su te/to0. $e%clando los m'todos 1omo se ha visto anteriormente, ha( tres m'todos de aplicar las hojas de estilo en cascada. 7De pueden aplicar ms de uno a la ve% en una misma pgina9 D. !or ejemplo, en la confeccin de este manual se utili%an simultneamente algunos de ellos. En las pginas del ndice ( de la portada se utili%an el segundo m'todo -inclusin de la hoja de estilo en el documento "#$L0 ( tambi'n el primero -inclusin del estilo en eti uetas concretas0. E en la totalidad de los captulos se utili%an el tercero -enlace a la hoja de estilo0 ( el primero. 78u' ocurre si ha( informacin contradictoria entre ellos9 !ara evitar conflictos entre los distintos m'todos usados simultneamente, e/iste un orden de precedencia, es decir, cul prevalecer sobre el otro si dan rdenes contradictorias sobre un aspecto concreto. El orden de precedencia es el siguiente -de ma(or a menor0* :.Estilo dentro de una eti ueta. @.Llo ue de estilo en la cabecera del documento. <.Enlace a un fichero ue contiene la hoja de estilo. Esto uiere decir ue una orden de estilo, por ejemplo el color del te/to, puesta dentro de una eti ueta, prevalecer sobre la ue est' indicada en los otros dos m'todos, si es ue se usan en esa pgina.

Lo ms prctico es utili%ar el tercer m'todo -enlace a una hoja de estilo0, para dar una apariencia consistente a todas las pginas, ( si es necesario modificar un aspecto concreto en alguna de ellas, utili%ar el primero o el segundo. En el siguiente captulo se detallan los distintos atributos ( sus valores. Atributos 3 continuacin se muestra en una tabla el resumen de los atributos ue se pueden incuir en las hojas de estilo. !ulsando el enlace con el nombre del atributo nos lleva a la seccin donde se comenta con ms detalle. 3tributo;escripcin)aloresEjemplofont&si%eEstablece el tamao de te/to. puntos -pt0 pulgadas -in0 centmetros -cm0 pi/els -p/0Mfont&si%e* :@ptPfont&famil(Establece la fuente. nombre de la fuente nombre de la familia de la fuenteMfont&famil(* courierPfont&OeightEstablece el espesor de la fuente. e/tra& light light demi&light medium demi&bold bold e/tra&boldMfont&Oeight* boldPfont&st(le1onvierte el te/to a cursiva. normal italicMfont&st(le* italicPline&heightEstablece la distancia entre lneas. puntos -pt0 pulgadas -in0 centmetros -cm0 pi/els -p/0 porcentaje -S0Mline&height* @>ptPcolorEstablece el color del te/to. nombre del color valores BTLMcolor* bluePte/t&decorationDubra(a o remarca el te/to. none underline italic line&throughMte/t&decoration* underlinePmargin&leftEstablece el mrgen i% uierdo de la pgina. puntos -pt0 pulgadas -in0 centmetros -cm0 pi/els -p/0Mmargin&left* :inPmargin&rightEstablece el mrgen derecho de la pgina. puntos -pt0 pulgadas -in0 centmetros -cm0 pi/els -p/0Mmargin&right* :inPmargin&topEstablece el mrgen superior de la pgina. puntos -pt0 pulgadas -in0 centmetross -cm0 pi/els -p/0UMmargin&top* &@=p/Pte/t&alignEstablece la justificacin del te/to. left center rightMte/t&align* rightPte/t&indentEstablece la indentacin del te/to. puntos -pt0 pulgadas -in0 centmetros -cm0 pi/els -p/0Mte/t&indent* =.GinPbacNgroundEstablece la imagen o el color del fondo. ,BL, nombre del color valor BTLMbacNground* V<<11==P E/plicacin de los atributos
W

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& font&si%e El atributo font&si%e establece el tamao del te/to en puntos -pt0, pulgadas -in0, centmetros -cm0, o pi/els -p/0. Ejemplos* Mfont&si%e* :@ptP Mfont&si%e* :inP Mfont&si%e* GcmP Mfont&si%e* @>p/P &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& font&famil( el atributo font&famil( establece la fuente del te/to. De puede especificar una 2nica fuente, como por ejemplo* Mfont&famil(* 3rialP u otras fuentes alternativas, separadas por una coma, como por ejemplo* Mfont&famil(* 3rial, "elveticaP En el ejemplo anterior, nos aseguramos ue los sistemas ue no soporten la fuente 3rial, uticen la fuente "elvetica. Es mu( aconsejable especificar, como 2timo recurso, un nombre gen'rico de familia de fuentes. Ejemplo* Mfont&famil(* 3rial, "elvetica, sans&serifP Estos nombres gen'ricos de familia de fuentes -serif, sans&serif, cursive, fantas(, o monospace0 tienen la ventaja de ue son representados como las fuentes ue tenga instaladas el usuario. Di se hace referencia a una fuente cu(o nombre consiste en varias palabras -separadas por espacios en blanco0, ha( ue englobarla entre comillas. Ejemplo* Mfont&famil(* 41ourier .eO4P &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& font&Oeight El atributo font&Oeight establece el espesor de la fuente* Mfont&Oeight* mediumP Mfont&Oeight* boldP Los valores aceptados -e/tra&light, light, demi&light, medium, demi&bold, bold, ( e/tra&bold0 dependen en las fuentes ue tenga instaladas el usuario. -!or ejemplo, el sistema del usuario puede ue slo permita medium ( bold para una determinada fuente0. &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& font&st(le El atributo font&st(le establece la fuente como cursiva* Mfont&st(le* italicP
X

En el borrador de la W<1 se contemplan adems otros posibles estilos -min2sculas, oblicuas, etc.0 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& line&height Este atributo establece la separacin entre lneas, ue se puede e/presar en puntos -pt0, pulgadas -in0, centmetros -cm0, pi/els -p/0 o porcentaje -S0. Ejemplo* Mline&height* @=ptP #ambi'n se puede e/presar como un porcentaje del valor por defecto* Mline&height* :G=SP En el E/plorer <.=, el espaciado se aade antes de las lneas, no despu's de ellas. 3dems este atributo se comporta de forma impredecible con te/to ue usa diferentes tamaos de te/to en la misma lnea. &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& color Este atributo establece el color del te/to de acuerdo con su valor he/adecimal -v'ase el 1ap. W0, o usando los nombres de colores* Mcolor* V<<11==P Mcolor* redP Los nombres de los colores son los siguientes* 5!icture65!icture65!icture65!icture6blacNsilvergra(Ohite5!icture65!icture65!icture65!icture6maroonre dpurplefuchsia5!icture65!icture65!icture65!icture6greenlimeolive(elloO5!icture65!icture65!icture65!i cture6nav(blueteala ua &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& te/t&decoration Este atributo permite remarcar el te/to. Los valores soportados son underline -subra(ado0, line&through -tachado0, none -ninguno0 e italic -cursiva0. Ejemplos* Mte/t&decoration* underlineP Mte/t&decoration* line&throughP &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& margin&left, margin&right, ( margin&top Estos atributos establecen los mrgenes -i% uierdo, derecho ( superior respectivamente0 en el mbito de una eti ueta. De pueden especificar los mrgenes en puntos, pulgadas -inches0, centmetros o pi/els. !or ejemplo* L?;E Mmargin&left* =.GinH margin&right* =.GinH

margin&top* :inP De pueden usar valores negativos. Entonces, en ve% de contraerse el magen, se e/tender en la direccin opuesta. &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& te/t&align Este atributo permite justificar los elementos "#$L a la i% uierda, al centro o a la derecha. Ejemplos* Mte/t&align* leftP Mte/t&align* centerP Mte/t&align* rightP &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& te/t&indent 3dems de establecer los mrgenes, se puede provocar una indentacin del te/to -es decir, ue la primera palabra del prrafo se desplace una cantidad deseada0. De puede e/presar en puntos, pulgadas, centmetros o pi/els. !or ejemplo* ! Mte/t&indent* =.GcmP hace ue los prrafos ue se crean con la eti ueta 5!6, empiecen con su primera lnea indentada =.G centmetros. De pueden usar valores negativos, ue sacan el te/to hacia los mrgenes. &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& bacNground De utili%a este atributo para destacar secciones de una pgina, estableciendo un color de fondo o una imagen de fondo. !ara establecer un color de fondo, se especifica su valor he/adecimal -v'ase el 1ap. W0, o un nombre de color -ver el atributo color visto anteriormente0. Ejemplos* MbacNground* redP MbacNground* VII<<RRP #ambi'n se puede colocar una imagen de fondo en el mbito de la eti ueta. Es decir, se puede poner, por ejemplo, una imagen de fondo en un prrafo determinado. !ara colocar una imagen, se especifica el ,BL entre par'ntesis -no entre comillas, como es lo habitual0. !or ejemplo* MbacNground* ,BL-http*AAOOO.lander.esAOebmaestroAdocsAnubes.jpg0P En este caso se ha puesto el ,BL absoluto, es decir, la referencia completa en el servidor. !ero es ms conveniente hacerlo de forma relativa, es decir con respecto al documento "#$L. Di el fichero de imagen (
:=

el documento "#$L estn en el mismo directorio, no ha( ue poner ning2n ,BL, sino el nombre del fichero de imagen directamente. En el ejemplo anterior sera* MbacNground* ,BL-nubes.jpg0P )amos a ver una aplicacin prctica* poner esta imagen de fondo a un prrafo, utili%ando el m'todo de incluir el estilo en la eti ueta 5!6* 5! D#ELEF4bacNground* ,BL-nubes.jpg046 Este prrafo tiene un fondo con imgenes, al igual ue con el "#$L convencional se consigue para toda una pgina, pero en este caso est limitado al mbito de esta eti ueta. 5!6 En cambio, este otro prrafo no tiene imagen de fondo, por ue no se le ha incluido este atributo. Este es el resultado* 5!icture6Este prrafo tiene un fondo con imgenes, al igual ue con el "#$L convencional se consigue para toda una pgina, pero en este caso est limitado al mbito de esta eti ueta. En cambio, este otro prrafo no tiene imagen de fondo, por ue no se le ha incluido este atributo. Web$aestro* http*AAOOO.lander.esAOebmaestro & Z Rrancisco 3rocena &&&&&&&&&&&&&&&&&&&&&&&&&&&&& @G. "ojas de estilo en cascada. 1onsejos de utili%acin En este captulo se amplan los conceptos vistos en los dos captulos anteriores, ( se introducen algunos nuevos sobre las hojas de estilo en cascada. 3grupando distintos atributos Dupongamos ue se uieren atribuir los mismos atributos a diferentes eti uetas, como por ejemplo* ": Mfont&si%e* :GptH font&Oeight* boldH color* maroonP "@ Mfont&si%e* :GptH font&Oeight* boldH color* maroonP "< Mfont&si%e* :GptH font&Oeight* boldH color* maroonP De pueden agrupar de esta manera* ":, "@, "< Mfont&si%e* :GptH font&Oeight* boldH color* maroonP 3grupacin de los atributos del te/to
::

En el captulo anterior se han visto una serie de atributos relacionados con la apariencia del te/to. De pueden simplificar agrupndolos de una manera determinada. 3s, por ejemplo, en lugar de* ! Mfont&Oeight* boldH font&st(le* italicH font&si%e* :@ptH line&height* @=ptH font&famil(* #imes, serifH P De pueden agrupar en un 2nico atributo llamado font* ! Mfont* bold italic :@ptA@=pt #imes, serifP .ota* El orden de los atributos es significativo. Los atributos font&Oight ( font&st(le se deben especificar antes ue los dems. 3grupacin de los atributos de los mrgenes #ambi'n se pueden agrupar los tres distintos atributos para los mrgenes -superior, derecho e i% uierdo0 en un 2nico atributo llamado margin. 3s, por ejemplo, en lugar de* L?;E Mmargin&top* @=p/H margin&right* &:=p/H margin&left* &:=p/P De puede poner* L?;E Mmargin* @=p/ &:=p/&:=p/P El orden de colocacin es significativo. ;ebe ser* superior -top0, derecho -right0 e i% uierdo -left0. Di se pone un 2nico valor, ser aplicado a los tres mrgenes. )ariaciones por medio de clases En el captulo @< vimos ue uno de los m'todos era la inclusin global del estilo, en el ue se definan los estilos de un blo ue de distintas eti uetas. )imos all este ejemplo* 5D#ELE #E!EF4te/tAcss46 L?;E MbacNground* (elloO H font&si%e* :=ptH font&famil(* 3rialH margin&left* =.GinH margin&right* =.GinP ": MbacNground* blueH font&si%e* :>ptH font&Oeight* boldH color* redP "@ Mfont&si%e* :@ptH font&Oeight* boldH color* redP ;I) MbacNground* ,BL-nubes.jpg0P 5AD#ELE6 1omo se puede ver, se define para la eti ueta "@, por ejemplo, ue su te/to sea de color rojo -red0. !ero esto hace ue, obligatoriamente, todas las cabeceras de nivel "@ sean de este color en toda la pgina.

:@

!ero nos podra interesar, por el motivo ue sea, ue unas veces tenga el color rojo ( otras veces sea de otros colores. !ara conseguirlo, se pueden emplear unas clases -variantes de esta eti ueta0. !ara ello, se define separadamente la eti ueta "@, seguida de un punto ( un nombre ue ueramos, como por ejemplo* "@.rojo Mfont&si%e* :@ptH font&Oeight* boldH color* redP "@.verde Mfont&si%e* :@ptH font&Oeight* boldH color* greenP "@.a%ul Mfont&si%e* :@ptH font&Oeight* boldH color* blueP ( en la pgina, podremos utili%ar, seg2n nos convenga, una u otra de estas variantes de la siguiente manera* 5"@ 1L3DDFrojo6Esta cabecera ser de color rojo5A"@6 5"@ 1L3DDFverde6Esta cabecera ser de color verde5A"@6 5"@ 1L3DDFa%ul6Esta cabecera ser de color a%ul5A"@6 1omo se ve, esto nos da una fle/iblidad a2n ma(or para obtener la apariencia ue ueramos en nuestra pginas. 3plicacin de estilo a los enlaces Las hojas de estilo tambi'n permiten modificar a voluntad la apariencia de los enlaces, asignando cual uiera de los atributos vistos -color del te/to, tamao de la fuente, e/istencia o no del subra(ado, etc.0. "a( dos tipos de enlaces ue se pueden modificar* 3*linN enlaces ue todava no han sido visitados -pulsados0 3*visited enlaces ue (a han sido visitados -pulsados0 !or ejemplo* 3*linN Mcolor* redP 3*visited Mcolor* greenP hace ue los enlaces sin visitar sean de color rojo, ( una ve% visitados se pongan de color verde. Di se les aplica el atributo te/t&decoration visto en el captulo anterior, ajustado al parmetro none -ninguno0, hace ue los enlaces no est'n subra(ados. Ejemplo* 3*visited Mcolor* fuchsiaH te/t&decoration* noneP hace ue los enlaces visitados sean de color fucsia ( no est'n subra(ados. 1omentarios De pueden aadir comentarios propios a las hojas de estilo, ue pueden servir de recordatorio posterior. De pueden colocar en cual uier sitio de la especificacin, siempre ue va(an englobados entre los caracteres AU ( UA. Ejemplo* ": Mfont* @=ptA@@pt boldH colorFV==RR==P AU1olor verde para las cabeceras de nivel : UA
:<

;iseando para todos los navegadores Di se utili%a el m'todo de incluir un blo ue de estilo en la cabecera -ver cap. @<0, ue consiste en poner las distintas instrucciones de estilo entre las eti uetas 5D#ELE6 ( 5AD#ELE6, tal como en el ejemplo ue se vi all* 5D#ELE #E!EF4te/tAcss46 L?;E MbacNground* (elloO H font&si%e* :=ptH font&famil(* 3rialH margin&left* =.GinH margin&right* =.GinP ": MbacNground* blueH font&si%e* :>ptH font&Oeight* boldH color* redP "@ Mfont&si%e* :@ptH font&Oeight* boldH color* redP ;I) MbacNground* ,BL-nubes.jpg0P 5AD#ELE6 en los navegadores ue no implementen las hojas de estilo se ignorarn las eti uetas 5D#ELE6 ( 5AD#ELE6, pero podra ocurrir ue apare%ca como te/to el blo ue de definicin del estilo. !ara evitar esto, es conveniente englobar dicho blo ue de informacin entre los smbolos 5[&& ( &&6 -como se vi en el 1ap. @0, ue son los ue nos permiten hacer comentarios no visibles en la pantalla. !or tanto, es conveniente poner el blo ue de definicin del estilo de esta manera* 5D#ELE #E!EF4te/tAcss46 5[&& L?;E MbacNground* (elloO H font&si%e* :=ptH font&famil(* 3rialH margin&left* =.GinH margin&right* =.GinP ": MbacNground* blueH font&si%e* :>ptH font&Oeight* boldH color* redP "@ Mfont&si%e* :@ptH font&Oeight* boldH color* redP ;I) MbacNground* ,BL-nubes.jpg0P &&6 5AD#ELE6 3provechando la herencia entre eti uetas 1omo sabemos, las eti uetas de un documento "#$L tienen una estructura definida, ue de manera mu( resumida se puede poner de esta forma* 5"#$L6 5L?;E6 .... -conjunto de eti uetas ue conforman la pgina0 5AL?;E6 5A"#$L6 1omo se puede ver, la eti ueta 5L?;E6 engloba a todas las dems. Di se la asigna un estilo determinado a esta eti ueta, todos los elementos ue est'n dentro de la pgina -tablas, listas, prrafos, etc.0 heredarn este estilo. !or tanto, para establecer un estilo global a la pgina entera, lo ms apropiado es atribuserlo a la eti ueta 5L?;E6. !or ejemplo* L?;E Mfont* :=ptA::pt 3rial, "elvetica, sans&serifH bacNground* url-nubes.jpg0H

:>

margin&left* =.GinH margin&right* =.GinP establece para la pgina entera la fuente, separacin entre lneas, imagen de fondo ( espesor de los mrgenes. Di se precisa ue ciertos elementos concretos dentro de la pgina tengan otras caractersticas distinta a la general, entonces ha( ue definirlas por separado.

:G

You might also like