Professional Documents
Culture Documents
com
Serviweb
Leonardo A. Correa
http://www.webno#a.com.ar ($ cap!tulo"
http://www.recursos+lash.es (2 cap!tulos"
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"
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.
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
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&
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
'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=.
%...).& 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
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#.
+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
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.
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=.
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
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.
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
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.%.& 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# { }
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.
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.
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.
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.
11
%.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+
12
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.%).& 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
13
Parte 2:
14
Fue tiene como resultado/ Esto es un p!rra"o con varias palabras en color verde. resulta muy "!cil.
Fue tiene como resultado/ Esto es un p!rra"o de color rojo. Esto es un p!rra"o de color azul.
Angel Alvarez
15
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.
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$"
)& *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*
17
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
18
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.
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
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
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.
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 .
Angel Alvarez
22
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
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%*
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
23
te&t-decoration
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
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
!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*
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
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
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
24
/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
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
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*
25
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.
Angel Alvarez
..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.
*jem lo:
L {$ont: italic nor!al bold 1 px+1Mpt 0erdana- Naho!a- 9rial}
*jem lo:
<ody {background: #888 url>..+i!ages+e/e!plo.gi$? no"repeat $ixed center}
26
*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+
*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+
*jem lo:
Q& {border: thick dotted blue}
Elgarte
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.
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.
+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/ *.
28
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
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
29
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com UHhtmlV 6er el ejemplo anterior
30
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.
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
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.
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
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
35
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com deber#a ser un problema realizar esas acciones.
Angel Alvarez
36
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.
37
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.
38
Campaa
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%
39
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
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.
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
42
Parte 5:
43
'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.
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.
Angel Alvarez
'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.
'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/
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.
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.
Angel Alvarez
46
? 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.
47
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.
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
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.
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
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.
51
'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.
52
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*%
Angel Alvarez
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/
54
Angel Alvarez
Parte #:
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/
55
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; }
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.
56
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
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.
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/
57
+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#.
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.
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.
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.
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.).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.
60
0hilip 1alton
Artculo por OldMith
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
61
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.
62
+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.
63
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
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.
CSS Sem!nticas. ;ncluye los distintos CSS descritos. '!gina ejemplo en GHTM con una maquetaci)n tipo basada en capas
o!" uan Corpa! Marto!
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.
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
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;
1ebe ser/
color: #eaUbc ;
? esto otro/
color: rgb > &M.10T.1RM?;
66
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.
Este estilo solo puede ser aplicado a -idth y height pero no a padding.
67
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com dejando ningCn espacio.
#utierrez
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.).& 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
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
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; }
70
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.
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.
Angel Alvarez
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.
72
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
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.
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.
Angel Alvarez
75
Parte (:
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.%.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
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
Angel Alvarez
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.
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.
Angel Alvarez
80
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.
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
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.
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
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.
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.
Martnez
84