You are on page 1of 84

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

com

Manual de CSS, hojas de estilo


Tutorial completo y prctico sobre hojas de estilo en cascada (CSS). Aprende a utilizar esta tecnologa que te ayudar a crear pginas ms atracti as y precisas. !l curso contiene la descripci"n# uso# sinta$is# y lista de atributos para crear estilos

Autores del manual


Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez Federico Elgarte Fernando Campaa

Director de DesarrolloWeb.com y EscuelaIT http://www.cssboule#ar.com.ar/ http://www.desarrolloweb.com ($ cap!tulo" (2 cap!tulos"

%rogramaci&n ' (ultimedia http://www.ra)idwam.com.ar/ (2 cap!tulos"

Serviweb

Dise*o web (urcia http://www.ser#iweb.es/ ($ cap!tulo"

Leonardo A. Correa

http://www.webno#a.com.ar ($ cap!tulo"

Jos Juan Corpas Martos

http://www.recursos+lash.es (2 cap!tulos"

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com


Manu utierrez !ldMit" #aniel Mart$nez

http://www.tu+uncion.com ($ cap!tulo"

Desarrollador Web. /0uery. 1esponsi#e Design. Wordpress. 2ri)i por naturaleza. http://www.lacasadelmago.es (3 cap!tulos"

Dise*ador gr4+ico con#ertido a web http://www.cool#illage.es/ ($ cap!tulo"

Parte 1:

Qu es CSS
5omenzamos presentando las 6o/as de Estilo en 5ascada y e7plicando de 8u9 manera ayudan a los dise*adores de p4ginas web.

%.%.& 'ntroducci(n a las CSS


%na bre e introducci"n a CSS# para las personas que no saben nada sobre la tecnologa el por qu& de su creaci"n y c"mo ayuda a hacer pginas 'eb mejores. Entramos en materia con los antecedentes de CSS, las razones por las que se han desarrollado las hojas de estilo en cascada, y los objetivos que trata de cumplir. El lenguaje HTM est! limitado a la hora de aplicarle "orma a un documento. Esto es as# porque "u$ concebido para otros usos %cient#"icos sobretodo&, distinto a los actuales, mucho m!s amplios. 'ara solucionar estos problemas los dise(adores han utilizado t$cnicas tales como la utilizaci)n de tablas imagenes transparentes para ajustarlas, utilizaci)n de etiquetas que no son est!dares del HTM y otras. Estas *trampas* han causado a menudo problemas en las p!ginas a la hora de su visualizaci)nen distintas plata"ormas. +dem!s, los dise(adores se han visto "rustrados por la di"icultad con la que, aun utilizando estos trucos, se encontraban a la hora de maquetar las p!ginas, ya que muchos de ellos venian maquetando p!ginas sobre el papel, donde el control sobre la "orma del documento es absoluto. ,inalmente, otro antecedente que ha hecho necesario el desarrollo de esta tecnolog#a consiste en que las p!ginas -eb tienen mezclado en su c)digo HTM el contenido del documento con las etiquetas necesarias para darle "orma. Esto tiene sus inconvenientes ya que la lectura del c)digo HTM se hece pesada y di"#cil a la hora de buscar errores o depurar las p!ginas. +unque, desde el punto de vista de la riqueza de la in"ormaci)n y la utilidad de las p!ginas a la hora de almacenar su contenido, es un gran problema que estos te.tos est!en mezclados con etiquetas incrustadas para dar "orma a estos/ se degrada su utilidad. En estas p!ginas de CSS pretendemos dar a conocer la tecnolog#a con un en"oque pr!ctico para que en pocos cap#tulos pod!is usar las CSS de una manera depurada, re"lejando toda nuestra e.periencia en su uso. 0o pretendendemos e.plorar todos los aspectos de la tecnolog#a ya que para realizar esto necesitariamos un la e.tensi)n de un libro entero.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Referencia: Este manual trata los aspectos m!s te)ricos de las hojas en cascada. En 1esarrollo2eb.com tambi$n podemos encontrar otro manual con unos talleres pr!cticos de aplicaci)n de las CSS.

+ lo largo del Manual de CSS veremos di"erentes estados de las Hojas de Estilo en Cascada, pues han ido evolucionando con el paso de los a(os. En este manual se estudiar!n principalmente las especi"icaciones de CSS 3 y CSS 4 y dedicaremos un te.to di"erente al estudio de la m!s moderna especi"icaci)n del lenguaje en estos momentos, su tercera especi"icaci)n, en el Manual de CSS 5. +dem!s, para las personas que lo deseen, hemos realizado diversos videotutoriales que ser!n especialmente interesantes para las personas que quieran aprender CSS de una manera pr!ctica y visual. Est! todo en el 6ideotutorial de CSS.
Artculo por Miguel

Angel Alvarez

%.).& Caracter$sticas * venta+as de las CSS


Conoce las principales caractersticas del lenguaje# su potencia y sus posibilidades. El modo de "uncionamiento de las CSS consiste en de"inir, mediante una sinta.is especial, la "orma de presentaci)n que le aplicaremos a/ 7n -eb entero, de modo que se puede de"inir la "orma de todo el -eb de una sola vez. 7n documento HTM o p!gina, se puede de"inir la "orma, en un peque(o trozo de c)digo en la cabecera, a toda la p!gina. 7na porci)n del documento, aplicando estilos visibles en un trozo de la p!gina. 7na etiqueta en concreto, llegando incluso a poder de"inir varios estilos di"erentes para una sola etiqueta. Esto es muy importante ya que o"rece potencia en nuestra programaci)n. 'odemos de"inir, por ejemplo, varios tipos de p!rra"os/ en rojo, en azul, con margenes, sin ellos...

a potencia de la tecnolog#a salta a la vista. 'ero no solo se queda aqu#, ya que adem!s esta sinta.is CSS permite aplicar al documento "ormato de modo mucho m!s e.acto. Si antes el HTM se nos quedaba corto para maquetar las p!ginas y ten#amos que utilizar trucos para conseguir nuestros e"ectos, ahora tenemos muchas m!s herramientas que nos permiten de"inir esta "orma/ 'odemos de"inir la distancia entre l#neas del documento. Se puede aplicar identado a las primeras l#neas del p!rra"o. 'odemos colocar elementos en la p!gina con mayor precisi)n, y sin lugar a errores. 8 mucho m!s, como de"inir la visibilidad de los elementos, margenes, subrayados, tachados...

8 seguimos mostrandoos ventajas, ya que si con el HTM tan s)lo pod#amos de"inir atributos en las p!ginas con pi.eles y porcentajes, ahora podemos de"inir utilizando muchas m!s unidades como/ 'i.els %p.& y porcentaje %9&, como antes. 'ulgadas %in& 'untos %pt& Cent#metros %cm&

%.).%.& ,avegadores -ue lo soportan


Esta tecnolog#a es bastante nueva, por lo que no todos los navegadores la soportan. En concreto, s)lo los navegadores de 0etscape versiones de la : en adelante y de Microso"t a partir de la versi)n 5 son capaces de comprender los estilos en sinta.is CSS. +dem!s cabe destacar que no todos los navegadores implementan las mismas "unciones de hojas de estilos, por ejemplo, Microso"t ;nternet E.plorer 5 no soporta todo lo relativo a capas. Esto quiere decir que debemos de usar esta tecnolog#a con cuidado, ya que muchos usuarios no podr!n ver los "ormatos

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com que apliquemos a las p!ginas con CSS. +s# pues, utilizad las hojas de estilos cuando estas no vayan a suponer un problema.
Artculo por Miguel

Angel Alvarez

%...& Ar-uitectura CSS/ problemas


(roponemos contemplar CSS como si )uera un lenguaje de programaci"n# analizando algunas de las ino)ensi as costumbres# que resultan no serlo tanto.

'ara muchos desarrolladores -eb, ser bueno en CSS signi"ica que puedes echar un vistazo visual a un contenido y reproducirlo per"ectamente en c)digo. 0o usas tablas, y te enorgulleces y usas cuantas m!s im!genes mejor. Si eres realmente bueno, usas las m!s avanzadas t$cnicas como <media queries=, transiciones y trans"ormaciones. Es cierto que todo $sto es usado por los buenos desarrolladores CSS, pero hay una parte completamente separada del CSS que raramente es mencionada cuando se trata de cali"icar las habilidades de uno mismo.

0ormalmente no nos descuidamos de esa manera con otros lenguajes. 7n desarrollador de >ails %>uby?n>ails& no es considerado bueno solo porque su c)digo respete la especi"icaci)n. Es lo m#nimo. 'or supuesto que debe "uncionar respetando la especi"icaci)n@ la pregunta es/ Aes el c)digo legibleB AEs "!cil de cambiar o e.tenderB AEs una parte desacoplada de otras partes de la aplicaci)nB ASer! escalableB Estas preguntas surgen de "orma natural cuando estamos observando la base del c)digo, y con CSS no deber#a ser di"erente. Hoy en d#a las aplicaciones -eb son m!s grandes que nunca, y un pobre pensamiento sobre lo que signi"ica la arquitectura CSS puede lisiar el desarrollo de un proyecto. Es hora de evaluar CSS de la misma "orma con que evaluamos las otras partes de la aplicaci)n. 0o puede ser algo a(adido en el Cltimo momento o resuelto como meramente un problema del <dise(ador=.

%...%.& Las Metas de la Ar-uitectura CSS


En la comunidad CSS es muy di"#cil lograr un consenso general sobre las mejores pr!cticas a seguir. Duzgando objetivamente los comentarios en HacEer 0e-s con el lanzamiento de CSS int queda demostrado que mucha gente est! en desacuerdo incluso en los aspectos m!s b!sicos de CSS. +s# que, en vez de mostrarte un argumento propio sobre las mejores pr!cticas, creo que deber#amos empezar por de"inir nuestras metas. Si podemos ponernos de acuerdo en algunas metas, podemos empezar a desechar algunos conceptos de CSS, no porque rompan nuestras preconcebidas nociones sobre lo que es bueno, sino porque obstaculizan nuestro proceso de desarrollo. Creo que las metas de la buena arquitectura CSS no deber#an ser di"erentes de todas las buenas metas del desarrollo de so"t-are. Fuiero que mi CSS sea predecible, reutilizable, estable y escalable.

%...).& 0redecible
CSS predecible signi"ica que tus reglas se comportan como tC esperar#as. Cuando a(ades o actualizas una regla, no deber#a a"ectar a las partes de tu sitio -eb en las que no hay intenci)n de que a"ectara. En los sitios peque(os eso raramente ocurre, no es importante, pero en los sitios grandes con decenas o centenares de p!ginas, el que el CSS sea predecible es una obligaci)n.

%.....& 1eutilizable
as reglas CSS deber#an ser abstractas y estar su"icientemente desacopladas a la hora de construir r!pidamente nuevos

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com componentes en partes ya establecidas sin tener que recodi"icar con"iguraciones sobre problemas que ya has solventado.

%...2.& Estable
Cuando nuevos componentes y capacidades necesitan ser a(adidas, actualizadas o reiniciadas en tu sitio, hacer eso no deber#a requerir modi"icar demasiado el CSS e.istente. +(adir un componente G a la p!gina no deber#a, por su mera presencia, romper el componente 8.

%...3.& Escalable
Cuando el sitio crece y se vuelve m!s complejo normalmente requiere mayor mantenimiento por parte de los desarrolladores. CSS escalable signi"ica que puede ser "!cilmente administrado por una persona o por un equipo de personas. Tambi$n signi"ica que la arquitectura CSS de tu sitio es "!cilmente accesible sin requerir una enorme curva de aprendizaje. Solo porque seas el Cnico desarrollador que toque el CSS hoy no signi"ica que siempre vaya a ser as#.

%...4.& Malas 0r5cticas Comunes


+ntes de que echemos un vistazo a las maneras de alcanzar las metas de una buena arquitectura CSS en otro art#culo especialmente dedicado a ello, pienso que puede ser Ctil ojear las pr!cticas comunes que est!n en medio del camino. Con "recuencia, solo a trav$s de repetidos errores comenzamos a abrazar una ruta alternativa. os siguientes ejemplos son todos generalizaciones de c)digo que he escrito, y, aunque el c)digo es t$cnicamente v!lido, cada uno de esos trozos de c)digo me ha llevado al desastre o, al menos, a un intenso dolor de cabeza. + pesar de mis mejores intenciones y de la promesa de que esa vez ser#a di"erente, esos <snippets= me metieron en problemas.

%...6.& Modi7icando los Componentes 8as5ndonos en 9uines son Sus 0adres


Cuando nos en"rentamos con esta situaci)n todos los nuevos desarrolladores CSS %e incluso algunos e.perimentados& lo atendemos de la misma manera. Te imaginas un Cnico elemento padre y creas una nueva regla para controlarlo.
.widget { background: yellow; border: 1px solid black; color: black; width: 50%; } #sidebar .widget { width: 00px; } body.ho!epage .widget { background: white; }

+l principio podr#a parecer un c)digo medianamente ino"ensivo, pero vamos a e.aminarlo bas!ndonos en las metas que establecimos antes. 'rimero, el widget del ejemplo no es predecible. 7n desarrollador que haya hecho muchos de estos -idgets esperar! que tengan un cierto aspecto, est$ colocado en el sidebar o en la p!gina principal. Con el c)digo actual, el aspecto del -idget variar! y no ser! siempre e.actamente el mismo. Tampoco es muy reutilizable o escalable. AFu$ ocurre cuando deseemos que el aspecto que tiene en la homepage lo tenga tambi$n en otra p!ginaB Habr! que a(adir m!s reglas. 'or Cltimo, no es demasiado estable porque si el -idget es redise(ado habr#a que estar actualiz!ndolo en muchos sitios del CSS, y como dijimos antes, es di"#cil que esta rara con"iguraci)n que de momento "unciona le parezca acertada al pr).imo que la mire. ;magina que este tipo de c)digo "uera hecho en cualquier otro lenguaje. Esencialmente est!s haciendo una de"inici)n de

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com clase, y en otra parte del c)digo est!s alcanzando esa de"inici)n de clase cambi!ndola por un particular uso local. Esto directamente viola el principio abiertoHcerrado de desarrollo so"t-are/ as entidades So"t-are %clases, m)dulos, "unciones, etc.& deber#an ser abiertas para e.tensi)n, pero cerradas para modi"icaci)n.

%...:.& Selectores #emasiado Complicados


?casionalmente un art#culo se mueve por ;nternet mostrando el poder de los selectores CSS y proclamando que puedes estilizar un sitio por completo sin usar clases ni ;1s. +unque es t$cnicamente cierto, cuanto m!s desarrollo con CSS, m!s me alejo de los selectores complejos. Cuanto m!s se complica un selector, m!s se acopla al HTM . +unque mantengas limpio y claro el c)digo HTM , los selectores complejos ensucian tu CSS.
#!ain"na# ul li ul li di# { } #content article h1:$irst"child { } #sidebar % di# % h& ' p { }

Estos ejemplos que vemos tienen sentido l)gico. El primero probablemente est! dando estilo a un menC Idropdo-nI, el segundo indica que el contenido de cabecera principal del art#culo tendr#a que mostrarse de "orma distinta a la de los restantes elementos h3, y el Cltimo ejemplo est! a(adiendo un poco de espacio e.tra para el primer p!rra"o en las secciones del sidebar. Si este HTM no "uera nunca a cambiar, se podr#an argumentar sus m$ritos, pero...Ac)mo de realista es asumir que el HTM nunca cambiar!B os selectores demasiado complicados pueden ser imponentes, pero raramente nos ayudan en nuestras metas para una buena arquitectura CSS. Estos ejemplos no son reutilizables en absoluto. El selector est! se(alando a un punto muy concreto del maquetado, Ac)mo podr#a otro componente con distinta estructura HTM reutilizar ese estiloB Tomando el primer selector %el del menC Idropdo-nI& como ejemplo, Aqu$ pasa si un Idro-do-nI similar "uera necesitado en una p!gina distinta que no estuviera dentro del elemento JmainKnavB Tendr#as que recrear el estilo por completo. Estos selectores son tambi$n muy impredecibles si el HTM necesita cambiar. ;magina que un desarrollador quisiera pasar el div en el tercer ejemplo a una etiqueta IsectionI de HTM L. a regla entera se romper#a. ,inalmente, puesto que estos selectores solo trabajan cuando el HTM permanece constante, no son por de"inici)n ni escalables ni estables. En muchas aplicaciones tienes que "abricar compensaciones y concesiones en cuanto a c)digo. a "ragilidad de los selectores complejos raramente es peor que el precio de poder decir con honestidad que tu HTM es <limpio=.

%...;.& ,ombres de Clase #emasiado enricos


Cuando creamos componentes de dise(o reutilizables es muy comCn sumergir los subKelementos del componente dentro del nombre de clase de este. 'or ejemplo/
(di# class)*widget*% (h& class)*title*%...(+h&% (di# class)*contents*% ,ore! ipsu! dolor sit a!et- consectetur adipiscing elit. .n condi!entu! /usto et est dapibus sit a!et euis!od ligula ornare. 0i#a!us ele!entu! accu!san dignissi!. (button class)*action*%1lick 2e3(+button% (+di#% (+di#% .widget {} .widget .title {} .widget .contents {} .widget .action {}

a idea es que los subKelementos de clase .title, .contents, y .action puedan ser estilizados sin tener que preocuparse sobre c)mo puedan desparramarse sobre otros elementos estilizados con las mismas clases. Eso es cierto, pero no

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com previene contra el estilizado de clases con aquellos mismos nombres que se desparramen hacia el propio componente. En un gran proyecto es muy probable que un nombre de clase como .title sea usado en otro conte.to. Si eso ocurriera, el t#tulo del -idget parecer#a de pronto muy di"#cil de relacionar concretamente con el estilo que se pretend#a. os nombres de clase demasiado gen$ricos conducen a un CSS muy impredecible.

%...%<.& =acer -ue una 1egla =aga #emasiado


+ veces creas un contenido que necesita estar a 4M p#.eles de distancia del l#mite superior y de la izquierda partiendo de la esquina de su correspondiente secci)n/
.widget { position: absolute; top: 0px; le$t: 0px; background"color: red; $ont"si4e: 1.5e!; text"trans$or!: uppercase; }

1espu$s necesitas usar e.actamente ese mismo contenido para ponerlo en un lugar di"erente. El CSS de arriba no "unciona porque no es reutilizable en di"erentes conte.tos. El problema est! en que le est!s pidiendo demasiado a tu selector. Est!s de"iniendo el dise(o as# como la posici)n en la misma regla. El dise(o es reutilizable pero la posici)n no. 8 puesto que se usan juntas la regla entera est! comprometida. +unque esto pueda parecer ino"ensivo al comienzo, con "recuencia conduce al IcopyHpasteI por parte de los desarrolladores CSS menos eruditos. Si un nuevo equipo de miembros quiere poner un nuevo contenido como por ejemplo un .in"obo., probablemente comiencen intentando usar esa clase. 'ero si no "unciona porque la posici)n de ese nuevo in"obo. es err)nea, Aqu$ es lo m!s probable que haganB Mi e.periencia me dice que la mayor#a de nuevos desarrolladores no romper!n la regla en reglas reutilizables. En vez de eso ello simplemente copiar!n y pegar!n las l#neas de c)digo necesarias para su particular nuevo selector.

%...%%.& La Causa
Todas estas malas pr!cticas comparten una similitud/ no son una carga para el CSS. Suena raro, AehB 1espu$s de todo...Ano ser#a lo ideal que tuvi$ramos una hoja de estilos con poca cargaB A0o es lo que queremosB a respuesta sencilla a esta pregunta es <s#=, pero, como es habitual, las cosas no son tan sencillas. Separar el contenido de la presentaci)n es una buena idea, pero solo porque tu CSS est$ separado de tu HTM no quiere decir que tu contenido deba estar separado de tu presentaci)n. 1icho de otra manera, poner barreras al c)digo HTM no ayuda a cumplir la meta si tu CSS requiere un #ntimo conocimiento de tu estructura HTM a la hora de trabajar. +dem!s, HTM es raramente solo contenido@ es casi siempre estructura tambi$n. 8 con "recuencia esa estructura consiste en elementos contenedores sin m!s prop)sito que permitir al CSS aislar un cierto grupo de elementos. ;ncluso sin clases cuyo prop)sito Cnico sea el IembellecimientoI es di"#cil separar la presentaci)n est$tica que subyace en el propio c)digo. AEs necesario mezclar por lo tanto la presentaci)n est$tica con el contenidoB 8o creo que dado el actual estado del HTM y del CSS es necesario y razonable hacer que el HTM y el CSS trabajen juntos en una Cnica capa. a capa de contenido puede ser abstra#da v#a plantilla o algo parecido.

%...%).& La Soluci(n
Si tu HTM y tu CSS van a trabajar juntos para "ormar la capa de presentaci)n de una aplicaci)n -eb, necesitan hacerlo de "orma que promueva todos los principios de una buena arquitectura CSS. a mejor apro.imaci)n que he encontrado es que para cada CSS, su HTM sea tan peque(o como sea posible. El CSS

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com deber#a de"inir c)mo un conjunto de elementos visuales deben mostrarse y %en orden de minimizar el acoplamiento con el HTM & esos elementos deber#an aparecer tal y como son de"inidos aparezcan donde aparezcan en el HTM . Si un cierto contenido necesita ser mostrado di"erente en un di"erente escenario, deber#a ser nombrado de manera di"erente y es la responsabilidad del HTM llamarlo as#. Como ejemplo, el CSS podr#a de"inir un componente bot)n v#a clase .button . Si el HTM quiere que un elemento particular se asemeje a un bot)n, deber#a usar esa clase. Si hay una situaci)n en la que el bot)n necesita mostrarse di"erente %quiz! m!s grande, con anchura al 3MM9&, entonces el CSS necesita de"inir ese aspecto en una nueva clase, y el HTM puede incluir esa nueva clase para usar el nuevo aspecto. El CSS de"ine c)mo se muestran tus componentes, y el HTM les asigna el aspecto visual. Cuanto menos necesite saber el CSS sobre la estructura HTM , mejor. 7n enorme bene"icio de declarar e.actamente lo que quieres en el HTM es permitir a otros desarrolladores echar un vistazo a la maquetaci)n y saber e.actamente qu$ elemento est!n buscando. a idea es intentarlo. Sin esta pr!ctica es imposible saber si el aspecto de un elemento es intencional o accidental, y eso conlleva con"usi)n para el equipo. 7na queja comCn al poner un mont)n de clases en el maquetado es el es"uerzo e.tra que requiere hacerlo. 7na regla CSS simple podr#a dirigir miles de instancias de un particular componente. AEs realmente peor escribir esas clases miles de veces s)lo para tenerlas e.pl#citamente declaradas en el maquetadoB +unque la idea est! clara, puede despistar. 'ara usar un selector parental en CSS no tienes que preocuparte sobre las mil clases que imagino que ahora piensas que tendr#as que escribir a mano, hay obviamente otras alternativas. 6iendo los niveles de abstracci)n en *>ails* o en otros frameworks nos hace "ijarnos en c)mo podr#amos declarar e.pl#citamente el HTM sin tener que escribir las mismas clases una y otra vez. 'ero eso lo veremos ya en el siguiente art#culo, en el que plantearemos la arquitectura CSS del lado de las soluciones. 'hilip 2alton
Artculo por OldMith

%.2.& Ar-uitectura CSS > Soluciones


*espu&s de er en el artculo +Arquitectura CSS , (roblemas- los problemas de c"digo y las consecuencias que podemos tener por tenerlos# es hora de darte algunos consejos para mejorar. +unque no es amplia, mi e.periencia me ha ense(ado que apegarse a estos principios te ayudar! a lograr tus metas en una buena arquitectura CSS.

%.2.%.& S intencional
a mejor manera de asegurarte de que tus selectores no estilizan elementos que no quieres estilizar es no darles la oportunidad. 7n selector como JmainKnav ul li ul li div podr#a muy "!cilmente aplicarse a otros elementos con un par de cambios. 7n estilo como .subnav, por otro lado, tendr! la garant#a de que no va a haber oportunidad de accidente aplic!ndose a un elemento indeseado. +plicando clases directamente a los elementos que quieres estilizar es la mejor manera de mantener tu CSS predecible.
+5 6ranada 5+ #!ain"na# ul li ul { } +5 7i$le de 8rancotirador 5+ .subna# { }

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 1ados esos dos ejemplos, piensa que el primero es como una granada y el segundo como un ri"le de "rancotirador. a granada podr#a hacer el trabajo bien, pero nunca sabes cu!ndo un civil inocente podr#a introducirse en el radio de la e.plosi)n.

%.2.).& Separa tus asuntos


8a he mencionado que una zona de contenidos bien organizada puede ayudar a a"lojar el acoplamiento de la estructura HTM con el CSS. 'or a(adidura, tus componentes CSS deber#an ser modulares por ellos mismos. os componentes deber#an saber c)mo estilizar por ellos mismos y c)mo hacer su trabajo bien, pero no deber#an ser responsables de su distribuci)n o posicionamiento, como tampoco deber#an asumir c)mo debieran ser colocados en relaci)n con los elementos circundantes. En general, los componentes CSS deber#an de"inir el aspecto visual, no su distribuci)n en la p!gina, ni su posicionamiento. Ten cuidado cuando veas propiedades como *bacEground*, *color*, y *"ont* junto a *position*, *-idth*, *height*, y *margin*. a distribuci)n y la posici)n deber#an ir de la mano en una clase en un elemento contenedor separado %recuerda que separar e"ectivamente el contenido de la presentaci)n con "recuencia es esencialmente separar el contenido de su contenedor&.

%.2...& 0ersonaliza el nombre de tus clases


8a hab#amos e.aminado por qu$ los selectores parentales no son 3MM9 e"ectivos en la encapsulaci)n y previniendo contaminaci)n a trav$s de los estilos. 7na actitud mucho mejor es aplicar nombres de clases espec#"icos a cada clase. Si un elemento pertenece a un componente visual, cada una de sus clases de subKelementos deber#a usar como base para el nombre la base de nombre de clase del componente superior. Ejemplo/
+5 9lto riesgo de conta!inaci:n a tra#;s del estilo 5+ .widget { } .widget .title { } +5 <a/o riesgo de conta!inaci:n a tra#;s del estilo 5+ .widget { } .widget"title { }

Especi"icar el nombre de clase hace que tus componentes se mantengan autocontenidos y modulares. Minimiza la probabilidad de que una clase ya e.istente entre en con"licto con la actual, y reduce la especi"icidad requerida al estilizar los elementos hijo.

%.2.2.& E?tender componentes con clases modi7icadas


Cuando un componente ya e.istente necesita mostrarse visualmente ligeramente di"erente en un cierto conte.to, lo mejor es crear una clase modi"icada para e.tenderla/
+5 2al 5+ .widget { } #sidebar .widget { } +5 <ien 5+ .widget { } .widget"sidebar { }

8a hemos visto los inconvenientes de modi"icar componentes basados en uno de sus elementos parentales, pero reitero/ 7na clase modi"icada puede ser usada donde sea. Modi"icar dependiendo de la localizaci)n har! que solo pueda usarse en ese sitio concreto. as clases modi"icadas pueden ser reutilizadas todas las veces que necesites. 'or Cltimo, las clases modi"icadas e.presan la intenci)n del desarrollador de ser claro en cuanto al c)digo HTM . as clases basadas en la localizaci)n, por otro lado, son completamente invisibles para el desarrollador que solo mira el HTM , incrementando mucho la probabilidad de que lo pase por alto.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

%.2.3.& !rganiza tu CSS en una estructura l(gica


Donathan SnooE, en su e.celente libro SM+CSS, argumenta en "avor de organizar tus reglas CSS en cuatro categor#as separadas/ base, distribuci)n, m)dulos, y estado. a base consiste en resetear las reglas y en poner por de"ecto los elementos. a distribuci)n es el posicionamiento gen$rico de los elementos, as# como algCn sistema de ayuda al respecto como por ejemplo los IgridsI. os m)dulos son elementos visuales reutilizables y el estado se re"iere a los distintos estilos que un elemento pueda tener activ!ndose o desactiv!ndose v#a DavaScript. En el sistema SM+CSS los m)dulos %los cuales son equivalentes a lo que llamamos componentes& incluyen la vasta mayor#a de todas las reglas CSS, y con "recuencia encontrar$ necesario romperlas para llevarlas a componentes m!s abstractos. os componentes son elementos visuales independientes. os patrones, por otro lado, son bloques. 0o se soportan por s# mismos y raramente describen el aspecto visual, lo que se ve y se siente. En cambio son sencillos y repetibles patrones que pueden ser puestos juntos para "ormar un componente. 6eamos un ejemplo concreto, un componente que sea una caja modal de di!logo. a parte modal podr#a tener el sello del sitio como degradado en el "ondo de la cabecera, y por ejemplo, una sombra ca#da alrededor, un bot)n en lo alto de la esquina derecha, y posicionamiento "ijo, adem!s de un centrado vertical y horizontal. Cada una de estas con"iguraciones podr#a ser usada repetidamente en cualquier sitio de la -eb, as# que la idea ser#a no tener que ajustar el c)digo cada vez que as# "uera. Cada una de esas con"iguraciones son un patr)n, y juntos componen el componente modal. 0ormalmente no uso clases solo de patrones en el HTM a menos que tenga una buena raz)n. En cambio, uso un preprocesador para incluir los estilos de patr)n en la de"inici)n del componente. 1iscutir$ $sto detalladamente despu$s.

%.2.4.& @sa clases para estilizar * solo para estilizar


Cualquiera que haya trabajado en un gran proyecto ha encontrado un elemento HTM con una clase cuyo prop)sito era completamente desconocido. Fuiere quitarla, pero est!s indeciso, no vaya a ser que tenga un prop)sito de cual no se te ha avisado. Como eso ocurre continuamente, con el paso del tiempo tu HTM se va rellenando con clases que en realidad no tienen prop)sito, y que los miembros del equipo tienen miedo de borrar. El problema es que las clases normalmente tienen demasiadas responsabilidades en el desarrollo front-end. Estilizan elementos HTM , actCan como ganchos para el DavaScript hooks, se a(aden al HTM como caracter#sticas de detecci)n, se usan en tests automatizados, etc. Es un problema. Cuando las clases son usadas en demasiadas partes de la aplicaci)n, llegar a dar miedo quitarlas de tu HTM . Sin embargo, con una convenci)n establecida, este problema puede ser completamente evitado. Cuando ves una clase en el HTM , deber#as ser capaz instant!neamente de saber su prop)sito. Mi recomendaci)n es darle a todas las clases sin estilo un pre"ijo. 7so .jsK para DavaScript y uso .supportsK para las clases Modernizr. Todas las clases sin pre"ijo son para estilizar y solo para estilizar. Esto hace que encontrar clases sin uso y eliminarlas del HTM sea tan "!cil como buscarlas en la estructura de la hoja de estilos. 'uedes incluso automatizar este proceso en DavaScript re"erenciando las clases del HTM con sus respectivas, mediante el objeto document.styleSheets. as clases que no est!n en el document.styleSheets pueden ser eliminadas con seguridad. En general, como una buena pr!ctica el separar el contenido de la presentaci)n, es tambi$n importante separar tu presentaci)n de tu "uncionalidad. 7sando clases estilizadas como ganchos de Davascript pro"undiza en el acoplamiento entre CSS y DavaScript, de tal manera que hace imposible actualizar el enganche de ciertos elementos sin romper la "uncionalidad.

%.2.6.& ,ombra tus clases con una estructura l(gica


En estos d#as, la mayor#a de la gente escribe CSS usando guiones como separadores de palabras. 'ero los guiones por s# solos no suelen ser normalmente su"icientes para distinguir entre tipos de clases.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

10

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 0icolas Nallagher recientemente escribi) sobre su soluci)n a este problema, la cual he adoptado %con ligeros cambios& con gran $.ito. 'ara ilustrar la necesidad de una convenci)n en cuanto a la nomenclatura consideremos lo siguiente/
+5 =n co!ponente 5+ .button"group { } +5 ,a !odi$icaci:n de un co!ponente >!odi$icando .button? 5+ .button"pri!ary { } +5 =n sub"ob/eto del co!ponente >independiente de .button? 5+ .button"icon { } +5 @As ;sto una clase de co!ponente o de diseBoC 5+ .header { }

Echando un vistazo a las clases de arriba es imposible saber qu$ tipo de regla aplicar. Esto no solo incrementa la con"usi)n durante el desarrollo, tambi$n hace m!s di"#cil testar tu CSS y tu HTM de una manera autom!tica. 7na convenci)n estructurada sobre la nomenclatura permitir#a ojear un nombre de clase y saber e.actamente qu$ relaci)n tiene con otras clases y d)nde deber#a aparecer en el HTM O "omentando una nomenclatura m!s sencilla y un testeo posible donde antes no lo era.
+5 7eglas de patr:n >usando !arcadores Dass? 5+ %te!plate"na!e %te!plate"na!e""!odi$ier"na!e %te!plate"na!eEEsub"ob/ect %te!plate"na!eEEsub"ob/ect""!odi$ier"na!e +5 7eglas de 1o!ponente 5+ .co!ponent"na!e .co!ponent"na!e""!odi$ier"na!e .co!ponent"na!eEEsub"ob/ect .co!ponent"na!eEEsub"ob/ect""!odi$ier"na!e +5 7eglas de FiseBo 5+ .l"layout"!ethod .grid +5 7eglas de Astado 5+ .is"state"type +5 Anganches Go"Astili4ados Ha#aDcript 5+ ./s"action"na!e Al pri!er e/e!plo rehecho: +5 =n co!ponente 5+ .button"group { } +5 =n co!ponente !odi$icado >!odi$icando .button? 5+ .button""pri!ary { } +5 =n sub"ob/eto de co!ponen >independiente de .button? 5+ .buttonEEicon { } +5 =na clase de diseBo 5+ .l"header { }

%.2.:.& =erramientas
Mantener una e"ectiva y bien organizada arquitectura CSS puede ser muy di"#cil, especialmente en grandes equipos. 7nas cuantas malas reglas aqu# y all# pueden convertirse, cual bolas de nieve, en enredos inmanejables. 7na vez que el CSS de tu aplicaci)n ha entrado en la guerra del campo de la especi"icidad y en el triun"o de los *Pimportant* , puede ser imposible para el siguiente poder analizarlo sin pre"erir en cambio comenzar de nuevo. a clave es evitar esos problemas desde el comienzo. +"ortunadamente, hay herramientas que pueden controlar la arquitectura CSS de tu sitio de "!cil manera.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

11

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

%.2.;.& 0reprocesadores
En los d#as que vivimos es imposible hablar sobre herramientas CSS sin mencionar los preprocesadores, y en este art#culo no ser! di"erente. 'ero antes de que alabe su utilidad, os o"recer$ algunas palabras de cautela. os preprocesadores te ayudan a escribir CSS m!s r!pido, no mejor. En Cltima instancia lo que se obtiene es CSS plano, y por lo tanto se aplican las mismas reglas que antes del preprocesador. Si un preprocesador te permite escribir tu CSS m!s r!pido tambi$n te permite escribir tu CSS de"ectuoso m!s r!pido, as# que es importante comprender bien la arquitectura CSS antes de pensar que un procesador va a solventar tus problemas. Muchas de las llamadas <capacidades= de los preprocesadores pueden actualmente ser muy perjudiciales para la arquitectura CSS. as siguientes son algunas de las <capacidades= que yo evitar#a a toda costa %y aunque estas ideas generales se aplican a todos los preprocesadores, estas gu#as deber#an aplicarse espec#"icamente en Sass&/ 0unca anides reglas por pura organizaci)n de c)digo. Qnicamente anida cuando el CSS procesado sea lo que quieres. 0unca uses un Imi.inI si no le vas a pasar un argumento. os Imi.insI sin argumentos es mejor usarlos como ItemplatesI, ya que pueden ser e.tendidos. 0unca uses Re.tend en un selector que no es una clase de hijo. 0o tiene sentido desde una perspectiva de dise(o e hincha el CSS compilado. 0unca uses Re.tend para componentes 7; en modi"icaciones de reglas de componente porque perder!s la cadena de herencia.

o mejor de los preprocesadores son las "unciones como Re.tend y 9placeholder. +mbas te permiten manejar la abstracci)n CSS "!cilmente sin a(adir hinchaz)n a tu CSS o sin a(adir una enorme lista de clases base en tu HTM , que podr#a ser di"#cil de manejar. Re.tend deber#a ser usado con precauci)n porque alguna vez querr!s esas clases en tu HTM . 'or ejemplo, cuando aprendes por primera vez sobre Re.tend podr#a ser tentador usarlo con todos tus clases modi"icadas de la siguiente manera/
.button { +5 Astilos de bot:n 5+ } +5 2al 5+ .button""pri!ary { Iextend .button; +5 Astilos de 2odi$icaci:n 5+ }

El problema de hacer eso es que pierdes la cadena de herencia con respecto al HTM . +hora es muy di"#cil seleccionar todas las instancias del bot)n con DavaScript. 'or norma general nunca e.tiendo componentes 7; o ni nada que se le parezca. Eso es lo para lo que sirven los patrones %ItemplatesI& y es otra manera de distinguirlos de los componentes. 7n patr)n es algo a lo que nunca necesitar#as apuntar desde la l)gica de tu aplicaci)n, y por consiguiente puede ser e.tendido con un preprocesador. +qu# vemos ahora c)mo se mostrar#a el ejemplo modal que vimos arriba/
.!odal { Iextend %dialog; Iextend %drop"shadow; Iextend %statically"centered; +5 otros estilos 5+ } .!odalEEclose { Iextend %dialogEEclose; +5 otros estilos del bot:n 5+ } .!odalEEheader { Iextend %background"gradient; +5 otros estilos de la cabecera 5+

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

12

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com


}

%.2.%<.& CSS Lint


0icole Sullivan y 0icholas SaEas crearon CSS int como una herramienta de calidad de c)digo para ayudar a los desarrolladores a detectar malas pr!cticas en su CSS. Su sitio lo describe como/
CSS int se(ala los problemas de tu c)digo CSS. Hace un chequeo b!sico de tu sinta.is, adem!s de aplicar una serie de ajustes al c)digo que parece mostrar signos de ine"iciente o de problem!tica. as reglas son todas opcionales, as# que puedes editar u omitir sencillamente las que no te gusten.

Mientras que el set de reglas generales podr#a no ser per"ecto para la mayor#a de los proyectos, la mejor capacidad de CSS int es su habilidad para ser personalizado e.actamente como tC quieres que sea. Eso signi"ica que puedes elegir de entre todas las reglas que vienen por de"ecto y escoger las que quieras para poder escribirlas por tu cuenta. 7na herramienta como CSS int es esencial para cualquier gran proyecto a la hora de asegurar al menos una con"ormidad comCn en cuanto a consistencia y las convenciones de lo que se trata. 8 como esboc$ previamente, una de las grandes razones para asumir convenciones es que permiten a herramientas como CSS int identi"icar cualquier cosa que las rompa. Tas!ndonos en las convenciones que he propuesto a lo largo de estos dos art#culos sobre +rquitectura CSS, vemos que llega a ser muy "!cil escribir reglas que detecten las con"iguraciones que no queremos. +qu# aporto algunas sugerencias/ 0o permitas los ;1 en tus selectores. 0o uses selectores de tipo no sem!ntico %div, span& en ninguna regla. 0o uses m!s de dos combinadores en un selector. 0o permitas ningCn nombre de clase que empiece por <jsK=. Mantente alerta si "recuentemente usas dise(o y posicionamiento usas en las reglas sin pre"ijos <lK= . Mantente alerta si una clase de"inida en un primer momento es luego rede"inida como hijo de alguna otra clase.

Son obviamente solo sugerencias, pero son propuestas que te hacen pensar en c)mo re"orzar los est!ndares que quieres hacer cumplir en tus proyectos.

%.2.%%.& =AML 'nspector


Hace rato suger# que ser#a "!cil buscar las clases en tu HTM y enlazarlas con sus correspondientes en la hoja de estilos y dije que deber#as tener cuidado si tu clase estaba de"inida en el HTM pero no en el CSS. He desarrollado una herramienta llamada HTM ;nspector para hacer este proceso m!s sencillo. HTM ;nspector atraviesa tu HTM y %de "orma parecida a CSS int& te permite escribir tus propias reglas que lanzar!n errores y avisos cuando alguna convenci)n se rompa. +ctualmente uso estas normas/ Mantente alerta si el mismo ;1 es usado m!s de una vez en una p!gina. 0o uses ninguna clase que no haya sido mencionada en alguna hoja de estilos %como <jsK=&. as clases modi"icadas no deber#an ser usadas sin su clase de base. as clases de subKobjetos no deber#an ser usadas cuando ningCn ancestro contiene a la clase base. os elementos planos 1;6 o S'+0, sin clase adjuntada, no deber#an ser usados en el HTM .

%.2.%).& 1esumen
CSS no es solo dise(o visual. 0o deseches las mejores pr!cticas de la programaci)n solo porque est$s escribiendo CSS. Conceptos como ??', 1>8, el principio abiertoHcerrado, separaci)n de asuntos, etc., se pueden aplicar a CSS. o importante es que debes organizar el c)digo, asegur!ndote de que juzgas tus m$todos segCn lo que puedan ayudarte actualmente a desarrollar de una manera m!s sencilla y sostenible a largo plazo. 'hilip 2alton

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

13

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Artculo por OldMith

Parte 2:

Distintas maneras de incluir estilos


E7isten distintas +ormas de de+inir estilos en una p4gina: a di#ersos ni#eles 8ue #an desde las m4s espec!+icas: 8ue permitir!an de+inir estilos en un pe8ue*o te7to de una p4gina: hasta las m4s generales: para de+inir estilos para toda una p4gina o incluso un sitio web.

).%.& @sos de las CSS '


*escribimos las distintas aplicaciones de las .ojas de !stilo en cascada. !n este captulo eremos las ms sencillas. CSS sirve para de"inir el aspecto de las p!ginas -eb, eso ya debe haber quedado claro. 0o obstante, hay di"erentes niveles a los que podemos aplicar los estilos y es algo que vamos a describir ahora. Hemos denominado a este apartado los di"erentes usos de las CSS y relata justamente eso, los distintos niveles a los que podemos usar las Hojas de Estilo, que van desde de"inir los estilos de manera espec#"ica, para un peque(o "ragmento de una p!gina, hasta los estilos para todo un sitio -eb completo. Todo esto pasando por diversos otros niveles que resultar!n de mucha utilidad tambi$n en nuestro d#a a d#a como dise(adores. 6amos por orden, describiendo los puntos desde el m!s espec#"ico al m!s general, de manera que que tambi$n iremos aumentando la di"icultad e importancia de los distintos usos. Hemos partido este cap#tulo en dos partes por su e.tensi)n y por haber varias "ormas distintas de aplicar estilos, aqu# veremos las m!s sencillas y en el cap#tulo siguiente otras m!s complicadas pero m!s potentes.
Nota: CSS tiene una sinta.is propia. En este art#culo o"receremos diversos c)digos de CSS, aunque no hemos e.plicado la sinta.is todav#a. + trav$s de los pr).imos ejemplos veremos una peque(a introducci)n a la manera de escribir c)digo CSS, pero lo e.plicaremos con detalle m!s adelante cuando tratemos la sinta.is CSS.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

14

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

).%.%.& 0e-ueas partes de la p5gina


'ara de"inir estilos en secciones reducidas de una p!gina se utiliza la etiqueta <SPAN>. Con su atributo style indicamos en sinta.is CSS las caracter#sticas de estilos. o vemos con un ejemplo, pondremos un p!rra"o en el que determinadas palabras las vamos a visualizar en color verde.
<p> Esto es un prrafo en varias palabras <SP ! st"le#$%olor&'reen$>en %olor ver(e<)SP !>* resulta +u" f%il* <)p>

Fue tiene como resultado/ Esto es un p!rra"o con varias palabras en color verde. resulta muy "!cil.

).%.).& Estilo de7inido para una eti-ueta


1e este modo podemos hacer que toda una etiqueta muestre un estilo determinado. 'or ejemplo, podemos de"inir un p!rra"o entero en color rojo y otro en color azul. 'ara ello utilizamos el atributo style, que es admitido por todas las etiquetas del HTM %siempre y cuando dispongamos de un navegador compatible con CSS&.
<p st"le#$%olor&,990000$> Esto es un prrafo (e %olor ro-o* <)p> <p st"le#$%olor&,000099$> Esto es un prrafo (e %olor a.ul* <)p>

Fue tiene como resultado/ Esto es un p!rra"o de color rojo. Esto es un p!rra"o de color azul.

).%...& Estilo de7inido en una parte de la p5gina


Con la etiqueta <DIV> podemos de"inir secciones de una p!gina y aplicarle estilos con el atributo style, es decir, podemos de"inir estilos de una vez a todo un bloque de la p!gina.
<(iv st"le#$%olor&,000099/ font01ei'2t&bol($> <23>Estas eti3uetas van en <i>a.ul " ne'rita<)i><)23> <p> Se'ui+os (entro (el 4567 lue'o per+ane%en los etilos <)p> <)(iv>

Fue tiene como resultado/

Estas eti-uetas van en azul y negrita


Seguimos dentro del DIV, luego ermanecen los etilos Hasta aqu# hemos visto los usos de las CSS m!s espec#"icos. Esta in"ormaci)n continua en el pr).imo cap#tulo, en el que seguiremos viendo otras "ormas m!s avanzadas de usar las CSS.
Nota: 'ara aprender de una manera visual y pr!ctica los di"erentes usos de las CSS recomendamos ver la primera parte del videotutorial sobre las CSS.

Artculo por Miguel

Angel Alvarez

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

15

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

).).& @sos de las CSS * ''


Te describimos los usos ms a anzados de las hojas de estilo en cascada. (ara poder utilizarlas de la manera ms potente.

).).%.& Estilo de7inido para toda una p5gina


'odemos de"inir, en la cabecera del documento, estilos para que sean aplicados a toda la p!gina. Es una manera muy c)moda de darle "orma al documento y muy potente, ya que estos estilos ser!n seguidos en toda la p!gina y nos ahorraremos as# muchas etiquetas HTM que apliquen "orma al documento. +dem!s, si deseamos cambiar los estilos de la p!gina lo haremos de una sola vez. Este ejemplo es m!s complicado, puesto que se utiliza la sinta.is CSS de manera m!s avanzada. 'ero no te preocupes puesto que con los ejemplos ir!s aprendiendo su uso y m!s tarde comentaremos la sinta.is en pro"undidad. En el ejemplo vemos que se utiliza la etiqueta UST8 EV colocada en la cabecera de la p!gina para de"inir los distintos estilos del documento. + grandes rasgos, entre de UST8 EV y UHST8 EV, se coloca el nombre de la etiqueta que queremos de"inir los estilos y entre llaves KWXK colocamos en sinta.is CSS las caracter#sticas de estilos.
<2t+l> <2ea(> <title>E-e+plo (e estilos para to(a una p8aa%ute/'ina<)title> <S9:;E t"pe#$te<t)%ss$> <=00 >1 ?te<t0(e%oration& un(erline/ te<t0ali'n&%enter@ P ?font0Aa+il"&arial7ver(ana/ %olor& 12ite/ ba%B'roun(0%olor& bla%B@ CD4: ?%olor&bla%B/ba%B'roun(0%olor& ,%%%%%%/ te<t0in(ent&1%+@ )) 00> <)S9:;E> <)2ea(> <bo("> <21>P8aa%ute/'ina %on estilos<)21> Cienveni(os*** <p>Siento ser tan 2ortera7 pero esto es un e-e+plo sin +8aa%ute/s i+portan%ia<)p> <)bo("> <)2t+l>

Como se puede apreciar en el c)digo, hemos de"inido que la etiqueta UH3V se presentar! Subrayado Centrada

Tambi$n, por ejemplo, hemos de"inido que el cuerpo entero de la p!gina %etiqueta UT?18V& se le apliquen los estilos siguientes/ Color del te.to negro Color del "ondo grisaceo Margen lateral de 3 cent#metro

Caber destacar que si aplicamos estilos a la etiqueta UT?18V, estos ser!n heredados por el resto de las etiquetas del documento. Esto es as# siempre y cuando no se vuelvan a de"inir esos estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta m!s concreta ser! el que mande. 'uede verse este detalle en la etiqueta U'V, que tiene de"inidos estilos que ya "ueron de"inidos para UT?18V. os estilos que se tienen en cuenta son los de la etiqueta U'V, que es m!s concreta. 'or Cltimo, ha de apreciarse los comentarios HTM que engloban toda la declaraci)n de estilos/ UPKK1eclaraci)n de estilosKKV. Estos comentarios se utilizan para que los navegadores antiguos, que no comprenden la sinta.is CSS, no incluyan ese te.to en el cuerpo de la p!gina. Si no se pusiera, los navegadores antiguos %por ejemplo 0etscape 5& escribir#an ese *"eo c)digo* en la p!gina.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

16

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Pulsa ara !er el ejem lo anterior" Hemos preparado la misma p!gina, pero con declaraciones de estilos distintas, para que comprob$is las di"erencias en la "orma del documento con s)lo unos cambios en sus estilos. Puedes !erla inchando a#u$"

).).).& Estilo de7inido para todo un sitio web


7na de las caracter#sticas m!s potentes de la programaci)n con hojas de estilos consiste en que, de una vez, podemos de"inir los estilos de todo un sitio -eb. Esto se consigue creando un archivo donde tan s)lo colocamos las declaraciones de estilos de la p!gina y enlazando todas las p!ginas del sitio con ese archivo. 1e este modo, todas las p!ginas comparten una misma declaraci)n de estilos y, por tanto, si la cambiamos, cambiar!n todas las p!ginas. Con las ventajas a(adidas de que se ahorra en l#neas de c)digo HTM %lo que reduce el peso del documento& y se evita la molestia de de"inir una y otra vez los estilos con el HTM , tal como se coment) anteriormente. 6eamos ahora c)mo el proceso para incluir estilos con un "ichero e.terno. %& 'reamos el fichero con la declaraci(n de estilos Es un "ichero de te.to normal, que puede tener cualquer e.tensi)n, aunque le podemos asignar la e.tensi)n .css para aclararnos qu$ tipo de archivo es. El te.to que debemos incluir debe ser escrito e.clusivamente en sinta.is CSS, es decir, ser#a erroneo incluir c)digo HTM en el/ etiquetas y dem!s. 'odemos ver un ejemplo a continuaci)n.
P ? font0si.e & 12pt/ font0fa+il" & arial72elveti%a/ font01ei'2t & nor+al/ @ >1 ? font0si.e & 36pt/ font0fa+il" & ver(ana7arial/ te<t0(e%oration & un(erline/ te<t0ali'n & %enter/ ba%B'roun(0%olor & 9eal/ @ 94 ? font0si.e & 10pt/ font0fa+il" & ver(ana7arial/ te<t0ali'n & %enter/ ba%B'roun(0%olor & 666666/ @ CD4: ? ba%B'roun(0%olor & ,006600/ font0fa+il" & arial/ %olor & E2ite/ @

)& *nla+amos la ,gina -e. con la hoja de estilos 'ara ello, vamos a colocar la etiqueta U ;0YV con los atributos rel/0S123*S4**10 indicando que el enlace es con una hoja de estilos ty e/0te5t6css0 porque ela archivo es de te.to, en sinta.is CSS href/0estilos"css0 indica el nombre del "ichero "uente de los estilos

6eamos una p!gina -eb entera que enlaza con la declaraci)n de estilos anterior/
<=4DF9:PE >9G; PHC;5F $0))E3F))494 >9G; 4*0 9ransitional))E!$> <2t+l> <2ea(> <linB rel#$S9:;ES>EE9$ t"pe#$te<t)%ss$ 2ref#$estilos*%ss$> <title>P8aa%ute/'ina 3ue lee estilos<)title> <)2ea(> <bo("> <21>P8aa%ute/'ina 3ue lee estilos<)21> Esta p8aa%ute/'ina tiene en la %abe%era la eti3ueta ne%esaria para enla.ar %on la 2o-a (e estilos* Es +u" f8aa%ute/%il*

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

17

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com


<br> <br> <table 1i(t2#$300$ %ellspa%in'#$2$ %ellpa((in'#$2$ bor(er#$0$> <tr> <t(>Esto est8aa%ute/ (entro (e un 947 lue'o tiene estilo propio7 (e%lara(o en el fi%2ero e<terno<)t(> <)tr> <tr> <t(>;a se'un(a fila (el 94<)t(> <)tr> <)table> <)bo("> <)2t+l>

*l resultado conseguido se uede !er a#u$

).)...& 1eglas de importancia en los estilos


os estilos se heredan de una etiqueta a otra, como se indic) anteriormente. 'or ejemplo, si tenemos declarado en el UT?18V unos estilos, por lo general, estas declaraciones tambi$n a"ectatar!n a etiquetas que est$n dentro de esta etiqueta, o lo que es lo mismo, dentro de todo el cuerpo. En muchas ocasiones m!s de una declaraci)n de estilos a"ecta a la misma porci)n de la p!gina. Siempre se tiene en cuenta la declaraci)n m!s particular. 'ero las declaraciones de estilos se pueden realizar de mCltiples modos y con varias etiquetas, tambi$n entre estos modos hay una jerarqu#a de importancia para resolver con"lictos entre varias declaracionesde estilos distintas para una misma porci)n de p!gina. Se puede ver a continuaci)n esta jerarqu#a, primero ponemos las "ormas de declaraci)n m!s generales, y por tanto menos respetadas en caso de con"licto/ 1eclaraci)n de estilos con "ichero e.terno. %'ara todo un sitio -eb& 1eclaraci)n de estilos para toda la p!gina. %Con la etiqueta UST8 EV en la cabecera de la p!gina& 1e"inidos en una etiqueta en concreto. %7tilizando el atributo style en la etiqueta en cuesti)n& 1eclaraci)n de estilo para una porci)n peque(a del documento. %Con la etiqueta US'+0V&

8a vimos c)mo incluir estilos en la p!gina, de todas las maneras posibles e hicimos un repaso con la lista anterior. +hora est!s en condiciones de empezar a usar las hojas de estilo en cascada para mejorar tus p!ginas y aumentar la productividad de tu trabajo. 'ero estate atento a los siguientes cap#tulos donde aprender!s las lecciones que te "altan para dominar bien la materia/ conocer la sinta.is, los distintos atributos de estilos y otras cosas que mejorar!n tus p!ginas.
Artculo por Miguel

Angel Alvarez

)...& !tra manera de de7inir estilos en un arc"ivo e?terno


Tambi&n podemos incluir estilos en un archi o e$terno con un c"digo con la sinta$is /import url(0estilo.css0). Se utiliza para de)inir estilos comunes cuando hay tambi&n de)inici"n de estilos espec)icos. 6eamos ahora otra manera de importar una declaraci)n e.terna de estilos CSS/ Rimport url%*archivoZaZimportar.css*&, que se utiliza para importar unas declaraciones de estilos guardadas en la ruta que se indica entre par$ntesis. %las comillas son opcionales, pero los par$ntesis son obligatorios, por lo menos, en E.plorer&. Se debe incluir en la declaraci)n de estilos global a una p!gina, es decir entre las etiquetas Ustyle type[*te.tHcss*V y UHstyleV, que se colocan en la cabecera del documento. Es importante se(alar que la sentencia de importaci)n del archivo CSS se debe escribir en la primera l#nea de la declaraci)n de estilos, algo parecido al c)digo siguiente.
(style type)*text+css*% Ii!port url >*estilo.css*?;

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

18

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com


body{ background"color:#$$$$cc; } (+style%

El "uncionamiento es el mismo que si escribi$semos todo el "ichero a importar dentro de las etiquetas de los estilos, con la salvedad de que, si rede"inimos dentro del c)digo HTM %entre las etiquetas UHstyleV& estilos que hab#an quedado de"inidos en el archivo e.terno, los que se aplicar!n ser!n los que hayamos rede"inido. +s#, en el ejemplo anterior, aunque hubi$semos de"inido en estilo.css un color de "ondo para la p!gina, el color que prevalecer#a ser#a el de"inido a continuaci)n de la importaci)n/ J""""cc a di"erencia entre este tipo de importaci)n del tipo y la que hemos visto anteriormente/
(link rel)*stylesheet* type)*text+css* hre$)*ho/a.css*%

Es que Rimport url %*estilo.css*& se suele utilizar cuando hay unas pautas b!sicas en el trabajo con los estilos %que se de"inen en un archivo a importar& y unos estilos espec#"icos para cada p!gina, que se de"inen a continuaci)n, dentro del c)digo HTM entre las etiquetas UHstyleV, como es el caso del ejemplo visto anteriormente.
Artculo por Miguel

Angel Alvarez

Parte 3:

lenguaje CSS
Distintos apartados 8ue tienen 8ue #er directamente con el lengua/e utilizado para de+inir los estilos en p4ginas web: el 5;;. <eremos su sinta7is: los di+erentes atributos o reglas de estilo 8ue podemos aplicar a los elementos y c&mo seleccionar con/untos de elementos de la p4gina para aplicarles estilo agrupados o por separado.

..%.& Sinta?is * unidades CSS


!n este captulo e$plicamos la sinta$is CSS# de hojas de estilo en cascada# con especial atenci"n a las unidades CSS. Tal como se vi) en los ejemplos de los art#culos anteriores del Manual de CSS, la sinta.is es bastante sencilla y repetitiva. T!sicamente se trata de colocar selectores de elementos %por ahora s)lo hemos visto c)mo seleccionar etiquetas, para asignarles estilos, pero m!s adelante conoceremos otros selectores&, seguidos de los valores o atributos de estilo que queramos aplicar a dichos elementos. + lo largo del manual aprenderemos m!s sobre la sinta.is de CSS, as# como los distintos atributos disponibles para de"inir el "ormato o "orma con la que se deben mostrar los contenidos. 0o obstante, quiero dar en este momento unas reglas b!sicas que debemos saber sobre la sinta.is de CSS, que nos servir!n para entender mejor nuestros ejemplos e ir

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

19

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com avanzando en el conocimiento de las hojas de estilo en cascada. 6eamos entonces estas reglas b!sicas sobre la sinta.is CSS/ 'ara de"inir un estilo se utilizan atributos como "ontKsize,te.tKdecoration... seguidos de dos puntos y el valor que le deseemos asignar. 'odemos de"inir un estilo a base de de"inir muchos atributos separados por punto y coma. *jem lo: font&si+e: %7 t8 te5t&decoration: underline8 color: .lac98 %el Cltimo punto y coma de la lista de atributos es opcional& 'ara de"inir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de atributos encerrados entre llaves. *jem lo: 4%:te5t&align: center8 color:.lac9; os valores que se pueden asignar a los atributos de estilo se pueden ver en una tabla en el siguiente cap#tulo. Muchos estos valores son unidades de medida %<nidades 'SS&, por ejemplo, el valor del tama(o de un margen o el tama(o de la "uente. as unidades de medida CSS se pueden clasi"icar en dos grupos, las relativas y las absolutas. M!s la posibilidad de e.presar valores en porcentaje. Relati!as/ Se llaman as# porque son unidades relativas al medio o soporte sobre el que se est! viendo la p!gina -eb, que dependiendo de cada usuario puede ser distinto, puesto que e.isten muchos dispositivos que pueden acceder a la -eb, como ordenadores o tel$"onos m)viles. En principio las unidades relativas son m!s aconsejables, porque se ajustar!n mejor al medio con el que el usuario est! accediendo a nuestra -eb. Son las siguientes/

2uente actual: em la unidad em es relati#a a la +uente actual con la 8ue se est4 traba/ando por de+ecto en el sistema del usuario. %or e/emplo si un #isitante tiene con+igurada la +uente por de+ecto en $2 puntos: $em ser4 igual a $2 puntos y 2em ser4 igual a 2= puntos. >ltura de la letra ?7?: e? $e7 ser4 igual a la altura de la letra 7: seg@n la +uente actual del usuario. -a altura de la letra 7 generalmente es la mitad de la de la +uente normal. p? An pi7el es un punto en la pantalla del dispositi#o. Dependiendo de la resoluci&n de la pantalla: un p!7el puede ser mayor o menor.

%!7eles:

A.solutas/ as unidades absolutas son medidas "ijas, que deber#an verse igual en todos los dispositivos. Como los cent#metros, que son una convenci)n de medida internacional. 'ese a que en principio pueden parece m!s Ctiles, puesto que se ver#an en todos los sistemas igual, tienen el problema de adaptarse menos a las distintas particularidades de los dispositivos que pueden acceder a una -eb y restan accesibilidad a nuestro -eb. 'uede que en tu ordenador 3 cent#metro sea una medida razonable, pero en un m)vil puede ser un espacio e.ageradamente grande, puesto que la pantalla es mucho menor. Se aconseja utilizar, por tanto, medidas relativas.

%untos

pt An punto es $/ 2 pulgadas in
20

%ulgadas

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

5ent!metros (il!metros %icas

cm mm pc Ana pica son $2 puntos.

Porcentaje: el porcentaje se utiliza para de"inir una unidad en "unci)n de la que est$ de"inida en un momento dado. ;maginemos que estamos trabajando en 34pt y de"inimos una unidad como 3LM9. Esto ser#a igual al 3LM9 de los 34pt actuales, que equivale a 3\pt.

%orcenta/e B %or e/emplo $2BC es el $2B por cien de la unidad 8ue estu#iera anteriormente.
os colores se e.presan con valores >NT, igual que los que conocemos para los colores HTM . Con la salvedad que un color se puede especi"icar tambi$n con tres nCmeros he.adecimales, en lugar de ], como era obligatorio en HTM . 'or ejemplo J""" equivaldr#a a J"""""", o J345 ser#a J334455. +dem!s, los colores se pueden especi"icar tambi$n en valores >NT decimales, con la notaci)n rgb%r,g,b&, siendo los valores de r, g, b nCmeros entre M y 4LL, por ejemplo rgb%3MM,M,4LL&. ?tra notaci)n posible es rgb%r9,g9,b9&, siendo cada uno de los r9,g9, b9 un valor entre M y 3MM, por ejemplo rgb%3MM9,LM9,M9&, que ser#a todo de rojo, la mitad de verde y cero de azul. ?tro tipo de valores que se pueden utilizar en las hojas de estilo en cascada son las 7> , que sirven para especi"icar rutas hacia elementos como im!genes a colocar en "ondos de elementos. as 7> en CSS se especi"ican con la notaci)n url%valor&, siendo valor la 7> a la que queremos dirigirnos, que puede ser absoluta o relativa. Si es relativa, el navegador la interpreta desde el documento CSS donde estamos, si es que es un archivo CSS, o desde el documento HTM donde estamos, si es que los estilos los estamos colocando directamente en el archivo HTM . a 7> se puede indicar con comillas dobles, simples o sin comillas. 'or ejemplo/ url%http/HH---.desarrollo-eb.comHimagesHmiimagen.gi"& url%*..HimagesHotraimagen.jpg*&

Hasta aqu#, he e.plicado todo lo que debes saber por ahora con respecto a la sinta.is CSS y las unidades de medida CSS disponibles. Ha sido todo un poco te)rico, pero en el siguiente cap#tulo podr!s encontrar una lista de los atributos de las hojas de estilo en cascada, que te ayudar!n a realizar ejercicios m!s pr!cticos. Si deseas adem!s a"ianzar estos conocimientos de una manera m!s pr!ctica, te recomendamos ver el v#deo sobre CSS que habla de la sinta.is y unidades.
Artculo por Miguel

Angel Alvarez

..).& ,otaci(n de colores CSS


1arias maneras# sinta$is o notaciones para de)inir colores con CSS de los elementos de la pgina. Con CSS se puede especi"icar colores para cada elemento HTM de la p!gina, incluso hay elementos que podr#an admitir varios colores, como el color de "ondo o el color del borde. 'ero bueno, vamos a ver ahora es las distintas maneras de escribir un color en una declaraci)n CSS. 'orque lo m!s habitual es que especi"iquemos un color con su valor >NT, de una manera similar a como aprendimos a

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

21

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com de"inir colores en HTM . 'ero en CSS tenemos otras maneras de declarar colores que pueden interesarnos, como m#nimo para poder entender el c)digo CSS cuando lo veamos escrito.

..).%.& ,otaci(n "e?adecimal 1 8


Esta notaci)n es la que ya conocemos. Se especi"ican los tres valores de color %rojo, verde y azul& con valores en he.adecimal entre MM y ,,.
background"color: #$$JJ00;

..).).& ,otaci(n "e?adecimal abreviada


Esta notaci)n es muy parecida a la anterior, pero permite abreviar un poco la declaraci)n del color, indicando s)lo un nCmero para cada valor rojo, verde y azul. 'or ejemplo, para especi"icar el color de antes %J""\\MM& podr#amos haber escrito/
background"color: #$J0;

..)...& ,ombre del color


Tambi$n podemos de"inir un color por su nombre. os nombres de colores son en ingl$s, los mismos que sirven para especi"icar colores con HTM .
color: red; border"color: ,i!e;

..).2.& ,otaci(n de color con porcenta+es de 1 8


Se puede de"inir un color por los distintos porcentajes de valores >NT. Si todos los valores est!n al 3MM9 el color es blanco. Si todos est!n al M9 obtendr#amos el negro y con combinaciones de distintos porcentajes de >NT obtendr#amos cualquier matiz de color.
color: rgb>&&%- 0%- 0%?;

..).3.& ,otaci(n por valores decimales de 1 8C de < a )33


1e una manera similar a la notaci)n por porcentajes de >NT se puede de"inir un color directamente con valores decimales en un rango desde M a 4LL.
color: rgb> 00- 55-0?;

1e entre todas estas notaciones podemos utilizar la que m!s nos interese o con la que nos sintamos m!s a gusto. 0osotros en nuestros ejemplos venimos utilizando la notaci)n he.adecimal >NT por habernos acostumbrado a ella en HTM .

..).4.& Color transparente


'ara "inalizar, podemos comentar que tambi$n e.iste el color transparente, que no es ningCn color, sino que espec#"ica que el elemento debe tener el mismo color que el "ondo donde est!. Este valor, transparent, sustituye al color. 'odemos indicarlo en principio s)lo para "ondos de elementos, es decir, para el atributo bacEgroundKcolor.
background"color: transparent;
Artculo por Miguel

Angel Alvarez

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

22

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

....& Atributos de las "o+as de estilo


!$plicaci"n y ejemplos de los distintos atributos de las CSS. (odrs encontrar la lista en una tabla para imprimirtela y trabajar )cilmente. Tanto para practicar en tu 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 podemos aplicarle a las p!ginas -eb. +qu# puedes ver la tabla de los atributos CSS m!s "undamentales para aplicar estilos a elementos b!sicos, que te vendr! per"ectamente para comenzar con las CSS. E.isten muchos otros atributos que aprender!s en cap#tulos sucesivos del Manual de CSS. >ecuerda adem!s que si quieres ver c)mo se aplican muchos de estos estilos en p!ginas -eb puedes ver el v#deo tutorial sobre los atributos de las CSS. Nombre del atributo Posibles valores FUENTES - FONT color
valor IJC o no+bre (e %olor %olor& ,009900/ %olor& re(/

Ejemplos

Sirve para in(i%ar el %olor (el te<to* ;o a(+iten %asi to(as las eti3etas (e >9G;* !o to(os los no+bres (e %olores son a(+iti(os en el estan(ar7 es a%onse-able enton%es utili.ar el valor IJC* <<0s+all K <0s+all K s+all K +e(iu+ K lar'e K <0lar'e font0si.e&12pt/ K <<0lar'e font0si.e& <0lar'e/ Hni(a(es (e FSS

font-size

Sirve para in(i%ar el ta+aLo (e las fuentes (e +anera +s rM'i(a " %on +a"or e<a%titu(* serif K sans0serif K %ursive K fantas" K +onospa%e 9o(as las fuentes 2abituales font0fa+il"&arial72elveti%a/ font0fa+il"& fantas"/

font-family

Fon este atributo in(i%a+os la fa+ilia (e tipo'rafia (el te<to* ;os pri+eros valores son 'enNri%os7 es (e%ir7 los e<plora(ores las %o+pren(en " utili.an las fuentes 3ue el usuario ten'a en su siste+a* 9a+biNn se pue(en (efinir %on tipo'rafMas nor+ales7 %o+o o%urrMa en 2t+l* Si el no+bre (e una fuente tiene espa%ios se utili.an %o+illas para 3ue se entien(a bien* nor+al K bol( K bol(er K li'2ter K 100 K 200 K 300 K 400 K 500 K 600 K 700 K 800 K 900 font01ei'2t&bol(/ font01ei'2t& 200/

font-wei !t

Sirve para (efinir la an%2ura (e los %ara%teres7 o (i%2o (e otra +anera7 para poner ne'rillas %on total liberta(* !or+al " 400 son el +is+o valor7 asM %o+o bol( " 700* font0st"le&nor+al/ font0st"le& itali%/

font-style

nor+al K itali% K obli3ue

Es el estilo (e la fuente7 3ue pue(e ser nor+al7 itli%a u oblM%ua* El estilo obli3ue es si+ilar al itali%*

P"##$FOS - TE%T line-!ei !t


nor+al " uni(a(es FSS line02ei'2t& 12p</ line02ei'2t& nor+al/

El alto (e una lMnea7" por tanto7 el espa%ia(o entre lMneas* Es una (e esas %ara%terMsti%as 3ue no se po(ian +ofifi%ar utili.an(o

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

23

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com


>9G;* te<t0(e%oration& none/ te<t0(e%oration& un(erline/

te&t-decoration

none K O un(erline KK overline KK line0t2rou'2 P

Para estable%er la (e%ora%iQn (e un te<to7 es (e%ir7 si est subra"a(o7 sobrera"a(o o ta%2a(o* te<t0ali'n& ri'2t/ te<t0ali'n& %enter/

te&t-ali n

left K ri'2t K %enter K -ustif"

Sirve para in(i%ar la alinea%iQn (el te<to* Es interesante (esta%ar 3ue las 2o-as (e estilo per+iten el -ustifi%a(o (e te<to7 aun3ue re%uer(a 3ue no tiene por 3ue fun%ionar en to(os los siste+as* te<t0in(ent& 10p</ te<t0in(ent& 2in/

te&t-indent

Hni(a(es FSS

Hn atributo 3ue sirve para 2a%er san'ra(o o +r'enes en las p'inas* Gu" Rtil " nove(osa* te<t0transfor+& none/ te<t0transfor+& %apitali.e/

te&t-transform

%apitali.e K upper%ase K lo1er%ase K none

!os per+ite transfor+ar el te<to7 2a%ien(o 3ue ten'a la pri+era letra en +a"Rs%ulas (e to(as las palabrs7 to(o en +a"Rs%ulas o +inRs%ulas*

FON'O - ($)*+#OUN' (ac, round-color


Hn %olor7 %on su no+bre o su valor IJC ba%B'roun(0%olor& 'reen/ ba%B'roun(0%olor& ,000055/

Sirve para in(i%ar el %olor (e fon(o (e un ele+ento (e la p'ina* ba%B'roun(0i+a'e& urlS+r+ol*'ifT / ba%B'roun(0i+a'e& urlS2ttp&))111*<*%o+)fon(o*'ifT

(ac, round-ima e

El no+bre (e la i+a'en %on su %a+ino relativo o absoluto

Folo%a+os %on este atributo una i+a'en (e fon(o en %ual3uier ele+ento (e la p'ina7 se pue(e ver una p- ina de ejemplo

(O% - )$.$ /ar in-left


Hni(a(es FSS +ar'in0left& 1%+/ +ar'in0left& 075in/

5n(i%a+os %on este atributo el ta+aLo (el +ar'en a la i.3uier(a +ar'in0ri'2t& 5U/ +ar'in0ri'2t& 1in/

/ar in-ri !t

Hni(a(es FSS

Se utili.a para (efinir el ta+aLo (el +ar'en a la (ere%2a +ar'in0top& 0p</ +ar'in0top& 10p</

/ar in-top

Hni(a(es FSS

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

24

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com


5n(i%a+os %on este atributo el ta+aLo (el +ar'en arriba (e la p'ina +ar'in0botto+& 0pt/ +ar'in0top& 1p</

/ar in-bottom

Hni(a(es FSS

Fon el se in(i%a el ta+aLo (el +ar'en en la parte (e aba-o (e la p'ina pa((in'0left& 0*5in/ pa((in'0left& 1p</

Paddin -left

Hni(a(es FSS

5n(i%a el espa%io inserta(o7 por la i.3uier(a7 entre el bor(e (el ele+ento0%ontinente " el %onteni(o (e este* Es pare%i(o a el atributo %ellpa((in' (e las tablas* El espa%io inserta(o tiene el +is+o fon(o 3ue el fon(o (el ele+ento0%ontinente* pa((in'0ri'2t& 0*5%+/ pa((in'0ri'2t& 1pt/

Paddin -ri !t

Hni(a(es FSS

5n(i%a el espa%io inserta(o7 en este %aso por la (ere%2a7 entre el bor(e (el ele+ento0%ontinente " el %onteni(o (e este* Es pare%i(o a el atributo %ellpa((in' (e las tablas* El espa%io inserta(o tiene el +is+o fon(o 3ue el fon(o (el ele+ento0%ontinente* pa((in'0top& 10pt/ pa((in'0top& 5p</

Paddin -top

Hni(a(es FSS

5n(i%a el espa%io inserta(o7 por arriba7 entre el bor(e (el ele+ento0%ontinente " el %onteni(o (e este* pa((in'0ri'2t& 0*5%+/ pa((in'0ri'2t& 1pt/

Paddin -bottom

Hni(a(es FSS

5n(i%a el espa%io inserta(o7 en este %aso por aba-o7 entre el bor(e (el ele+ento0%ontinente " el %onteni(o (e este* bor(er0%olor& re(/ bor(er0%olor& ,ff%%ff/

(order-color

%olor IJC " no+bre (e %olor

Para in(i%ar el %olor (el bor(e (el ele+ento (e la p'ina al 3ue se lo apli%a+os* Se pue(e poner %olores por separa(o %on los atributos bor(er0top0%olor7 bor(er0ri'2t0%olor7 bor(er0botto+0%olor7 bor(er0left0%olor* none K (otte( K soli( K (ouble K 'roove K ri('e K inset K outset bor(er0st"le& soli(/ bor(er0st"le& (ouble/

(order-style

El estilo (el bor(e7 los valores si'nifi%an& none#nin'un bor(e7 (otte(#puntea(o Sno pare%e fun%ionarT7 soli(#soli(o7 (ouble#(oble bor(e7 " (es(e 'roove 2asta outset son bor(es %on varios efe%tos 34* bor(er01i(t2& 10p</ bor(er01i(t2& 0*5in/

border-widt!

Hni(a(es FSS

El ta+aLo (el bor(e (el ele+ento al 3ue lo apli%a+os* Para ver otros e-e+los (e Co< pulsar a0u1

float

none K left K ri'2t

float& ri'2t/

Sirve para alinear un ele+ento a la i.3uier(a o la (ere%2a 2a%ien(o 3ue el te<to se a'rupe alre(e(or (e (i%2o ele+ento* 5'ual 3ue el atributo ali'n en i+a'enes en sus valores ri'2t " left*

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

25

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com clear


none K ri'2t K left %lear& ri'2t/

Si este ele+ento tiene a su altura i+a'enes u otros ele+entos alinea(os a la (ere%2a o la i.3uier(a7 %on el atributo %lear 2a%e+os 3ue se %olo3ue en un lu'ar (on(e "a no ten'a esos ele+entos a el la(o 3ue in(i3ue+os* Para ver una p'ina 3ue utili.a float " %lear pulsar a0u1

a especi"icaci)n de estilos CSS es muy amplia y seguro que se queda en el tintero algCn atributo de estilo, pero creo que la inmensa mayor#a est!n, y por supuesto la selecci)n de los m!s importantes.
Actuali+ado: E"ectivamente, los atributos que vemos en este te.to han sido m!s bien pocos. 1esde que se escribi) este art#culo han pasado a(os y se ha ido mejorando la especi"icaci)n de CSS, con la evoluci)n de ;nternet y del mundo del desarrollo de p!ginas -eb. 1e hecho, en estos momentos ser#a casi imposible concentrar en una p!gina el listado completo de atributos con su e.plicaci)n. 1e todos modos, no te preocupes, porque a lo largo de este manual y de otros manuales de CSS y talleres que se han publicado en 1esarrollo2eb.com aprender!s muchos otros atributos y sus di"erentes valores. Si deseas tener una hoja con todas las reglas de estilos para imprimir y tener a mano para tu re"erencia, te recomendamos acceder a algunas de las hojas resCmenes o de las chuletas de CSS.

Artculo por Miguel

Angel Alvarez

..2.& #e7inici(n de estilos CSS S"ort"and


*isminuye el peso de tus hojas de estilo utilizando la )orma shorthand de especi)icaci"n CSS# que no es ms que una manera reducida de escribir las propiedades de estilos.

..2.%.& S"ort"and
6amos a e.plicar c)mo escribir de "orma reducida nuestras reglas CSS para que nuestros archivos de estilo tengan menos peso y sean m!s entendibles a la hora de una actualizaci)n. SegCn la 25C hay dos "ormas de escribir la misma regla de CSS/ la est!ndar y la shorthand. 7na es la larga y la otra es la reducida.

..2.).& 0ropiedad Font D7uenteE


$ont"style KK $ont"#ariant KK $ont"weight KK $ont"si4e + line"height KK $a!ilia de $uente

*jem lo:
L {$ont: italic nor!al bold 1 px+1Mpt 0erdana- Naho!a- 9rial}

..2...& 0ropiedad 8acFground D7ondoE


background"color KK background"i!age KK background"repeat KK background"attach!ent KK background" position

*jem lo:
<ody {background: #888 url>..+i!ages+e/e!plo.gi$? no"repeat $ixed center}

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

26

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

..2.2.& Margin DMargenE


longitud K porcenta/e K auto

*jem lo:
<ody {!argin: 5px} +5 todos los !Orgenes a 5px 5+ L {!argin: px Mpx} +5 !Orgenes superior e in$erior a px- !Orgenes i4Puierdo y derecho a Mpx 5+ F.0 {!argin: 1px px &px Mpx} +5 !argen superior a 1px- right !argin a px- botto! !argin a &px- le$t !argin a Mpx 5+

..2.3.& 0adding D1ellenoE


longitud K porcenta/e K auto

*jem lo:
<ody {padding: e! &e! Me! 5e!} +5 Di de$ini!os cuatro #alores esta!os aplicando el padding superior- derecho- in$erior e i4Puierdo 5+ <ody {padding: e! Me!? +5 Di de$ini!os dos o tres #alores- los #alores $altantes se to!an del lado opuesto: superior e in$erior a e!- derecho e i4Puierdo a Me! 5+ <ody {padding: 5e!} +5 Di de$ini!os un solo #alor se aplican a todos los lados 5+

..2.4.& 8order D8ordeE


border"width KK border"style KK color

*jem lo:
Q& {border: thick dotted blue}

Artculo por Federico

Elgarte

..3.& 0seudo&element en CSS Dpseudo elementosE


1amos a conocer los pseudo elementos en CSS# hojas de estilo en cascada# que sir en# entre otras cosas# para de)inir estilos para la primera lnea o letra de un te$to. os pseudoKelement %pseudoKelementos, si pre"erimos la traducci)n al castellano& sirven para aplicar estilos a partes m!s espec#"icas dentro de una etiqueta. Es decir, para el ejemplo concreto de la etiqueta p!rra"o, con los pseudo elementos podemos de"inir el estilo para la primera letra del p!rra"o y para la primera l#nea. Es decir, con CSS podemos de"inir el estilo de una etiqueta, pero con los pseudoelementos no nos limitamos a de"inir el estilo para todo el contendido de esa etiqueta, sino que indicamos el estilo para una parte restringida de esa etiqueta. E.isten diversos tipos de pseudo elementos, con distintas aplicaciones, para de"inir el estilo de diversas cosas, como veremos a continuaci)n con ejemplos.

..3.%.& 0seudo&element 7irst&letter


7n e"ecto habitual de algunas publicaciones, por ejemplo las de cuentos para ni(os, es hacer m!s grande la primera letra de una p!gina y decorarla de alguna manera. Con CSS podemos aplicar estilos espec#"icos y hacer, por ejemplo, que esa primera letra sea m!s grande y tenga un color distinto del resto del p!rra"o.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

27

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Se utiliza de esta manera/
L:$irst"letter { $ont"si4e: 00%; color: #RR&&&&; $ont"weight: bold; }

+s# estamos asignando un tama(o de letra 4MM9 m!s grande del propio del p!rra"o. Tambi$n estamos cambiando el color de esa primera letra. 1e entre todas las propiedades de estilos, s)lo algunas se pueden aplicar a los pseudoKelementos "irstKletter. Son las siguientes, segCn la especi"icaci)n del 25C/ "ont properties, color properties, bacEground properties, Ite.tKdecorationI, IverticalKalignI %s)lo si I"loatI est! asignado a InoneI&, Ite.tKtrans"ormI, IlineKheightI, margin properties, padding properties, border properties, I"loatI, Ite.tKshado-I y IclearI . Se puede ver un ejemplo de aplicaci)n de un estilo con "irstKletter.

..3.).& 0seudo&element 7irst&line


Como adelantaba, este pseudoKelemento, sirve para asignar un estilo propio a la primera l#nea del te.to. Es posible que hayamos visto alguna revista o peri)dico que utilice este estilo para remarcar las primeras l#neas del p!rra"o. 7n ejemplo de su uso ser#a el siguiente/
L:$irst"line { text"decoration: underline; $ont"weight: bold; }

as propiedades de estilos que se pueden aplicar al pseudoKelement "irstKline son las siguientes/ "ont properties, color properties, bacEground properties, I-ordKspacingI, IletterKspacingI, Ite.tKdecorationI, IverticalKalignI, Ite.tKtrans"ormI, IlineKheightI, Ite.tKshado-I y IclearI. Se puede ver un ejemplo de aplicaci)n de un estilo con "irstKline.

..3...& @so de clases con los pseudo&elementos


En determinadas ocasiones podemos necesitar crear una clase %class& de CSS a la que asignar los pseudoKelementos, de modo que estos no se apliquen a todas las etiquetas de la p!gina. 'or ejemplo, podemos desear que solamente se modi"ique el estilo de la primera l#nea del te.to en algunos p!rra"os y no en todos los de la p!gina. 7na clase se de"ine con el nombre de la etiqueta seguido de un punto y el nombre de la clase. Si adem!s deseamos de"inir un pseudoKelemento, deber#amos indicarlo a continuaci)n, con esta sinta.is/
L.no!breclase:$irst"line { $ont"weight: bold; }

..3.2.& 0seudo&elementos en CSS)


+parte de "irstKline y "irstKletter, en las especi"icaciones de CSS 4 e.isten otros pseudo elementos que voy a nombrar para conocimiento de los lectores, aunque pro"undizar$ en su uso. Se tratan de be"ore y a"ter y sirven para insertar *contenidos generados* antes y despu$s del elemento al que asignemos estos pseudoKelement. 7n ejemplo de ello es/
L.nota:be$ore { content: *Gota: * }

+s# se ha de"inido una clase de p!rra"o llamada *note* en la que se indica que antes de la propia nota se debe incluir el te.to indicado, osea, *0ota/ *.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

28

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Nota: +tenci)n a la compatibilidad con CSS4, que, por lo menos para estos elementos, no est! soportada en versiones ] de ;nternet E.plorer. ,ire"o., en cambio, s# que es compatible con estas caracter#sticas de CSS4.

Si queremos ver un ejemplo completo de uso de los pseudo elementos a"ter y be"ore podemos leer el siguiente art#culo del taller de CSS, en el que mostramos una t$cnica para conseguir las esquinas redondeadas en CSS 4.
Artculo por Miguel

Angel Alvarez

..4.& Arucos avanzados con CSS


1amos a er una serie de t&cnicas con hojas de estilo# imprescindibles para utilizar esta tecnologa con toda su potencia. as hojas de estilos son un tema largo del que se han escrito libros enteros. Hasta este punto del Manual de CSS nos hemos dedicado a los temas m!s b!sicos. 1e momento vamos a hacer una parada en este art#culo para e.plicar unas cuantas cosas interesantes que nos resultar!n especialmente pr!cticas. +dem!s, para completar tus primeros conocimientos sobre CSS, te recomendamos ver el v#deo sobre los selectores de CSS, que comenta algunas de las cosas de este cap#tulo y muchas otras que debes saber para manejar correctamente este lenguaje de estilo.

..4.%.& #e7inir estilos utilizando clases


as clases nos sirven para crear de"iniciones de estilos que se pueden utilizar repetidas veces. 7na clase se puede de"inir entre las etiquetas UST8 EV %en la cabecera del documento&, o en un archivo e.terno a la p!gina. 'ara de"inirlas utilizamos la siguiente sinta.is, un punto seguido del nombre de la clase y entre llaves los atributos de estilos deseados. 1e esta manera/
.no!bredelaclase {atributo: #alor;atributo :#alor ; ...}

7na vez tenemos una clase, podemos utilizarla en cualquier etiqueta HTM . 'ara ello utilizaremos el atributo class, poni$ndole como valor el nombre de la clase, de esta "orma/
(AN.S=AN9 class)*no!bredelaclase*%

*jem lo de la utili+aci(n de clases UhtmlV UheadV UtitleVEjemplo de la utilizaci^oacute@n de clasesUHtitleV UST8 E type[*te.tHcss*V ."ondonegroletrasblancas WbacEgroundKcolor/blacE@color/-hite@"ontKsize/34@"ontK"amily/arialX .letrasverdes Wcolor/JMM__MMX UHST8 EV UHheadV UbodyV Uh3 class[letrasverdesVTitulo 3UHh3V Uh3 class["ondonegroletrasblancasVTitulo 4UHh3V Up class[letrasverdesV Esto es un p^aacute@rra"o con estilo de letras verdesUHpV Up class["ondonegroletrasblancasV Esto es un p^aacute@rra"o con estilo de "ondo negro y las letras blancas. Es todoPUHpV UHbodyV

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

29

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com UHhtmlV 6er el ejemplo anterior

..4.).& Estilo en los enlaces


7na t$cnica muy habitual, que se puede realizar utilizando las hojas de estilo en cascada y no se pod#a en HTM , es la de"inici)n de estilos en los enlaces, quitandoles el subrayado o hacer enlaces en la misma p!gina con distintos colores. 'ara aplicar estilo a los enlaces debemos de"inirlos para los distintos tipos de enlaces que e.isten %visitados, activos...&. 7tilizaremos la siguiente sinta.is, en la declaraci)n de estilos global de la p!gina %UST8 EV& o del sitio %1e"inici)n en un archivo e.terno&/ *nlaces normales +/linE WatributosX *nlaces !isitados +/visited WatributosX *nlaces acti!os % os enlaces est!n activos en el presiso momento en que se pincha sobre ellos& +/active WatributosX *nlaces ho!er %Cuando el rat)n est! encima de ellos, solo "unciona en ieplorer& +/hover WatributosX El atributo para de"inir enlaces sin subrayado es te5t&decoration:none, y para darles color es color/tuZcolor. Tambi$n podemos de"inir el estilo de cada enlace en la propia etiqueta U+V, con el atributo style. 1e esta manera podemos hacer que determinados enlaces de la p!gina se vean de manera distinta Ejemplo de estilos en enlaces
<2t+l> <2ea(> <title>E-e+plos (e estilo en enla%es<)title> <S9:;E t"pe#$te<t)%ss$> &linB ?te<t0(e%oration&none/%olor&,0000%%/@ &visite( ?te<t0(e%oration&none/%olor&,ff%%33/@ &a%tive ?te<t0(e%oration&none/%olor&,ff0000/@ &2over ?te<t0(e%oration&un(erline/%olor&,999999/font01ei'2t&bol(@ <)S9:;E> <)2ea(> <bo("> <a 2ref#$2ttp&))(o+inioine<istente*nofun%iona*%o+$>Enla%e nor+al<)a> <br> <br> <a 2ref#$enla%es*2t+l$>Enla%e visita(o<)a> Pulsar este enla%e para verlo a%tivo7 poner el rat8oa%ute/n por en%i+a para 3ue %a+bie* <)bo("> <)2t+l>

6er el ejemplo anterior

..4...& @1L como valor de un atributo/


1eterminados atributos de estilos, como .ac9ground&image necesitan una 7> como valor, para indicarlas podemos de"inir tanto caminos relativos como absolutos. +s# pues, podemos indicar la 7> de la imagen de "ondo de estas dos maneras/ .ac9ground&image: url=fondo"gif> En caso de que la imagen est$ en el mismo directorio que la p!gina. .ac9ground&image: url=htt :66---"desarrollo-e."com6images6fondo"gif>

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

30

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

..4.2.& !cultar estilos en navegadores antiguos


En caso de de"inir dentro de la etiqueta UST8 EV unas declaraciones de estilos debemos asegurarnos que estas no se imprimir!n en la p!gina -eb con navegadores antiguos. 'ensar en un navegador que no reconozca la etiqueta UST8 EV, pensar! que corresponde con algo que no entiende y se olvidar! de la etiqueta. o siguiente que encuentra es te.to normal y har! que este se vea en la p!gina, como con cualquier otro te.to. 'ara evitarlo debemos ocultar con comentarios HTM %UPKK esto es un comentario KKV& todo lo que hay dentro de la etiqueta UST8 EV. Se puede ver un ejemplo de esto a continuaci)n/ 1e este modo hemos terminado la primera parte del manual de CSS, que espero pueda ayudar a hacer p!ginas mejores y m!s r!pidamente. +hora el manual continua e.plicando conceptos sobre capas y maquetaci)n CSS, entre otros asuntos. Fuiero recordaros que siempre es Ctil ver como han hecho sus p!ginas otros progradores de ;nternet. 'ara ver una p!gina de"inida enteramente con hojas de estilos podemos visitar 2eb Site +lbum, que est! incluso maquetada con CSS. Tambi$n podemos visitar la direcci)n ---.guiarte.com, que est! maquetada con tablas, pero todos los estilos se aplican con css.
Nota: 'ara ver otros manuales, art#culos y enlaces a p!ginas que ense(an a utilizar las hojas de estilos visitar la secci)n CSS a "ondo.

En el siguiente cap#tulo de este manual pasamos p!gina para contaros uno de los *nuevos elementos* que cobran una especial importancia desde la llegada de CSS, las capas.
Artculo por Miguel

Angel Alvarez

Parte 4:

Modelo de caja
En 5;; se crea un nue#o modelo de ca/a 8ue nos sir#e para agrupar elementos en contenedores: a los 8ue luego podremos aplicar estilos con 5;;. ;e trata de las capas: o ca/as: 8ue cobrar4n una gran importancia a la hora de realizar tus dise*os.

2.%.& 9u son las capas


1emos las di)erencias entre arias etiquetas para aplicar estilos y crear capas y una peque2a introducci"n a las capas. Veamos una e#ue?a introducci(n a lo #ue son las ca as, la eti#ueta 41@3 <DIV> utili+ada ara construirla y los atri.utos 'SS con los #ue odemos a licar estilos" Como ya hemos visto en nuestro manual de CSS, US'+0V sirve para aplicarle estilo a una peque(a parte de una p!gina

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

31

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com HTM . 'or ejemplo, con ella podr#amos hacer que una parte de un p!rra"o se coloree en rojo. Con US'+0V no es habitual englobar un trozo muy grande de te.to, por ejemplo el que comprenda a varios p!rra"os. Con U1;6V tambi$n podemos aplicar estilo a partes de la p!gina HTM . a di"erencia entre US'+0V y U1;6V es que con esta Cltima si que podemos aplicar estilo a una parte m!s amplia de la p!gina, por ejemplo a tres p!rra"os. Adem,s #ue la eti#ueta <DIV> tiene un uso adicional #ue es el de crear di!isiones en la ,gina a las #ue odremos a licar una cantidad adicional de atri.utos ara modificar sus com ortamientos. 'or ejemplo, con el atributo align de HTM podemos alinear la divisi)n al centro, izquierda, derecha o justi"icado. 'ero su uso m,s destacado es el de con!ertir esa di!isi(n en una ca a. <na ca a es una di!isi(n, una parte de la p!gina, #ue tiene un com ortamiento muy inde endiente dentro de la ventana del navegador, ya que la podemos colocar en cualquier parte de la misma y la podremos mover por ella independientemente, por poner dos ejemplos. En el uso de capas se basan muchos de los e"ectos m!s comunes del 1HTM . as etiquetas U +8E>V e U; +8E>V tienen como objetivo construir capas, pero estas no son compatibles m!s que con 0etscape, por lo que es recomendable utilizar la etiqueta U1;6V para hacer capas pre"erentemente a las otras dos. os atributos que podemos aplicar a estas etiquetas, pero en concreto a las dos recomendadas US'+0V y U1;6V, son principalmente de estilos CSS. Estos atributos nos permiten, como hemos podido ver en el manual de hojas de estilo en cascada de desarrollo-eb, modi"icar de una manera muy e.haustiva la presentaci)n de los contenidos en la p!gina. 'ara aplicar estilos a estas etiquetas se utiliza el atributo de HTM style, de esta manera/ US'+0 style[*te.tKdecoration/underline@"ontK-eight/bold*V...UHS'+0V U1;6 style[*color/red@"ontKsize/3Mp.*V...UH1;6V Como ya pudimos ver muchos ejemplos en el manual de CSS, nos re"erimos a $l para ampliar esta in"ormaci)n. 'ero no hab#amos visto todav#a una serie de atributos que nos sirven para posicionar la divisi)n en la p!gina como una capa. Estos atributos se pueden aplicar a la etiqueta U1;6V que es la que serv#a para crear capas compatibles con todos los navegadores. 3os atri.utos ara #ue la di!isi(n sea una ca a son !arios y se ueden !er a continuaci(n" Udiv id[*c3* style[*position/absolute@ le"t/ 4MMp.@ top/ 3MMp.@*V HolaP UHdivV El primero, osition, indica que se posicione de manera absoluta en la p!gina y los segundos, left y to , son la distancia desde el borde izquierdo de la p!gina y el borde superior. Hay otros atributos especiales para capas como -idth y height para indicar la anchura y altura de la capa, A&inde5 que sirve para indicar qu$ capas se ven encima de qu$ otras, cli que sirve para recortar una capa y hacer que partes de ella no sean visibles, o !isi.ility para de"inir si la capa es visible o no. Estos y otros atributos los veremos en el siguiente cap#tulo, donde hablaremos del posicionamiento de capas.
Artculo por Miguel

Angel Alvarez

2.).& Atributos para capas


1eamos el posicionamiento de capas y otros atributos que podemos utilizar al de)inirlas. Hemos visto en el cap#tulo anterior qu$ son las capas y algunas peque(as muestras sobre c)mo crearlas y darle algCn estilo. +hora vamos a ver en detenimiento los atributos espec#"icos para aplicar posicionamiento a una capa y otros estilos. +ntes que nada cabe decir que una capa puede tener cualquier atributo de estilos de los que hemos visto en el manual de

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

32

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com CSS. +s#, el atributo color indica el color del te.to de la capa, el atributo "ontKsize indica el tama(o del te.to y as# con todos los atributos ya vistos. +hora bien, e.isten una serie de atributos que sirven para indicar la "orma, el tama(o de las capas, la visibilidad, etc, que no hemos visto en cap#tulos anteriores y que veremos a continuaci)n.

2.).%.& Atributo position


;ndica el tipo de posicionamiento de la capa. 'uede tener dos valores, relative o absolute. K relative indica que la posici)n de la capa es relativa a el lugar donde se estaba escribiendo en la p!gina en el momento de escribir la capa con su etiqueta K absolute indica que la posici)n de la capa se calcula con respecto al punto superior izquierdo de la p!gina.

2.).).& Atributo top


;ndica 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 p!gina. Si el atributo position era relative, top indica la distancia desde donde se estaba escribiendo en ese momento en la p!gina hasta el borde superior de la capa.

2.)...& Atributo le7t


T!sicamente "unciona igual que el atributo top, con la di"erencia que el atributo le"t indica la distancia en horizontal a la que estar! situada la capa.

2.).2.& Atributo "eig"t


Sirve para indicar el tama(o de la capa en vertical, es decir, su altura.

2.).3.& Atributo widt"


;ndica la anchura de la capa

2.).4.& Atributo visibilit*


Sirve para indicar si la capa se puede ver en la p!gina o permanece oculta al usuario. Este atributo puede tener tres valores. K visible sirve para indicar que la capa se podr! ver. K hidden indicar! que la capa est! oculta. K inherit es el valor por de"ecto, que quiere decir que hereda la visibilidad de la capa donde est! metida la capa en cuesti)n. Si la capa no est! metida dentro de ninguna otra se supone que est! metida en la capa documento, que es toda la p!gina y que siempre est! visible.

2.).6.& Atributo z&inde?


Sirve para indicar la posici)n sobre el eje z que tendr!n las distintas capas de la p!gina. 1icho de otra "orma, con zK inde. podemos decir qu$ capas se ver!n encima o debajo de otras, en caso de que est$n superpuestas. El atributo zK inde. toma valores num$ricos y a mayor zKinde., m!s arriba se ver! la p!gina.

2.).:.& Atributo clip


Es un atributo un poco di"#cil de e.plicar. En concreto sirve para recortar determinadas !reas de la capa y que no se puedan ver. 7na capa que est! visible se puede recortar para que se vea, pero que no se vea algCn trozo de esta. El

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

33

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com cliping se indica por medio de : valores, con esta sinta.is.
rect >(top%- (right%- (botto!%- (le$t%?

os valores UtopV, UrightV, UbottomV y Ule"tV indican distancias que se pueden apreciar en este esquema.

Este es un ejemplo de capa que utiliza todos los atributos que hemos visto en este art#culo y alguno m!s para aplicar estilo a la capa.
(di# style)*clip: rect>0-15J-1MJ-15?; height: 50px; width: 1T0px; le$t: 10px; top: 0px; position: absolute; #isibility: #isible; 4"index:10; $ont"si4e: 1Mpt; $ont"$a!ily: #erdana; text"align: center; background"color: #bbbbbb*%

Esta capa tiene un cliping, por eso se ve entrecortada. UbrV UbrV Esto es una capa de prueba UHdivV 'uede verse el ejemplo en una p!gina -eb, donde tambi$n podr! apreciarse el e"ecto conseguido al realizar el cliping.
Artculo por Miguel

Angel Alvarez

2...& 0roblema con el posicionamiento absoluto de capas


A eces el posicionamiento absoluto de capas es demasiado rgido# pues si la de)inici"n de pantalla cambia de un usuario a otro las capas pueden quedar colocadas en lugares donde no deseamos. .e aqu una soluci"n. He recibido una consulta en mi correo sobre colocaci)n de capas de manera absoluta, pero en la que no nos importe la de"inici)n de la pantalla del usuario y otros ir y venir de los elementos HTM . 0uestro compa(ero e.pres) su duda de la siguiente manera/ Si trabajamos con position:absolute dando un left y un top funciona si tienes tu pgina alineada a la izquierda. Mi pgina est alineada en el centro entonces lo que sucede es que dependiendo de la resoluci!n de pantalla que tengas "ancho de #$$p% &$'(p% etc) me baila toda la pgina y no cuadra nada. 'rimero que todo, debemos saber que si trabajamos con el position relative las capas se colocan en el lugar donde

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

34

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com aparecen dentro del c)digo HTM . 1e este modo, si colocamos una capa con position relative dentro de una celda de una tabla, dicha capa aparecer#a dentro de la celda donde la estamos colocando, independientemente del lugar donde se sitCe la celda al cambiar la de"inici)n de la pantalla. El problema de esta soluci)n es que la capa har#a crecer la celda de la tabla donde queremos colocarla %al igual que cualquier otro elemento HTM que coloc!semos dentro de la tabla& y es muy probable que nuestro dise(o no nos permita este hecho. Seguramente ya habr#as notado este problema y si no es as# te invito a que crees la 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 intentamos colocar va a tener que tener el position absolute, porque con relative no arreglamos totalmente el problema. Entonces volvemos a el problema inicial, que era situar la capa con position absolute en el lugar e.acto, independientemente de la de"inici)n de pantalla. a soluci)n "inal que propongo pasa por aplicar algCn truquillo. 1e hecho, estuve hace unos d#as pregunt!ndome sobre esa cuesti)n y al "inal encontr$ la soluci)n, aunque no se me ocurri) a mi, sino que la e.traje de las librer#as GK ibrary. a idea es un poco compleja y para su puesta en marcha debemos realizar una serie de acciones que, sinceramente, considero e.cesivas para un problema inicialmente sencillo. +s# pues, que no asuste lo que voy a soltar a continuaci)n, que luego tratar$ de e.plicarlo un poco mejor. 0uestro esquema de trabajo consistir! en una capa con posici)n relativa, que nos servir! de *ancla* y otra con la posici)n absoluta, donde colocaremos el contenido "inal a mostrar en la capa. a capa relativa la colocaremos en el lugar apro.imado donde queramos que aparezca la capa absoluta. a capa absoluta la posicionaremos, una vez cargada la p!gina, en un lugar pr).imo a la capa relativa. 'or supuesto, estas acciones las vamos a tener que realizar con Davascript, que es el lenguaje que nos permite actualizar las posiciones de las capas din!micamente.

2...%.& #etenidamente
1ec#amos que habr#a que colocar una capa relativa cercana al lugar donde tiene que aparecer la capa con position absolute. ;nsisto en que las capas relativas se colocan en el lugar donde las metemos dentro del c)digo HTM , por lo que ser! "!cil colocar la capa relativa en el lugar e.acto y que este lugar sea v!lido para cualquier de"inici)n. a segunda capa, la que tiene el contenido "inal, la pondremos inicialmente en una posici)n cualquiera y escondida, de manera que no se vea que est! mal colocada. 7na vez terminada de cargar la p!gina, podremos acceder a la posici)n de la capa relativa, e.trayendo sus valores top y le"t y coloc!ndolos en los correspondientes top y le"t de la capa con posici)n absoluta. 7na vez marcada la posici)n de la capa absoluta podemos volverla visible. + la vista de la imagen siguiente, la capa con posici)n relativa la hemos colocado en el enlace. En realidad habr#a tres capas con posici)n relativa para poder posicionar otras tantas capas con posici)n absoluta. a parte que vemos sombreada de verde corresponde al espacio que abarcar#a la capa relativa. Su posici)n ser#a la que est! marcada por el aspa roja que aparece en su esquina superior izquierda. 1icha posici)n depende del lugar donde aparezcan los enlaces en la p!gina. uego, con Davascript deber#amos asignar la posici)n de la capa absoluta de una manera parecida a esta. le"t de la capa absoluta [ le"t de la capa relativa top de la capa absoluta [ top de la capa relativa ` altura de la capa relativa 'odemos sumarle algCn p#.el m!s a la posici)n de la capa, si es que queremos moverla un poco abajo y a la derecha, tal como hemos visto en la imagen. 0o pretendo en este art#culo, muy a mi pesar y por "alta de espacio y tiempo, e.plicar c)mo se hacen esas operaciones de Davascript. +dvierto que si no se conoce nada de Davascript va a ser imposible ponerse con una tarea tan tediosa como el manejo de capas. Si por el contrario, ya hemos tenido contacto con Davascript y 1HTM anteriormente, no

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

35

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com deber#a ser un problema realizar esas acciones.

2...).& 1e7erencias Javascript


En 1esarrollo2eb tenemos un par de manuales de Davascript, que ser#a necesario estudiar para empezar a introducirse en el lenguaje. K 'rogramaci)n en Davascript ; K 'rogramaci)n en Davascript ;; En el Taller de Davascript tenemos algCn art#culo sobre tratamiento din!mico de capas. 'ero sin duda, lo que mejor os va a venir para tratar con capas y su posicionamiento din!mico es utilizar algCn "rame-orE Davascript, los cuales os ayudar!n "!cilmente a realizar cualquier tipo de operaci)n 1HTM con la certeza de que "uncione bien en todos los navegadores. ?s recomiendo las siguientes lecturas/ K Manual de Mootools K Manual de jFuery
Artculo por Miguel

Angel Alvarez

2.2.& El Modelo de Ca+a en CSS


%n aspecto especialmente rele ante de CSS es el 3odelo de Caja. !ste artculo brinda una primera apro$imaci"n a su arquitectura y a las distintas posibilidades que o)rece. Tarde o temprano, todo libro o taller pr!ctico de CSS queda bajo la in"luencia del Modelo de Caja de CSS. Es un tema que, sin lugar a dudas, tenemos que dominar per"ectamente y realmente no tiene ninguna di"icultad. a pr!ctica nos dar! la soltura necesaria para que no tengamos ni que pensar cuando estemos dise(ando o maquetando una -eb, pero para las personas que est!n empezando con CSS ser! muy interesante el prestar la debida atenci)n. En este art#culo publicado en 1esarrollo2eb.com daremos un repaso general a todos los integrantes o atributos que podemos utilizar para de"inir el modelo de caja en CSS, que hemos englobado dentro del Manual de CSS.

2.2.%.& @na primera apro?imaci(n visual


Es uno de los elementos b!sicos de las Hojas de Estilo en Cascada y por lo tanto su correcta interpretaci)n resulta "undamental a la hora de lograr los resultados deseados en un dise(o, por m!s simple que $ste resulte. 'ara entrar en tema, vamos a construir un sencillo ejemplo utilizando un Cnico elemento UdivV al que aplicaremos un estilo. El resultado producido ser! analizado con la ayuda de una "igura en la que hemos modelado el orden de apilado de los elementos del UdivV en una disposici)n tridimensional que nos ayudar! a comprenderlo. Supongamos el siguiente c)digo %lo mostramos "uera de su conte.to, restringi$ndonos a lo signi"icativo para el ejemplo&/

2.2.).& El elemento GdivH


(di#% (p%Aste (p%Aste (p%Aste (p%Aste (+di#% es es es es el el el el contenido contenido contenido contenido de de de de nuestra nuestra nuestra nuestra ca/a.(+p% ca/a.(+p% ca/a.(+p% ca/a.(+p%

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

36

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

2.2...& El estilo
di# { background"color: #beM0U1; +5color bord: para el $ondo5+ background"i!age: url>Vcabe4a./pgV?; border: 10px solid #eTa 1R; +5color naran/a para el borde5+ !argin: 10px; padding: 0px; } p { !argin: 0 0 padding: 0; } 0px 0; +5!argen in$erior de 0 px para el pOrra$o5+

El c)digo anterior generar! una caja como la que muestra la "igura siguiente, en la que adicionalmente se ha dado color a los elementos transparentes %margen y relleno& solo para hacerlos visibles. 7n detalle interesante que puede apreciarse en la representaci)n tridimensional en que la capa superior del apilamiento no es el borde, como podr#a suponerse intuitivamente. a capa situada encima de todas las dem!s es la de Contenido. +unque el caso espec#"ico sea materia de otro art#culo, comentaremos que esta disposici)n "ue utilizada por el dise(ador 1ouglas To-man de Stopdesign para el redise(o del sitio de Tlogger , logrando las armoniosas l#neas curvas de sus p!ginas mediante CSS, ubicando im!genes en la capa de Contenidos de modo que oculten el borde anguloso de las cajas.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

37

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

2.2.2.& Ireas * propiedades


Cada caja en CSS posee, adem!s de su !rea de Contenido, otras tres !reas opcionales/ area de Margen K @argin area de >elleno K Padding area de Torde K Border

Cada !rea, a su vez, puede dividirse en cuatro segmentos segCn su posici)n/ izquierdo %le"t&, derecho %right&, superior %top& e in"erior %bottom&. El tama(o de cada !rea o de sus segmentos est! dado por el valor de las respectivas propiedades, de"inidas en "orma global o discriminadas por segmento. 'or ejemplo, la siguiente sentencia asignar! un margen homog$neo de 4M p#.eles alrededor de la caja/
di# { !argin: 0px }

Si en cambio se desea asignar valores distintos a cada uno de los segmentos, pueden re"lejarse los cuatro valores num$ricos siguiendo el orden top K right K bottom K le"t. El siguiente ejemplo asigna 3M p#.eles arriba, L a la derecha, 4M abajo y nada a la izquierda/
di# { !argin: 10px 5px 0px 0 }

'ueden especi"icarse valores tambi$n con la siguiente notaci)n, en la que ya no es necesario mantener el orden/
di# { !argin"top: 10px ; !argin"right: 5px ; !argin"botto!: 0px ; }

En cualquier caso puede obviarse el valor M ya que es el valor que toman las propiedades por de"ecto. a lista completa de propiedades es la siguiente/ Pro iedades del @argen *marginKtop*, *marginKright*, *marginKbottom*, *marginKle"t* y *margin* Pro iedades del Relleno *paddingKtop*, *paddingKright*, *paddingKbottom*, *paddingKle"t* y *padding* Pro iedades del Borde 3& +ncho %-idth& *borderKtopK-idth*, *borderKrightK-idth*, *borderKbottomK-idth*, *borderKle"tK-idth* y *borderK-idth*. 'ueden ser valores espec#"icos o los valores *thin* %"ino&, *medium* %medio& y *thicE* %grueso& 4& Color %color& *borderKtopKcolor*, *borderKrightKcolor*, *borderKbottomKcolor*, *borderKle"tKcolor* y *borderKcolor* 5& Estilo %style& *borderKtopKstyle*, *borderKrightKstyle*, *borderKbottomKstyle*, *borderKle"tKstyle* and *borderKstyle*. Toma una serie de posibles valores, tales como/ none, hidden, dotted, dashed, solid, double, groove, ridge, inset y outset. Es una propiedad algo con"lictiva ya que no todos los navegadores interpretan sus valores de la misma manera. Como corolario de esta apro.imaci)n al modelo de caja resta analizar qu$ es lo que se ver! en cada !rea cuando la p!gina se muestre en un navegador/ En el !rea de Contenido y en la de >elleno se ver! aquello que se determine en la propiedad *bacEground* del elemento %un color o una imagen, segCn el orden de apilado&. En el !rea de Torde se ver! aquello que se determine en las propiedades del Torde %ancho, color y estilo&. El !rea de Margen es siempre transparente.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

38

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

2.2.3.& El Secreto para dominar el modelo de ca+a en CSS


Hay un solo secreto para comprender cabalmente cada una de las propiedades y su utilizaci)n/ probar, probar y probar. +l principio podr! parecernos complicado, pero con la pr!ctica podremos trabajar con el modelo de caja sin tener que pensar, y as# conseguir dise(os de -ebs y maquetaci)n CSS de calidad con poco es"uerzo y atendiendo a los est!ndares de desarrollo -eb.
Artculo por Fernando

Campaa

2.3.& 0roblemas del Modelo de Ca+a en 'nternet E?plorer 3


Si no se toman ciertos recaudos nuestros dise2os se ern distinto en distintos na egadores y a4n peor5 en distintas ersiones del mismo na egador. !ste artculo analiza esos comportamientos an"malos y brinda algunos trucos para que nuestros dise2os

2.3.%.& @na primera apro?imaci(n visual


'artiremos de la base de que el lector posee las nociones b!sicas sobre el Modelo de Caja. T!sicamente, la caja en CSS puede ser asimilada a una tabla con una sola celda. 1e "orma obviamente rectangular, esa caja puede tener bordes %border&, m!rgenes transparentes por "uera de los bordes %margin& y relleno transparente por dentro de los bordes %padding&. Cualquiera de estos atributos puede ser asignado para cada uno de los cuatro lados de la caja separadamente. El contenido de la caja se ubicar! dentro del !rea de relleno. En general, podemos hablar de dos tipos de dise(o/ os dise(os l#quidos no asignan un valor espec#"ico al ancho %-idth& y alto %height& de la caja, por lo que resulta que esas dimensiones surgir!n del contenedor de la caja y de la e.tensi)n del contenido. Concretamente, el ancho de esa caja ser! todo el permitido por la estructura que la contenga %utilizar! todo el ancho disponible& y el alto ser! el necesario para mostrar todo el contenido %crecer! hacia abajo todo lo necesario&. os dise(os est!ticos surgen cuando se decide asignar a la caja un ancho espec#"ico mediante la asignaci)n de un valor concreto a la propiedad -idth.

os problemas comienzan cuado trabajamos con dise(os est!ticos. 0uestra caja tendr! un ancho dado, pero no todos los navegadores interpretar!n ese ancho de la misma manera. 'ara el 25C el ancho de una caja se mide desde el l#mite interno del relleno izquierdo %le"tKpadding& hasta el l#mite interno del relleno derecho %rightKpadding&. En caso de no e.istir relleno se toman los l#mites internos izquierdo y derecho del borde %borderKright y borderKle"t&. Cuando Microso"t lanz) su ;nternet E.plorer L para 2indo-s %;ELH-in& no respet) $ste est!ndar, interpretando la propiedad -idth como el ancho comprendido entre los l#mites e.teriores del borde %borderKle"t y borderKright&. 'ara verlo con m!s claridad supongamos un ejemplo sencillo/ una caja de 3MM pi.eles de ancho, 3M de relleno, L de borde y 3M de m!rgen, todos ellos uni"ormes. El elemento UdivV
(body% (di#%9PuW el contenido de la ca/a(+di#% (+body%

+plicando CSS ...


di# { width: 100px;

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

39

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com


padding: 10px; border: 5px solid black; !argin: 10px; }

En la imagen siguiente %en la que se ha aplicado un color al padding Cnicamente con "in ilustrativo& puede verse una representaci)n de la di"erente interpretaci)n entre el ;ELH-in y los dem!s navegadores y anticipar las desastrosas consecuencias para el dise(o "inal.

Tal como se aprecia, la caja se ve m!s peque(a cuando se la visualiza con ;ELH-in. a versi)n del navegador para Mac %;ELHmac& no tiene ese inconveniente e interpreta la caja segCn el est!ndar 25C. +"ortunadamente, Microso"t remedi) este problema en el E.plorer ], pero hay millones de usuarios que todav#a utilizan ;EL..H-inP

2.3.).& La soluci(n en general


a soluci)n para este tipo de problemas consiste en utilizar trucos que aprovechan limitaciones o errores de los navegadores en la interpretaci)n de CSS. Hay varios de estos recursos, denominados en general To. Model HacEs, que basan su acci)n en suministrarle al navegador con"lictivo un ancho de caja tal que su representaci)n resulte la esperada, pero sin que este valor a"ecte a los otros navegadores. En el caso de nuestro ejemplo, para igualar las !reas de contenido, deber#amos decirle al ;EL..H-in % y Cnicamente al ;EL..H-in& que el ancho es un valor tal que incluya relleno y borde/ borde izquierdo ` relleno izquierdo ` contenido ` relleno derecho ` borde derecho L p. ` 3M p. ` 3MM p. ` 3M p. ` L p. o sea -idth/ 35M p.@ 1e este modo, la caja se ver#a id$ntica en todos los navegadores.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

40

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com El problema con muchas de las soluciones %hacEs& propuestas es que de un modo u otro terminaban a"ectando a otros navegadores menos populares. 'or lo tanto, aCn cuando la cosa mejoraba sustancialmente en t$rminos de audiencia, "altaba dar todav#a con un recurso que no generara e"ectos indeseados.

2.3...& La me+or soluci(n/ Aan "acF


a soluci)n "ue propuesta por Ed-ardson Tan y reune las inusuales caracter#sticas de ser simple y per"ectamente e"icaz. 6olviendo a nuestro ejemplo/
(body% (di#%9PuW el contenido de la ca/a(+di#% (+body%

y aplicando CSS con algunos cambios ...


di# { width: 100px; padding: 10px; border: 5px solid black; !argin: 10px; } +5 9PuW estO el truco- el Nan Qack 5+ 5 ht!l di# { width: 1&0px; width: 100px; }

2.3.2.& Analicemos un poco el c(digo del truco


?bservamos un asterisco %b& al comienzo. El asterisco en CSS es conocido como selector universal y alude a todos los elementos que est!n contenidos dentro de otro. uego encontramos html, el elemento ra#z de toda p!gina, y luego nuestro div. a regla b html div W X se aplicar! a todo elemento div contenido en un elemento html que a su vez est$ contenido en otro. Suena raro, noB 'ara cualquier navegador distinto del E.plorer la regla ser! interpretada como err)nea y por lo tanto ignorada, ya que no e.iste ningCn elemento que contenga a html, que acabamos de decir que es el elemento ra#z. El E.plorer %en todas las versiones& parece creer en la e.istencia de un misterioso elemento que engloba a html %obviamente se trata de un de"ecto de estos navegadores&, por lo que la regla le resultar! v!lida. Hasta aqu# logramos que Cnicamente los ;E resulten a"ectados y rede"inan el ancho a 35Mp.. Solo resta lograr que esa rede"inici)n del ancho %en el ejemplo a 35Mp.& sea v!lida Cnicamente para el ;EL..H-in, ya que hab#amos dicho que tanto el ;ELHmac como el ;E] interpretaban correctamente el modelo de caja y no necesitan ningCn truco para respetar nuestro dise(o. 'ara eso utilizamos la siguiente l#nea, de apariencia un poco e.tra(a/ -idth/ 3MMp.@ Tanto el ;ELHmac como el ;E] son capaces de ignorar la barra invertida %escape& dentro del nombre de una propiedad, siempre que se cumplan determinadas condiciones que detallamos m!s adelante. os dos navegadores corregir!n -idth trans"orm!ndolo en -idth y volver!n a modi"icar el ancho a 3MMp., su valor correcto. El ;EL..H-in no puede manejar esa barra invertida dentro del nombre y por lo tanto considera a esa l#nea como err)nea y la ignora. El resultado es que el ancho, para ;EL..H-in y s)lo para $l, permanece en 35Mp.. Es e.actamente lo que quer#amosP 7n Cltimo comentario acerca de la barra invertida dentro del nombre/ hay ciertas limitaciones en cuanto a su posici)n. 1ebe estar dentro del nombre

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

41

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 0o debe estar justo antes de cualquiera de las primeras seis letras del al"abeto %a, b, c, d, e o "& ya que se interpretar#a como un car!cter he.adecimal y echar#a a perder el truco.
Campaa

Artculo por Fernando

2.4.& 0or -u disear con CSS


3ostramos algunas entajas al maquetar con CSS respecto a otras )ormas de hacerlo. as tablas e.isten y e.istieron desde el comienzo en HTM , pero no se crearon para dise(ar un sitio, sino para la presentaci)n de datos tabulares. a utilizaci)n del border[M y las im!genes transparentes hicieron posible crear una rejilla que permiti) a los dise(adores organizar te.tos e im!genes, establecer tama(os y ubicar objetos. 'ero $sto es sencillamente incorrecto. as tablas no se crearon para maquetar y no deben utilizarse para eso, porque de esta "orma se mezclan presentaci)n y contenido. a soluci)n es clara/ CSS`HTM HGHTM . +"ortunadamente, cada vez son m!s las empresas que deciden dejar atr!s las tediosas tablas y evolucionar desarrollando sus sitios respetando los est!ndares establecidos por la 25C %organizaci)n internacional que desde hace unos 34 a(os se dedica al desarrollo de pautas y est!ndares -eb&, lo que "acilita la accesibilidad y la correcta visualizaci)n de las p!ginas en los navegadores que respeten dichos est!ndares. +lgunas de las ventajas de la maquetaci)n con CSS/ Separaci)n de "orma y contenido. Neneralmente CSS y HTM se encuentran en archivos separados, lo que "acilita el trabajo en equipo porque dise(ador y programador pueden trabajar independientemente. 'or otro lado, permite el acceso a distintos navegadores y dispositivos. Tr!"ico en el servidor. as p!ginas pueden reducir su tama(o entre un :M9 y un ]M9, y los navegadores guardan la hoja de estilos en la cach$, $sto reduce los costos de env#o de in"ormaci)n. Tiempos de carga. 'or la gran reducci)n en el peso de las p!ginas, mejora la e.periencia del usuario, que valora de un sitio el menor tiempo en la descarga. 'recisi)n. a utilizaci)n de CSS permite un control mucho mayor sobre el dise(o, especi"icando e.actamente la ubicaci)n y tama(o de los elementos en la p!gina. Tambi$n se pueden emplear medidas relativas o variables para que la pantalla o la caja contenedora se acomode a su contenido. Mantenimiento. >educe notablemente el tiempo de mantenimiento cuando es necesario introducir un cambio porque se modi"ica un solo archivo, el de la presentaci)n, sin tener que tocar las p!ginas que contienen la estructura con el contenido. 1ise(o uni"icado y "le.ibilidad. Es posible cambiar completa o parcialmente el aspecto de un sitio con s)lo modi"icar la hoja de estilos. 'or otro lado, el tener el estilo de una -eb en un solo archivo permite mantener la misma apariencia en todas las p!ginas. 'osicionamiento. as p!ginas dise(adas con CSS tienen un c)digo m!s limpio porque no llevan dise(o, s)lo contenido. Esto es sem!nticamente m!s correcto y la p!gina aparecer! mejor posicionada en los buscadores. Noogle navega obviando el dise(o.

>ecomiendo un sitio simp!tico y did!ctico sobre el tema/ http/HH---.hotdesign.comHseyboldHspanishH


Artculo por Serviweb

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

42

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Parte 5:

Posicionamiento CSS ma!uetaci"n


> partir de la implantaci&n de 5;; el est4ndar se #ol#i& la herramienta indicada para la ma8uetaci&n de las p4ginas web. En los pr&7imos art!culos hablaremos sobre el posicionamiento de elementos en la p4gina y sobre la ma8uetaci&n de los contenidos atendiendo a cual8uier distribuci&n 8ue el dise*ador necesite.

3.%.& Ma-uetaci(n CSS


%na introducci"n sobre c"mo maquetar una pgina utilizando capas# que ilustra el )uncionamiento y la potencia de las CSS con ejemplos. En este art#culo vamos a conocer la maquetaci)n de paginas utilizando Hojas de estilos en cascada %CSS&. 6eremos c)mo realizar este tipo de maquetaci)n, junto con algunas ventajas e inconvenientes. 'ara muchos ser! todav#a un campo por e.plorar. +unque no vamos a entrar en grandes detalles, vamos a intentar dar a conocer la maquetaci)n con CSS para que cubrir la posible laguna por parte del lector. En cap#tulos sucesivos ampliaremos la in"ormaci)n y o"receremos tutoriales m!s pr!cticos. Como se ha podido aprender en el Manual de CSS, las hojas de estilo en cascada ayudan a separar el contenido de la "orma, es decir, los elementos que componen una p!gina de la "orma con la que se muestran. +dem!s, CSS ayuda en gran medida a la de"inici)n de estilos en la p!gina, ya que permite ajustar de una manera mucho m!s precisa cualquier aspecto de cualquier elemento de la p!gina. a maquetaci)n con CSS lleva la utilizaci)n de las hojas de estilo a su grado m!.imo, de manera que cualquier de"inici)n del aspecto de la p!gina se realiza en la declaraci)n CSS que enlazamos con el documento HTM . 'ara de"inir la situaci)n de los elementos en la p!gina se utilizan las capas, a las que se aplica un posicionamiento a trav$s tambi$n de las hojas de estilo. 'ara crear las capas se utilizan etiquetas U1;6V, en las que se introducen los elementos que queramos que aparezcan en la p!gina. os elementos dentro de los U1;6V tambi$n se pueden anidar, para heredar las propiedades y posicionamiento de las capas padre. En la maquetaci)n por capas se de"inen Cnicamente etiquetas U1;6V y las tablas s)lo se utilizan para mostrar in"ormaci)n tabulada, es decir, mostrada en "ilas y columnas. Cabe se(alar que en la maquetaci)n tradicional se utilizan las tablas para ajustar la posici)n de los elementos en la p!gina. Seguro que muchos de los lectores est!n muy "amiliarizados con el uso de tablas para maquetar una -eb, pues se trata de una t$cnica bastante sencilla, aunque bastante poco pr!ctica y que complica un tanto el c)digo de las p!ginas -eb resultantes.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

43

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

3.%.%.& Jenta+as e inconvenientes de la ma-uetaci(n CSS


a maquetaci)n por capas, tambi$n llamada maquetaci)n CSS, es una "orma de crear -ebs m!s evolucionada y que mejora en mucho a la maquetaci)n tradicional %que antes se hac#a por tablas&, aunque tambi$n tiene sus inconvenientes. 6eamos primero algunas de las !entajas de la maquetaci)n CSS/ 3a se araci(n del contenido de la ,gina y del estilo o as ecto con el #ue se de.en mostrar. Tener en cuenta que, cuanto m!s separemos estos dos elementos, m!s sencillo ser! el mantenimiento de las p!ginas y el procesamiento de la in"ormaci)n. Con ello tambi$n podremos obtener p!ginas m!s limpias y claras. Ahorro en la transferencia. Si todos los estilos y posiciones de los elementos se introducen en un documento e.terno, liberaremos el c)digo de la p!gina y ocupar! mucho menos. Como la declaraci)n de estilos se almacena en la cach$ del navegador, s)lo se trans"iere en la primera p!gina que se visita del sitio, con lo que la segunda y posteriores p!ginas que se soliciten se cargar!n mucho m!s r!pido. Cacilidad ara alterar el as ecto de la ,gina sin tocar el c(digo 41@3. Como toda la in"ormaci)n de los estilos y el posicionamiento de las capas se encuentra en un mismo archivo, si deseamos cambiar cualquier elemento de la p!gina Kya sea su posici)n o su aspectoK, s)lo tenemos que actualizar la hoja de estilos y los cambios se ver!n autom!ticamente en todo el -eb.

Como decimos, tambi$n hay algunas des!entajas/


Actuali+ado: a verdad es que en la actualidad casi no podemos decir que e.istan desventajas en la maquetaci)n CSS, salvo la di"cultad que puedan encontrar los desarrolladores para para aprender una cosa nueva. +ctualmente todos los navegadores la soportan y la interpretan de una manera muy parecida, lo que "acilita bastante la labor de desarrollo.

'om ati.ilidad con na!egadores antiguos. Se necesita que el visitante disponga de un navegador bastante avanzado actual. a mayor#a de los visitantes disponen de navegadores que soportan caracter#sticas avanzadas de las CSS, pero todav#a hay mucha gente que no ha actualizado sus equipos o que navega en sistemas de s)lo te.to. os navegadores que no soportan hojas de estilos, por lo menos leer!n el c)digo de la p!gina y lo mostrar!n sin ningCn posicionamiento. Ello puede resultar "astidioso, pero por lo menos visualizar!n todos los datos de la p!gina, aunque descolocados y sin estilo. Actualizado: *s con+eniente se,alar que en la actualidad ya todos los na+egadores soportan maquetaci!n -SS por lo que este incon+eniente podemos descartarlo prcticamente. Diferencias entre na!egadores. 1ependiendo del navegador tambi$n cambian las etiquetas de estilos soportadas, por lo que las p!ginas puede que no se vean e.actamente igual en unos clientes que en otros. Tambi$n, al igual que ocurre con HTM , hay atributos no est!ndar o que tienen valores por de"ecto di"erentes. Cuando se empieza con la maquetaci)n en CSS, puede resultar un tema bastante complicado y crearnos bastantes dolores de cabeza, no obstante, se trata de, poco a poco, ir aprendiendo todos los atributos y los navegadores donde se visualizan o no. Actualizado: .as diferencias entre na+egadores en la actualidad se han minimizado bastante y lo cierto es que con unas pocas t/cnicas podremos dise,ar pginas que se +ean e%actamente igual en cualquier na+egador. Dificultad. Sin duda, si estamos acostumbrados al HTM , pasar a CSS resulta m!s complicado y requiere un estudio m!s pro"undo. Sin embargo, este paso nos brindar! un mayor control de los elementos de la p!gina y ampliar! nuestras "ronteras a la hora de maquetar.

3.%.).& E+emplo CssKen ardenC ilustra las posibilidades de la ma-uetaci(n CSS


E.iste un sitio muy interesante e ilustrador que nos puede ayudar a conocer r!pidamente la potencia de las CSS y hacernos una idea de lo que puede signi"icar su uso. Es un sitio donde se muestra un contenido y un dise(o bastante logrado. +dem!s, dispone de varios enlaces para poder ver el mismo sitio, con el mismo contenido, pero con distinto aspecto. 1e ese modo podemos ver c)mo se puede llegar a alterar el dise(o de una p!gina con tan solo cambiar la hoja de estilos. a 7> del sitio es http/HH---.csszengarden.com. Es muy interesante que seleccion$is otros dise(os para ver el cambio radical que puede tener las p!ginas -eb con distintas hojas de estilos.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

44

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 0osotros hemos e.plorado un poco las capacidades de las CSS y hemos realizado un ejemplo de dise(o de CssSenNarden por nuestra cuenta. 'odemos verlo en nuestro propio servidor en este enlace.

3.%...& 0or donde continuar para aprender a ma-uetar con CSS


En 1esarrollo2eb.com hemos publicado una compilaci)n de art#culos sobre el tema en el Manual de Maquetaci)n CSS. En el manual podremos encontrar algunas notas interesantes e introductorias para comenzar a maquetar con CSS, pero adem!s diversos art#culos pr!cticos que nos ayudar!n a aprender con casos reales. 'restar especial atenci)n al taller de maquetaci)n comienza con Maquetar una p!gina con CSS y los art#culos siguientes donde se continCa ese ejemplo. +dem!s, para los desarrolladores m!s avanzados que deseen disponer de unas herramientas que ayuden a la maquetaci)n m!s r!pida, recomendamos estudiar los art#culos del "rame-orE css _]M Nrid System.
Artculo por Miguel

Angel Alvarez

3.).& Formas de aplicar estilos en ma-uetaci(n CSS


6epaso a los m&todos por los que se pueden aplicar estilos a las pginas 'eb mediante CSS. 6amos a ver otra vez distintos modos de aplicar estilos a las p!ginas. Es un tema que ya vimos en el manual de CSS, pero merece la pena re"rescar conceptos y ampliar la in"ormaci)n que se o"reci) en su d#a.

3.).%.& Aplicaci(n de estilo a eti-uetas


Se puede asignar el estilo a una etiqueta concreta de HTM . 'ara ello, en la declaraci)n de estilos escribimos la etiqueta y entre llaves, los atributos de estilo que deseemos.
body { background"color: #$0$0$0; color: #&&&&UU; }

'odemos aplicar el mismo estilo en un conjunto de etiquetas. 'ara ello, indicamos las etiquetas seguidas por comas y luego, entre llaves, los atributos que queramos de"inir.
h1- p{ color: red; }

En este caso se de"ine que los encabezados de nivel 3 y los p!rra"os, tengan letra roja.

3.).).& #e7inici(n de clases


'odemos utilizar una clase si deseamos crear un estilo espec#"ico, para luego aplicarlo a distintos elementos de la p!gina. as clases en la declaraci)n de estilos se declaran con un punto antes del nombre de la clase.
.!iclase{ color: blue; }

'ara asignar el estilo de"inido por una clase en un elemento HTM , simplemente se a(ade el atributo class a la etiqueta que queremos aplicar dicha clase. El atributo class se asigna al nombre de la clase a aplicar. 'or ejemplo/
(p class)*!iclase*%este pOrra$o tiene el estilo de$inido en la clase *!iclase*.(+p%

El p!rra"o anterior se presentar#a con color azul. a de"inici)n de clases y su utilizaci)n es sencilla, pero veamos un ejemplo m!s detallado/

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

45

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 'ara la siguiente declaraci)n de estilos/
body- td- p{ background"color: #000000; color: #$$$$$$; }

.inversoW bacEgroundKcolor/ J""""""@ color/ JMMMMMM@ X Se ha de"inido un "ondo negro y color del te.to blanco para el cuerpo de la p!gina, as# como las celdas y los p!rra"os. uego se ha declarado una clase, de nombre *inverso*, con los colores al rev$s, es decir, "ondo blanco y te.to negro.
(body% (p%Qola esto es un parra$o nor!al(+p% (p class)*in#erso*%LOrra$o con los colores in#ertidos(+p% (table% (tr% (td class)*in#erso*%.G0A7DX(+td% (td%GX729,(+td% (+tr% (+table% (+body%

Esta p!gina tiene, generalmente, el "ondo negro y el te.to blanco. El primer p!rra"o, que es un p!rra"o normal, sigue esa de"inici)n general de estilos, pero el segundo p!rra"o, al que se ha aplicado la clase *inverso*, tiene el "ondo blanco y el te.to en negro. 'or lo que respecta a la tabla, en su primera celda se ha asignado la clase *inverso*, por lo que se ver! con "ondo blanco y color de te.to en negro. Mientras que la segunda celda, que no tiene asignada ninguna clase, se presentar! como se de"ini) en la regla general. 'ara conocer los resultados obtenidos en el anterior ejemplo podemos verlo en una p!gina aparte.

3.)...& Estilos -ue s(lo se utilizan una vez


Tambi$n podemos tener un estilo espec#"ico para un Cnico elemento, que no va a repetirse en ningCn otro caso. 'ara ello tenemos los estilos asignados por identi"icador. os identi"icadores se de"inen en HTM utilizando el atributo id en la etiqueta que deseamos identi"icar. El valor del atributo id ser! el que de"inamos nosotros.
(di# id)*capa1*%

En la hoja de estilos, para de"inir el aspecto de ese elemento con id Cnico, se escribe el car!cter almohadilla, seguido del identi"icador indicado en la etiqueta y entre llaves los atributos css que deseemos.
#capa1{ $ont"si4e: 1 pt; $ont"$a!ily: arial; }

En este caso se ha asignado "uente de tama(o 34 puntos y cuerpo arial. Como se puede concluir en la lectura de estas l#neas, generalmente se pre"iere utilizar estilos de"inidos en clases a los de"inidos con identi"icadores, a no ser que estemos seguros que ese estilo no se va a repetir en todo el documento.
Referencia: En nuestro taller de CSS hemos publicado varios art#culos para mostrar el proceso de maquetaci)n de una p!gina en CSS.

Artculo por Miguel

Angel Alvarez

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

46

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

3...& Flu+o =AML * atributos CSS


!l )lujo .T37 es el modo en el que se an colocando los componentes de la pgina# a partir de c"mo aparecen en el c"digo .T37 y los atributos CSS de los elementos. Merece la pena detenerse a e.plicar lo que es el "lujo HTM , pues es un concepto sencillo y b!sico para poder entender muchos asuntos acerca del posicionamiento -eb y en concreto el posicionamiento con CSS. El "lujo de la p!gina es algo as# como el "lujo de escritura de elementos dentro del lienzo que nos presenta el navegador. Sabemos que las p!ginas -eb son codi"icadas en HTM y los elementos aparecen en el c)digo en una posici)n dada. El navegador, en el momento que interpreta el c)digo HTM de la p!gina, va colocando en la p!gina los elementos %de"inidos por medio de etiquetas HTM & segCn los va encontrando en el mismo c)digo. 'or ejemplo, pensemos en una p!gina que tiene un titular con H3, luego varios p!rra"os y alguna imagen. 'ues si lo primero que aparece en el c)digo HTM es el encabezamiento H3, pues ese encabezado aparecer! en la p!gina tambi$n en primer lugar. uego se colocar!n los p!rra"os y si la imagen aparec#a en el c)digo por Cltimo, en la p!gina tambi$n aparecer! al "inal. Es decir, los elementos aparecen colocados tal como est$n ordenados en el c)digo. + esto se le llama el "lujo HTM , la colocaci)n de los elementos en el lugar que corresponda segCn su aparici)n en el c)digo. Esto en general ocurre con cualquiera de los elementos de la p!gina. Sin embargo, hay algunos atributos HTM que pueden marcar distintas propiedades en el "lujo, como que una imagen se alinee a la derecha, con align[*right*, con el te.to del p!rra"o que pueda haber a continuaci)n rodeando la imagen. 'ero con HTM , si por ejemplo, una imagen va antes que un p!rra"o, nunca vamos a poder intercambiar sus posiciones y colocar la imagen detr!s del p!rra"o que le sigue en el c)digo. Esto no ocurre de igual manera cuando trabajamos con CSS, puesto que e.isten diversos atributos que pueden cambiar radicalmente la "orma en la que se muestran en la p!gina, por ejemplo el atributo position que puede de"inir valores como absolute, que rompe el "lujo de la p!gina, o mejor dicho, saca del "lujo de la p!gina al elemento que se le asigna.

3...%.& Comportamientos inline * blocF * c(mo a7ectan al 7lu+o de la p5gina


Cuando tratamos con etiquetas, e.isten dos modos principales de de comportamiento. Etiquetas como una imagen, o una negrita, que "uncionan en l#nea %*inline*&, es decir, que se colocan en la l#nea donde se est! escribiendo y donde los elementos siguientes, siempre que tambi$n sean *inline* se posicionan todo seguido en la misma l#nea. Tenemos por otra parte los elementos que "uncionan como bloque %*blocE*& que implican saltos de l#nea antes y despu$s del elemento. 'or ejemplo, los p!rra"os o encabezamientos son elementos con comportamiento predeterminado tipo *blocE*. 1os etiquetas muy utilizadas en la maquetaci)n CSS son 1;6 y S'+0. 7na de las di"erencias principales es que 1;6 "unciona con coportamiento *blocE* y S'+0 "unciona como *inline*. En realidad este es el comportamiento por de"ecto, puesto que nosotros con CSS en cualquier momento podemos cambiarlo por medio del atributo display. 'or ejemplo/
(di# style)*display: inline;*% Aste ele!ento $uncionarO en lWnea (+di#%

? bien/
(span style)*display: block;*% Aste span ahora $unciona co!o bloPue (+span%

>ealmente ambas posibilidades "uncionan dentro del "lujo HTM normal, as# que, tanto los elementos display inline como display blocE, se encuentran dentro del "lujo HTM est!ndar, la Cnica di"erencia es que los bloques se escriben en l#neas independientes, es decir, con saltos de l#nea antes y despu$s del elemento, as# como una cantidad de margen arriba y abajo que depende del tipo de elemento de que se trate.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

47

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

3...).& Atributo CSS Float * el 7lu+o


?tro atributo que a"ecta al "luir de los elementos en la p!gina es el atributo "loat de CSS, que se utiliza bastante en la maquetaci)n -eb. Este atributo podemos utilizarlo sobre elementos de la p!gina de tipo *blocE* y lo que hace es convertirlos, en *"lotantes* que es un comportamiento parecido a lo que ser#a el mencionado anteriormente *inline*. Con "loat podemos indicar tanto le"t como right y conseguiremos que los elementos se posicionen a la izquierda o la derecha, con el contenido que se coloque a continuaci)n rodeando al elemento "lotante. a di"erencia es que los elementos continCan siendo tipo *blocE* y aceptan atributos como el margen %atributo CSS margin&, para indicar que haya un espacio en blanco a los lados y arriba y abajo del elemento. 'or ejemplo, los elementos de las listas %etiqueta ;& son por de"ecto de tipo *blocE*, por eso aparecen siempre uno abajo de otro, en l#neas consecutivas. 'ero nosotros podr#amos cambiar ese comportamiento con/
li{ } $loat: right;

+s#, una lista como esta/


(ul% (li%Ale!ento1(+li% (li%Ale!ento (+li% (li%Ale!ento&(+li% (+ul%

6er#amos como el primer elemento aparece a la derecha del todo y los otros elementos van coloc!ndose en la misma l#nea en el siguiente espacio libre que haya. +s#, el segundo elemento se colocar#a en la misma l#nea, todo a la derecha que se puede, con"orme al espacio que se tenga en el contenedor donde est$n colocados.

3.....& Flu+o * el atributo position


El atributo position de CSS s# que es capaz de cambiar radicalmente el "lujo de los elementos de la p!gina. Este atributo, que e.plicaremos con detalle m!s adelante en otros art#culos de 1esarrollo2eb.com, por de"ecto tiene el valor *static*, que indica que el elemento "orma parte del "lujo HTM normal de la p!gina. Sin embargo, con el atributo CSS position, podemos indicar otros valores que hacen que los elementos salgan del "lujo HTM y se posicionen en lugares "ijos, que no tienen que ver con la posici)n en la que aparezcan en el c)digo HTM . 'or ejemplo/
(di# style)*position: absolute; top: 10px; le$t: 100px;*% Aste ele!ento tiene posiciona!iento absoluto (+di#%

Hace que ese elemento quede "uera del "lujo de elementos en la p!gina y entonces aparecer#a en el lugar que se indica con los atributos top y le"t %top indica la distancia desde la parte de arriba y le"t la distancia desde el borde izquierdo&. os otros elementos que "ormen parte del "lujo de la p!gina no quedan a"ectados por los elementos con posicionamiento absoluto. ?tro valor para el atributo position que hace que los elementos queden posicionados "uera del "luir normal de elementos en la p!gina es *"i.ed*, cuyo comportamiento veremos m!s adelante en otros art#culos. >ecomendamos seguir la lectura, para las personas que quieran pro"undizar en este tema, a partir del art#culo 'osicionamiento CSS.
Artculo por Miguel

Angel Alvarez

3.2.& 0osicionamiento CSS


7as hojas de estilo en cascada incorporan m4ltiples )ormas para posicionar elementos en la pgina# lo que com4nmente se conoce como posicionamiento CSS.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

48

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com En el Manual de CSS de 1esarrollo2eb.com hemos tratado en varios puntos el posicionamiento CSS, con las distintas t$cnicas para crear y colocar partes de la p!gina de manera absolutamente precisa. En todos los casos e.plicamos diversos detalles desde distintos en"oques que sin duda dan un visi)n particular sobre el posicionamiento de elementos en p!ginas -eb. 'or ejemplo, ya hemos hablado sobre lo que son las capas, y tambi$n los atributos para su posicionamiento, as# como otros asuntos como la maquetaci)n CSS o el atributo over"lo-. 0o obstante, quedaba pendiente o"recer unas e.plicaciones generales y con detalle sobre el posicionamiento CSS, que puedan dar a los lectores una idea global sobre este interesante asunto. Sin duda es un tema que merece la pena estudiar y tambi$n practicar. En este art#culo vamos a o"recer diversos conocimientos te)ricos y a la vez estamos preparando un v#deo en el que mostraremos por la pr!ctica las distintas opciones para posicionamiento -eb.

3.2.%.& Atributos para posicionamiento CSS


E.isten numerosos atributos para posicionar con CSS cualquier elemento de la p!gina. +dem!s, a medida que van siendo presentadas nuevas versiones de CSS, estos atributos y sus posibles valores van aumentando. En CSS 4 contamos con diversos atributos que veremos a continuaci)n. Atri.uto osition: Este atributo es, digamos, el principal para de"inir el tipo de posicionamiento de un elemento. Merece la pena verlo por separado y en detalle. M!s adelante lo trataremos en el art#culo Tipos de posicionamiento con el atributo position, pero adelantamos que va a permitir varios valores para establecer c)mo se posicionar! el elemento en la p!gina y si "ormar! parte del "lujo normal de HTM . Sus valores posibles son absolute, "i.ed, relative, static e inherit. Atri.utos to , left, right, .ottom: Sirven para indicar la posici)n de un elemento, cuando $ste tiene los valores de position *absolute*, *relative* o *"i.ed* %en otros valores del atributo position estos atributos son ignorados&. El atributo top indica la distancia desde el borde superior de la p!gina y le"t desde el borde de la izquierda. Tambi$n se puede indicar opcionalmente la posici)n con bottom, que es la distancia desde abajo y right, que es la distancia desde la derecha. Atri.utos float y clear: ,loat sirve para establecer que un elemento tiene que *"lotar*, coloc!ndose los valores *right* o *le"t* para que "loten a izquierda o derecha. 'or si sirve de aclaraci)n, que los elementos "loten es algo as# como lo que pasa cuando de"inimos el atributo HTM align[*right* o align[*le"t* en las im!genes o tablas. Con el atributo clear hacemos que el elemento se coloque en el primer !rea libre que tenga al lugar donde se indique. 'or ejemplo el valor de clear *right* hace que el elemento se coloque en el primer lugar donde no tenga ningCn elemento "lotando a la derecha. El valor de clear *both* hace que el elemento se coloque donde no tenga elementos "lotanto, tanto a la derecha como a la izquierda. Atri.uto cli : Establece un !rea de recorte de la porci)n visible de un elemento. Este !rea de recorte se establece con varios valores, como se detalla en el art#culo atributos para capas. Atri.uto dis lay: Especi"ica el tipo de caja que debe que tener un elemento, que puede ser de diversas "ormas. Este atributo tambi$n tiene bastante utilizaci)n y entre los valores m!s corrientes podr#amos destacar/ *none*, que hace que esa caja o elemento no aparezca en la p!gina ni se reserve espacio para ella. *blocE*, que sirve para que la caja sea un bloque y se muestre en una l#nea o l#neas independientes de otros elementos de la p!gina. *inline*, que indica que esa caja tiene que mostrarse en la misma l#nea que otros elementos escritos antes o despu$s. Atri.uto o!erflo-: Este atributo sirve para decir qu$ es lo que pasa con los elementos que no caben en una caja debido a las dimensiones de la misma y del contenido que tenga. Se e.plica con detalle en el art#culo ?ver"lo- en CSS. Atri.uto !isi.ility: +tributo para de"inir la visibilidad de un elemento. Con este atributo podemos decir que ciertos elementos de la p!gina sean visibles o invisibles, pero atenci)n, aunque un elemento sea invisible, continCa ocupando espacio en la p!gina. Si queremos que no sea invisible y no se le reserve espacio en la p!gina, hay que utilizar el atributo display con el valor *none*. os valores m!s corrientes de visibility son/ *visible*, que hace que el elemento se vea %valor por de"ecto& y *hidden*, que hace que el elemento sea invisible, aunque continCe ocupando espacio.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

49

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Atri.uto +&inde5: Este atributo tiene como valor cualquier nCmero entero. Sirve para indicar qu$ capa se tiene que ver por encima o por debajo de otra u otras, en caso que varias capas est$n superpuestas. + mayores valores de zKinde., la capa se coloca m!s al "rente, tapando otras capas que tengan valores menores de zKinde.. Este ha sido un repaso general a los distintos atributos de hojas de estilo que est!n implicados en lo que se conoce como posicionamiento en CSS. 'ara la re"erencia de los interesados, recomendamos la lectura de los art#culos mencionados al principio del Manual de CSS, en especial el art#culo sobre atributos para capas. En el siguiente art#culo veremos distintos casos de uso del atributo position, que es clave para entender el posicionamiento CSS.
Artculo por Miguel

Angel Alvarez

3.3.& Aipos de posicionamiento con el atributo position de CSS


!$plicamos los distintos alores que puede tener el atributo position de CSS# con detalle. En lo que se conoce como posicionamiento CSS, el atributo de hojas de estilo en cascada que m!s importancia tiene es el position. 6amos a dedicar todo el presente art#culo a e.plicar los distintos valores de position, para e.plicarlos y proponer unos ejemplos que esperamos acaben de aclarar los posibles valores que puede tomar. >ecordemos que en el art#culo anterior de este manual de CSS ya se introdujo el concepto de posicionamiento CSS y se vio un listado de los atributos e.istentes hasta CSS 4 para realizar posicionar elementos en la p!gina. 'asemos entonces al tema en cuesti)n, viendo las posibilidades que nos o"rece este lenguaje. +dem!s, a lo largo de este art#culo de 1esarrollo2eb.com, vamos a mencionar repetidas veces un concepto que tambi$n se e.plic) anteriormente/ el "lujo del HTM normal.

3.3.%.& position/ static


Es el valor predeterminado del atributo y el posicionamiento normal de los elementos en la p!gina. Fuiere decir que los elementos se colocar!n segCn el "lujo normal del HTM , es decir, segCn est$n escritos en el propio c)digo HTM . 'or decirlo de otra manera, static no provoca ningCn posicionamiento especial de los elementos y por tanto, los atributos top, le"t, right y bottom no se tendr!n en cuenta. 'odemos ver un ejemplo de posicionamiento static/
(di# style)*position: static; background"color: #$$R; padding: 10px; width: &00px;*%Asto es una capa con posiciona!iento estOtico(+di#% (di# style)*position: static; background"color: #$R$; padding: 10px; width: 500px;*%posiciona!iento static- predeter!inado.(+di#% (h1%1DD(+h1% (di# style)*background"color: #R$$; padding: 10px; width: M00px;*%Losiciona!iento static- aunPue en este caso no se indic: el atributo position static- pues no hace $alta.(+di#%

'uede verse en una p!gina aparte.

3.3.).& position/ absolute


El valor absolute en el atributo position permite posicionar elementos de manera absoluta, esto es de manera de"inida por valores de los atributos top, le"t, bottom y right, que indican la distancia con respecto a un punto. as capas o elementos con posicionamiento absoluto quedan aparte del "lujo normal del HTM , quiere decir esto que no se a"ectan por el lugar donde aparezcan en el c)digo HTM y tampoco a"ectan ellas a otros elementos que s# que "ormen parte del "lujo normal del HTM . os valores top, le"t, bottom y right se e.presan con unidades CSS y son una distancia con respecto al primer elemento contenedor que tenga un valor de position distinto de static. Si todos los contenedores donde est$ la capa posicionada

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

50

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com con position absolute %todos sus padres hasta llegar a T?18& son static, simplemente se posiciona con respecto al lado superior de la p!gina, para el caso de top, el in"erior para bottom, del lado izquierdo para le"t o el derecho, en el caso de utilizar right. 6eamos el siguiente c)digo HTM en el que hemos preparado varias capas con position absolute, pero con distintas caracter#sticas/
(di# style)*position: absolute; width: &00px; height: 1M0px; top: 100px; le$t: &0px; background" color: #$$JJ00; color: #$$$; padding: 15px;4"index: ;*% Asta capa tiene posiciona!iento absoluto. (br% (br% 2e per!ite especi$icar top y le$t para colocarla con respecto a la esPuina superior i4Puierda. (+di#% (di# style)*position: absolute; width: J 0px; height: &0px; padding: 10px; background"color: #dd$; top: 150px; le$t: 10px; 4"index: 1;*%Losiciona!iento absoluto con 4"index !enor >la capa aparece por deba/o de otras Pue se superponen con 4"index !ayor.(+di#% (di# style)*position: absolute; width: 100px; height: 0px; padding: 10px; background"color: #dd$; botto!: 10px; right: 10px;*%Losiciona!iento absoluto con atributos botto! y right(+di#% (h1%Losiciona!iento 1DD(+h1%

'odemos ver el ejemplo en una p!gina aparte. a primera capa %llamamos as# a los elementos 1;6 que tienen posicionamiento CSS&, tiene como todas las del ejemplo, posicionamiento absoluto. os atributos top/ 3MMp. y le"t/ 5Mp. quieren decir que se posiciona a 3MM p#.eles de la parte superior de la p!gina y a 5M p#.eles de la izquerda. En este caso las distancias top y le"t para ubicar la capa con position absolute son relativas a la esquina superior izquierda del !rea disponible del navegador, pues esta capa no est! dentro de ninguna otra con posicionamiento distinto de static. Cabe llamar la atenci)n en esta primera capa tambi$n sobre el atributo zKinde./ 4, que servir! para indicarle al navegador la posici)n de la capa, en la tercera dimensi)n, con respecto a otras que se puedan superponer, para que sepa cu!l tiene que estar debajo y cu!l arriba. a segunda capa podemos ver que tiene un zKinde./3. Eso quiere decir, que en caso se posicione en el mismo lugar se ocultar! por la capa primera, que tiene un zKinde. mayor. En la tercera capa hemos probado el posicionamiento utilizando los atributos bottom y right, as# que la estamos posicionando con respecto a la esquina in"erior derecha. 6eamos un segundo ejemplo donde vamos a colocar una capa con posicionamiento absoluto y dentro varias capas tambi$n posicionadas con absolute.
(di# style)*position: height: 100px;*% (di# style)*position: =no (+di#% (di# style)*position: Fos (+di#% (di# style)*position: Nres (+di#% (+di#% absolute; top: 100px; le$t: 00px; background"color: #$$RRUU; width: M00px; absolute; top: 10px; le$t:10px;*% absolute; top: 10px; le$t:100px;*% absolute; top: 10px; le$t: 00px;*%

En este caso la primera capa, que no est! dentro de ninguna otra, se posiciona con top y le"t con respecto a la esquina superior izquierda del espacio disponible en el navegador para el cuerpo de la p!gina. as capas anidadas est!n tambi$n con position/ absolute, pero al estar dentro de otra capa que tiene posicionamiento distinto de static, sus valores top y le"t son relativos a la esquina superior izquierda de la capa que las contiene. 'odemos ver el ejemplo en marcha en una p!gina aparte.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

51

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

3.3...& position/ relative


El valor relative en el atributo position indica que la capa s# "orma parte del "lujo normal de elementos de la p!gina, por lo que su posici)n depender! del lugar donde est$ en el c)digo y el "lujo HTM . +dem!s, las capas con posicionamiento relative, admiten los valores top y le"t para de"inir la distancia a la que se colocan con respecto al punto donde est$ en ese momento el "lujo normal del HTM . Como a"ectan al mencionado "lujo del HTM , los elementos colocados despu$s de las capas relative, tendr!n en cuenta sus dimensiones para continuar el "lujo y saber d)nde colocarse. Sin embargo, no se tendr! en cuenta los top y le"t con"igurados. 6eamos un ejemplo que quiz!s aclare las cosas.
(h1%Qola(+h1% (di# style)*background"color: #U0U; color:#$$c; padding:10px; text"align: center; width: &00px;*%Qola esto es una prueba(+di#% (di# style)*position: relati#e; width: &00px; padding: 10px; background"color: #0UU; color:#$$c; top:100px; le$t: &0px;*%capa de posiciona!iento relati#e(br%De tiene en cuenta esta capa para posicionar las siguientes.(+di#% (h %hola de nue#o3(+h %

'odemos ver la p!gina en marcha. as etiquetas H3 y H4 respetan el "lujo HTM y tambi$n tenemos un elemento 1;6 donde no se ha especi"icado nada en position, luego es static y por tanto tambi$n es a"ectada por el "lujo. Hay una capa relative, en el segundo elemento 1;6, que tambi$n se posiciona con respecto al "lujo normal. Como tiene un top y le"t, aparece un poco desplazada del lugar que le tocar#a con respecto al "lujo. El Cltimo H4 que aparece se coloca teniendo en cuenta al "lujo y tiene en cuenta la capa relative, por eso deja un espacio en blanco arriba, pero no atiende a la posici)n real de $sta, que se marc) con los atributos top y le"t.

3.3.2.& position/ 7i?ed


Este atributo sirve para posicionar una capa con posicionamiento absoluto, pero su posici)n "inal ser! siempre "ija, es decir, aunque se desplace el documento con las barras de desplazamiento del navegador, siempre aparecer! en la misma posici)n. El lugar donde se *anclar!* la capa siempre es relativo al cuerpo %el espacio disponible del navegador para la p!gina&. Si utilizamos top y le"t, estaremos marcando su posici)n con respecto a la esquina superior izquierda y si utilizamos bottom y right su posici)n ser! relativa a la esquina in"erior derecha. 6eamos un ejemplo.
(di# style)*position: $ixed; width: &00px; height: 1M0px; top: 100px; le$t: &0px; background"color: #$$JJ00; color: #$$$; padding: 15px;4"index: 1;*% Asta capa tiene posiciona!iento $ixed. (br% (br% 2e per!ite especi$icar top y le$t para colocarla con respecto a la esPuina superior i4Puierda. (+di#% (di# style)*position: $ixed; width: T00px; height: &0px; padding: 10px; background"color: #d0$; top: 150px; le$t: 10px; 4"index: ;*%Losiciona!iento $ixed(+di#% (h1%Qola(+h1% (di# style)*position: $ixed; width: 100px; height: &0px; padding: 10px; background"color: #0d$; botto!: 10px; right: 10px; 4"index: M;*%Losiciona!iento $ixed(+di#% (br% (br% (br% (br% Longo texto para Pue se #ea33 (br% (br% (br% Asto hace despla4a!iento- con tanto br (br% (br% ...

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

52

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com


(br%

Se puede ver la p!gina en marcha con este c)digo. Se puede ver que hay varias capas con position/ "i.ed y un mont)n de T> para que la p!gina pueda tener un desplazamiento. Si vemos la p!gina en marcha y hacemos scroll hacia abajo con la barra de desplazamiento, veremos que las capas "i.ed siempre mantienen la misma posici)n.
Nota: El valor "i.ed en el atributo position "unciona en todos los navegadores, pero en el caso de ;nternet E.plorer s)lo "unciona en la versi)n c y superiores. +dem!s, para que "uncione en E.plorer tiene que declararse un 1?CT8'EP. Servir#an varios tipos de 1?CT8'EP, sin embargo deber#a declararse con el "ormato completo. +lgo as# como/ (3FX1NYLA QN2, L=<,.1 *"++Z&1++FNF QN2, M.01 Nransitional++AG* *http:++www.w&.org+N7+ht!lM+loose.dtd*% ? por poner otro ejemplo/ (3FX1NYLA ht!l L=<,.1 *"++Z&1++FNF [QN2, 1.0 Nransitional++AG* *http:++www.w&.org+N7+xht!l1+FNF+xht!l1"transitional.dtd*%

3.3.3.& position/ in"erit


El valor inherit indica que el valor de position tiene que heredarse del elemento padre. 0o "unciona en E.plorer, al menos hasta la versi)n \. Tiene en verdad poca utilidad y adem!s, como no "unciona en el navegador m!s utilizado en la actualidad, tiene aun menos sentido usarlo. 'or ello, no ponemos ejemplos.

3.3.4.& Conclusi(n sobre el atributo position de CSS


Esperemos que con las anteriores e.plicaciones y ejemplos se hayan podido entender bien las distintas posibilidades del atributo position, que es sin duda clave para el posicionamiento CSS. o m!s comCn para la maquetaci)n -eb es utilizar el posicionamiento static, pero el posicionamiento absoluto, junto con el posicionamiento "i.ed, e incluso relative, pueden ser muy Ctiles para dise(os m!s complejos, donde se requiera una mayor precisi)n en la colocaci)n de los distintos elementos o las capas. +dem!s, para hacer e"ectos Davascript y 1HTM en general, se utilizan "recuentemente posicionamientos absolutos. Son muy Ctiles porque permite que los elementos din!micos no "ormen parte del "lujo normal del HTM , y por tanto, podemos situarlos en cualquier lugar el !rea disponible del navegador, e incluso moverlos din!micamente al cambiar sus propiedades top y le"t mediante scripts en el lado del cliente. Todos estos comportamientos din!micos quedan ya "uera de la tem!tica de este te.to, aunque los e.plicamos con detalle en distintos manuales de la secci)n Davascript a ,ondo, de 1esarrollo2eb.com.
Artculo por Miguel

Angel Alvarez

3.4.& EL atributo !ver7low de CSS


!$plicamos esta propiedad interesante contemplada en la especi)icaci"n CSS 8. En este art#culo del Manual de CSS de 1esarrollo2eb.com vamos a e.plicar una propiedad interesante de CSS, contemplada en la especi"icaci)n CSS 4, ?ver"lo-. Es un atributo de esos que nos servir!n para maquetar las capas de una -eb de una manera m!s vers!til y detallada. ?ver"lo- sirve en el modelado de cajas para indicar al navegador qu$ es lo que debe hacer con el contenido que no cabe dentro de una capa, segCn las dimensiones que se le han asignado.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

53

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Como sabemos, a las capas %elementos 1;6& podemos asignarles un tama(o, en anchura y altura. 'ero muchas veces el contenido que colocamos en la capa sobrepasa el espacio que hemos destinado a ella. Entonces lo que suele ocurrir es que la capa crece lo su"iciente para que el contenido colocado dentro quepa. Habitualmente las capas crecen en altura, por lo que a m!s contenido m!s tama(o tendr! en altura. Este es un comportamiento que podemos alterar con el uso del atributo over"lo-. 1icho de otro modo, over"lo- permite que se recorte el contenido de una capa, para mostrar Cnicamente el contenido que quepa, segCn sus dimensiones. 'ara acceder al contenido que no se muestra, porque no cabe en la capa, se puede con"igurar over"lo- para que aparezcan unas barras de desplazamiento. +s# pues, pasemos directamente a ver cu!les son los atributos posibles con el atributo over"lo-/ !isi.le: Este valor indica que se debe mostrar todo el contenido de la capa, aunque no quepa en tama(o con la que la hemos con"igurado. En ;nternet E.plorer ocurre que capa crece en tama(o lo su"iciente para que quepa todo el contenido que hemos colocado dentro. En ,ire"o. ocurre que la capa tiene el tama(o marcado, pero el contenido se sigue viendo, aunque "uera del espacio donde de la capa, pudiendo superponerse a un te.to o imagen que hubiera debajo. El contenido no se recorta en caso alguno, es decir, siempre estar! visible. hidden: Este valor indica que los contenidos que, por el tama(o de la capa, no quepan en la misma, se deben recortar. 'or ello, la capa tendr! siempre el tama(o con"igurado, pero los contenidos en ocasiones podr!n no verse por completo. scroll: Este valor indica que la capa debe tener el tama(o que se haya con"igurado inicialmente y que adem!s se deben mostrar unas barras de desplazamiento, para mover el contenido de la capa dentro del espacio de la misma. as barras de desplazamiento siempre salen, se requieran o no. auto: Con este valor tambi$n se respetar!n las dimensiones asignadas a una caja. El contenido ser! recortado, pero aparecer!n las barras de desplazamiento para moverlo. Sin embargo, en este caso las barras de desplazamiento podr!n salir o no, depende de si son necesarias o no para ver todo el contenido de la capa.

+s# pues, el atributo over"lo- nos permitir! tener un mayor control sobre los espacios que destinamos a cada caja de nuestro dise(o. Es muy utilizado para mostrar te.tos largos, que se desean integrar dentro de otro te.to o una inter"az donde no tenemos espacio disponible para colocarlos o no deseamos que crezcan m!s de la cuenta. 'or ejemplo para mostrar c)digo "uente dentro del te.to de un art#culo, como sigue/ UhtmlV UheadV UtitleVT#tuloUHtitleV UHheadV UbodyV Cuerpo... UHbodyV UHhtmlV Este ejemplo, habremos podido apreciar la barra de desplazamiento vertical, se obtiene con un atributo over"lo-/ auto@. El c)digo utilizado es como sigue/
(di# style)*o#er$low: auto; width: &00px; height: 100px; background"color:#ededed; border: 1px solid #RR0000;*% 1XGNAG.FX.... (+di#%

+hora veamos otro ejemplo, en el que simplemente se recorta el te.to que no cabe en la capa. Hemos indicado over"lo-/ hidden, por lo que el te.to que sobra no se va a visualizar. Esta capa tiene un contenido mayor del que cabe en el espacio que he asignado con el atributo -idth y height. Como le he puesto over"lo-/ hidden, lo que ocurrir! es que parte del te.to que estoy colocando no se va a ver... En este caso vemos como el te.to aparece recortado, porque no cabe en el espacio asignado de la capa. El c)digo ser#a como el que sigue/

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

54

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com


(di# style)*o#er$low: hidden; width: 1XGNAG.FX... (+di#% 00px; height: 50px; border: 1px solid #RR0000;*%

+qu# se pueden ver varios ejemplos de uso de over"lo-.


Artculo por Miguel

Angel Alvarez

Parte #:

$rucos consejos a%an&ados so're CSS


>lgunos trucos y conse/os +undamentales 8ue debemos conocer si deseamos realizar un uso de 5;; medianamente a#anzado.

4.%.& Arucos CSS para no enlo-uecer


Algunas soluciones a los problemas tipicos que te puedes encontrar con CSS. TranquiloP Todav#a no tires el monitor contra la paredPP te aseguro que con un poco de investigaci)n y algunos consejos podr!s encontrar la soluci)n a tu problema. +qu# encontrar!s los principales trucos CSS para hacer "rente a los t#picos problemas que se en"rentan los dise(adores -eb cuando maquetan con CSS. 'odr!n e.istir discrepancias entre los lectores, pero aclaro que estas son t$cnicas que a mi personalmente me han dado resultado, despu$s de muchas pruebas e intentos aprend# esto...

4.%.%.& @sa un contenedor global para todas las ca+as Dcuando las cosas se disparanE
1e esta "orma estas pre"ijando globalmente el orden de todas las dem!s cajas. En re"erencia a este contenedor ordena el resto de las cosas interiores. Es como si haces una cerca o valla para que nada es escape. ?bviamente estamos hablando de sitios "ijos no el!sticos. + veces es bueno usar un contenedor hasta el cuerpo del sitio, luego dejar el pi$ a"uera. Ejemplo para un contenedor de _MMp. centrado/

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

55

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com


#contenedor { !argin"top: 0px; !argin"right: auto; !argin"botto!: 0px; !argin"le$t: auto; width: R00px; }

4.%.).& 9ue 7lote a la iz-uierda Dcuando las ca+as se superponenE


Esta es una muy buena "orma de evitar incompatibilidades entre navegadores. El uso de hacEs de CSS se deb#a en gran parte porque se trabajaba centrando las cajas. Si por ejemplo precisas poner tres cajas de 5MMp. en un contenedor de _MMp. puedes hacer lo siguiente. Ejemplo/
#ca/a { $loat: le$t; width: &00px; }

4.%...& Calcular bien los paddings o rellenos Dcuando las ca+as se van aba+oE
Casi todos los dolores de cabeza y maldiciones hechadas sobre el CSS se deben al mal uso o a la mala interpretaci)n que se hace del padding. 'ero es m!s simple de lo que parece. A'ara que sirven los paddings o rellenosB Tueno, lo que hace es generar un relleno de determinada medida para dar por ejemplo como un margen a los elementos, pero lo hace sobre el ancho en p#.eles que est$ pre"ijado. 'or ejemplo/ si tenemos una caja de 5MMp. y le aplicamos un padding de 3Mp. en la izquierda, ahora tendremos una caja de 53Mp.. Esto har! desbordar al resto de las cajas y las desplazar!n para abajo. +h# es cuando el dise(ador principiante se vuelve loco. El tema es que si hay una di"erencia de hasta un 3p. se producir!n estos desbordes, sino "#jate cuando le incluyes bordes a tu caja, se producir!n di"rencias. o que se debe hacer es simple, calcular bien y recordar cada ajuste que se haga de los rellenos. +hora tendremos que hacer una caja de 4_Mp. con paddings de 3Mp. a la izquierda. Ejemplo/
#ca/a { $loat: le$t; width: R0px; padding"le$t: 10px; background"color: #88AUFF; }

4.%.2.& El pi de p5gina con anc"o 7i+o Dcuando el pi de p5gina enlo-ueceE/


'ara entender mejor como "unciona el uso de cajas en CSS se puede pensar en un grupo de objetos de di"erentes "ormas que luchan por adaptarse y ocupar el espacio que se ha pre"ijado. Sucede muchas veces que los pi$ de p!gina son los m!s problemas traen cuando se maqueta un sitio. ? se va para arriba, se alinea a la izquierda, o se desborda, etc. Muchos resolv#amos este tema pre"ijando valores "ijos a las alturas de cajas, pero no tiene sentido. o que se debe hacer es de nuevo establecer un valor de ancho "ijo. 1e esta "orma el pi$ se va a hacer su lugar del resto e ir! a parar donde tiene que ir. Ejemplo/
#pie { width: R00px; background"color: #UUUUUU; }

0o todo es 3`3[4 en CSS %cuando los anchos no cierran& 7n problema comCn en css es pensar que todos los anchos entre cajas cierran per"ectamente. + veces es necesario jugar con los valores de los contenedores, a veces contrario a la l)gica hay que a(adir algunos p. a los contenedores.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

56

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

4.%.3.& !tros trucos r5pidos


Trucos sencillos, de los que no hace "alta e.plicar mucho pero que son muy pr!cticos y te har!n m!s "!cil el trabajo y evitar!n posibles errores. K 7sa colores di"erentes para distinguir las cajas K 'on una palabra descriptiva en cada caja K Comenta el c)digo "uente y se(ala los "inales de los contenedores grandes K 0o mezquines espacios entre los divs K 0o seas un "undamentalista y no quieras escribir tu CSS con dos o tres l#neas. Si no quieres errores escribe lo necesario. K Cuidado con el tama(o de las im!genes que insertas, estas cambian el ancho de los contenedores. K Elige bien los nombres de cada div y trata de ser ordenado en el c)digo. K Si vas a trabajar con varias cajas, trata de agruparlas de a grupo, esto es muy importante. 'or ejemplo un contenedor que agrupe tres o cuatro cajas.

4.%.4.& Conclusi(n
Todas estos p!rra"os son simplemente algunas sugerencias o comentarios de lo que me ha dado resultado a mi. E.isten otras muchas ataduras de este tipo, si tienes alguna no dudes en comentarlas en este mismo art#culo. Fue pasa cuando no puedes resolver un problema con CSS o similarB + mi me ha dado resultado levantarme un rato, hacer cualquier otra cosa y luego volver e intentar de nuevo. 1ejar de renegar y no enloquecer con CSS depender! de la cantidad de tiempo, trabajo y es"uerzo que le metas a tu trabajo. 0o lo dudes.
Artculo por Leonardo

A. Correa

4.).& Lo -ue nadie te cont( de la propiedad z&inde?


Analizamos la propiedad CSS z9inde$ para intentar desci)rar su correcto uso ms all del habitual conocimiento que tenemos de ella# normalmente consistente en saber que las capas con mayor alor de z9inde$ se colocan delante de las de alor menor.

El problema con zKinde. es que muy poca gente comprende c)mo "unciona realmente. 0o es complicado, pero si nunca te has tomado la molestia de leer su especi"icaci)n, hay ciertamente algunos aspectos cruciales que has pasado por alto.

A0o me creesB Tien, veamos si puedes solventar este problema/

4.).%.& El problema
En el siguiente HTM tienes tres elementos UdivV, y cada UdivV contiene un Cnico elemento UspanV. Cada UspanV tiene un color de "ondo O rojo, verde y azul respectivamente. Cada UspanV est! tambi$n posicionado absolutamente cerca de la posici)n superior izquierda del documento, escasamente solapando a los otros elementos UspanV as# que puedes ver cu!les est!n apilados en "rente de cada cual. El primer UspanV tiene un valor zKinde. de 3, mientras que los otros dos no tienen ningCn valor zKinde. "ijado. +qu# tenemos el HTM y CSS b!sicos para entenderlo. Tambi$n he incluido una demo visual %v#a Codepen& con el c)digo que se muestra a continuaci)n/

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

57

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com


(di#% (span class)*ro/o*%7o/o(+span% (+di#% (di#% (span class)*#erde*%0erde(+span% (+di#% (di#% (span class)*a4ul*%94ul(+span% (+di#% .ro/o- .#erde- .a4ul { position: absolute; } .ro/o { background: red; 4"index: 1; } .#erde { background: green; } .a4ul { background: blue; }

'uede verse el ejemplo completo aqu#.

+qu# est! el desa"#o/ intenta ver si puedes hacer que el UspanV rojo se apile detr!s del azul y del verde sin romper ninguna de las siguiente reglas/ 0o alteres el HTM de ninguna manera. 0o a(adas o cambies la propiedad zKinde. de ningCn elemento. 0o a(adas o cambies la propiedad de posicionamiento de ningCn elemento. 'ara que puedas hacerte una idea clara, cliquea en *edit* en el enlace de Codepen que hay arriba y juega un momento con el c)digo. Si tienes $.ito, deber#a quedarte algo como lo que sigue. 'rueba aqu#.

Ad!ertencia: 0o cliquees en la pesta(a de CSS o te dar! inmediatamente la respuesta.

4.).).& La soluci(n
a soluci)n es a(adir un valor de opacidad menor que 3 en el primer UdivV %el padre del UspanV rojo&. +qu# est! el CSS que se a(ade al Codepen/
di#:$irst"child { opacity: .RR; }

Si te est!s rascando la cabeza ahora mismo en estado de shocE y te muestras estupe"acto por el hecho de que esa opacidad haya causado e"ecto en c)mo los elementos se apilan los unos respecto a los otros, bienvenido al club. Me pas) lo mismo cuando tropec$ la primera vez con el mismo problema. Tranquilo, el resto del art#culo dejar! las cosas un poco m!s claras.

4.)...& !rdenar el apilamiento


SKinde. parece sencillo/ elementos con un zKinde. mayor son apilados delante de los elementos con un menor zKinde., AnoB Tien, de hecho, no. Esto es parte del problema del zKinde.. 'arece sencillo, as# que los desarrolladores no dedican

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

58

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com tiempo a leer sus reglas. Cada elemento en un documento HTM puede estar delante o detr!s de otro elemento en el documento. Esto se conoce como el orden de apilamiento. as reglas que determinan este orden est!n bonita y claramente de"inidas en la especi"icaci)n, pero como he constatado, no son completamente entendidas por la mayor#a de desarrolladores. Cuando el zKinde. y las propiedades de posici)n no est!n declaradas, las reglas son muy simples/ b!sicamente, el orden de apilamiento es el mismo que el orden de aparici)n en el HTM . %1E +C7E>1?, es de hecho un poco m!s complicado que eso, pero si no est!s usando m!rgenes negativos para solapar elementos en la misma l#nea de posici)n, probablemente no te encontrar!s con elementos problem!ticos&. Cuando introduces la propiedad de posici)n en la mezcla, cualesquiera elementos posicionados %y sus hijos& se muestran delante de elementos no posicionados %decimos que un elemento est! <posicionado= cuando tiene un valor de posici)n distinto de <static=, como <relative=, <absolute=, etc.& ,inalmente, cuando el zKinde. se involucra tambi$n, las cosas se complican un poco. +l principio es natural asumir que los elementos con valores zKinde. mayores est!n delante de los elementos con valores zKinde. menores, y que cualquier elemento con zKinde. est! en "rente de los elementos que no tienen zKinde., pero no es tan simple. o primero de todo, zKinde. solo "unciona con elementos posicionados. Si intentas asignarle un zKinde. a un elemento sin posici)n especi"icada, no har! nada. En segundo lugar, los valores zKinde. pueden crear conte.tos de apilamiento, y ahora de pronto lo que parec#a sencillo es bastante m!s complicado.

4.).2.& Conte?tos de apilamiento


Nrupos de elementos con un padre comCn que se mueven hacia adelante o hacia atr!s juntos en el orden de apilamiento, se integran en lo que es conocido como conte.to de apilamiento. 7na completa comprensi)n de los conte.tos de apilamiento es la llave para realmente captar c)mo "unciona el zKinde. y el orden de apilamiento. Cada conte.to de apilamiento tiene un elemento HTM como su elemento ra#z. Cuando un nuevo conte.to de apilamiento se "orma en un elemento, $se conte.to con"ina todos sus elementos hijos en un lugar particular del orden. Eso signi"ica que si un elemento es contenido en un conte.to de apilamiento en lo m!s bajo del orden, no hay manera de que aparezca delante de otro elemento en un conte.to de apilamiento que est! en un nivel superior en el orden, dincluso con un zKinde. de mil millonesP os nuevos conte.tos de apilamiento pueden ser "ormados en un elemento de tres maneras/ Cuando un elemento es el elemento ra#z de un documento %el elemento UhtmlV&. Cuando un elemento tiene un valor de posici)n que no sea <static= y valor de zKinde. distinto a <auto=. Cuando un elemento tiene un valor de opacidad menor que uno.

a primera y la segunda manera de "ormar conte.tos de apilamiento tienen mucho sentido y son generalmente bien comprendidos por los desarrolladores -eb %incluso si no conocen el propio concepto de conte.to de apilamiento&. a tercera manera %opacidad& es apenas mencionada "uera de los documentos de especi"icaci)n de la 25C.

4.).3.& #eterminando una posici(n de elemento en el orden de apilamiento


+ctualmente, determinar el orden de apilamiento global para todos los elementos de una p!gina %incluyendo bordes, "ondos, capas de te.to, etc.& es e.tremadamente complicado y se aleja del prop)sito de este art#culo %de nuevo, hago re"erencia a la especi"icaci)n&. 'ero para nuestro prop)sito, una comprensi)n b!sica del orden puede ayudar a desarrollar un CSS predecible. +s# que vamos a dividir el orden en individuales conte.tos de apilamiento/ Drden de a ilamiento dentro del mismo conte5to de a ilamiento +qu# est!n las reglas b!sicas de orden de apilamiento dentro de un conte.to simple %desde el "ondo hacia delante&/ 3. El conte.to de apilamiento del elemento ra#z. 4. Elementos posicionados %y sus hijos& con valores zKinde. negativos %los valores m!s altos son apilados delante de valores menores@ elementos con el mismo valor son apilados de acuerdo a su aparici)n en el HTM &. 5. Elementos no posicionados %ordenados por aparici)n en el HTM &.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

59

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com :. Elementos posicionados %y sus hijos& con un valor zKinde. de auto %ordenados por aparici)n en el HTM &. L. Elementos posicionados %y sus hijos& con valores zKinde. positivos %los valores mayores son apilados delante de valores menores@ elementos con el mismo valor son apilados de acuerdo a su aparici)n en el HTM .
Nota: elementos posicionados con zKinde.es negativos se ordenan primero dentro de un conte.to de apilamiento, lo cual signi"ica que aparecen detr!s de otros elementos. + causa de $sto, llega a ser posible para un elemento aparecer detr!s de su propio padre, lo cual normalmente no es posible. Esto "uncionar! solamente si el elemento parental est! en el mismo conte.to de apilamiento y no es el elemento ra#z de ese conte.to de apilamiento. 7n gran ejemplo de $sto son los dropKshado-s con CSS y sin im!genes de 0icolas Nallagher.

4.).4.& !rden de apilamiento global


Con una "irme comprensi)n de c)mo "uncionan los conte.tos de apilamiento, y de c)mo "unciona el orden de apilamiento dentro de un conte.to de apilamiento, imaginar d)nde un elemento particular podr! aparecer en el orden de apilamiento global se convierte en una tarea m!s sencilla. a clave es evitar la con"usi)n generada cuando se "orman nuevos conte.tos de apilamiento. Si pones un zKinde. con un valor de mil millones en un elemento y no se mueve hacia delante en el orden de apilamiento, echa un vistazo a su ancestro y mira si alguno de sus padres est! "ormando conte.tos de apilamiento. Si lo hacen, tu zKinde. es inCtil y no hace nada bueno.

4.).6.& En conclusi(n
6olvamos al problema original, donde recre$ la estructura HTM a(adiendo comentarios dentro de cada etiqueta indicado su lugar en el orden de apilamiento.
(di#%(3"" 1 ""% (span class)*ro/o*%(3"" U ""%(+span% (+di#% (di#%(3"" ""% (span class)*#erde*%(3"" M ""%(span% (+di#% (di#%(3"" & ""% (span class)*a4ul*%(3"" 5 ""%(+span% (+di#%

Cuando a(adimos la regla de opacidad al primer UdivV, el orden de apilamiento cambia as#/
(di#%(3"" 1 ""% (span class)*ro/o*%(3"" 1.1 ""%(+span% (+di#% (di#%(3"" ""% (span class)*#erde*%(3"" M ""%(span% (+di#% (di#%(3"" & ""% (span class)*a4ul*%(3"" 5 ""%(+span% (+di#%

*span.rojo* sol#a ser ], pero cambi) a 3.3. Se muestra que un nuevo conte.to de apilamiento ha sido creado, y *span.rojo* es ahora el primer elemento dentro de ese nuevo conte.to. Espero que ahora est$ un poco m!s claro por qu$ la caja roja se movi) detr!s de las otras cajas. El ejemplo original conten#a solo dos conte.tos de apilamiento, el ra#z y el "ormado por *span.rojo* Cuando hemos a(adido opacidad al elemento padre de *span.rojo*, hemos "ormado un tercer conte.to de apilamiento, y, como resultado, el valor zKinde. de *span.rojo* solo se aplicaba dentro de ese nuevo conte.to. Como el primer UdivV %el Cnico al que le aplicamos opacidad& y sus elementos hermanos no tienen asignados ni posici)n ni valor de zKinde., su orden de apilamiento es determinado por su orden de aparici)n en el HTM , lo cual signi"ica que el primer UdivV, y todos los elementos contenidos dentro de su conte.to de apilamiento son renderizados detr!s del segundo y el tercer UdivV.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

60

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

4.).:.& 1ecursos adicionales Den inglsE


Elaborate description o" StacEing Conte.ts The stacEing conte.t The SK;nde. CSS 'roperty/ + Comprehensive ooE

0hilip 1alton
Artculo por OldMith

4...& @tilizar porcenta+es para tamaos de te?to con CSS


!l tama2o del te$to se puede cambiar por medio de CSS# para agrandarlo o disminuirlo# por medio de porcentajes# de modo que el nue o tama2o sea relati o al tama2o actual. El porcentaje es otra de las medidas o unidades que podemos utilizar en los atributos de hojas de estilo en cascada %CSS& para de"inir un tama(o. En este art#culo veremos ejemplos acerca de modi"icar los tama(os de los te.tos por medio de porcentajes, para conseguir nuevos tama(os que sean relativos a los que se est!n utilizando. 'or ejemplo, podr#amos de"inir un estilo para escribir con un te.to el doble de grande del que se est$ trabajando/
(span style)$ont"si4e: 00%%Aste texto es el doble de grande(+span%

Esto quiere decir que el te.to ser! el doble de grande, 4 por las unidades de te.to que estemos trabajando. 'or ejemplo, si estamos trabajando con tama(os de te.to de 3Mpt, el te.to dentro del anterior span ser#a 4Mpt. El del siguiente c)digo ejempli"ica este caso concreto/
(span style)*$ont"si4e:10pt;*%Qola a!igos (span style)*$ont"si4e: 00%*%Aste texto es el doble de grande(+span% (+span%

o mismo se puede hacer, pero para de"inir un te.to menor, asignando porcentajes por debajo del 3MM9. 'or ejemplo, si quisi$ramos hacer un te.to de la mitad del tama(o utilizar#amos la siguiente etiqueta/
(span style)*$ont"si4e:50%*%Aste texto es la !itad del anterior(-+span%

Si estuvi$ramos trabajando con un tama(o de te.to de 3]pt, con la anterior etiqueta se escribir#a con tama(o \pt. El c)digo ser#a el siguiente/
(span style)*$ont"si4e:1Upt;*%Qola a!igos (span style)*$ont"si4e:50%*%Aste texto es la !itad del anterior(+span% (+span%

+hora vamos a de"inir un par de clases para un te.to mayor y menor, que podr#amos utilizar para aumentar y reducir el te.to respectivamente.
(style type)*text+css*% .!ayor {$ont"si4e:150%} .!enor {$ont"si4e:T5%} (+style%

Este c)digo indica que la clase mayor es un te.to el 3LM9, es decir, la mitad m!s que el anterior, y la clase menor un te.to del cL9, es decir tres cuartas partes del anterior. 'odr#amos utilizar estas clases con un c)digo como este/ Este es un te.to normal Uspan class[*mayor*Vy este es mayorUHspanV, este vuelve a ser normal Uspan class[*menor*Vy este es menorUHspanV os distintos ejemplos de este art#culo podemos verlos en una p!gina aparte.
Artculo por Miguel

Angel Alvarez

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

61

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

4.2.& CSS sem5nticas. @n nuevo en7o-ue


!$isten in)inidad de sitios en :nternet que o)recen miles de propuestas di)erentes a la hora del uso de hojas de estilo CSS en la maquetaci"n de portales 'eb# como sabemos aplicables a m4ltiples tecnologas5 ;.T37# <lash# etc o que es di"#cil de encontrar es aquella soluci)n que se adapte per"ectamente a tus desarrollos, a tu entorno concreto. Fuiz! m!s di"#cil aun es adecuar algCn en"oque similar al tuyo. Esta tarea es proclive a mCltiples errores, que ir!n saliendo con"orme se vaya utilizando y que llegado el momento, podemos comprobar que nos hemos equivocado de base, lo que e.ige una reestructuraci)n desde el inicio. Este es el conte.to en el que nos encontramos actualmente. Tras una "uerte apuesta por la reestructuraci)n y organizaci)n de CSS basadas en su sem!ntica de uso se ve que si es quiz! uno de los en"oques m!s acertados, deja bastantes puntos abiertos que es necesario concretar. Esa es la tarea que nos proponemos aqu#. 'ara los no iniciados, comentar que el en"oque sem!ntico se basa en la idea de que la manera de estructurar la in"ormaci)n relativa a la ca a de resentaci(n de nuestros proyectos -eb debe de seguir el criterio de qu$ es y el conte.to donde se usa cada elemento.

El entorno -eb tiene una caracter#stica "undamental que pocos otros tienen y es la capacidad y potencialidad de uso en mCltiples tipos de dispositivos, lo cual nos abre aun m!s el abanico de puntos que debemos controlar a la hora de crear nuestras hojas de estilos, a la vez que multiplica la casu#stica y potenciales errores que es necesario controlar.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

62

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

+qu# trataremos de dar una posible soluci)n que se adecue a los principios de CSS sem!ntica y que siga las pautas de accesibilidad y de "acilidad de e.tensi)n a mCltiples dispositivos.

4.2.%.& 0untos a tener en cuenta


Estructura jer!rquica de las CSS 0uestras hojas de estilo seguir!n una estructura jer!rquica, cuyo elemento principal ser! el que incluya, para cada tipo de dispositivo, las hojas de estilo correspondientes.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

63

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

E.plicaci)n de cada una de las hojas de estilo Pantalla"css, Im resora"css y @o!il"css" Estas son CSS espec#"icas para cada tipo de dispositivo. Su misi)n en la parte superior de la jerarqu#a es la importaci)n de las CSS hijas %Rimport url%css& &. 0o incluyen estilos concretos. 3ayoutPantalla"css, 3ayoutIm resora"css y 3ayout@o!il"css" ;ncluyen la in"ormaci)n relativa a las diversas capas que "orman el layout de la p!gina, es decir, in"ormaci)n de maquetaci)n de las distintas zonas del portal %Tanner, menCs, contenidos, cr$ditos, & 'rossBro-ser"css" +glutina trucos, "i.es y dem!s elementos para hacer que las p!ginas se vean igual en todos los navegadores %;nternet E.plorer, Mozilla, ,ire"o., ?pera, etc.& 1i ograf$a"css" Cualquier elemento relacionado con las "orma en que se presenta la tipogra"#a de la p!gina queda recogida aqu#.Comienza con una medida relativa de ]4.L9 en la etiqueta body, que se establece como medida equivalente a 3em. El resto de tama(os vendr!n supeditados a este %mayores/ 3.4em, 3.Lem, etc, y
64

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com menores/ M.\em, M.Lem, etc.& Cormularios"css" 1e"inici)n de los estilos aplicables a todas las etiquetas relacionadas con los "ormularios gen$ricos.

4.2.).& #ocumentos asociados a este art$culo



Artculo por

CSS Sem!nticas. ;ncluye los distintos CSS descritos. '!gina ejemplo en GHTM con una maquetaci)n tipo basada en capas
o!" uan Corpa! Marto!

4.3.& CSS sem5nticas. @n nuevo en7o-ue D''E


!ste artculo es la continuaci"n de CSS semnticas. %n nue o en)oque# y trata de dar una serie de consejos o recomendaciones a la hora del uso de hojas de estilo y escritura de c"digo ;.T37. Toda la in"ormaci)n est! basada en el post citado, as# como los "icheros relacionados.

4.3.%.& 1ecomendaciones de uso * escritura de c(digo


7sar las etiquetas HTM estrictamente para lo que se han concebido Si se consigue crear un c)digo GHTM lo m!s limpio y claro posible se ver! reducido considerablemente el nCmero de estilos propios que tendremos que crear y evitaremos la mayor#a de los errores e inconsistencias comunes. Maquetar en base a capas %div&, no usar tablas %table&. '!rra"os/ %p& Encabezados/ %h3, h4, h]& Tablas/ %table, theadHtrHth, tbodyHtrHtd& istas/ %ulHli, olHli& MenCs/ basados en listas con el atributo display/inline

7so de medidas relativas en los tama(os de las "uentes as medidas relativas son aquellas que no establecen un tama(o "ijo en p#.eles o puntos para un elemento. En concreto son el porcentaje %9& y el em %3em equivale a 3MM9, 3.4em a 34M9, M.cem cM9, & Es muy importante este punto por varios aspectos/ 0o todas las personas tienen el monitor a la misma resoluci)n y nuestra tipogra"#a le puede resultar muy peque(a o grande segCn el caso. +l establecer la medida de tipogra"#a de manera relativa en la etiqueta body, se tomar! el tama(o relativo al navegador y dispositivo que interprete la p!gina. Esto es especialmente en dispositivos con peque(as pantallas %m)viles, pda, etc.&.

Maquetaci)n de layout "ijo basado en capas Esta es una antigua pol$mica, el maquetado de tama(o "ijo de ancho o el maquetado l#quido o de tama(o variable. os estudios de usabilidad -eb aconsejan el uso de tama(os "ijos adecuados a la resoluci)n m!s usada por los usuarios de internet, intentando que el porcentaje discriminado sea el menor posible. a e.plicaci)n de este aspecto se justi"ica por el constante crecimiento en las ventas de monitores de gran tama(o %3c pulgadas o m!s& y resoluci)n %3M4:ec]\ en adelante&. a e.pansi)n de las p!ginas sobre todos en resoluciones de monitores panor!micos di"iculta enormemente la legibilidad de los p!rra"os de te.to.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

65

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Crear estilos o rede"inirlos solo en el caso estrictamente necesario Si creamos nuestras p!ginas haciendo un uso adecuado de las etiquetas GHTM y seguimos las pautas descritas en este documento, se reducir! dr!sticamente la necesidad de creaci)n de estilos innecesarios y redundantes, lo que conlleva enormes bene"icios sobre todos relativos a la "acilidad de mantenimiento y reducci)n de errores y comportamientos e.tra(os.
Artculo por

o!" uan Corpa! Marto!

4.4.& %< errores comunes en los css


!sta es una recopilaci"n de errores comunes en las hojas de estilo. !s bastante pro echoso hacer una lista con estos y otros errores comunes.

4.4.%.& %.@so innecesario del valor <


El c)digo siguiente no necesita la unidad especi"icada si el valor es cero.
padding:0px 0px 5px 0px;

En su lugar puede ser escrito de esta manera/


padding:0 0 5px 0;

1e la misma manera es igual para otros estilos. Ej./


!argin:0;

0o malgastes espacios agregando unidades tales como p., pt, em, etc, cuando el valor es cero. a Cnica raz)n de hacer esto es si necesitas cambiar estos valores m!s tarde. Si no declarar estas unidades no tiene sentido. os pi.eles cero son iguales que los puntos cero. Sin embargo,lineKheight puede no tener unidad.'or eso es v!lido lo siguiente/
line"height:1;

1e cualquier manera puedes utilizar una unidad en concreto como em si lo deseas.

4.4.).& ).Los colores en 7ormato "e?adecimal necesitan una almo"adilla


Esto est! mal/
color: eaUbc ;

1ebe ser/
color: #eaUbc ;

? esto otro/
color: rgb > &M.10T.1RM?;

4.4...& ..Jalores duplicados en los c(digos de colores


0o escribir el c)digo de esta manera/
color: #$$$$$$; background"color:#000000; border:1px solid #eeUUaa;

os valores duplicados pueden ser omitidos.Escribiendo los c)digos de esta manera/

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

66

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com


color:#$$$; background"color:#000; border:1px solid #eUa;

d'or supuesto esto no debes hacerlo con c)digos como esteP


color: #$eURb ;

4.4.2.& 2.Evitar repeticiones de c(digo innecesaria


Evita usar varias l#neas cuando lo puedes conseguir con una sola. 'or ejemplo, al "ijar los bordes, algunas veces se debe hacer por separado pero en casos como el siguiente no es necesario/
border"top:1px solid #00$; border"right:1px solid #00$; border"botto!:1px solid #00$; border"le$t:1px solid #00$;

'odr#amos resumirlo en una Cnica l#nea esta/


border:1px solid #00$;

4.4.3.& 3.La duplicaci(n es necesario con los estilos en cascada


En los estilos en cascada es aceptable repetir el mismo codigo para un elemento elemento dos veces, si signi"ica evitar la repetici)n mencionada en el punto arriba. 'or ejemplo, dig!mos que tenermos un elemento donde solamente es di"erente el *border* izquierda. En vez de poner cada *border* escrito usando cuatro l#neas, uso s)lo dos/
border:1px solid #00$; border"le$t:1px solid #$00;

En este caso primero de"inimos todos los *borders* con el mismo color pero m!s tarde para ahorrarnos dos lineas de c)digo rede"inimos el *border* izquierda a otro color, de esta manera hemos ahorrado dos l#neas de c)digo. El ejemplo malgastando espacio quedar#a as#/
border"top:1px solid #00$; border"right:1px solid #00$; border"botto!:1px solid #00$; border"le$t:1px solid #$00;

?bviamente supuestamente este ahorro de carga supone un retraso en la carga de la p!gina pues estamos de"iniendo el *border* izquierda dos veces, pero la carga de este proceso es insigni"icante.

4.4.4.& 4.Los estilos inv5lidos no "acen nada


7n ejemplo es su"iciente para e.plicar este error/
padding:auto

Este estilo solo puede ser aplicado a -idth y height pero no a padding.

4.4.6.& 6.C(digo Espec$7ico para cada navegador


?bviamente este tipo de c)digo solo "uncionar! en el navegador al que va destinado , pero es hay que pensar si es rentable puesto que solo algunos usuarios podr!n apreciar esos cambio.

4.4.:.& :.Espacio perdido


0o estoy seguro del porqu$ pero muchos dise(adores estan empe(ados en desaprovechar el espacio en su c)digo, usando un mont)n de innecesarios saltos de l#nea. >ecuerda que eso s)lo lo ver!s tu y estas haciendo un uso e.cesivo de ancho de banda. Tambien tu c)digo ser! m!s "acil de leer puesto que tendr! menos *boquetes*. 'or supuesto es sabio dejar un cierto espacio para mantenerlo legible, aunque a algunos les encanta condensar todo, no

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

67

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com dejando ningCn espacio.

4.4.;.& ;.Especi7icar los colores sin usar palabras


1e"inir los colores usando las palabras que lo de"inen no es una buena idea puesto que estar#amos con"iando en el navegador para que el interprete que color y c)digo debe aplicar. as tonalidades para un mismo nombre de color cambian mucho de un navegador a otro. Es una buena pr!ctica especi"icar siempre el color por su c)digo he.adecimal. Ej./ utilizar *J"""* en lugar de blanco.

4.4.%<.& %<.Agrupar estilos idnticos


Es comCn ver los estilo escritos una y otra vez con el mismo c)digo, aCn cuando el estilo es igual. Ser#a conveniente agruparlos y asi optimizar#amos espacio/
h1- p- #$ooter- .intro { $ont"$a!ily:9rial-Qel#etica-sans"seri$; }

Tambien nos hara mucho m!s "acil la tarea de actualizar el c)digo.


Artculo por Manu

#utierrez

4.6.& 1eglas de estilo CSS de usuario * de autor


1eamos qu& son las reglas de estilo de usuario# con)iguradas opcionalmente por cada usuario en su na egador# y las reglas de estilo de autor# que de)ine el desarrollador de cada 'eb. os navegadores modernos implementan dos tipos de reglas de estilo para una p!gina -eb, las de usuario y las de autor. Son conjuntos de reglas de estilo que a"ectan a los elementos de la p!gina, es decir, a cualquier documento HTM que se vea en el navegador. as reglas de estilo de usuario %user stylesheet rules& las de"ine cada persona en su navegador, a modo de con"iguraci)n global, para todas las p!ginas que visita. as reglas de estilo de autor %author stylesheet rules& son las que de"inen los autores de las p!ginas, es decir, los dise(adores o desarrolladores de cada una de las p!ginas que visitamos. 'or decirlo de otra "orma, las hojas de estilo de autor son las CSS que conocemos y que hemos aprendido a crear en el Manual de CSS. as reglas de estilo de usuario son menos importantes para el navegador, de cara al orden de precedencia o prioridad. Es decir, en caso que en las reglas de estilo de usuario y de autor se de"ina una misma propiedad de estilos CSS, la que se tiene en cuenta es la regla de estilo de autor, osea, lo que haya con"igurado el dise(ador de la p!gina. Sin embargo, esto se puede cambiar puntualmente si el usuario lo desea. Como sabemos, cualquier elemento de la p!gina tiene unas reglas de "ormato predeterminadas, que de"inen los navegadores. a hoja de estilo de usuario nos permite cambiar esas reglas de estilo prede"inidas, de modo que si una p!gina -eb no declara un estilo determinado para un elemento, se tengan en cuenta las reglas de estilo de"inidas por el usuario. 'or ejemplo, generalmente las tablas no tienen borde, o al menos es la con"iguraci)n predeterminada en los navegadores que conozco. Con las reglas de estilo de usuario yo podr#a de"inir que todas las tablas en el navegador a partir de ahora tuvieran un borde de 3 p#.el y de color rojo. En ese caso, si el autor no de"ine c)mo debe ser el borde de una tabla en sus CSS, la tabla siempre tendr#a borde de 3 p#.el y color rojo. as reglas de estilo de usuario son sobreescritas por las de autor, pero ello no quita importancia a las reglas de usuario, para determinado tipo de usuarios. ;maginemos que por cualquier raz)n deseamos que las "uentes de las p!ginas que visitamos sean de un tama(o mayor y de una "amilia tipogr!"ica determinada, para poder leerse mejor. Entonces

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

68

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com podr#amos escribir unas reglas de estilo de usuario como estas/
body{ $ont"si4e: 1Upt; $ont"$a!ily: #erdana- arial; }

+ partir de ahora, el cuerpo de la p!gina de cualquier -eb, a no ser que el desarrollador haya de"inido otra cosa en su elemento body o en cualquiera de los otros elementos de la p!gina, tendr! esas caracter#sticas. Como se puede apreciar, las reglas de estilo de usuario tienen la misma sinta.is, atributos y valores que utilizamos tambi$n en las hojas de estilo normales.

4.6.%.& #(nde se colocan las reglas de estilo de usuario


Cada navegador se con"igura de una manera distinta, luego las reglas de usuario, que aplicamos a cada cliente -eb que las soporte, se tienen que indicar de manera distinta dependiendo de los navegadores que estemos utilizando. En principio, se trata de un archivo de te.to que debe contener el c)digo CSS que queremos que se utilice de manera predeterminada al ver una p!gina -eb. 'odremos alterar el estilo de cualquier elemento, igual que lo hacemos con las hojas de estilo de autor, con la di"erencia que esos estilos se aplicar!n a todas las p!ginas que visitemos. En el navegador ,ire"o. se pueden de"inir las reglas de estilo de usuario en un archivo llamado *userContent.css* que se encuentra en la carpeta *chrome*, del per"il de usuario que estemos utilizando. El directorio donde est!n los per"iles de ,ire"o. depende del sistema operativo que estemos trabajando, en el caso de 2indo-s 6ista, y para mi usuario en particular, est! en/ C/f7sersfMiguelf+pp1ataf>oamingfMozillaf,ire"o.f'ro"ilesfj]biEM:].de"aultf +s# que simplemente podr!s crear el archivo con los estilos que quieras, que deber#as colocarlo en una ruta como esta. C/f7sersfMiguelf+pp1ataf>oamingfMozillaf,ire"o.f'ro"ilesfj]biEM:].de"aultfchromefuserContent.css El directorio *j]biEM:].de"ault* es el per"il de mi usuario concreto, que tendr! un nombre seguramente di"erente en el tuyo, as# como *Miguel*, en el principio de la ruta %C/f7sersfMiguelf...&, que es mi nombre de usuario en el 2indo-s. En el directorio *chrome* ver!s probablemente unos archivos llamados *userContentKe.ample.css*, que pueden servirte de gu#a para crear tus propias reglas de estilo de usuario.

4.6.).& Alterar la precedencia para -ue las reglas de usuario dominen sobre las de autor
Como hemos dicho, en caso que una regla de estilo de usuario se de"ina tambi$n como regla de estilo de autor, se tiene en cuenta lo que se haya de"inido por el autor o dise(ador de la -eb. 'ero esto podemos cambiarlo en las reglas de estilo que queramos. ;maginemos el caso del usuario que decidi) que quer#a ver siempre las "uentes con un tama(o mayor, para leer mejor el contenido de las -ebs en su ordenador. Esta persona de"ini) en su archivo de reglas de estilo de usuario un tama(o de letra mayor para determinados elementos de la p!gina. 'ero si un desarrollador luego ha de"inido un tama(o de letra distinto, el tama(o de"inido por el usuario se pierde y con ello quiz!s ahora no pueda leer la -eb tan c)modamente. 'odemos utilizar entonces la directriz de CSS Pimportant, que cuando se coloca en las reglas de estilo de usuario, hace que siempre se tenga en cuenta lo que se haya de"inido all#. +s# pues, esta persona puede obligar a que en el cuerpo de la p!gina siempre se utilice el tama(o de "uente que hab#a determinado, de la siguiente manera.
body{ $ont"si4e: 1Upt 3i!portant; $ont"$a!ily: #erdana- arial; }

Si vemos el anterior c)digo de ejemplo, al atributo "ontKsize le hemos aplicado la declaraci)n Pimportant, luego siempre

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

69

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com se tendr! en cuenta antes que los estilos declarados en las reglas de estilo de autor y por tanto, aparecer!n todos los te.tos del cuerpo de la p!gina con tama(o de 3]pt. +hora bien, se hab#a de"inido una tipogra"#a como 6erdana, +rial, pero no era Pimportant, luego s)lo se utilizar! esta regla si el dise(ador no lleg) a especi"icar la "amilia tipogr!"ica con sus CSS para el cuerpo de la p!gina.
Artculo por Miguel

Angel Alvarez

4.:.& #eclaraci(n Limportant en CSS


!n CSS podemos declarar reglas de estilos como =important para que tomen precedencia sobre otras reglas de estilos que se puedan encontrar en una pgina 'eb. 6amos a ver en este art#culo de 1esarrollo2eb.com, englobado dentro del Manual de CSS, una declaraci)n un tanto especial que podemos utilizar al de"inir reglas de estilos para una p!gina -eb. Se trata de Pimportant, una palabra que har! que determinadas propiedades tomen mayor importancia y, por tanto, se tengan m!s en cuenta que otras que puedan sobreescribirlas. ?tra cosa que veremos de paso es c)mo el uso de Pimportant nos proporcionar! una sencilla y valida t$cnica para poder de"inir reglas de estilos distintas para navegadores antiguos, como ;nternet E.plorer ]. +dem!s, importantP se puede utilizar en las hojas de estilo de usuario, para que cada persona pueda de"inir para su propio navegador si lo desea, un estilo CSS por de"ecto que se tenga en cuenta en todas las -eb que visitemos. Este caso ya se e.plic) en el art#culo >eglas de estilo CSS de usuario y de autor.

4.:.%.& @so * e7ecto de la declaraci(n Limportant


'ara utilizar Pimportant en una regla de estilo, siempre se coloca en la parte del valor del atributo, antes del punto y coma *@*. 'or ejemplo
body{ $ont"$a!ily: #erdana- arial 3i!portant; }

El e"ecto es que siempre se aplicar! el estilo de"inido como Pimportant, aunque luego se pueda sobrescribir con otro estilo m!s tarde en la misma declaraci)n o en otra distinta. 6eamos este ejemplo/
td{ $ont"si4e: 1Upt 3i!portant; $ont"si4e: Jpx; }

Tenemos una declaraci)n de estilos para los elementos T1, donde de"inimos dos veces el atributo "ontKsize. En condiciones normales, se tendr#a en cuenta el valor de"inido en segundo lugar, porque lo sobrescribe. Sin embargo, que que el primer "ontKsize est! de"inido como Pimportant, en realidad lo que ocurrir! es que se tenga en cuenta "inalmente y el tama(o de letra por tanto ser! 3]pt. Este e"ecto lo podemos aplicar tambi$n a distintos tipos de selectores de CSS. 1e modo que podremos encontrarnos que para un elemento se indique un estilo y luego para una clase %class de CSS& se aplique otro y se tenga en cuenta el de"inido como Pimportant. 6eamos este ejemplo de CSS/
td{ $ont"$a!ily: #erdana- arial 3i!portant; } td.!icelda{ $ont"$a!ily: !onospace; }

Fue aplicado sobre el siguiente HTM /


(table%

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

70

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com


(tr% (td class)*!icelda*%Qola(+td% (td% & & (+td% (+tr% (+table%

1ar#a como resultado, en condiciones normales, que la primera celda, de clase *micelda*, tuviese la "uente "ontK"amily/ monospace y la segunda celda, que no tiene ningCn class, tuviera el estilo "ontK"amily/ verdana, arial. Sin embargo, como el "ontK"amily de"inido en primer caso tiene la declaraci)n Pimportant, la "uente ser! siempre verdana, arial, para las dos celdas.

4.:.).& @sar Limportant para de7inir estilos di7erentes en navegadores antiguos


a declaraci)n Pimportant no la entienden todos los navegadores, por tanto, algunos simplemente la ignorar!n y otros no. El caso m!s representativo, por ser un navegador que todav#a se utiliza habitualmente por los internautas, ser#a ;nternet E.plorer ]. +s# pues, utilizando Pimportant podemos conseguir de"inir estilos di"erentes para ;nternet E.plorer ] y para la mayor#a de los otros navegadores que pueden visitar nuestra -eb. Esto lo podemos conseguir de la siguiente manera.
di#{ background"i!age: url>$ondo"se!itransparente.png? 3i!portant; background"i!age: url>$ondo.gi$?; }

Como ;nternet E.plorer ] ignora la directriz Pimportant, ocurrir! que tendr! en cuenta el segundo valor de bacEgroundK image, ya que est! repetido y por tanto sobrescribe al primero. 'or ello, en este caso ;E] mostrar! como "ondo el archivo llamado *"ondo.gi"*. os otros navegadores, como entienden Pimportant, mostrar!n el estilo que hab#a de"inido anteriormente y por tanto utilizar!n como "ondo el archivo *"ondoKsemitransparente.png*.
Nota: 1icho sea de paso, como ;E] tiene problemas al mostrar "ondos semitransparentes %con canal alpha en el '0N& esta ser#a una posible t$cnica para conseguir que en E.plorer ] se utilice un "ondo de imagen distinto %por ejemplo en .gi"& que el que se utiliza en otros navegadores que no tienen problema con el .png.

Artculo por Miguel

Angel Alvarez

4.;.& 1egla Mmedia de CSS


!$plicamos la regla /media permite de)inir estilos CSS espec)icos para distintos medios en los que se pueda mostrar una pgina 'eb. 7na p!gina -eb se puede mostrar en di"erentes dispositivos. Esto es algo que ya conocemos y que, a medida que pasan los a(os y avanzan las tecnolog#as, se hace cada vez m!s patente. 'or tanto, podemos dejar de pensar que nuestra -eb se va a acceder simplemente desde un ordenador y para ayudarnos a que se vea bien en cualquier dispositivo, podemos de"inir estilos distintos para cada tipo de medio con la regla Rmedia. ;ncluso en el hipot$tico caso que descart$is que vuestra -eb pueda tener usuarios venidos de tel$"onos m)viles o televisiones %por poner un par de ejemplos&, puede que necesit$is especi"icar estilos espec#"icos para cuando la p!gina -eb se est! imprimiendo en papel. Todo ello son tipos de medios distintos, que podemos gestionar desde la llegada de CSS 4.

4.;.%.& Sinta?is * usos de la regla Mmedia de CSS )


a regla Rmedia permite especi"icar estilos para distintos tipos de medios en la misma hoja de estilos. En ella podemos

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

71

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com in"ormar sobre los tipos de medio sobre los que queremos de"inir estilos CSS. 'or ejemplo, podr#amos escribir estilos para tipos de medios como la impresi)n o estilos para el medio pantalla del ordenador. 'ara de"inir un estilo para un tipo de medio, o medios, espec#"icos podemos escribir la regla Rmedia seguida de los tipos de medios sobre los que queremos aplicar los estilos, separados por comas. +s# de"inir#amos estilos que "uncionar#an s)lo en la impresi)n en papel/
I!edia print { table{ width: R0%; border: px solid #$$000; } .!iclase{ display: none; } }

Como dec#amos, podemos indicar estilos CSS para varios medios a la vez/
I!edia t#- handheld { body{ $ont"si4e: 0.5 e!; } }

+dem!s, si lo deseamos, podemos especi"icar estilos para todos los medios, con el tipo de medio *all*.
I!edia all { di#.i!pri!ir { display: hidden; } } Nota/ +parte de la regla Rmedia que estamos e.plicando e.iste una manera de especi"icar estilos de"inidos en archivos e.ternos, que s)lo se apliquen para determinados tipos de medios. Esto se hace con la directiva *media* que se aplica en la etiqueta ;0Y para enlazar con una hoja de estilos e.terna, en el atributo *media*. (link !edia)*print* hre$)*cssEsoloEparaEi!presion.css* rel)*stylesheet* type)*text+css*% 'ara m!s in"ormaci)n, por "avor, accede al art#culo CSS para imprimir p!ginas -eb.

4.;.).& Aipos de medios en CSS )


+hora podemos ver un listado de los tipos de medios que se de"inen en las especi"icaciones del lenguaje CSS 4. +ll/ Cualquier tipo de medio. Traille/ medio relacionado con dispositivos t!ctiles braile. Embossed/ 'ara impresoras braile. Handheld/ para dispositivos de bolsillo o de mano que normalmente tienen una pantalla peque(a. 'rint/ medio espec#"ico para cuando se imprimen documentos en la impresora. 1esde la vista previa para imprimir que tienen los navegadores, generalmente en el menC de +rchivo, tambi$n podemos ver el resultado de la p!gina para impresi)n que utiliza los estilos CSS del tipo de media *print*. 'rojection/ tipo de medio que se aplica para las presentaciones que se muestran con proyector. Screen/ medio que se utiliza para pantallas grandes, generalmente las pantallas de los ordenadores personales. Speech/ medio para sintetizadores de voz. Tty/ tipo de medio que se utiliza en dispositivos que tienen un tama(o "ijo de car!cter, como un teletipo, terminal, consola de comandos etc. En este tipo de media no se puede usar la unidad de medida de p#.eles %p.& porque todo lo que se puede mostrar es a nivel de car!cter. Tv/ para cuando se accede a una -eb desde un dispositivo de televisi)n.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

72

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Nota/ +l escribir los tipos de medios es indi"erente si lo hacemos con mayCsculas o minCsculas.

Estos tipos de medios son los que eran v!lidos con las especi"icaciones de CSS 4. Es obvio que con el paso del tiempo se crear!n otros tipos de medios que se ir!n incorporando al lenguaje. Si se utiliza un tipo de medio que no e.iste o que no es reconocido, el sistema simplemente lo ignora. 'or ejemplo/
I!edia t#- ne#era{ p{ background"color: #ccc; } }

Esta declaraci)n de estilos s)lo se aplica en las televisiones y en los monitores acoplados en las neveras de la cocina. Como en estos momentos no e.iste el tipo de medio *nevera*, pues simplemente se ignora y en la pr!ctica ese estilo s)lo servir! para cuando se muestre la p!gina en un televisor.
Artculo por Miguel

Angel Alvarez

4.%<.& #epurar CSS


%na lista de los errores ms comunes en el c"digo CSS y c"mo a eriguar cul de esos errores se est produciendo en tu c"digo# para depurar tus CSS. El lenguaje para especi"icar estilos en p!ginas -eb, CSS, a veces resulta poco pr!ctico en "ase de depuraci)n. Muchas veces es di"#cil saber qu$ errores hemos cometido y c)mo solucionarlos, pero con ayuda de una serie de consejos y buenas pr!cticas, podremos minimizar el tiempo que perdemos en la bCsqueda de los problemas o errores cometidos cuando algo no se ve e.actamente como nosotros quer#amos. En este art#culo no pretendemos dar una receta, paso por paso, para hallar inequ#vocamente los errores CSS de un c)digo dado, porque pueden ser variados y a veces esquivos, sino o"recer una serie de consejos o pr!cticas que nos ayudar!n a encontrar un problema. 1e hecho, no siempre una Cnica t$cnica te ayudar! a encontrar el problema e.acto en cualquier c)digo CSS, por lo que nos conviene ser e.pertos y tener a mano varios recursos para no volvernos locos cuando algo "alla. Fuiz!s merezca la pena comentar que en 1esarrollo2eb.com se public) hace tiempo un tutorial sobre c)mo hacer tu c)digo CSS m!s correcto y resumido, as# como no cometer algunos erorres de sinta.is b!sicos. Todo ello lo puedes encontrar en el art#culo 3M errores comunes en tu c)digo CSS. Este te.to es interesante para ayudarte a no cometer errores, pero no cubre muchos problemas b!sicos que podemos encontrar cuando probamos los estilos que hemos de"inido. Es decir, te ayudar! mientras est!s codi"icando, para ser m!s correcto, pero no mucho cuando has cometido el error y quieres saber d)nde est! y cu!l es el problema, que es lo que pretendemos mostrar en este momento. +s# que vamos ya con esas t$cnicas, herramientas, consejos y pruebas que puedes hacer para saber qu$ es lo que "all) en tu CSS.

4.%<.%.& Firebug tu me+or amigo para depurar CSS


a herramienta de debug en ,ire"o., ,irebug, es bien conocida es por cualquier desarrollador con un poco de e.periencia y amor a su tiempo productivo. Supongo que a estas alturas ya debes conocer cu!les son las ventajas y las ayudas que te o"rece ,irebug, pero si no es as#, te conviene ir instalando esta e.tensi)n de ,ire"o.. En art#culos anteriores ya hemos hablado repetidas veces de ,irebug, puedes hacer un bCsqueda con el buscador interno de 1esarrollo2eb.com por esa palabra o ir directamente a la presentaci)n de ,irebug. ,irebug tiene, entre otras cosas, un inspector de elementos que nos permite seleccionar cualquier cosa en la p!gina y ver sus atributos CSS y otros detalles. Es ideal porque te ayudar! a encontrar errores en tus CSS, como los siguientes/

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

73

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Errores de sinta.is Errores en rutas de im!genes y otros recursos Errores en tu HTM

os errores de sinta.is %principalmente los que se producen por los t#picos errores humanos& son muy "!ciles de identi"icar con ,irebug pues a la hora de inspeccionar elementos te permite ver en un panel los estilos CSS que se est!n aplicando a esos elementos. Si est! "altando algCn estilo de entre aquellos que hab#as de"inido es que ,ire"o. no lo hab#a entendido y por eso no lo hab#a procesado. Entonces quiere decir que o bien has escrito mal el nombre del atributo CSS o bien su valor, o bien ha "altado un */* o un *@*. >evisa la sinta.is en la declaraci)n de estilos que est$ "altando en ,irebug. ?tra de las cosas que se averiguan "!cilmente con ,irebug es si las rutas a las im!genes est!n correctas. 'or ejemplo, puede que hayamos escrito mal una ruta para una imagen de "ondo. Entonces ,irebug mostrar! la ruta que hayamos escrito en el atributo CSS, pero al poner el rat)n encima de esa ruta no nos mostrar! la imagen que hay en ese archivo. %Si la ruta estuviera bien, nos mostrar#a una miniatura de la imagen que estamos invocando. Muchas veces los problemas con CSS pueden venir de haber escrito mal el HTM y en ello ,irebug tambi$n nos ayudar!, al mostrarnos tambi$n el c)digo HTM que se ha entendido y que se est! procesando en el navegador. as razones por las que usar ,irebug no acaban. 'or poner dos ejemplos m!s, podr#amos se(alar que tiene una consola avanzada que nos muestra errores Davascript, pero que tambi$n la podemos con"igurar para que nos muestre los errores de sinta.is CSS que podamos estar cometiendo. +dem!s con ,irebug podemos estar atentos a los estilos que cada elemento hereda de otros elementos en los que est! contenido. 8 es que los problemas muchas veces no son de los estilos CSS de un elemento, sino de los que est! heredando de otros elementos padre.

4.%<.).& !tros productos similares a Firebug para navegadores distintos de Fire7o?


Como hemos dicho, ,irebug en principio est! disponible como e.tensi)n de ,ire"o., pero podemos encontrar productos similares para otros navegadores que nos vendr!n bien por dos motivos. 'rimero por si nosotros pre"erimos desarrollar con otro navegador, pero sobre todo para poder hacer inspecci)n de elementos %para ver el c)digo HTM que est! entendiendo el cliente -eb los atributos CSS que tienen los elementos de la p!gina& en otros navegadores, cuando algo "unciona como esper!bamos en ,ire"o. pero no en otros bro-sers. I* De!elo er 1ool.ar/ 7n complemento para ;nternet E.plorer c, ya que ;nternet E.plorer \ incluye herramientas para desarrolladores en su instalaci)n b!sica que pueden ayudarnos a inspeccionar elementos. De.ugBar ara *5 lorer/ ?tro complemento muy interesante para E.plorer que tiene mCltiples opciones para debug e inspecci)n de c)digo de p!ginas -eb. Cire.ug ara Eoogle 'hrome/ Chrome, el navegador de Noogle, incluye herramientas similares a las que nos aporta ,irebug en todas sus instalaciones. Sin embargo, tambi$n e.iste la herramienta ,irebug en versi)n compatible con Chrome. D era Dragonfly/ 7n Eit de herramientas para desarrolladores que "uncionan dentro del navegador ?pera.

4.%<...& Jalidar tu "o+a de estilos con un validador CSS


6alidar la hoja de estilos CSS ha sido segCn mi e.periencia clave para encontrar un error en situaciones con"usas. Hay ocasiones que no se encuentra "!cilmente el error con ,irebug o que el error se muestra en unos navegadores y otros no. 'or ello, siempre es una buena idea validar tu c)digo CSS. Si tu c)digo CSS tiene algCn problema el validador te alertar! sobre ello y podr!s corregirlo. Fuiz!s ese error no signi"icaba un problema en un navegador en concreto y s# en otro. E.isten varios validadores CSS, pero quiz!s el que m!s nos interese es el que comentamos en el art#culo Herramienta del 25C para validaci)n de hojas de estilo

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

74

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com En di"erentes navegadores e.isten atajos para acceder a los validadores, a trav$s de opciones del propio navegador o a trav$s de e.tensiones. 'or ejemplo, en ?pera, podemos acceder al validador a trav$s de la tecla r!pida + T ` CT> ` MayCsculas ` 7.

4.%<.2.& Aislar * reducir el c(digo =AML


En el caso de que seamos incapaces de detectar el problema de nuestro c)digo CSS, a pesar de utilizar un inspector de elementos como el que nos o"rece algCn complemento como ,irebug, podemos probar algo m!s laborioso. Se trata de aislar el c)digo "uente que te est! dando el problema, o reducirlo todo lo posible para simpli"icarlo, de modo se cambie el conte.to donde se produce el error, para ver qu$ si eso nos da una pista. ;magina que tienes una columna que ocupa m!s anchura de la que deber#a. 'odr#as hacer lo siguiente. 6as quitando el c)digo HTM de cada uno de los elementos que hay en esa columna y viendo si ocurre algCn cambio. Si quitando un elemento, como una tabla, una divisi)n con 1;6, un "ormulario, un banner o cualquier otra cosa, todo vuelve a "uncionar, puedes entender que algo con ese elemento est! provocando el problema. Como se puede imaginar, esta t$cnica es s)lo un poco de prueba y ensayo, pero siempre procurando quitar cosas en tu c)digo, haci$ndolo cada vez m!s simple y por consiguiente m!s sencillo para localizar el problema. Claro que esta t$cnica representa m!s trabajo y es s)lo un recurso para cuando est!s bastante desesperado, porque te)ricamente con ,irebug ser#a m!s "!cil encontrar el "allo. 1e hecho, esta era una de las t$cnicas m!s utilizadas para encontrar problemas cuando no e.ist#an herramientas como ,irebug.

4.%<.3.& @tilizar un #!CAN0E


Este no es un truco para hacer debug de CSS, pero es una pr!ctica que ayudar! mucho a que nuestras tareas de depuraci)n sean mucho m!s sencillas y no nos desesperemos intentando encontrar la soluci)n a problemas tontos. Sobre todo, es un consejo importante para que tengamos menos errores de compatibilidad de nuestra p!gina entre distintos navegadores. El 1?CT8'E es una cadena de te.to que se debe incluir al principio del c)digo HTM , para decirle qu$ versi)n de HTM o GHTM estamos utilizando. 1istintos 1?CT8'ES pueden hacer que un mismo c)digo HTM o CSS se vea de distinta manera, pero no es ese el problema. o importante es que con un 1?CT8'E declarado todos los navegadores atender!n a ese tipo de documento e interpretar!n el c)digo HTM ` CSS de una manera m!s similar. Mi recomendaci)n es indicar un 1?CT8'E al comenzar tu trabajo e ir desarrollando tu sitio -eb poco a poco con ese 1?CT8'E activo desde el principio. 0o importa mucho qu$ 1?CT8'E uses, pero s# importa que al menos uses uno de ellos. +s# tendr!s muchas m!s probabilidades que el trabajo que est!s realizando se vea igual en todos los navegadores. Es mejor que colocar el 1?CT8'E desde el principio y no al "inal, puesto que en el momento que lo hagamos puede haber algunos elementos de la p!gina o estilos CSS que cambien su manera de mostrarse. +lgunos 1?CT8'E con los que podemos trabajar, con su e.plicaci)n sobre qu$ signi"ican, podemos verlos en el art#culo 1octype HTM .
Artculo por Miguel

Angel Alvarez

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

75

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Parte (:

Por d"nde continuar


>hora 8ue ya sabes bastante sobre 5;;: 8uiz4s 8uieras abrir nue#os horizontes y para ello te damos algunas re+erencias para continuar aprendiendo.

6.%.& Listado de distintos 7rameworFs CSS


%n listado de los )rame'or>s CSS que hay en el mercado para ayudar en la maquetaci"n de pginas 'eb con CSS. En este art#culo vamos a enumerar y comentar algunas cosas sobre "rame-orEs CSS, si es que se les puede llamar "rame-orEs, puesto que ese concepto se usa muchas veces para sistemas que "acilitan la programaci)n de aplicaciones y en el caso de los CSS, no es programaci)n, sino que se utilizan para obtener ayudas en la maquetaci)n de -ebs. Como sabemos, en el momento actual las p!ginas se maquetan con CSS. Con HTM especi"icamos los contenidos y con CSS la "orma o disposici)n con la que deben presentarse al usuario en los navegadores. CSS por tanto es un lenguaje que sirve para especi"icar el estilo de las p!ginas, pero muchas veces hacemos cosas repetitivas, como divisiones de p!gina en columnas, cajas de determinados tipos, etc. 'ues los ,rame-orEs CSS nos ayudan a realizar esas tareas de maquetaci)n b!sicas, que muchas veces tenemos que implementar repetidas veces en diversos sitios, para generar las estructuras de elementos de la p!gina. os "rame-orEs CSS disponen una serie de clases %de hojas de estilo& ya creadas con las que ayudar a posicionar elementos en la p!gina y crear estructuras de maquetaci)n, m!s o menos vers!tiles. +s#, en el desarrollo de p!ginas nuevas, o en el redise(o de p!ginas antiguas, podemos ayudarnos de "rame-orEs CSS para disponer de una rejilla donde posicionar los distintos componentes de nuestro dise(o. Con ello nos ahorraremos el tiempo de tener que crear de nuevo decenas de clases que estamos aburridos de implementar para crear maquetaciones a 4, 5 ) : columnas, con divisiones de cabecera, cuerpo y pie, etc. En 1esarrollo2eb.com hemos analizado un "rame-orE CSS y realizado un manual para e.plicar sus caracter#sticas y "uncionamiento, que recomendamos leer para obtener m!s e.plicaciones. Se titula Maquetaci)n CSS con _]M Nrid System , en el que encontrar$is adem!s diversos v#deos muy ilustradores para conocer de primera mano el proceso de dise(o de una -eb utilizando uno de estos "rame-orEs CSS. En este art#culo pretendo simplemente enumerar este y otros "rame-orEs CSS, en un listado que pretende dar una idea de las posibilidades que nos o"rece en este momento el mercado.

6.%.%.& ;4< rid S*stem


Es, tal vez, el m!s utilizado de los "rame-orEs CSS, cuyas p!ginas se construyen en anchuras de _]M p#.eles %de ah# su nombre&. ?"rece dos posibilidades de maquetaci)n de p!ginas, con una rejilla de 34 ) 3] columnas. 0osotros escogimos

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

76

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com este "rame-orE CSS para e.plicarlo a los lectores de 1esarrollo2eb.com, justamente por ser tan popular. En nuestro trabajo con este sistema hemos podido comprobar que es muy vers!til y sobre todo, sencillo de utilizar. '!gina -eb de _]M Nrid System Manual de _]M Nrid System

6.%.).& Simple
Este "rame-orE CSS lo presenta un desarrollador chileno, con lo que todos los ejemplos y documentaci)n que puedas encontrar est! en espa(ol. El creador lo ha realizado para poder simpli"icar las cosas, no s)lo en el desarrollo de las p!ginas, sino tambi$n en el aprendizaje. o destacamos en segundo lugar por ser un producto en castellano, que siempre se agradece tener herramientas para trabajar en nuestro propio idioma. '!gina -eb de Simple +rt#culo en 1esarrollo2eb.com sobre Simple

6.%...& 8lueprint
Es un "rame-orE CSS que pretende reducir el tiempo de desarrollo de las p!ginas -eb. ?"rece una estructura s)lida en la que "undar tu trabajo de dise(o, por medio de la t#pica rejilla. 'ero no se limita simplemente a eso, sino que o"rece otra serie de clases muy Ctiles para estilizar componentes t#picos, como "ormularios, botones, pesta(as, tipogra"#as o para que tus p!ginas -eb se puedan imprimir de manera )ptima en papel. '!gina -eb de Tlueprint

6.%.2.& N@' rids CSS


El "rame-orE CSS de 8ahooP Es un c)digo CSS que permite maquetar p!ginas con distintas anchuras %cLMp., _LMp., y _c:p.& y hacer todas las cosas t#picas que se pueden desear en una p!gina. Tiene ] plantillas prede"inidas y la posibilidad de crear m!s de 3.MMM combinaciones de maquetaci)n, en regiones de 4, 5 y : columnas. ,orma parte de la 8ahooP 7ser ;nter"ace ibrary, lo que da una garant#a adicional, por venir de tan renombrado buscador. '!gina -eb de 87; Nrid CSS

6.%.3.& Aripoli
Tripoli no es un "rame-orE CSS y segCn remarcan los creadores, ello signi"ica que no te obliga a desarrollar tu p!gina de una manera determinada. En contra, lo que o"rece es un c)digo CSS que resetea los estilos prede"inidos de los navegadores y los rede"ine, consiguiendo una base estable sobre la que realizar un sitio y que se vea igual en cualquier cliente -eb. 'uede ser interesante porque intenta no caer en los problemas que tienen los "rame-orEs CSS. '!gina -eb de Tripoli

6.%.4.& 8oilerplate
Este "rame-orE me ha parecido interesante porque est! creado por uno de los desarrolladores iniciales de Tlueprint, que ha "undado el nuevo proyecto para poner en marcha sus ideas particulares. Como $l dice, este "rame-orE est! pensado para simpli"icar las cosas y ser ligero, aportando todo lo b!sico para poder maquetar una -eb, pero sin las complejidades que tiene Tlueprint y con convenciones de nombres que dan m!s sentido y signi"icado a lo que estamos codi"icando. 'agina -eb de Toilerplate

6.%.6.& 8lueArip
SegCn sus creadores, TlueTrip es una combinaci)n de lo mejor de distintos "rame-orEs CSS de los que hemos hablado

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

77

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ya. Su nombre viene de la uni)n de T 7Eprint K T>;poli, haciendo re"erencia a esa uni)n de ideas de los mejores "rame-oEs, entre los que tambi$n se han inspirado en nuestro "rame-orE pre"erido en estos momentos, _]M grid, por su sencillez. '!gina -eb de TlueTrip

6.%.:.& !tros FrameworF CSS


'ongo otros "rame-orEs CSS que he encontrado y que no he investigado tanto las posibilidades que o"recen, aunque tambi$n pueden ser interesantes, sobre todo puede que den en"oques di"erentes que puedan ser Ctiles en ciertas ocasiones. Elements ES2+T Content -ith style My CSS ,rame-orE Hartija Malo %,rame-orE CSS ultra peque(o& emastic Como re"erencias sobre "rame-orEs CSS seguramente tendremos m!s que su"iciente. 'ero llegado a este punto y antes de decidirte por qu$ "rame-orE usar o si te interesa o no utilizar uno de ellos, te recomendamos leer el art#culo sobre las ventajas e inconvenientes del uso de "rame-orEs CSS.
Artculo por Miguel

Angel Alvarez

6.).& FrameworFs CSS/ Jenta+as e inconvenientes


1entajas e incon enientes del uso de <rame'or>s CSS# *iscutimos acerca de la con eniencia o no de usar )rame'or>s CSS. a conveniencia de uso, o no, de los "rame-orEs siempre es un tema pol$mico. 0o ocurre s)lo con los "rame-orEs CSS, sino tambi$n con los "rame-orEs de otros lenguajes o tecnolog#as, aunque quiz!s en el caso de las librer#as CSS todav#a se acentCa m!s la discusi)n. as personas a "avor del uso de "rame-orEs siempre podr!n decir que aceleran los procesos de desarrollo y que ello es su"iciente raz)n para usarlos, pero conviene saber que tambi$n cu!les son las desventajas y decidir si nos interesa o no usarlos tambi$n en "unci)n de ellas. Conviene aclarar antes de nada qu$ nos o"rece un "rame-orE CSS, pues la mayor#a de las ventajas est!n directamente relacionadas con las !reas donde $stos actCan.

6.).%.& Componentes "abituales de un 7rameworF CSS


Cada "rame-orE CSS es distinto, pero la mayor#a proveen de c)digo "uente Khojas de estilo en cascadaK para resolver los mismo asuntos/ Creaci)n de una rejilla, para que el desarrollador pueda colocar en ella los distintos elementos que "orman parte de la -eb. Esta rejilla, que divide los espacios en distintas columnas, ayuda a posicionar con CSS los componentes de una p!gina de una manera precisa y vers!til. 1e"iniciones de estilos de tipogra"#a para los elementos HTM , de modo que no tengamos que de"inirlos nosotros para cada proyecto. Soluci)n de casos de incompatibilidad entre navegadores, para que un mismo c)digo se vea igual en todos los clientes -eb m!s habituales

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

78

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Creaci)n de clases CSS est!ndares, que puedan ayudarnos a estilizar componentes avanzados de inter"aces de usuario.

6.).).& Jenta+as de los 7rameworFs CSS


+hora que ya sabemos d)nde inciden las librer#as CSS, vamos a listar una serie de ventajas posibles de su utilizaci)n. @a#uetaci(n acelerada y c(digo m,s lim io: Con un "rame-orE CSS podemos maquetar de una manera mucho m!s r!pida una p!gina, gracias a la rejilla que nos o"rece. 'ero adem!s utilizarlo nos ayudar! a tener un c)digo m!s limpio y m!s estructurado. Soluci(n a los ro.lemas 'SS comunes: Casi todos los "rame-orEs est!n realizados bajo la e.periencia de trabajo con CSS en muchas p!ginas -eb. 'or ello siempre o"recen soluciones a problemas comunes de los desarrolladores. 'om ati.ilidad entre na!egadores: os navegadores a veces interpretan de manera distinta un mismo c)digo "uente. Esto es algo que a menudo se acentCa en ;nternet E.plorer y que los "rame-orEs CSS solucionan de alguna u otra manera. A render trucos y r,cticas ha.ituales: +l leer el c)digo "uente de los "rame-orEs CSS podremos aprender las pr!cticas de otros desarrolladores y en concreto para los "rame-orEs CSS es muy sencillo e.aminar su c)digo "uente. Desarrollar conforme a un mismo atr(n: Cuando desarrollamos con un "rame-orE tendremos un procedimiento determinado para resolver las necesidades comunes. Esto quiere decir que la manera de actuar en di"erentes proyectos puede ser muy similar y por ello a la larga te costar! menos es"uerzo de mantenerlos y podr!s recordar mejor cu!les son los criterios que utilizaste para desarrollarlos. Ayuda al tra.ajo en gru o: 1ado que trabajar con un "rame-orE CSS nos obliga a desarrollar con un patr)n determinado, en proyectos en grupo, las personas que integren el equipo de trabajo podr!n tener m!s claras cu!les "ueron las decisiones que se tomaron a la hora de maquetar con un breve vistazo en el c)digo. En de"initiva, las ventajas m!s importantes de usar un "rame-orE CSS es que agilizar! el proceso de desarrollo y nos ayudar! bastante a la hora de hacer una -eb que se vea per"ecta en cualquier navegador. 'ero dependiendo de nuestro conte.to de trabajo podemos encontrar otras ventajas interesantes.

6.)...& #esventa+as del uso de 7rameworFs CSS


Hasta ahora, todo lo que hemos comentado de los "rame-orEs CSS es muy bueno, pero e.isten algunas desventajas que tambi$n debemos conocer, para valorar su conveniencia o no y minimizar en la medida de lo posible los aspectos negativos. 'ara mi, e.iste una desventaja principal bastante importante y otra serie de desventajas menos determinantes. Fuiz!s la desventaja principal es su"iciente como para desistir en el uso de "rame-orEs CSS y para entenderla tenemos que conocer antes una de los motivos por los que se cre) CSS. Como quiz!s sepamos, CSS es un lenguaje para de"inir estilos en p!ginas -eb, que se cre) con la intenci)n de separar el contenido de la presentaci)n. Con HTM especi"icamos el contenido de una p!gina y con CSS especi"icamos, por separado, la presentaci)n. 'ues bien, la mayor#a de los "rame-orEs CSS se cargan esta ventaja del lenguaje, o al menos la limitan. Esto es porque, cuando queremos usar la rejilla para posicionar los elementos, muchas veces estamos utilizando c)digo HTM con clases %Class de CSS& que especi"ican la posici)n que van a tener esos elementos. Eso hace que estemos volviendo a mezclar contenido con presentaci)n y quiebra por tanto algunas de las ventajas que hab#amos adquirido al trabajar con CSS. +similada para mi esta desventaja principal, veamos un completo listado de los inconvenientes del uso de ,rame-orEs CSS/

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

79

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com @e+clas de nue!o el contenido y la resentaci(n: Cuando dise(as una -eb con CSS podr#as cambiar su aspecto radicalmente con s)lo cambiar la hoja de estilos, incluso la manera como los elementos se posicionan en la p!gina. 'ero cuando utilizas un "rame-orE est!s colocando clases %de CSS& que indican d)nde se van a posicionar los elementos en una rejilla y, si quieres cambiar la posici)n de esos elementos m!s adelante te ver!s obligado a cambiar el c)digo HTM de la p!gina y colocar otras clases CSS, que permitan situarlos en otros puntos de esa rejilla. 1endr,s c(digo 'SS #ue no utilices nunca: El "rame-orE CSS contiene diversos c)digos CSS Ctiles en casos generales, pero lo cierto es que cuando dise(as una p!gina -eb una buena parte de ese c)digo no lo vas a usar nunca. Es decir, al utilizar un "rame-orE estamos cargando innecesariamente el peso en bytes de nuestro c)digo CSS. Esto lo podemos arreglar *a mano* limpiando el CSS del "rame-orE, eliminando c)digo que no lleguemos a utilizar en ninguna p!gina del sitio. 'ur!a de a rendi+aje m,s lenta: +unque aprender a usar un "rame-orE CSS no es nada complicado, tendr!s que conocer sus particularidades para sacarle provecho. Tendr!s tambi$n que aprender a dise(ar de una manera determinada, para usar la rejilla con la que se posicionan los elementos. Todo esto, insisto, no es di"#cil, pero lleva su tiempo. Tanto es as# que, si vas a dise(ar una sola -eb, quiz!s tardes m!s tiempo en aprender a trabajar con el "rame-orE CSS que lo que tardar#as en dise(arla sin utilizarlo. En de"initiva, s)lo sacar!s provecho al "rame-orE cuando lo conozcas, es decir en el segundo, o siguientes dise(os que realices con $l. No est,s a rendiendo a !alerte or ti mismo: Muchos de los problemas de dise(o t#picos ya vienen resueltos en un "rame-orE y esa situaci)n, a pesar de ser una ventaja, puede derivar en que al "inal no sepas solucionar esos problemas b!sicos por ti mismo. Como ya estaba resuelto, no tuviste la ocasi)n de resolver el problema y por tanto no aprendiste con esa e.periencia. 1el mismo modo, probablemente aprender!s a resolver tus necesidades aplicando clases CSS del "rame-orE, pero realmente puede que no sepas qu$ estilos CSS est!s aplicando y por qu$. En de"initiva, si antes de empezar a trabajar con "rame-orEs no tienes una e.periencia y conocimiento su"iciente del lenguaje CSS y sus usos, puede que aprender a dise(ar con un "rame-orE represente una desventaja para aprender bien CSS. ?tro detalle sobre este mismo punto es que cuando quieras cambiar de ,rame-orE, tendr!s que aprender de nuevo la "orma de trabajar y con toda probabilidad cambiar el c)digo HTM de tu p!gina para ajustarlo a los nuevos nombres de clases y estilos CSS.

6.).2.& Conclusi(n/ O@sar o no 7rameworFs CSSP


a decisi)n "inal sobre usar o no un "rame-orE debe correr a cargo de cada desarrollador. 7n "rame-orE CSS no es nada del otro mundo, sino una serie de estilos CSS Ctiles para muchas personas, pero no por eso deben ser Ctiles para ti. ;ncluso, puede que a lo largo de tu e.periencia ya hayas creado una serie de clases CSS y estilos b!sicos que ya incluyes en todos tus proyectos. 'or decirlo de alguna manera, puede que ya est$s usando tu propio *"rame-orE* rudimentario y no lo sepas. En mi opini)n, su conveniencia o no tambi$n depende de c)mo utilices el "rame-orE. Si ya conoces CSS y te interesas un poco sobre c)mo "uncionan las cosas, puedes minimizar las desventajas que tienen e incluso pueden venirte bien para aprender. Si los usas sin conocer realmente CSS y sin importarte lo que tienen dentro y qu$ est!s aplicando realmente cuando invocas las clases CSS puede que te resulten complicados y a la larga tampoco te bene"icien mucho en tu l#nea de aprendizaje como desarrollador -eb.
Referencia: Si quieres aprender algCn "rame-orE CSS te recomendamos estos manuales de 1esarrollo2eb.com, sobre dos de los "rame-orEs m!s populares/ 3.K Tlueprint 4.K _]M Nrid System

Artculo por Miguel

Angel Alvarez

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

80

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

6...& 'ntroducci(n a CSS .


CSS ? trae grandes no edades para el dise2o de 'ebs y algunos na egadores comienzan a implementar CSS ?. 1esde que CSS comenz) han pasado muchos a(os y ya vamos por la especi"icaci)n de CSS5, que incorpora una serie de novedades que vamos a tratar de resumir en este art#culo.

6...%.& 9u es CSS
Si no sabes lo que es CSS probablemente te interesar#a comenzar leyendo nuestro manual de CSS o la secci)n de CSS a "ondo. 0o obstante, cabr#a decir que CSS es un lenguaje para de"inir el estilo o la apariencia de las p!ginas -eb, escritas con HTM o de los documentos GM . CSS se cre) para separar el contenido de la "orma, a la vez que permite a los dise(adores mantener un control mucho m!s preciso sobre la apariencia de las p!ginas.

6...).& Con CSS .C m5s control sobre la 7orma


El objetivo inicial de CSS, separar el contenido de la "orma, se cumpli) ya con las primeras especi"icaciones del lenguaje. Sin embargo, el objetivo de o"recer un control total a los dise(adores sobre los elementos de la p!gina ha sido m!s di"#cil de cubrir. as especi"icaciones anteriores del lenguaje ten#an muchas utilidades para aplicar estilos a las -ebs, pero los desarrolladores aun continCan usando trucos diversos para conseguir e"ectos tan comunes o tan deseados como los bordes redondeados o el sombreado de elementos en la p!gina. CSS 3 ya signi"ic) un avance considerable a la hora de dise(ar p!ginas -eb, aportando mucho mayor control de los elementos de la p!gina. 'ero como todav#a quedaron muchas otras cosas que los dise(adores deseaban hacer, pero que CSS no permit#a especi"icar, $stos deb#an hacer uso de trucos para el dise(o. o peor de esos trucos es que muchas veces implica alterar el contenido de la p!gina para incorporar nuevas etiquetas HTM que permitan aplicar estilos de una manera m!s elaborada. 1ada la necesidad de cambiar el contenido, para alterar al dise(o y hacer cosas que CSS no permit#a, se estaba dando al traste con alguno de los objetivos para los que CSS "ue creado, que era el separar por completo el contenido de la "orma. CSS 4 incorpor) algunas novedades interesantes, que hoy ya utilizamos habitualmente, pero CSS 5 todav#a avanza un poco m!s en la direcci)n, de aportar m!s control sobre los elementos de la p!gina. +s# pues, la novedad m!s importante que aporta CSS 5, de cara a los desarrolladores de -ebs, consiste en la incorporaci)n de nuevos mecanismos para mantener un mayor control sobre el estilo con el que se muestran los elementos de las p!ginas, sin tener que recurrir a trucos o hacEs, que a menudo complicaban el c)digo de las -eb.

6.....& 0ropiedades nuevas en CSS .


He aqu# una lista de las principales propiedades que son novedad en CSS5. Bordes Condos bacEgroundKorigin bacEgroundKclip borderKcolor borderKimage borderKradius bo.Kshado-

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

81

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 'olor 1e5to Interfa+ bo.Ksizing resize outline navKtop, navKright, navKbottom, navKle"t te.tKshadote.tKover"lo>otura de palabras largas 2eb ,onts colores HS colores HS + colores >NT+ ?pacidad bacEgroundKsize hacer capas con mCltiples im!genes de "ondo

Selectores Selectores por atributos

@odelo de caja .,sico over"lo-K., over"lo-Ky

Degradados 'SSF Dtros media queries creaci)n de mCltiples columnas de te.to propiedades orientadas a discurso o lectura autom!tica de p!ginas -eb animaciones CSS5 1egradados lineales 1egradados radiales 1egradados lineales de repetici)n 1egradados radiales de repetici)n

'arte de este listado de nuevas propiedades de CSS 5 lo he sacado de/ http/HH---.css5.in"oHprevie-H. Es un sitio en ingl$s, pero puede estar bien visitar para ir conociendo m!s detalles sobre CSS 5. Sin embargo, en ese sitio "altaban algunas cosas como los degradados o las animaciones, por lo menos cuando lo visitamos, por lo que hemos completado para la realizaci)n de este #ndice.

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

82

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com En "uturos art#culos o"receremos algunas claves y e.plicaciones sobre varias de estas propiedades, al menos las m!s interesantes, as# como ejemplos que sirvan para ir conociendo esta nueva especi"icaci)n de CSS. Todo ello lo iremos colocando en el Manual de CSS 5.
Artculo por Miguel

Angel Alvarez

6.2.& @nidades CSS viewportwidt" * viewport"eig"t


@ue as unidades de CSS?5 ie'port'idth y ie'portheight. C"mo podemos hacer un 4til uso de ellas al aplicarlas a tama2os de las tipogra)as. En este art#culo vamos a hablaros de dos unidades nuevas de CSS, que tienen especial utilidad en el dise(o adaptable %conocido como *responsive*& y que vienen a solucionar algunas necesidades a la hora de de"inir tama(os en dispositivos, sobre todo Ctiles para las "uentes %o tipogra"#as&. Se trata de las unidades CSS5 *vie-port-idth* y *vie-portheight*, que son relativas a la anchura y altura del dispositivo, respectivamente.

Estas unidades son una opci)n interesante para de"inir alturas y anchuras en dispositivos. as unidades son abrevidadas con las siglas *v-* y *vh*. Su medida es equivalente a un cent$simo de la anchura o altura del dispositivo donde se est! visualizando la -eb. 'or ejemplo, si deseamos asignarle a un elemento una altura igual al tama(o completo del dispositivo, le aplicaremos el valor 3MMvp. 'or e.presarlo mediante porcentajes, 3v- [ 39 de la anchura del dispositivo. 'or su parte, 3vh [ 39 de la altura del dispositivo.
Nota: 'ara entender mejor estas medidas, si es que no lo sabes ya, te interesa saber lo que es el *6ie-port*. En resumen, vie-port es igual a las dimensiones de la pantalla de tu m)vil o tableta, mientras que en ordenadores de escritorio ser#an las dimensiones de la ventana del navegador.

a pega del vie-portheight, bastante importante, es que solo "unciona en dispositivos m)viles y no en ordenadores de escritorio. 'ero aun as# merece la pena conocer y aplicar cuando realmente le podamos sacar partido, siempre en tel$"onos y tabletas, porque en desktop tiene unos comportamientos un poco err!ticos.

6.2.%.& @so de viewport"eig"t para de7inir alturas de una manera c(moda


as alturas en CSS siempre son un quebradero de cabeza cuando se quiere usar medidas relativas, con unidades como *9* de CSS. Seguramente que si tenemos algo de e.periencia sobre maquetaci)n -eb se sabe de lo que estamos hablando. 'ara tener las alturas *controladas* con unidades relativas de CSS tenemos que darle dimensiones de altura a todos los contenedores. ? sea, de"inir las dimensiones de height de todos los elementos de la jerarqu#a del documento hasta llegar al elemento que realmente queramos de"inir su altura con un valor porcentual. a opci)n para alturas es el vie-portheight El correspondiente *compa(ero* de 6ie-portheight para las anchuras, vie-port-idth, no es tan crucial para de"inir las dimensiones -idth, debido a que los comportamientos de unidades CSS para las anchuras no nos dan ningCn problema. 'ero no conviene perderlo de vista, especialmente pensando en las tipogra"#as.

6.2.).& Medidas QviewportQ para tipogra7$as


Estas medidas, tanto vie-portheight como vie-port-idth, tienen un comportamiento especial que merece la pena mencionar. dSe puede usar en la tipogra"#aP Esto quiere decir que podemos asignarle medidas en vie-port-idth a un

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

83

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com te.to y $ste siempre te medir! lo mismo en todas las pantallas, relativamente a las dimensiones de la pantalla que tengamos. 'ara que nos enteremos, si de"inimos el tama(o de una "uente con vie-port-idth, y si en un dispositivo vemos que ocupa un LM9 de la anchura de su pantalla, podemos tener certeza de que, en todos los dispositivos ocupar! m!s o menos ese mismo porcentaje de anchura de la pantalla, aunque estemos trabajando con una resoluci)n di"erente. o asombroso de todo esto es que el tama(o de la letra es *responsive*, o en castellano *adaptable*, sin necesidad de utilizar ningCn script para conseguirlo o de otras t$cnicas como mediaqueries que se podr#an aplicar con CSS para intentar conseguir ese e"ecto de "luidez. ?s animamos a probar estas medidas de CSS para sacar vuestras conclusiones. Su uso no di"iere de cualquier otro que puedas estar trabajando en tus hojas de estilo.
body{ $ontsi4e: .5#w } h1{ $ontsi4e: M.J#h }

Es una maravilla que podemos usar y al menos en dispositivos nos dar! la tranquilidad de que esas "uentes se van a ver igual de grandes, relativamente al tama(o de la pantalla donde se est$ mostrando la p!gina.
Nota: Esta in"ormaci)n la hemos e.tractado del evento transmitido en directo 7nidades de medida CSS Jdesign;?, realizado en 1esarrollo2eb.com con la participaci)n de 1aniel Mart#nez R2aEEos y 1aniel >uiz RMr6iSi?n4, que nos o"recieron mucha in"ormaci)n sobre unidades de medida en hojas de estilo en cascada y con la mente en el dise(o adaptable. Si te interesan las medidas CSS m!s adecuadas para dise(os adaptables te recomendamos leer tambi$n el art#culo 7nidades de medida CSS para "uentes >esponsive 2eb 1esign.

Artculo por $aniel

Martnez

Manual de CSS: desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html


, -os manuales de DesarrolloWeb.com tienen el copyright de sus autores. .o reproducir sin autorizaci&n.

84

You might also like