Manual Css Hojas Estilo PDF

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

Manual de CSS, hojas de estilo
Tutorial completo y prctico sobre hojas de estilo en cascada (CSS). Aprende a utilizar esta
tecnologa que te ayudar a crear pginas ms atractias y precisas. !l curso contiene la
descripci"n# uso# sinta$is# y lista de atributos para crear estilos
Autores del manual
Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez
Director de DesarrolloWeb.com
http://www.desarrolloweb.com
(27 captulos)
Federico Elgarte
http://www.cssboulear.com.ar/
(! captulo)
Fernando Campaa
"rogramaci#n $ %ultimedia
http://www.ra&idwam.com.ar/
(2 captulos)
Serviweb
Dise'o web %urcia
http://www.seriweb.es/
(! captulo)
Leonardo A. Correa
http://www.webnoa.com.ar
(! captulo)
Jos Juan Corpas Martos
http://www.recursos(lash.es
(2 captulos)
Manu utierrez
http://www.tu(uncion.com
(! captulo)
Manual de CSS, hojas de estilo: http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html
) *os manuales de DesarrolloWeb.com tienen el cop+right de sus autores. ,o reproducir sin autorizaci#n.
1
Parte 1:
Qu es CSS
-omenzamos presentando las .o/as de Estilo en -ascada + e0plicando de 1u2 manera
a+udan a los dise'adores de p3ginas web.
!.!." #ntroducci$n a las CSS
%na bree introducci"n a CSS# para las personas que no saben nada sobre la tecnologa el por qu& de su
creaci"n y c"mo ayuda a hacer pginas 'eb mejores.
Entramos en materia con los antecedentes de CSS, las razones por las que se han desarrollado las hojas de estilo en
cascada, y los objetivos que trata de cumplir.
El lenguaje HTM est! limitado a la hora de aplicarle "orma a un documento. Esto es as# porque "u$ concebido para otros
usos %cient#"icos sobretodo&, distinto a los actuales, mucho m!s amplios.
'ara solucionar estos problemas los dise(adores han utilizado t$cnicas tales como la utilizaci)n de tablas imagenes
transparentes para ajustarlas, utilizaci)n de etiquetas que no son est!dares del HTM y otras. Estas *trampas* han causado a
menudo problemas en las p!ginas a la hora de su visualizaci)nen distintas plata"ormas.
+dem!s, los dise(adores se han visto "rustrados por la di"icultad con la que, aun utilizando estos trucos, se encontraban a la
hora de maquetar las p!ginas, ya que muchos de ellos venian maquetando p!ginas sobre el papel, donde el control sobre la
"orma del documento es absoluto.
,inalmente, otro antecedente que ha hecho necesario el desarrollo de esta tecnolog#a consiste en que las p!ginas -eb tienen
mezclado en su c)digo HTM el contenido del documento con las etiquetas necesarias para darle "orma. Esto tiene sus
inconvenientes ya que la lectura del c)digo HTM se hece pesada y di"#cil a la hora de buscar errores o depurar las p!ginas.
+unque, desde el punto de vista de la riqueza de la in"ormaci)n y la utilidad de las p!ginas a la hora de almacenar su
contenido, es un gran problema que estos te.tos est/aacuteen mezclados con etiquetas incrustadas para dar "orma a estos0
se degrada su utilidad.
En estas p!ginas de CSS pretendemos dar a conocer la tecnolog#a con un en"oque pr!ctico para que en pocos cap#tulos
pod!is usar las CSS de una manera depurada, re"lejando toda nuestra e.periencia en su uso. 1o pretendendemos e.plorar
todos los aspectos de la tecnolog#a ya que para realizar esto necesitariamos un la e.tensi)n de un libro entero.
Referencia: Este manual trata los aspectos m!s te)ricos de las hojas en cascada. En 2esarrollo3eb.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 4 y CSS 5 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 6.
+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 7ideotutorial de CSS.
2
Artculo por Miguel Angel Alvarez
!.%." Caracter&sticas ' venta(as de las CSS
Conoce las principales caractersticas del lenguaje# su potencia y sus posibilidades.
El modo de "uncionamiento de las CSS consiste en de"inir, mediante una sinta.is especial, la "orma de presentaci)n que le
aplicaremos a0
8n -eb entero, de modo que se puede de"inir la "orma de todo el -eb de una sola vez.
8n documento HTM o p!gina, se puede de"inir la "orma, en un peque(o trozo de c)digo en la cabecera, a toda la
p!gina.
8na porci)n del documento, aplicando estilos visibles en un trozo de la p!gina.
8na etiqueta en concreto, llegando incluso a poder de"inir varios estilos di"erentes para una sola etiqueta. Esto es
muy importante ya que o"rece potencia en nuestra programaci)n. 'odemos de"inir, por ejemplo, varios tipos de
p!rra"os0 en rojo, en azul, con margenes, sin ellos...
a potencia de la tecnolog#a salta a la vista. 'ero no solo se queda aqu#, ya que adem!s esta sinta.is CSS permite aplicar al
documento "ormato de modo mucho m!s e.acto. Si antes el HTM se nos quedaba corto para maquetar las p!ginas y
ten#amos que utilizar trucos para conseguir nuestros e"ectos, ahora tenemos muchas m!s herramientas que nos permiten
de"inir esta "orma0
'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.
9 mucho m!s, como de"inir la visibilidad de los elementos, margenes, subrayados, tachados...
9 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 como0
'i.els %p.& y porcentaje %:&, como antes.
'ulgadas %in&
'untos %pt&
Cent#metros %cm&
!.%.!." )avegadores *ue lo soportan
Esta tecnolog#a es bastante nueva, por lo que no todos los navegadores la soportan. En concreto, s)lo los navegadores de
1etscape versiones de la ; en adelante y de Microso"t a partir de la versi)n 6 son capaces de comprender los estilos en
sinta.is CSS. +dem!s cabe destacar que no todos los navegadores implementan las mismas "unciones de hojas de estilos, por
ejemplo, Microso"t <nternet E.plorer 6 no soporta todo lo relativo a capas.
Esto quiere decir que debemos de usar esta tecnolog#a con cuidado, ya que muchos usuarios no podr!n ver los "ormatos que
apliquemos a las p!ginas con CSS. +s# pues, utilizad las hojas de estilos cuando estas no vayan a suponer un problema.
3
Parte 2:
Distintas maneras de
incluir estilos
E0isten distintas (ormas de de(inir estilos en una p3gina4 a diersos nieles 1ue an
desde las m3s espec(icas4 1ue permitiran de(inir estilos en un pe1ue'o te0to de una
p3gina4 hasta las m3s generales4 para de(inir estilos para toda una p3gina o incluso un
sitio web.
%.!." +sos de las CSS #
(escribimos las distintas aplicaciones de las )ojas de !stilo en cascada. !n este captulo eremos las ms
sencillas.
CSS sirve para de"inir el aspecto de las p!ginas -eb, eso ya debe haber quedado claro. 1o obstante, hay di"erentes niveles a
los que podemos aplicar los estilos y es algo que vamos a describir ahora.
Hemos denominado a este apartado los di"erentes usos de las CSS y relata justamente eso, los distintos niveles a los que
podemos usar las Hojas de Estilo, que van desde de"inir los estilos de manera espec#"ica, para un peque(o "ragmento de una
p!gina, hasta los estilos para todo un sitio -eb completo. Todo esto pasando por diversos otros niveles que resultar!n de
mucha utilidad tambi$n en nuestro d#a a d#a como dise(adores.
7amos por orden, describiendo los puntos desde el m!s espec#"ico al m!s general, de manera que que tambi$n iremos
aumentando la di"icultad e importancia de los distintos usos. Hemos partido este cap#tulo en dos partes por su e.tensi)n y
por haber varias "ormas distintas de aplicar estilos, aqu# veremos las m!s sencillas y en el cap#tulo siguiente otras m!s
complicadas pero m!s potentes.
Nota: CSS tiene una sinta.is propia. En este art#culo o"receremos diversos c)digos de CSS, aunque no hemos e.plicado la sinta.is todav#a.
+ trav$s de los pr).imos ejemplos veremos una peque(a introducci)n a la manera de escribir c)digo CSS, pero lo e.plicaremos con detalle
m!s adelante cuando tratemos la sinta.is CSS.
%.!.!." ,e*ueas partes de la p-gina
'ara de"inir estilos en secciones reducidas de una p!gina se utiliza la etiqueta <SPAN>. Con su atributo style indicamos en
sinta.is CSS las caracter#sticas de estilos. o vemos con un ejemplo, pondremos un p!rra"o en el que determinadas palabras
las vamos a visualizar en color verde.
<p>
Esto es un prrafo en varias palabras <SPAN style="color:reen">en color ver!e<"SPAN># resulta $uy fcil#
<"p>
=ue tiene como resultado0
Esto es un p!rra"o con varias palabras en color verde. resulta muy "!cil.
%
%.!.%." Estilo de.inido para una eti*ueta
2e este modo podemos hacer que toda una etiqueta muestre un estilo determinado. 'or ejemplo, podemos de"inir un
p!rra"o entero en color rojo y otro en color azul. 'ara ello utilizamos el atributo style, que es admitido por todas las
etiquetas del HTM %siempre y cuando dispongamos de un navegador compatible con CSS&.
<p style="color:&''((((">
Esto es un prrafo !e color ro)o#
<"p>
<p style="color:&((((''">
Esto es un prrafo !e color a*ul#
<"p>
Esto es un p!rra"o de color rojo.
Esto es un p!rra"o de color azul.
%.!./." Estilo de.inido en una parte de la p-gina
Con la etiqueta <DIV> podemos de"inir secciones de una p!gina y aplicarle estilos con el atributo style, es decir, podemos
de"inir estilos de una vez a todo un bloque de la p!gina.
<!iv style="color:&((((''+ font,-ei.t:bol!">
<.3>Estas eti/uetas van en <i>a*ul y nerita<"i><".3>
<p>
Seui$os !entro !el 0123 lueo per$anecen los etilos
<"p>
<"!iv>
Estas eti*uetas van en azul y negrita
Seguimos dentro del DIV, luego ermanecen los etilos
Hasta aqu# hemos visto los usos de las CSS m!s espec#"icos. Esta in"ormaci)n continua en el pr).imo cap#tulo, en el que
seguiremos viendo otras "ormas m!s avanzadas de usar las CSS.
Nota: 'ara aprender de una manera visual y pr!ctica los di"erentes usos de las CSS recomendamos ver la primera parte del videotutorial sobre
las CSS.
%.%." +sos de las CSS ' ##
Te describimos los usos ms aanzados de las hojas de estilo en cascada. *ara poder utilizarlas de la
manera ms potente.
%.%.!." Estilo de.inido para toda una p-gina
'odemos de"inir, en la cabecera del documento, estilos para que sean aplicados a toda la p!gina. Es una manera muy
c)moda de darle "orma al documento y muy potente, ya que estos estilos ser!n seguidos en toda la p!gina y nos
ahorraremos as# muchas etiquetas HTM que apliquen "orma al documento. +dem!s, si deseamos cambiar los estilos de la
p!gina lo haremos de una sola vez.
4
Este ejemplo es m!s complicado, puesto que se utiliza la sinta.is CSS de manera m!s avanzada. 'ero no te preocupes puesto
que con los ejemplos ir!s aprendiendo su uso y m!s tarde comentaremos la sinta.is en pro"undidad.
En el ejemplo vemos que se utiliza la etiqueta >ST9E? colocada en la cabecera de la p!gina para de"inir los distintos
estilos del documento.
+ grandes rasgos, entre de >ST9E? y >@ST9E?, se coloca el nombre de la etiqueta que queremos de"inir los estilos y
entre llaves ABCA colocamos en sinta.is CSS las caracter#sticas de estilos.
<.t$l>
<.ea!>
<title>E)e$plo !e estilos para to!a una p5aacute+ina<"title>
<S678E type="te9t"css">
<:,,
;1 <te9t,!ecoration: un!erline+ te9t,alin:center=
P <font,>a$ily:arial3ver!ana+ color: -.ite+ bac?roun!,color: blac?=
@A07 <color:blac?+bac?roun!,color: &cccccc+ te9t,in!ent:1c$=
"" ,,>
<"S678E>
<".ea!>
<bo!y>
<.1>P5aacute+ina con estilos<".1>
@ienveni!os###
<p>Siento ser tan .ortera3 pero esto es un e)e$plo sin $5aacute+s i$portancia<"p>
<"bo!y>
<".t$l>
Como se puede apreciar en el c)digo, hemos de"inido que la etiqueta >H4? se presentar!
Subrayado
Centrada
Tambi$n, por ejemplo, hemos de"inido que el cuerpo entero de la p!gina %etiqueta >DE29?& se le apliquen los estilos
siguientes0
Color del te.to negro
Color del "ondo grisaceo
Margen lateral de 4 cent#metro
Caber destacar que si aplicamos estilos a la etiqueta >DE29?, 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 >'?, que tiene de"inidos estilos que ya
"ueron de"inidos para >DE29?. os estilos que se tienen en cuenta son los de la etiqueta >'?, que es m!s concreta.
'or Fltimo, ha de apreciarse los comentarios HTM que engloban toda la declaraci)n de estilos0 >GAA2eclaraci)n de estilosAA
?. 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 1etscape 6& escribir#an ese *"eo
c)digo* en la p!gina.
Pulsa ara !er el ejemlo anterior"
Hemos preparado la misma p!gina, pero con declaraciones de estilos distintas, para que comprob$is las di"erencias en la
"orma del documento con s)lo unos cambios en sus estilos. Puedes !erla inchando a#u$"
%.%.%." Estilo de.inido para todo un sitio web
8na de las caracter#sticas m!s potentes de la programaci)n con hojas de estilos consiste en que, de una vez, podemos de"inir
los estilos de todo un sitio -eb. Esto se consigue creando un archivo donde tan s)lo colocamos las declaraciones de estilos
de la p!gina y enlazando todas las p!ginas del sitio con ese archivo. 2e este modo, todas las p!ginas comparten una misma
declaraci)n de estilos y, por tanto, si la cambiamos, cambiar!n todas las p!ginas. Con las ventajas a(adidas de que se ahorra
en l#neas de c)digo HTM %lo que reduce el peso del documento& y se evita la molestia de de"inir una y otra vez los estilos
con el HTM, tal como se coment) anteriormente.
7eamos ahora c)mo el proceso para incluir estilos con un "ichero e.terno.
B
%& 'reamos el fichero con la declaraci(n de estilos
Es un "ichero de te.to normal, que puede tener cualquer e.tensi)n, aunque le podemos asignar la e.tensi)n .css para
aclararnos qu$ tipo de archivo es. El te.to que debemos incluir debe ser escrito e.clusivamente en sinta.is CSS, es decir,
ser#a erroneo incluir c)digo HTM en el0 etiquetas y dem!s. 'odemos ver un ejemplo a continuaci)n.
P <
font,si*e : 12pt+
font,fa$ily : arial3.elvetica+
font,-ei.t : nor$al+
=
;1 <
font,si*e : 3Bpt+
font,fa$ily : ver!ana3arial+
te9t,!ecoration : un!erline+
te9t,alin : center+
bac?roun!,color : 6eal+
=
60 <
font,si*e : 1(pt+
font,fa$ily : ver!ana3arial+
te9t,alin : center+
bac?roun!,color : BBBBBB+
=
@A07 <
bac?roun!,color : &((BB((+
font,fa$ily : arial+
color : C.ite+
=

)& *nla+amos la ,gina -e. con la hoja de estilos
'ara ello, vamos a colocar la etiqueta ><1H? con los atributos
rel/0S123*S4**10 indicando que el enlace es con una hoja de estilos
tye/0te5t6css0 porque ela archivo es de te.to, en sinta.is CSS
href/0estilos"css0 indica el nombre del "ichero "uente de los estilos
7eamos una p!gina -eb entera que enlaza con la declaraci)n de estilos anterior0
<:0AD67PE ;6E8 PF@81D ",""C3D""060 ;6E8 %#( 6ransitional""EN">
<.t$l>
<.ea!>
<lin? rel="S678ES;EE6" type="te9t"css" .ref="estilos#css">
<title>P5aacute+ina /ue lee estilos<"title>
<".ea!>
<bo!y>
<.1>P5aacute+ina /ue lee estilos<".1>
Esta p5aacute+ina tiene en la cabecera la eti/ueta necesaria para enla*ar con la .o)a !e estilos# Es $uy f5aacute+cil#
<br>
<br>
<table -i!t.="3((" cellspacin="2" cellpa!!in="2" bor!er="(">
<tr>
<t!>Esto est5aacute+ !entro !e un 603 lueo tiene estilo propio3 !eclara!o en el fic.ero e9terno<"t!>
<"tr>
<tr>
<t!>8a seun!a fila !el 60<"t!>
<"tr>
<"table>
<"bo!y>
<".t$l>
*l resultado conseguido se uede !er a#u$
G
%.%./." 0eglas de importancia en los estilos
os estilos se heredan de una etiqueta a otra, como se indic) anteriormente. 'or ejemplo, si tenemos declarado en el
>DE29? unos estilos, por lo general, estas declaraciones tambi$n a"ectatar!n a etiquetas que est$n dentro de esta etiqueta,
o lo que es lo mismo, dentro de todo el cuerpo.
En muchas ocasiones m!s de una declaraci)n de estilos a"ecta a la misma porci)n de la p!gina. Siempre se tiene en cuenta la
declaraci)n m!s particular. 'ero las declaraciones de estilos se pueden realizar de mFltiples modos y con varias etiquetas,
tambi$n entre estos modos hay una jerarqu#a de importancia para resolver con"lictos entre varias declaracionesde estilos
distintas para una misma porci)n de p!gina. Se puede ver a continuaci)n esta jerarqu#a, primero ponemos las "ormas de
declaraci)n m!s generales, y por tanto menos respetadas en caso de con"licto0
2eclaraci)n de estilos con "ichero e.terno. %'ara todo un sitio -eb&
2eclaraci)n de estilos para toda la p!gina. %Con la etiqueta >ST9E? en la cabecera de la p!gina&
2e"inidos en una etiqueta en concreto. %8tilizando el atributo style en la etiqueta en cuesti)n&
2eclaraci)n de estilo para una porci)n peque(a del documento. %Con la etiqueta >S'+1?&
9a 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
materia0 conocer la sinta.is, los distintos atributos de estilos y otras cosas que mejorar!n tus p!ginas.
%./." 1tra manera de de.inir estilos en un arc2ivo e3terno
Tambi&n podemos incluir estilos en un archio e$terno con un c"digo con la sinta$is +import
url(,estilo.css,). Se utiliza para de-inir estilos comunes cuando hay tambi&n de-inici"n de estilos
espec-icos.
7eamos ahora otra manera de importar una declaraci)n e.terna de estilos CSS0 Iimport url%*archivoJaJimportar.css*&, que
se utiliza para importar unas declaraciones de estilos guardadas en la ruta que se indica entre par$ntesis. %las comillas son
opcionales, pero los par$ntesis son obligatorios, por lo menos, en E.plorer&.
Se debe incluir en la declaraci)n de estilos global a una p!gina, es decir entre las etiquetas >style typeK*te.t@css*? y
>@style?, que se colocan en la cabecera del documento.
Es importante se(alar que la sentencia de importaci)n del archivo CSS se debe escribir en la primera l#nea de la declaraci)n
de estilos, algo parecido al c)digo siguiente.
<style type="text/css">
@import url ("estilo.css");
body{
backgroundcolor!"####cc;
$
</style>
El "uncionamiento es el mismo que si escribi$semos todo el "ichero a importar dentro de las etiquetas de los estilos, con la
salvedad de que, si rede"inimos dentro del c)digo HTM %entre las etiquetas >@style?& 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)n0 L""""cc
a di"erencia entre este tipo de importaci)n del tipo y la que hemos visto anteriormente0
<link rel="styles%eet" type="text/css" %re#="%o&a.css">
Es que Iimport url %*estilo.css*& se suele utilizar cuando hay unas pautas b!sicas en el trabajo con los estilos %que se de"inen
H
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 >@style?, como es el caso del ejemplo visto anteriormente.
Parte 3:
lenguaje CSS
Distintos apartados 1ue tienen 1ue er directamente con el lengua/e utilizado para
de(inir los estilos en p3ginas web4 el -55. 6eremos su sinta0is4 los di(erentes atributos o
reglas de estilo 1ue podemos aplicar a los elementos + c#mo seleccionar con/untos de
elementos de la p3gina para aplicarles estilo agrupados o por separado.
/.!." Sinta3is ' unidades CSS
!n este captulo e$plicamos la sinta$is CSS# de hojas de estilo en cascada# con especial atenci"n a las
unidades CSS.
Tal como se vi) en los ejemplos de los art#culos anteriores del Manual de CSS, la sinta.is es bastante sencilla y repetitiva.
D!sicamente se trata de colocar selectores de elementos %por ahora s)lo hemos visto c)mo seleccionar etiquetas, para
asignarles estilos, pero m!s adelante conoceremos otros selectores&, seguidos de los valores o atributos de estilo que
queramos aplicar a dichos elementos.
+ lo largo del manual aprenderemos m!s sobre la sinta.is de CSS, as# como los distintos atributos disponibles para de"inir el
"ormato o "orma con la que se deben mostrar los contenidos. 1o obstante, quiero dar en este momento unas reglas b!sicas
que debemos saber sobre la sinta.is de CSS, que nos servir!n para entender mejor nuestros ejemplos e ir avanzando en el
conocimiento de las hojas de estilo en cascada.
7eamos entonces estas reglas b!sicas sobre la sinta.is CSS0
'ara de"inir un estilo se utilizan atributos como "ontAsize,te.tAdecoration... 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.
*jemlo:
font&si+e: %7t8 te5t&decoration: underline8 color: .lac98 %el Fltimo 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.
*jemlo:
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!as0 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 siguientes0
7uente actual: em
la unidad em es relatia a la (uente actual con la 1ue se est3 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 puntos4 !em ser3 igual a !2
puntos + 2em ser3 igual a 28 puntos.
9ltura de la letra
:0::
e3
!e0 ser3 igual a la altura de la letra 04 seg;n la (uente actual del usuario.
*a altura de la letra 0 generalmente es la mitad de la de la (uente
normal.
"0eles: p3
<n pi0el es un punto en la pantalla del dispositio. Dependiendo de la
resoluci#n de la pantalla4 un p0el puede ser ma+or o menor.
A.solutas0 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 Ftiles,
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 4 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
<n punto es !/72 pulgadas
"ulgadas in
-entmetros cm
%ilmetros mm
"icas pc
<na pica son !2 puntos.
Porcentaje: el porcentaje se utiliza para de"inir una unidad en "unci)n de la que est$ de"inida en un momento
dado. <maginemos que estamos trabajando en 45pt y de"inimos una unidad como 4MN:. Esto ser#a igual al 4MN:
de los 45pt actuales, que equivale a 4Opt.
"orcenta/e 4
"or e/emplo !2=> es el !2= por cien de la
unidad 1ue estuiera anteriormente.
os colores se e.presan con valores PQD, igual que los que conocemos para los colores HTM. Con la salvedad
que un color se puede especi"icar tambi$n con tres nFmeros he.adecimales, en lugar de R, como era obligatorio en
1(
HTM. 'or ejemplo L""" equivaldr#a a L"""""", o L456 ser#a L445566. +dem!s, los colores se pueden especi"icar
tambi$n en valores PQD decimales, con la notaci)n rgb%r,g,b&, siendo los valores de r, g, b nFmeros entre N y 5MM,
por ejemplo rgb%4NN,N,5MM&. Etra notaci)n posible es rgb%r:,g:,b:&, siendo cada uno de los r:,g:, b: un valor
entre N y 4NN, por ejemplo rgb%4NN:,MN:,N:&, que ser#a todo de rojo, la mitad de verde y cero de azul.
Etro tipo de valores que se pueden utilizar en las hojas de estilo en cascada son las 8P, que sirven para
especi"icar rutas hacia elementos como im!genes a colocar en "ondos de elementos. as 8P en CSS se especi"ican
con la notaci)n url%valor&, siendo valor la 8P 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
8P se puede indicar con comillas dobles, simples o sin comillas. 'or ejemplo0
url%http0@@---.desarrollo-eb.com@images@miimagen.gi"&
url%*..@images@otraimagen.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.
/.%." )otaci$n de colores CSS
.arias maneras# sinta$is o notaciones para de-inir colores con CSS de los elementos de la pgina.
Con CSS se puede especi"icar colores para cada elemento HTM de la p!gina, incluso hay elementos que podr#an admitir
varios colores, como el color de "ondo o el color del borde. 'ero bueno, vamos a ver ahora es las distintas maneras de
escribir un color en una declaraci)n CSS.
'orque lo m!s habitual es que especi"iquemos un color con su valor PQD, de una manera similar a como aprendimos a
de"inir colores en HTM. 'ero en CSS tenemos otras maneras de declarar colores que pueden interesarnos, como m#nimo
para poder entender el c)digo CSS cuando lo veamos escrito.
/.%.!." )otaci$n 2e3adecimal 05
Esta notaci)n es la que ya conocemos. Se especi"ican los tres valores de color %rojo, verde y azul& con valores en he.adecimal
entre NN y ,,.
backgroundcolor! "##''((;
/.%.%." )otaci$n 2e3adecimal abreviada
Esta notaci)n es muy parecida a la anterior, pero permite abreviar un poco la declaraci)n del color, indicando s)lo un
nFmero para cada valor rojo, verde y azul. 'or ejemplo, para especi"icar el color de antes %L""OONN& podr#amos haber escrito0
backgroundcolor! "#'(;
/.%./." )ombre del color
Tambi$n podemos de"inir un color por su nombre. os nombres de colores son en ingl$s, los mismos que sirven para
especi"icar colores con HTM.
color! red;
bordercolor! )ime;
11
/.%.6." )otaci$n de color con porcenta(es de 05
Se puede de"inir un color por los distintos porcentajes de valores PQD. Si todos los valores est!n al 4NN: el color es blanco.
Si todos est!n al N: obtendr#amos el negro y con combinaciones de distintos porcentajes de PQD obtendr#amos cualquier
matiz de color.
color! rgb(**+, (+, (+);
/.%.7." )otaci$n por valores decimales de 058 de 9 a %77
2e una manera similar a la notaci)n por porcentajes de PQD se puede de"inir un color directamente con valores decimales
en un rango desde N a 5MM.
color! rgb(-((,-..,();
2e entre todas estas notaciones podemos utilizar la que m!s nos interese o con la que nos sintamos m!s a gusto. 1osotros
en nuestros ejemplos venimos utilizando la notaci)n he.adecimal PQD por habernos acostumbrado a ella en HTM.
/.%.:." Color transparente
'ara "inalizar, podemos comentar que tambi$n e.iste el color transparente, que no es ningFn color, sino que espec#"ica que el
elemento debe tener el mismo color que el "ondo donde est!. Este valor, transparent, sustituye al color. 'odemos indicarlo
en principio s)lo para "ondos de elementos, es decir, para el atributo bacSgroundAcolor.
backgroundcolor! transparent;
/./." Atributos de las 2o(as de estilo
!$plicaci"n y ejemplos de los distintos atributos de las CSS. *odrs encontrar la lista en una tabla para
imprimirtela y trabajar -cilmente.
Tanto para practicar en tu aprendizaje como para trabajar con las CSS lo mejor es disponer de una tabla donde se vean los
distintos atributos y valores de estilos que podemos aplicarle a las p!ginas -eb.
+qu# puedes ver la tabla de los atributos CSS m!s "undamentales para aplicar estilos a elementos b!sicos, que te vendr!
per"ectamente para comenzar con las CSS. E.isten muchos otros atributos que aprender!s en cap#tulos sucesivos del Manual
de CSS. Pecuerda adem!s que si quieres ver c)mo se aplican muchos de estos estilos en p!ginas -eb puedes ver el v#deo
tutorial sobre los atributos de las CSS.
Nombre del atributo Posibles valores Ejemplos
FUENTES - FONT
color
valor IJ@ o no$bre !e color
color: &((''((+
color: re!+
Sirve para in!icar el color !el te9to# 8o a!$iten casi to!as las eti/etas !e ;6E8# No to!os los no$bres !e colores son
a!$iti!os en el estan!ar3 es aconse)able entonces utili*ar el valor IJ@#
font-size
99,s$all K 9,s$all K s$all K $e!iu$ K lare K 9,lare
K 99,lare
Fni!a!es !e DSS
font,si*e:12pt+
font,si*e: 9,lare+
12
Sirve para in!icar el ta$aLo !e las fuentes !e $anera $s rMi!a y con $ayor e9actitu!#
font-family
serif K sans,serif K cursive K fantasy K $onospace
6o!as las fuentes .abituales
font,fa$ily:arial3.elvetica+
font,fa$ily: fantasy+
Don este atributo in!ica$os la fa$ilia !e tiporafia !el te9to# 8os pri$eros valores son enNricos3 es !ecir3 los e9plora!ores
las co$pren!en y utili*an las fuentes /ue el usuario tena en su siste$a#
6a$biNn se pue!en !efinir con tiporafMas nor$ales3 co$o ocurrMa en .t$l# Si el no$bre !e una fuente tiene espacios se
utili*an co$illas para /ue se entien!a bien#
font-wei!t
nor$al K bol! K bol!er K li.ter K 1(( K 2(( K 3(( K
%(( K 4(( K B(( K G(( K H(( K '((
font,-ei.t:bol!+
font,-ei.t: 2((+
Sirve para !efinir la anc.ura !e los caracteres3 o !ic.o !e otra $anera3 para poner nerillas con total liberta!#
Nor$al y %(( son el $is$o valor3 asM co$o bol! y G((#
font-style
nor$al K italic K obli/ue
font,style:nor$al+
font,style: italic+
Es el estilo !e la fuente3 /ue pue!e ser nor$al3 itlica u oblMcua# El estilo obli/ue es si$ilar al italic#
P"##$FOS - TE%T
line-!ei!t
nor$al y uni!a!es DSS
line,.ei.t: 12p9+
line,.ei.t: nor$al+
El alto !e una lMnea3y por tanto3 el espacia!o entre lMneas# Es una !e esas caracterMsticas /ue no se po!ian $ofificar utili*an!o
;6E8#
te&t-decoration
none K O un!erline KK overline KK line,t.rou. P
te9t,!ecoration: none+
te9t,!ecoration: un!erline+
Para establecer la !ecoraciQn !e un te9to3 es !ecir3 si est subraya!o3 sobreraya!o o tac.a!o#
te&t-alin
left K ri.t K center K )ustify
te9t,alin: ri.t+
te9t,alin: center+
Sirve para in!icar la alineaciQn !el te9to# Es interesante !estacar /ue las .o)as !e estilo per$iten el )ustifica!o !e te9to3
aun/ue recuer!a /ue no tiene por /ue funcionar en to!os los siste$as#
te&t-indent
Fni!a!es DSS
te9t,in!ent: 1(p9+
te9t,in!ent: 2in+
Fn atributo /ue sirve para .acer sanra!o o $renes en las pinas# Euy Rtil y nove!osa#
te&t-transform
capitali*e K uppercase K lo-ercase K none
te9t,transfor$: none+
te9t,transfor$: capitali*e+
Nos per$ite transfor$ar el te9to3 .acien!o /ue tena la pri$era letra en $ayRsculas !e to!as las palabrs3 to!o en
$ayRsculas o $inRsculas#
FON'O - ($)*+#OUN'
(ac,round-color
Fn color3 con su no$bre o su valor IJ@ bac?roun!,color: reen+
13
bac?roun!,color: &((((44+
Sirve para in!icar el color !e fon!o !e un ele$ento !e la pina#
(ac,round-imae
El no$bre !e la i$aen con su ca$ino relativo o
absoluto
bac?roun!,i$ae: urlS$r$ol#ifT +
bac?roun!,i$ae:
urlS.ttp:""---#9#co$"fon!o#ifT
Doloca$os con este atributo una i$aen !e fon!o en cual/uier ele$ento !e la pina3 se pue!e ver una p-ina de ejemplo
(O% - )$.$
/arin-left
Fni!a!es DSS
$arin,left: 1c$+
$arin,left: (34in+
1n!ica$os con este atributo el ta$aLo !el $aren a la i*/uier!a
/arin-ri!t
Fni!a!es DSS
$arin,ri.t: 4U+
$arin,ri.t: 1in+
Se utili*a para !efinir el ta$aLo !el $aren a la !erec.a
/arin-top
Fni!a!es DSS
$arin,top: (p9+
$arin,top: 1(p9+
1n!ica$os con este atributo el ta$aLo !el $aren arriba !e la pina
/arin-bottom
Fni!a!es DSS
$arin,botto$: (pt+
$arin,top: 1p9+
Don el se in!ica el ta$aLo !el $aren en la parte !e aba)o !e la pina
Paddin-left
Fni!a!es DSS
pa!!in,left: (#4in+
pa!!in,left: 1p9+
1n!ica el espacio inserta!o3 por la i*/uier!a3 entre el bor!e !el ele$ento,continente y el conteni!o !e este# Es pareci!o a el
atributo cellpa!!in !e las tablas#
El espacio inserta!o tiene el $is$o fon!o /ue el fon!o !el ele$ento,continente#
Paddin-ri!t
Fni!a!es DSS
pa!!in,ri.t: (#4c$+
pa!!in,ri.t: 1pt+
1n!ica el espacio inserta!o3 en este caso por la !erec.a3 entre el bor!e !el ele$ento,continente y el conteni!o !e este# Es
pareci!o a el atributo cellpa!!in !e las tablas#
El espacio inserta!o tiene el $is$o fon!o /ue el fon!o !el ele$ento,continente#
Paddin-top
Fni!a!es DSS
pa!!in,top: 1(pt+
pa!!in,top: 4p9+
1n!ica el espacio inserta!o3 por arriba3 entre el bor!e !el ele$ento,continente y el conteni!o !e este#
Paddin-bottom
Fni!a!es DSS pa!!in,ri.t: (#4c$+
1%
pa!!in,ri.t: 1pt+
1n!ica el espacio inserta!o3 en este caso por aba)o3 entre el bor!e !el ele$ento,continente y el conteni!o !e este#
(order-color
color IJ@ y no$bre !e color
bor!er,color: re!+
bor!er,color: &ffccff+
Para in!icar el color !el bor!e !el ele$ento !e la pina al /ue se lo aplica$os# Se pue!e poner colores por separa!o con los
atributos bor!er,top,color3 bor!er,ri.t,color3 bor!er,botto$,color3 bor!er,left,color#
(order-style
none K !otte! K soli! K !ouble K roove K ri!e K
inset K outset
bor!er,style: soli!+
bor!er,style: !ouble+
El estilo !el bor!e3 los valores sinifican: none=ninun bor!e3 !otte!=puntea!o Sno parece funcionarT3 soli!=soli!o3
!ouble=!oble bor!e3 y !es!e roove .asta outset son bor!es con varios efectos 30#
border-widt!
Fni!a!es DSS
bor!er,-i!t.: 1(p9+
bor!er,-i!t.: (#4in+
El ta$aLo !el bor!e !el ele$ento al /ue lo aplica$os#
Para ver otros e)e$los !e @o9 pulsar a0u1
float
none K left K ri.t float: ri.t+
Sirve para alinear un ele$ento a la i*/uier!a o la !erec.a .acien!o /ue el te9to se arupe alre!e!or !e !ic.o ele$ento# 1ual
/ue el atributo alin en i$aenes en sus valores ri.t y left#
clear
none K ri.t K left clear: ri.t+
Si este ele$ento tiene a su altura i$aenes u otros ele$entos alinea!os a la !erec.a o la i*/uier!a3 con el atributo clear
.ace$os /ue se colo/ue en un luar !on!e ya no tena esos ele$entos a el la!o /ue in!i/ue$os#
Para ver una pina /ue utili*a float y clear pulsar a0u1
a especi"icaci)n de estilos CSS es muy amplia y seguro que se queda en el tintero algFn 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. 2esde 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. 2e hecho, en
estos momentos ser#a casi imposible concentrar en una p!gina el listado completo de atributos con su e.plicaci)n.
2e 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
2esarrollo3eb.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 resFmenes o de las chuletas de CSS.
14
/.6." ;e.inici$n de estilos CSS S2ort2and
(isminuye el peso de tus hojas de estilo utilizando la -orma shorthand de especi-icaci"n CSS# que no es
ms que una manera reducida de escribir las propiedades de estilos.
/.6.!." S2ort2and
7amos 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.
SegFn la 36C hay dos "ormas de escribir la misma regla de CSS0 la est!ndar y la shorthand. 8na es la larga y la otra es la
reducida.
/.6.%." ,ropiedad Font <.uente=
#ontstyle // #ont0ariant // #ont1eig%t // #ontsi2e / line%eig%t // #amilia de #uente
*jemlo:
3 {#ont! italic normal bold 4-px/45pt 6erdana, 7a%oma, 8rial$
/.6./." ,ropiedad 5ac>ground <.ondo=
backgroundcolor // backgroundimage // backgroundrepeat // backgroundattac%ment // background
position
*jemlo:
9ody {background! "::: url(../images/e&emplo.gi#) norepeat #ixed center$
/.6.6." Margin <Margen=
longitud / porcenta&e / auto
*jemlo:
9ody {margin! .px$ /; todos los m<rgenes a .px ;/ 3 {margin! -px 5px$ /; m<rgenes superior e
in#erior a -px, m<rgenes i2=uierdo y derec%o a 5px ;/ >?6 {margin! 4px -px *px 5px$ /; margen
superior a 4px, rig%t margin a -px, bottom margin a *px, le#t margin a 5px ;/
/.6.7." ,adding <0elleno=
longitud / porcenta&e / auto
*jemlo:
9ody {padding! -em *em 5em .em$ /; @i de#inimos cuatro 0alores estamos aplicando el padding
superior, derec%o, in#erior e i2=uierdo ;/ 9ody {padding! -em 5em) /; @i de#inimos dos o tres
0alores, los 0alores #altantes se toman del lado opuesto! superior e in#erior a -em, derec%o e
i2=uierdo a 5em ;/ 9ody {padding! .em$ /; @i de#inimos un solo 0alor se aplican a todos los lados ;/
1B
/.6.:." 5order <5orde=
border1idt% // borderstyle // color
*jemlo:
A* {border! t%ick dotted blue$
Artculo por Federico Elgarte
/.7." ,seudo"element en CSS <pseudo elementos=
.amos a conocer los pseudo elementos en CSS# hojas de estilo en cascada# que siren# entre otras cosas#
para de-inir estilos para la primera lnea o letra de un te$to.
os pseudoAelement %pseudoAelementos, si pre"erimos la traducci)n al castellano& sirven para aplicar estilos a partes m!s
espec#"icas dentro de una etiqueta. Es decir, para el ejemplo concreto de la etiqueta p!rra"o, con los pseudo elementos
podemos de"inir el estilo para la primera letra del p!rra"o y para la primera l#nea. Es decir, con CSS podemos de"inir el estilo
de una etiqueta, pero con los pseudoelementos no nos limitamos a de"inir el estilo para todo el contendido de esa etiqueta,
sino que indicamos el estilo para una parte restringida de esa etiqueta.
E.isten diversos tipos de pseudo elementos, con distintas aplicaciones, para de"inir el estilo de diversas cosas, como veremos
a continuaci)n con ejemplos.
/.7.!." ,seudo"element .irst"letter
8n e"ecto habitual de algunas publicaciones, por ejemplo las de cuentos para ni(os, es hacer m!s grande la primera letra de
una p!gina y decorarla de alguna manera. Con CSS podemos aplicar estilos espec#"icos y hacer, por ejemplo, que esa primera
letra sea m!s grande y tenga un color distinto del resto del p!rra"o.
Se utiliza de esta manera0
3!#irstletter {
#ontsi2e! -((+;
color! "BB****; #ont1eig%t! bold;
$
+s# estamos asignando un tama(o de letra 5NN: m!s grande del propio del p!rra"o. Tambi$n estamos cambiando el color
de esa primera letra.
2e entre todas las propiedades de estilos, s)lo algunas se pueden aplicar a los pseudoAelementos "irstAletter. Son las
siguientes, segFn la especi"icaci)n del 36C0 "ont properties, color properties, bacSground properties, Tte.tAdecorationT,
1G
TverticalAalignT %s)lo si T"loatT est! asignado a TnoneT&, Tte.tAtrans"ormT, TlineAheightT, margin properties, padding properties,
border properties, T"loatT, Tte.tAshado-T y TclearT .
Se puede ver un ejemplo de aplicaci)n de un estilo con "irstAletter.
/.7.%." ,seudo"element .irst"line
Como adelantaba, este pseudoAelemento, sirve para asignar un estilo propio a la primera l#nea del te.to. Es posible que
hayamos visto alguna revista o peri)dico que utilice este estilo para remarcar las primeras l#neas del p!rra"o. 8n ejemplo de
su uso ser#a el siguiente0
3!#irstline {
textdecoration! underline;
#ont1eig%t! bold;
$
as propiedades de estilos que se pueden aplicar al pseudoAelement "irstAline son las siguientes0 "ont properties, color
properties, bacSground properties, T-ordAspacingT, TletterAspacingT, Tte.tAdecorationT, TverticalAalignT, Tte.tAtrans"ormT, TlineA
heightT, Tte.tAshado-T y TclearT.
Se puede ver un ejemplo de aplicaci)n de un estilo con "irstAline.
/.7./." +so de clases con los pseudo"elementos
En determinadas ocasiones podemos necesitar crear una clase %class& de CSS a la que asignar los pseudoAelementos, de
modo que estos no se apliquen a todas las etiquetas de la p!gina. 'or ejemplo, podemos desear que solamente se modi"ique
el estilo de la primera l#nea del te.to en algunos p!rra"os y no en todos los de la p!gina.
8na clase se de"ine con el nombre de la etiqueta seguido de un punto y el nombre de la clase. Si adem!s deseamos de"inir un
pseudoAelemento, deber#amos indicarlo a continuaci)n, con esta sinta.is0
3.nombreclase!#irstline {
#ont1eig%t! bold;
$
/.7.6." ,seudo"elementos en CSS%
+parte de "irstAline y "irstAletter, en las especi"icaciones de CSS 5 e.isten otros pseudo elementos que voy a nombrar para
conocimiento de los lectores, aunque pro"undizar$ en su uso. Se tratan de be"ore y a"ter y sirven para insertar *contenidos
generados* antes y despu$s del elemento al que asignemos estos pseudoAelement.
8n ejemplo de ello es0
3.nota!be#ore {
content! "Cota! "
$
+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, *1ota0 *.
Nota: +tenci)n a la compatibilidad con CSS5, que, por lo menos para estos elementos, no est! soportada en versiones R de <nternet
E.plorer. ,ire"o., en cambio, s# que es compatible con estas caracter#sticas de CSS5.
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 5.
1H
/.:." ?rucos avanzados con CSS
.amos a er una serie de t&cnicas con hojas de estilo# imprescindibles para utilizar esta tecnologa con
toda su potencia.
as hojas de estilos son un tema largo del que se han escrito libros enteros. Hasta este punto del Manual de CSS nos hemos
dedicado a los temas m!s b!sicos. 2e momento vamos a hacer una parada en este art#culo para e.plicar unas cuantas cosas
interesantes que nos resultar!n especialmente pr!cticas.
+dem!s, para completar tus primeros conocimientos sobre CSS, te recomendamos ver el v#deo sobre los selectores de CSS,
que comenta algunas de las cosas de este cap#tulo y muchas otras que debes saber para manejar correctamente este lenguaje
de estilo.
/.:.!." ;e.inir estilos utilizando clases
as clases nos sirven para crear de"iniciones de estilos que se pueden utilizar repetidas veces.
8na clase se puede de"inir entre las etiquetas >ST9E? %en la cabecera del documento&, o en un archivo e.terno a la
p!gina. 'ara de"inirlas utilizamos la siguiente sinta.is, un punto seguido del nombre de la clase y entre llaves los atributos de
estilos deseados. 2e esta manera0
.nombredelaclase {atributo! 0alor;atributo-!0alor-; ...$
8na 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 "orma0
<D7?EFD78 class="nombredelaclase">
*jemlo de la utili+aci(n de clases
<%tml>
<%ead>
<title>D&emplo de la utili2aciGoacute;n de clases</title>
<@7H)D type="text/css">
.#ondonegroletrasblancas {backgroundcolor!black;color!1%ite;#ontsi2e!4-;#ont#amily!arial$
.letras0erdes {color!"((BB(($
</@7H)D>
</%ead>
<body>
<%4 class=letras0erdes>7itulo 4</%4>
<%4 class=#ondonegroletrasblancas>7itulo -</%4>
<p class=letras0erdes>
Dsto es un pGaacute;rra#o con estilo de letras 0erdes</p>
<p class=#ondonegroletrasblancas>
Dsto es un pGaacute;rra#o con estilo de #ondo negro y las letras blancas. Ds todoI</p>
</body>
</%tml>
7er el ejemplo anterior
/.:.%." Estilo en los enlaces
8na t$cnica muy habitual, que se puede realizar utilizando las hojas de estilo en cascada y no se pod#a en HTM, es la
de"inici)n de estilos en los enlaces, quitandoles el subrayado o hacer enlaces en la misma p!gina con distintos colores.
'ara aplicar estilo a los enlaces debemos de"inirlos para los distintos tipos de enlaces que e.isten %visitados, activos...&.
8tilizaremos la siguiente sinta.is, en la declaraci)n de estilos global de la p!gina %>ST9E?& o del sitio %2e"inici)n en un
archivo e.terno&0
*nlaces normales
+0linS BatributosC
*nlaces !isitados
1'
+0visited BatributosC
*nlaces acti!os %os enlaces est!n activos en el presiso momento en que se pincha sobre ellos&
+0active BatributosC
*nlaces ho!er %Cuando el rat)n est! encima de ellos, solo "unciona en ieplorer&
+0hover BatributosC
El atributo para de"inir enlaces sin subrayado es te5t&decoration:none, y para darles color es color0tuJcolor.
Tambi$n podemos de"inir el estilo de cada enlace en la propia etiqueta >+?, con el atributo style. 2e esta manera podemos
hacer que determinados enlaces de la p!gina se vean de manera distinta
Ejemplo de estilos en enlaces
<.t$l>
<.ea!>
<title>E)e$plos !e estilo en enlaces<"title>
<S678E type="te9t"css">
A:lin? <te9t,!ecoration:none+color:&((((cc+=
A:visite! <te9t,!ecoration:none+color:&ffcc33+=
A:active <te9t,!ecoration:none+color:&ff((((+=
A:.over <te9t,!ecoration:un!erline+color:&''''''+font,-ei.t:bol!=
<"S678E>
<".ea!>
<bo!y>
<a .ref=".ttp:""!o$inioine9istente#nofunciona#co$">Enlace nor$al<"a>
<br>
<br>
<a .ref="enlaces#.t$l">Enlace visita!o<"a>
Pulsar este enlace para verlo activo3
poner el rat5oacute+n por enci$a para /ue ca$bie#
<"bo!y>
<".t$l>
7er el ejemplo anterior
/.:./." +0L como valor de un atributo@
2eterminados atributos de estilos, como .ac9ground&image necesitan una 8P como valor, para indicarlas podemos
de"inir tanto caminos relativos como absolutos. +s# pues, podemos indicar la 8P de la imagen de "ondo de estas dos
maneras0
.ac9ground&image: url=fondo"gif> En caso de que la imagen est$ en el mismo directorio que la p!gina. .ac9ground&image:
url=htt:66---"desarrollo-e."com6images6fondo"gif>
/.:.6." 1cultar estilos en navegadores antiguos
En caso de de"inir dentro de la etiqueta >ST9E? unas declaraciones de estilos debemos asegurarnos que estas no se
imprimir!n en la p!gina -eb con navegadores antiguos. 'ensar en un navegador que no reconozca la etiqueta >ST9E?,
pensar! que corresponde con algo que no entiende y se olvidar! de la etiqueta. o siguiente que encuentra es te.to normal y
har! que este se vea en la p!gina, como con cualquier otro te.to.
'ara evitarlo debemos ocultar con comentarios HTM %>GAA esto es un comentario AA?& todo lo que hay dentro de la
etiqueta >ST9E?. Se puede ver un ejemplo de esto a continuaci)n0
2e este modo hemos terminado la primera parte del manual de CSS, que espero pueda ayudar a hacer p!ginas mejores y
m!s r!pidamente. +hora el manual continua e.plicando conceptos sobre capas y maquetaci)n CSS, entre otros asuntos.
=uiero recordaros que siempre es Ftil ver como han hecho sus p!ginas otros progradores de <nternet. 'ara ver una p!gina
de"inida enteramente con hojas de estilos podemos visitar 3eb Site +lbum, que est! incluso maquetada con CSS. Tambi$n
podemos visitar la direcci)n ---.guiarte.com, que est! maquetada con tablas, pero todos los estilos se aplican con css.
2(
Nota: 'ara ver otros manuales, art#culos y enlaces a p!ginas que ense(an a utilizar las hojas de estilos visitar la secci)n CSS a "ondo.
En el siguiente cap#tulo de este manual pasamos p!gina para contaros uno de los *nuevos elementos* que cobran una
especial importancia desde la llegada de CSS, las capas.
Parte 4:
Modelo de caja
En -55 se crea un nueo modelo de ca/a 1ue nos sire para agrupar elementos en
contenedores4 a los 1ue luego podremos aplicar estilos con -55. 5e trata de las capas4 o
ca/as4 1ue cobrar3n una gran importancia a la hora de realizar tus dise'os.
6.!." Au son las capas
.emos las di-erencias entre arias etiquetas para aplicar estilos y crear capas y una peque/a introducci"n
a las capas.
Veamos una e#ue?a introducci(n a lo #ue son las caas, la eti#ueta 41@3 <DIV> utili+ada ara construirla y
los atri.utos 'SS con los #ue odemos alicar estilos"
Como ya hemos visto en nuestro manual de CSS, >S'+1? sirve para aplicarle estilo a una peque(a parte de una p!gina
HTM. 'or ejemplo, con ella podr#amos hacer que una parte de un p!rra"o se coloree en rojo. Con >S'+1? no es habitual
englobar un trozo muy grande de te.to, por ejemplo el que comprenda a varios p!rra"os.
Con >2<7? tambi$n podemos aplicar estilo a partes de la p!gina HTM.
a di"erencia entre >S'+1? y >2<7? es que con esta Fltima 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 alicar una cantidad adicional de atri.utos ara modificar sus
comortamientos. '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 caa.
<na caa es una di!isi(n, una parte de la p!gina, #ue tiene un comortamiento muy indeendiente 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
2HTM.
as etiquetas >+9EP? e ><+9EP? tienen como objetivo construir capas, pero estas no son compatibles m!s que con
1etscape, por lo que es recomendable utilizar la etiqueta >2<7? para hacer capas pre"erentemente a las otras dos.
os atributos que podemos aplicar a estas etiquetas, pero en concreto a las dos recomendadas >S'+1? y >2<7?, 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
21
aplicar estilos a estas etiquetas se utiliza el atributo de HTM style, de esta manera0
>S'+1 styleK*te.tAdecoration0underlineU"ontA-eight0bold*?...>@S'+1?
>2<7 styleK*color0redU"ontAsize04Np.*?...>@2<7?
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 >2<7? 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 caa son !arios y se ueden !er a continuaci(n"
>div idK*c4* styleK*position0absoluteU le"t0 5NNp.U top0 4NNp.U*?
HolaG
>@div?
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.
6.%." Atributos para capas
.eamos el posicionamiento de capas y otros atributos que podemos utilizar al de-inirlas.
Hemos visto en el cap#tulo anterior qu$ son las capas y algunas peque(as muestras sobre c)mo crearlas y darle algFn estilo.
+hora vamos a ver en detenimiento los atributos espec#"icos para aplicar posicionamiento a una capa y otros estilos.
+ntes que nada cabe decir que una capa puede tener cualquier atributo de estilos de los que hemos visto en el manual de
CSS. +s#, el atributo color indica el color del te.to de la capa, el atributo "ontAsize 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.
6.%.!." Atributo position
<ndica el tipo de posicionamiento de la capa. 'uede tener dos valores, relative o absolute.
A relative indica que la posici)n de la capa es relativa a el lugar donde se estaba escribiendo en la p!gina en el momento de
escribir la capa con su etiqueta
A absolute indica que la posici)n de la capa se calcula con respecto al punto superior izquierdo de la p!gina.
6.%.%." Atributo top
<ndica la distancia en vertical donde se colocar! la capa. Si el atributo position es absolute, top indica la distancia del borde
superior de la capa con respecto al borde superior de la p!gina. Si el atributo position era relative, top indica la distancia
desde donde se estaba escribiendo en ese momento en la p!gina hasta el borde superior de la capa.
22
6.%./." Atributo le.t
D!sicamente "unciona igual que el atributo top, con la di"erencia que el atributo le"t indica la distancia en horizontal a la que
estar! situada la capa.
6.%.6." Atributo 2eig2t
Sirve para indicar el tama(o de la capa en vertical, es decir, su altura.
6.%.7." Atributo widt2
<ndica la anchura de la capa
6.%.:." Atributo visibilit'
Sirve para indicar si la capa se puede ver en la p!gina o permanece oculta al usuario. Este atributo puede tener tres valores.
A visible sirve para indicar que la capa se podr! ver.
A hidden indicar! que la capa est! oculta.
A inherit es el valor por de"ecto, que quiere decir que hereda la visibilidad de la capa donde est! metida la capa en cuesti)n. Si
la capa no est! metida dentro de ninguna otra se supone que est! metida en la capa documento, que es toda la p!gina y que
siempre est! visible.
6.%.B." Atributo z"inde3
Sirve para indicar la posici)n sobre el eje z que tendr!n las distintas capas de la p!gina. 2icho de otra "orma, con zAinde.
podemos decir qu$ capas se ver!n encima o debajo de otras, en caso de que est$n superpuestas. El atributo zAinde. toma
valores num$ricos y a mayor zAinde., m!s arriba se ver! la p!gina.
6.%.C." Atributo clip
Es un atributo un poco di"#cil de e.plicar. En concreto sirve para recortar determinadas !reas de la capa y que no se puedan
ver. 8na capa que est! visible se puede recortar para que se vea, pero que no se vea algFn trozo de esta. El cliping se indica
por medio de ; valores, con esta sinta.is.
rect (<top>, <rig%t>, <bottom>, <le#t>)
os valores >top?, >right?, >bottom? y >le"t? indican distancias que se pueden apreciar en este esquema.
23
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.
<di0 style="clip! rect((,4.',45',4.); %eig%t! -.(px; 1idt%! 4J(px; le#t! 4(px; top! --(px; position!
absolute; 0isibility! 0isible; 2index!4(; #ontsi2e! 45pt; #ont#amily! 0erdana; textalign!
center; backgroundcolor! "bbbbbb">
Dsta capa tiene un cliping, por eso se 0e entrecortada.
<br>
<br>
Dsto es una capa de prueba
</di0>
'uede verse el ejemplo en una p!gina -eb, donde tambi$n podr! apreciarse el e"ecto conseguido al realizar el cliping.
6./." ,roblema con el posicionamiento absoluto de capas
A eces el posicionamiento absoluto de capas es demasiado rgido# pues si la de-inici"n de pantalla
cambia de un usuario a otro las capas pueden quedar colocadas en lugares donde no deseamos. )e aqu
una soluci"n.
He recibido una consulta en mi correo sobre colocaci)n de capas de manera absoluta, pero en la que no nos importe la
de"inici)n de la pantalla del usuario y otros ir y venir de los elementos HTM. 1uestro compa(ero e.pres) su duda de la
siguiente manera0
Si trabajamos con position:absolute dando un left y un top funciona si tienes tu pgina alineada a la izquierda. Mi pgina est alineada en el
centro, entonces lo que sucede es que dependiendo de la resolucin de pantalla que tengas (ancho de !!p",#!$%p",etc& me baila toda la pgina y
no cuadra nada.
'rimero que todo, debemos saber que si trabajamos con el position relative las capas se colocan en el lugar donde aparecen
dentro del c)digo HTM. 2e 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 sitFe 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 algFn truquillo. 2e 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 VAibrary.
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.
1uestro 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 Wavascript, que es el lenguaje que nos permite actualizar las posiciones de las capas din!micamente.
2%
6./.!." ;etenidamente
2ec#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. 8na 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. 8na 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. 2icha posici)n depende
del lugar donde aparezcan los enlaces en la p!gina.
uego, con Wavascript deber#amos asignar la posici)n de la capa absoluta de una manera parecida a esta.
le"t de la capa absoluta K le"t de la capa relativa
top de la capa absoluta K top de la capa relativa X altura de la capa relativa
'odemos sumarle algFn 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.
1o 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
Wavascript. +dvierto que si no se conoce nada de Wavascript va a ser imposible ponerse con una tarea tan tediosa como el
manejo de capas. Si por el contrario, ya hemos tenido contacto con Wavascript y 2HTM anteriormente, no deber#a ser un
problema realizar esas acciones.
6./.%." 0e.erencias Javascript
En 2esarrollo3eb tenemos un par de manuales de Wavascript, que ser#a necesario estudiar para empezar a introducirse en el
lenguaje.
A 'rogramaci)n en Wavascript <
A 'rogramaci)n en Wavascript <<
En el Taller de Wavascript tenemos algFn art#culo sobre tratamiento din!mico de capas.
'ero sin duda, lo que mejor os va a venir para tratar con capas y su posicionamiento din!mico es utilizar algFn "rame-orS
Wavascript, los cuales os ayudar!n "!cilmente a realizar cualquier tipo de operaci)n 2HTM con la certeza de que "uncione
bien en todos los navegadores. Es recomiendo las siguientes lecturas0
A Manual de Mootools
A Manual de j=uery
24
6.6." El Modelo de Ca(a en CSS
%n aspecto especialmente releante de CSS es el 0odelo de Caja. !ste artculo brinda una primera
apro$imaci"n a su arquitectura y a las distintas posibilidades que o-rece.
Tarde o temprano, todo libro o taller pr!ctico de CSS queda bajo la in"luencia del Modelo de Caja de CSS. Es un tema que,
sin lugar a dudas, tenemos que dominar per"ectamente y realmente no tiene ninguna di"icultad. a pr!ctica nos dar! la
soltura necesaria para que no tengamos ni que pensar cuando estemos dise(ando o maquetando una -eb, pero para las
personas que est!n empezando con CSS ser! muy interesante el prestar la debida atenci)n.
En este art#culo publicado en 2esarrollo3eb.com daremos un repaso general a todos los integrantes o atributos que
podemos utilizar para de"inir el modelo de caja en CSS, que hemos englobado dentro del Manual de CSS.
6.6.!." +na primera apro3imaci$n visual
Es uno de los elementos b!sicos de las Hojas de Estilo en Cascada y por lo tanto su correcta interpretaci)n resulta
"undamental a la hora de lograr los resultados deseados en un dise(o, por m!s simple que $ste resulte.
'ara entrar en tema, vamos a construir un sencillo ejemplo utilizando un Fnico elemento >div? al que aplicaremos un estilo.
El resultado producido ser! analizado con la ayuda de una "igura en la que hemos modelado el orden de apilado de los
elementos del >div? en una disposici)n tridimensional que nos ayudar! a comprenderlo.
Supongamos el siguiente c)digo %lo mostramos "uera de su conte.to, restringi$ndonos a lo signi"icativo para el ejemplo&0
6.6.%." El elemento DdivE
<di0>
<p>Dste es el contenido de nuestra ca&a.</p>
</di0>
6.6./." El estilo
di0 {
backgroundcolor! "be5(K4; /;color bordL para el #ondo;/
backgroundimage! url(Mcabe2a.&pgM);
border! 4(px solid "eJa-4B; /;color naran&a para el borde;/
margin! 4(px;
padding! -(px;
$
p {
margin! ( ( -(px (; /;margen in#erior de -( px para el p<rra#o;/
padding! (;
$
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.
8n 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
2ouglas Do-man de Stopdesign para el redise(o del sitio de Dlogger , 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.
2B
6.6.6." Freas ' propiedades
Cada caja en CSS posee, adem!s de su !rea de Contenido, otras tres !reas opcionales0
Yrea de Margen A @argin
Yrea de Pelleno A Padding
Yrea de Dorde A Border
Cada !rea, a su vez, puede dividirse en cuatro segmentos segFn su posici)n0 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 5N p#.eles alrededor de la caja0
di0 { margin! -(px $
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 A right A bottom A le"t.
El siguiente ejemplo asigna 4N p#.eles arriba, M a la derecha, 5N abajo y nada a la izquierda0
di0 { margin! 4(px .px -(px ( $
'ueden especi"icarse valores tambi$n con la siguiente notaci)n, en la que ya no es necesario mantener el orden0
2G
di0 {
margintop! 4(px ;
marginrig%t! .px ;
marginbottom! -(px ;
$
En cualquier caso puede obviarse el valor N ya que es el valor que toman las propiedades por de"ecto.
a lista completa de propiedades es la siguiente0
Proiedades del @argen
*marginAtop*, *marginAright*, *marginAbottom*, *marginAle"t* y *margin*
Proiedades del Relleno
*paddingAtop*, *paddingAright*, *paddingAbottom*, *paddingAle"t* y *padding*
Proiedades del Borde
4& +ncho %-idth&
*borderAtopA-idth*, *borderArightA-idth*, *borderAbottomA-idth*, *borderAle"tA-idth* y *borderA-idth*. 'ueden ser valores
espec#"icos o los valores *thin* %"ino&, *medium* %medio& y *thicS* %grueso&
5& Color %color&
*borderAtopAcolor*, *borderArightAcolor*, *borderAbottomAcolor*, *borderAle"tAcolor* y *borderAcolor*
6& Estilo %style&
*borderAtopAstyle*, *borderArightAstyle*, *borderAbottomAstyle*, *borderAle"tAstyle* and *borderAstyle*. Toma una serie de
posibles valores, tales como0 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 navegador0
En el !rea de Contenido y en la de Pelleno se ver! aquello que se determine en la propiedad *bacSground* del
elemento %un color o una imagen, segFn el orden de apilado&.
En el !rea de Dorde se ver! aquello que se determine en las propiedades del Dorde %ancho, color y estilo&.
El !rea de Margen es siempre transparente.
6.6.7." El Secreto para dominar el modelo de ca(a en CSS
Hay un solo secreto para comprender cabalmente cada una de las propiedades y su utilizaci)n0 probar, probar y probar. +l
principio podr! parecernos complicado, pero con la pr!ctica podremos trabajar con el modelo de caja sin tener que pensar, y
as# conseguir dise(os de -ebs y maquetaci)n CSS de calidad con poco es"uerzo y atendiendo a los est!ndares de desarrollo
-eb.
Artculo por Fernando Campaa
2H
6.7." ,roblemas del Modelo de Ca(a en #nternet E3plorer 7
Si no se toman ciertos recaudos nuestros dise/os se ern distinto en distintos naegadores y a1n peor2
en distintas ersiones del mismo naegador. !ste artculo analiza esos comportamientos an"malos y
brinda algunos trucos para que nuestros dise/os
6.7.!." +na primera apro3imaci$n visual
'artiremos de la base de que el lector posee las nociones b!sicas sobre el Modelo de Caja.
D!sicamente, la Zcaja[ en CSS puede ser asimilada a una tabla con una sola celda.
2e "orma obviamente rectangular, esa caja puede tener bordes %border&, m!rgenes transparentes por "uera de los bordes
%margin& y relleno transparente por dentro de los bordes %padding&. Cualquiera de estos atributos puede ser asignado para
cada uno de los cuatro lados de la caja separadamente.
El contenido de la caja se ubicar! dentro del !rea de relleno.
En general, podemos hablar de dos tipos de dise(o0
os dise(os Zl#quidos[ no asignan un valor espec#"ico al ancho %-idth& y alto %height& de la caja, por lo que resulta
que esas dimensiones surgir!n del contenedor de la caja y de la e.tensi)n del contenido. Concretamente, el ancho
de esa caja ser! todo el permitido por la estructura que la contenga %utilizar! todo el ancho disponible& y el alto ser!
el necesario para mostrar todo el contenido %Zcrecer![ hacia abajo todo lo necesario&.
os dise(os Zest!ticos[ surgen cuando se decide asignar a la caja un ancho espec#"ico mediante la asignaci)n de un
valor concreto a la propiedad Z-idth[.
os problemas comienzan cuado trabajamos con dise(os est!ticos. 1uestra caja tendr! un ancho dado, pero no todos los
navegadores interpretar!n ese ancho de la misma manera.
'ara el 36C el ancho de una caja se mide desde el l#mite interno del relleno izquierdo %le"tApadding& hasta el l#mite interno
del relleno derecho %rightApadding&. En caso de no e.istir relleno se toman los l#mites internos izquierdo y derecho del borde
%borderAright y borderAle"t&.
Cuando Microso"t lanz) su <nternet E.plorer M para 3indo-s %<EM@-in& no respet) $ste est!ndar, interpretando la
propiedad -idth como el ancho comprendido entre los l#mites e.teriores del borde %borderAle"t y borderAright&.
'ara verlo con m!s claridad supongamos un ejemplo sencillo0 una caja de 4NN pi.eles de ancho, 4N de relleno, M de borde y
4N de m!rgen, todos ellos uni"ormes.
El elemento >div?
<body>
<di0>8=uN el contenido de la ca&a</di0>
</body>
+plicando CSS ...
di0 {
1idt%! 4((px;
padding! 4(px;
border! .px solid black;
margin! 4(px;
$
2'
En la imagen siguiente %en la que se ha aplicado un color al padding Fnicamente con "in ilustrativo& puede verse una
representaci)n de la di"erente interpretaci)n entre el <EM@-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 <EM@-in.
a versi)n del navegador para Mac %<EM@mac& no tiene ese inconveniente e interpreta la caja segFn el est!ndar 36C.
+"ortunadamente, Microso"t remedi) este problema en el E.plorer R, pero hay millones de usuarios que todav#a utilizan
<EM..@-inG
6.7.%." La soluci$n en general
a soluci)n para este tipo de problemas consiste en utilizar Ztrucos[ que aprovechan limitaciones o errores de los
navegadores en la interpretaci)n de CSS.
Hay varios de estos recursos, denominados en general Do. Model HacSs, que basan su acci)n en suministrarle al navegador
con"lictivo un ancho de caja tal que su representaci)n resulte la esperada, pero sin que este valor a"ecte a los otros
navegadores.
En el caso de nuestro ejemplo, para igualar las !reas de contenido, deber#amos decirle al <EM..@-in % y Fnicamente al
<EM..@-in& que el ancho es un valor tal que incluya relleno y borde0
borde izquierdo X relleno izquierdo X contenido X relleno derecho X borde derecho
M p. X 4N p. X 4NN p. X 4N p. X M p.
o sea \
-idth0 46N p.U
2e este modo, la caja se ver#a id$ntica en todos los navegadores.
El problema con muchas de las soluciones %hacSs& propuestas es que de un modo u otro terminaban a"ectando a otros
navegadores menos populares. 'or lo tanto, aFn cuando la cosa mejoraba sustancialmente en t$rminos de audiencia, "altaba
dar todav#a con un recurso que no generara e"ectos indeseados.
3(
6.7./." La me(or soluci$n@ ?an 2ac>
a soluci)n "ue propuesta por Ed-ardson Tan y reune las inusuales caracter#sticas de ser simple y per"ectamente e"icaz.
7olviendo a nuestro ejemplo0
<body>
<di0>8=uN el contenido de la ca&a</di0>
</body>
y aplicando CSS con algunos cambios ...
di0 {
1idt%! 4((px;
padding! 4(px;
border! .px solid black;
margin! 4(px;
$
/; 8=uN est< el truco, el 7an Aack ;/
; %tml di0 {
1idt%! 4*(px;
1idt%! 4((px;
$
6.7.6." Analicemos un poco el c$digo del truco
Ebservamos un asterisco %]& al comienzo. El asterisco en CSS es conocido como selector universal y alude a todos los
elementos que est!n contenidos dentro de otro.
uego encontramos html, el elemento ra#z de toda p!gina, y luego nuestro div.
a regla ] html div B C se aplicar! a todo elemento div contenido en un elemento html que a su vez est$ contenido en otro.
Suena raro, no^
'ara cualquier navegador distinto del E.plorer la regla ser! interpretada como err)nea y por lo tanto ignorada, ya que no
e.iste ningFn elemento que contenga a html, que acabamos de decir que es el elemento ra#z.
El E.plorer %en todas las versiones& parece creer en la e.istencia de un misterioso elemento que engloba a html %obviamente
se trata de un de"ecto de estos navegadores&, por lo que la regla le resultar! v!lida.
Hasta aqu# logramos que Fnicamente los <E resulten a"ectados y rede"inan el ancho a 46Np.. Solo resta lograr que esa
rede"inici)n del ancho %en el ejemplo a 46Np.& sea v!lida Fnicamente para el <EM..@-in, ya que hab#amos dicho que tanto el
<EM@mac como el <ER interpretaban correctamente el modelo de caja y no necesitan ningFn truco para respetar nuestro
dise(o.
'ara eso utilizamos la siguiente l#nea, de apariencia un poco e.tra(a0
-idth0 4NNp.U
Tanto el <EM@mac como el <ER son capaces de ignorar la barra invertida %escape& dentro del nombre de una propiedad,
siempre que se cumplan determinadas condiciones que detallamos m!s adelante.
os dos navegadores Zcorregir!n[ -idth trans"orm!ndolo en -idth y volver!n a modi"icar el ancho a 4NNp., su valor
correcto.
El <EM..@-in no puede manejar esa barra invertida dentro del nombre y por lo tanto considera a esa l#nea como err)nea y la
ignora. El resultado es que el ancho, para <EM..@-in y s)lo para $l, permanece en 46Np..
Es e.actamente lo que quer#amosG
8n Fltimo comentario acerca de la barra invertida dentro del nombre0 hay ciertas limitaciones en cuanto a su posici)n.
2ebe estar dentro del nombre
1o 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.
Artculo por Fernando Campaa
31
6.:." ,or *u disear con CSS
0ostramos algunas entajas al maquetar con CSS respecto a otras -ormas de hacerlo.
as tablas e.isten y e.istieron desde el comienzo en HTM, pero no se crearon para dise(ar un sitio, sino para la
presentaci)n de datos tabulares. a utilizaci)n del ZborderKN[ y las im!genes transparentes hicieron posible crear una rejilla
que permiti) a los dise(adores organizar te.tos e im!genes, establecer tama(os y ubicar objetos. 'ero $sto es sencillamente
incorrecto. as tablas no se crearon para maquetar y no deben utilizarse para eso, porque de esta "orma se mezclan
presentaci)n y contenido.
a soluci)n es clara0 CSSXHTM@VHTM. +"ortunadamente, cada vez son m!s las empresas que deciden dejar atr!s las
tediosas tablas y evolucionar desarrollando sus sitios respetando los est!ndares establecidos por la 36C %organizaci)n
internacional que desde hace unos 45 a(os se dedica al desarrollo de pautas y est!ndares -eb&, lo que "acilita la accesibilidad
y la correcta visualizaci)n de las p!ginas en los navegadores que respeten dichos est!ndares.
+lgunas de las ventajas de la maquetaci)n con CSS0
Separaci)n de "orma y contenido. Qeneralmente CSS y HTM se encuentran en archivos separados, lo que "acilita
el trabajo en equipo porque dise(ador y programador pueden trabajar independientemente. 'or otro lado, permite
el acceso a distintos navegadores y dispositivos.
Tr!"ico en el servidor. as p!ginas pueden reducir su tama(o entre un ;N: y un RN:, y los navegadores guardan la
hoja de estilos en la cach$, $sto reduce los costos de env#o de in"ormaci)n.
Tiempos de carga. 'or la gran reducci)n en el peso de las p!ginas, mejora la e.periencia del usuario, que valora de
un sitio el menor tiempo en la descarga.
'recisi)n. a utilizaci)n de CSS permite un control mucho mayor sobre el dise(o, especi"icando e.actamente la
ubicaci)n y tama(o de los elementos en la p!gina. Tambi$n se pueden emplear medidas relativas o variables para
que la pantalla o la caja contenedora se acomode a su contenido.
Mantenimiento. Peduce notablemente el tiempo de mantenimiento cuando es necesario introducir un cambio
porque se modi"ica un solo archivo, el de la presentaci)n, sin tener que tocar las p!ginas que contienen la estructura
con el contenido.
2ise(o uni"icado y "le.ibilidad. Es posible cambiar completa o parcialmente el aspecto de un sitio con s)lo
modi"icar la hoja de estilos. 'or otro lado, el tener el estilo de una -eb en un solo archivo permite mantener la
misma apariencia en todas las p!ginas.
'osicionamiento. as p!ginas dise(adas con CSS tienen un c)digo m!s limpio porque no llevan dise(o, s)lo
contenido. Esto es sem!nticamente m!s correcto y la p!gina aparecer! mejor posicionada en los buscadores.
Qoogle navega obviando el dise(o.
Pecomiendo un sitio simp!tico y did!ctico sobre el tema0 http0@@---.hotdesign.com@seybold@spanish@
Artculo por Serviweb
32
Parte 5:
Posicionamiento CSS
ma!uetaci"n
9 partir de la implantaci#n de -55 el est3ndar se oli# la herramienta indicada para la
ma1uetaci#n de las p3ginas web. En los pr#0imos artculos hablaremos sobre el
posicionamiento de elementos en la p3gina + sobre la ma1uetaci#n de los contenidos
atendiendo a cual1uier distribuci#n 1ue el dise'ador necesite.
7.!." Ma*uetaci$n CSS
%na introducci"n sobre c"mo maquetar una pgina utilizando capas# que ilustra el -uncionamiento y la
potencia de las CSS con ejemplos.
En este art#culo vamos a conocer la maquetaci)n de paginas utilizando Hojas de estilos en cascada %CSS&. 7eremos c)mo
realizar este tipo de maquetaci)n, junto con algunas ventajas e inconvenientes. 'ara muchos ser! todav#a un campo por
e.plorar. +unque no vamos a entrar en grandes detalles, vamos a intentar dar a conocer la maquetaci)n con CSS para que
cubrir la posible laguna por parte del lector. En cap#tulos sucesivos ampliaremos la in"ormaci)n y o"receremos tutoriales
m!s pr!cticos.
Como se ha podido aprender en el Manual de CSS, las hojas de estilo en cascada ayudan a separar el contenido de la "orma,
es decir, los elementos que componen una p!gina de la "orma con la que se muestran. +dem!s, CSS ayuda en gran medida a
la de"inici)n de estilos en la p!gina, ya que permite ajustar de una manera mucho m!s precisa cualquier aspecto de cualquier
elemento de la p!gina.
a maquetaci)n con CSS lleva la utilizaci)n de las hojas de estilo a su grado m!.imo, de manera que cualquier de"inici)n del
aspecto de la p!gina se realiza en la declaraci)n CSS que enlazamos con el documento HTM. 'ara de"inir la situaci)n de
los elementos en la p!gina se utilizan las capas, a las que se aplica un posicionamiento a trav$s tambi$n de las hojas de estilo.
'ara crear las capas se utilizan etiquetas >2<7?, en las que se introducen los elementos que queramos que aparezcan en la
p!gina. os elementos dentro de los >2<7? tambi$n se pueden anidar, para heredar las propiedades y posicionamiento de
las capas padre.
En la maquetaci)n por capas se de"inen Fnicamente etiquetas >2<7? y las tablas s)lo se utilizan para mostrar in"ormaci)n
tabulada, es decir, mostrada en "ilas y columnas. Cabe se(alar que en la maquetaci)n tradicional se utilizan las tablas para
ajustar la posici)n de los elementos en la p!gina. Seguro que muchos de los lectores est!n muy "amiliarizados con el uso de
tablas para maquetar una -eb, pues se trata de una t$cnica bastante sencilla, aunque bastante poco pr!ctica y que complica
un tanto el c)digo de las p!ginas -eb resultantes.
7.!.!." Genta(as e inconvenientes de la ma*uetaci$n CSS
a maquetaci)n por capas, tambi$n llamada maquetaci)n CSS, es una "orma de crear -ebs m!s evolucionada y que mejora
en mucho a la maquetaci)n tradicional %que antes se hac#a por tablas&, aunque tambi$n tiene sus inconvenientes.
7eamos primero algunas de las !entajas de la maquetaci)n CSS0
33
3a searaci(n del contenido de la ,gina y del estilo o asecto con el #ue se de.en mostrar. Tener en
cuenta que, cuanto m!s separemos estos dos elementos, m!s sencillo ser! el mantenimiento de las p!ginas y el
procesamiento de la in"ormaci)n. Con ello tambi$n podremos obtener p!ginas m!s limpias y claras.
Ahorro en la transferencia. Si todos los estilos y posiciones de los elementos se introducen en un documento
e.terno, liberaremos el c)digo de la p!gina y ocupar! mucho menos. Como la declaraci)n de estilos se almacena en
la cach$ del navegador, s)lo se trans"iere en la primera p!gina que se visita del sitio, con lo que la segunda y
posteriores p!ginas que se soliciten se cargar!n mucho m!s r!pido.
Cacilidad ara alterar el asecto de la ,gina sin tocar el c(digo 41@3. Como toda la in"ormaci)n de los
estilos y el posicionamiento de las capas se encuentra en un mismo archivo, si deseamos cambiar cualquier
elemento de la p!gina Aya sea su posici)n o su aspectoA, s)lo tenemos que actualizar la hoja de estilos y los cambios
se ver!n autom!ticamente en todo el -eb.
Como decimos, tambi$n hay algunas des!entajas0
Actuali+ado: a verdad es que en la actualidad casi no podemos decir que e.istan desventajas en la maquetaci)n CSS, salvo la di"cultad que
puedan encontrar los desarrolladores para para aprender una cosa nueva. +ctualmente todos los navegadores la soportan y la interpretan de
una manera muy parecida, lo que "acilita bastante la labor de desarrollo.
'omati.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 ningFn
posicionamiento. Ello puede resultar "astidioso, pero por lo menos visualizar!n todos los datos de la p!gina,
aunque descolocados y sin estilo.
Actuali+ado: 's con(eniente se)alar que en la actualidad ya todos los na(egadores soportan maquetacin *SS, por lo que este
incon(eniente podemos descartarlo prcticamente.
Diferencias entre na!egadores. 2ependiendo 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.
Actuali+ado: +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.
7.!.%." E(emplo CssHenarden8 ilustra las posibilidades de la ma*uetaci$n CSS
E.iste un sitio muy interesante e ilustrador que nos puede ayudar a conocer r!pidamente la potencia de las CSS y hacernos
una idea de lo que puede signi"icar su uso. Es un sitio donde se muestra un contenido y un dise(o bastante logrado. +dem!s,
dispone de varios enlaces para poder ver el mismo sitio, con el mismo contenido, pero con distinto aspecto. 2e ese modo
podemos ver c)mo se puede llegar a alterar el dise(o de una p!gina con tan solo cambiar la hoja de estilos.
a 8P del sitio es http0@@---.csszengarden.com. Es muy interesante que seleccion$is otros dise(os para ver el cambio
radical que puede tener las p!ginas -eb con distintas hojas de estilos.
1osotros hemos e.plorado un poco las capacidades de las CSS y hemos realizado un ejemplo de dise(o de Css_enQarden
por nuestra cuenta. 'odemos verlo en nuestro propio servidor en este enlace.
7.!./." ,or donde continuar para aprender a ma*uetar con CSS
En 2esarrollo3eb.com hemos publicado una compilaci)n de art#culos sobre el tema en el Manual de Maquetaci)n CSS. En
el manual podremos encontrar algunas notas interesantes e introductorias para comenzar a maquetar con CSS, pero adem!s
diversos art#culos pr!cticos que nos ayudar!n a aprender con casos reales.
3%
'restar especial atenci)n al taller de maquetaci)n comienza con Maquetar una p!gina con CSS y los art#culos siguientes
donde se continFa ese ejemplo. +dem!s, para los desarrolladores m!s avanzados que deseen disponer de unas herramientas
que ayuden a la maquetaci)n m!s r!pida, recomendamos estudiar los art#culos del "rame-orS css `RN Qrid System.
7.%." Formas de aplicar estilos en ma*uetaci$n CSS
3epaso a los m&todos por los que se pueden aplicar estilos a las pginas 'eb mediante CSS.
7amos a ver otra vez distintos modos de aplicar estilos a las p!ginas. Es un tema que ya vimos en el manual de CSS, pero
merece la pena re"rescar conceptos y ampliar la in"ormaci)n que se o"reci) en su d#a.
7.%.!." Aplicaci$n de estilo a eti*uetas
Se puede asignar el estilo a una etiqueta concreta de HTM. 'ara ello, en la declaraci)n de estilos escribimos la etiqueta y
entre llaves, los atributos de estilo que deseemos.
body {
backgroundcolor! "#(#(#(;
color! "****KK;
$
'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.
%4, p{
color! red;
$
En este caso se de"ine que los encabezados de nivel 4 y los p!rra"os, tengan letra roja.
7.%.%." ;e.inici$n de clases
'odemos utilizar una clase si deseamos crear un estilo espec#"ico, para luego aplicarlo a distintos elementos de la p!gina. as
clases en la declaraci)n de estilos se declaran con un punto antes del nombre de la clase.
.miclase{
color! blue;
$
'ara asignar el estilo de"inido por una clase en un elemento HTM, simplemente se a(ade el atributo class a la etiqueta que
queremos aplicar dicha clase. El atributo class se asigna al nombre de la clase a aplicar. 'or ejemplo0
<p class="miclase">este p<rra#o tiene el estilo de#inido en la clase "miclase".</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 detallado0
'ara la siguiente declaraci)n de estilos0
body, td, p{
backgroundcolor! "((((((;
color! "######;
$
.in0erso{
backgroundcolor! "######;
color! "((((((;
$
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
34
se ha declarado una clase, de nombre *inverso*, con los colores al rev$s, es decir, "ondo blanco y te.to negro.
<body>
<p>Aola esto es un parra#o normal</p>
<p class="in0erso">3<rra#o con los colores in0ertidos</p>
<table>
<tr>
<td class="in0erso">?C6DO@P</td>
<td>CPOQ8)</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.
7.%./." Estilos *ue s$lo se utilizan una vez
Tambi$n podemos tener un estilo espec#"ico para un Fnico elemento, que no va a repetirse en ningFn otro caso. 'ara ello
tenemos los estilos asignados por identi"icador. os identi"icadores se de"inen en HTM utilizando el atributo id en la
etiqueta que deseamos identi"icar. El valor del atributo id ser! el que de"inamos nosotros.
<di0 id="capa4">
En la hoja de estilos, para de"inir el aspecto de ese elemento con id Fnico, se escribe el car!cter almohadilla, seguido del
identi"icador indicado en la etiqueta y entre llaves los atributos css que deseemos.
"capa4{
#ontsi2e! 4-pt;
#ont#amily! arial;
$
En este caso se ha asignado "uente de tama(o 45 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.
7./." Flu(o I?ML ' atributos CSS
!l -lujo )T04 es el modo en el que se an colocando los componentes de la pgina# a partir de c"mo
aparecen en el c"digo )T04 y los atributos CSS de los elementos.
Merece la pena detenerse a e.plicar lo que es el "lujo HTM, pues es un concepto sencillo y b!sico para poder entender
muchos asuntos acerca del posicionamiento -eb y en concreto el posicionamiento con CSS.
El "lujo de la p!gina es algo as# como el "lujo de escritura de elementos dentro del lienzo que nos presenta el navegador.
Sabemos que las p!ginas -eb son codi"icadas en HTM y los elementos aparecen en el c)digo en una posici)n dada. El
navegador, en el momento que interpreta el c)digo HTM de la p!gina, va colocando en la p!gina los elementos %de"inidos
por medio de etiquetas HTM& segFn los va encontrando en el mismo c)digo.
3B
'or ejemplo, pensemos en una p!gina que tiene un titular con H4, luego varios p!rra"os y alguna imagen. 'ues si lo primero
que aparece en el c)digo HTM es el encabezamiento H4, pues ese encabezado aparecer! en la p!gina tambi$n en primer
lugar. uego se colocar!n los p!rra"os y si la imagen aparec#a en el c)digo por Fltimo, en la p!gina tambi$n aparecer! al "inal.
Es decir, los elementos aparecen colocados tal como est$n ordenados en el c)digo. + esto se le llama el "lujo HTM, la
colocaci)n de los elementos en el lugar que corresponda segFn su aparici)n en el c)digo.
Esto en general ocurre con cualquiera de los elementos de la p!gina. Sin embargo, hay algunos atributos HTM que pueden
marcar distintas propiedades en el "lujo, como que una imagen se alinee a la derecha, con alignK*right*, con el te.to del
p!rra"o que pueda haber a continuaci)n rodeando la imagen. 'ero con HTM, si por ejemplo, una imagen va antes que un
p!rra"o, nunca vamos a poder intercambiar sus posiciones y colocar la imagen detr!s del p!rra"o que le sigue en el c)digo.
Esto no ocurre de igual manera cuando trabajamos con CSS, puesto que e.isten diversos atributos que pueden cambiar
radicalmente la "orma en la que se muestran en la p!gina, por ejemplo el atributo position que puede de"inir valores como
absolute, que rompe el "lujo de la p!gina, o mejor dicho, saca del "lujo de la p!gina al elemento que se le asigna.
7./.!." Comportamientos inline ' bloc> ' c$mo a.ectan al .lu(o de la p-gina
Cuando tratamos con etiquetas, e.isten dos modos principales de de comportamiento. Etiquetas como una imagen, o una
negrita, que "uncionan en l#nea %*inline*&, es decir, que se colocan en la l#nea donde se est! escribiendo y donde los
elementos siguientes, siempre que tambi$n sean *inline* se posicionan todo seguido en la misma l#nea. Tenemos por otra
parte los elementos que "uncionan como bloque %*blocS*& que implican saltos de l#nea antes y despu$s del elemento. 'or
ejemplo, los p!rra"os o encabezamientos son elementos con comportamiento predeterminado tipo *blocS*.
2os etiquetas muy utilizadas en la maquetaci)n CSS son 2<7 y S'+1. 8na de las di"erencias principales es que 2<7
"unciona con coportamiento *blocS* y S'+1 "unciona como *inline*. En realidad este es el comportamiento por de"ecto,
puesto que nosotros con CSS en cualquier momento podemos cambiarlo por medio del atributo display. 'or ejemplo0
<di0 style="display! inline;">
Dste elemento #uncionar< en lNnea
</di0>
E bien0
<span style="display! block;">
Dste span a%ora #unciona como blo=ue
</span>
Pealmente ambas posibilidades "uncionan dentro del "lujo HTM normal, as# que, tanto los elementos display inline como
display blocS, se encuentran dentro del "lujo HTM est!ndar, la Fnica 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.
7./.%." Atributo CSS Float ' el .lu(o
Etro atributo que a"ecta al "luir de los elementos en la p!gina es el atributo "loat de CSS, que se utiliza bastante en la
maquetaci)n -eb. Este atributo podemos utilizarlo sobre elementos de la p!gina de tipo *blocS* y lo que hace es
convertirlos, en *"lotantes* que es un comportamiento parecido a lo que ser#a el mencionado anteriormente *inline*. Con
"loat podemos indicar tanto le"t como right y conseguiremos que los elementos se posicionen a la izquierda o la derecha,
con el contenido que se coloque a continuaci)n rodeando al elemento "lotante. a di"erencia es que los elementos continFan
siendo tipo *blocS* y aceptan atributos como el margen %atributo CSS margin&, para indicar que haya un espacio en blanco a
los lados y arriba y abajo del elemento.
'or ejemplo, los elementos de las listas %etiqueta <& son por de"ecto de tipo *blocS*, por eso aparecen siempre uno abajo de
otro, en l#neas consecutivas. 'ero nosotros podr#amos cambiar ese comportamiento con0
li{
#loat! rig%t;
$
+s#, una lista como esta0
<ul>
<li>Dlemento4</li>
3G
<li>Dlemento-</li>
<li>Dlemento*</li>
</ul>
7er#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.
7././." Flu(o ' el atributo position
El atributo position de CSS s# que es capaz de cambiar radicalmente el "lujo de los elementos de la p!gina. Este atributo, que
e.plicaremos con detalle m!s adelante en otros art#culos de 2esarrollo3eb.com, por de"ecto tiene el valor *static*, que
indica que el elemento "orma parte del "lujo HTM normal de la p!gina.
Sin embargo, con el atributo CSS position, podemos indicar otros valores que hacen que los elementos salgan del "lujo
HTM y se posicionen en lugares "ijos, que no tienen que ver con la posici)n en la que aparezcan en el c)digo HTM. 'or
ejemplo0
<di0 style="position! absolute; top! 4(px; le#t! 4((px;">
Dste elemento tiene posicionamiento absoluto
</di0>
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.
Etro 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. Pecomendamos seguir la lectura, para
las personas que quieran pro"undizar en este tema, a partir del art#culo 'osicionamiento CSS.
7.6." ,osicionamiento CSS
4as hojas de estilo en cascada incorporan m1ltiples -ormas para posicionar elementos en la pgina# lo
que com1nmente se conoce como posicionamiento CSS.
En el Manual de CSS de 2esarrollo3eb.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-.
1o 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.
7.6.!." Atributos para posicionamiento CSS
E.isten numerosos atributos para posicionar con CSS cualquier elemento de la p!gina. +dem!s, a medida que van siendo
presentadas nuevas versiones de CSS, estos atributos y sus posibles valores van aumentando. En CSS 5 contamos con
diversos atributos que veremos a continuaci)n.
Atri.uto osition:
Este atributo es, digamos, el principal para de"inir el tipo de posicionamiento de un elemento. Merece la pena verlo por
separado y en detalle. M!s adelante lo trataremos en el art#culo Tipos de posicionamiento con el atributo position, pero
3H
adelantamos que va a permitir varios valores para establecer c)mo se posicionar! el elemento en la p!gina y si "ormar! parte
del "lujo normal de HTM. Sus valores posibles son absolute, "i.ed, relative, static e inherit.
Atri.utos to, left, right, .ottom:
Sirven para indicar la posici)n de un elemento, cuando $ste tiene los valores de position *absolute*, *relative* o *"i.ed* %en
otros valores del atributo position estos atributos son ignorados&. El atributo top indica la distancia desde el borde superior
de la p!gina y le"t desde el borde de la izquierda. Tambi$n se puede indicar opcionalmente la posici)n con bottom, que es la
distancia desde abajo y right, que es la distancia desde la derecha.
Atri.utos float y clear:
,loat sirve para establecer que un elemento tiene que *"lotar*, coloc!ndose los valores *right* o *le"t* para que "loten a
izquierda o derecha. 'or si sirve de aclaraci)n, que los elementos "loten es algo as# como lo que pasa cuando de"inimos el
atributo HTM alignK*right* o alignK*le"t* en las im!genes o tablas. Con el atributo clear hacemos que el elemento se
coloque en el primer !rea libre que tenga al lugar donde se indique. 'or ejemplo el valor de clear *right* hace que el
elemento se coloque en el primer lugar donde no tenga ningFn elemento "lotando a la derecha. El valor de clear *both* hace
que el elemento se coloque donde no tenga elementos "lotanto, tanto a la derecha como a la izquierda.
Atri.uto cli:
Establece un !rea de recorte de la porci)n visible de un elemento. Este !rea de recorte se establece con varios valores, como
se detalla en el art#culo atributos para capas.
Atri.uto dislay:
Especi"ica el tipo de caja que debe que tener un elemento, que puede ser de diversas "ormas. Este atributo tambi$n tiene
bastante utilizaci)n y entre los valores m!s corrientes podr#amos destacar0 *none*, que hace que esa caja o elemento no
aparezca en la p!gina ni se reserve espacio para ella. *blocS*, que sirve para que la caja sea un bloque y se muestre en una
l#nea o l#neas independientes de otros elementos de la p!gina. *inline*, que indica que esa caja tiene que mostrarse en la
misma l#nea que otros elementos escritos antes o despu$s.
Atri.uto o!erflo-:
Este atributo sirve para decir qu$ es lo que pasa con los elementos que no caben en una caja debido a las dimensiones de la
misma y del contenido que tenga. Se e.plica con detalle en el art#culo Ever"lo- en CSS.
Atri.uto !isi.ility:
+tributo para de"inir la visibilidad de un elemento. Con este atributo podemos decir que ciertos elementos de la p!gina sean
visibles o invisibles, pero atenci)n, aunque un elemento sea invisible, continFa ocupando espacio en la p!gina. Si queremos
que no sea invisible y no se le reserve espacio en la p!gina, hay que utilizar el atributo display con el valor *none*. os
valores m!s corrientes de visibility son0 *visible*, que hace que el elemento se vea %valor por de"ecto& y *hidden*, que hace
que el elemento sea invisible, aunque continFe ocupando espacio.
Atri.uto +&inde5:
Este atributo tiene como valor cualquier nFmero 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 zAinde., la capa se coloca m!s al
"rente, tapando otras capas que tengan valores menores de zAinde..
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.
3'
7.7." ?ipos de posicionamiento con el atributo position de CSS
!$plicamos los distintos alores que puede tener el atributo position de CSS# con detalle.
En lo que se conoce como posicionamiento CSS, el atributo de hojas de estilo en cascada que m!s importancia tiene es el
position. 7amos a dedicar todo el presente art#culo a e.plicar los distintos valores de position, para e.plicarlos y proponer
unos ejemplos que esperamos acaben de aclarar los posibles valores que puede tomar.
Pecordemos que en el art#culo anterior de este manual de CSS ya se introdujo el concepto de posicionamiento CSS y se vio
un listado de los atributos e.istentes hasta CSS 5 para realizar posicionar elementos en la p!gina. 'asemos entonces al tema
en cuesti)n, viendo las posibilidades que nos o"rece este lenguaje. +dem!s, a lo largo de este art#culo de 2esarrollo3eb.com,
vamos a mencionar repetidas veces un concepto que tambi$n se e.plic) anteriormente0 el "lujo del HTM normal.
7.7.!." position@ static
Es el valor predeterminado del atributo y el posicionamiento normal de los elementos en la p!gina. =uiere decir que los
elementos se colocar!n segFn el "lujo normal del HTM, es decir, segFn est$n escritos en el propio c)digo HTM. 'or
decirlo de otra manera, static no provoca ningFn posicionamiento especial de los elementos y por tanto, los atributos top,
le"t, right y bottom no se tendr!n en cuenta.
'odemos ver un ejemplo de posicionamiento static0
<di0 style="position! static; backgroundcolor! "##B; padding! 4(px; 1idt%! *((px;">Dsto es una capa
con posicionamiento est<tico</di0>
<di0 style="position! static; backgroundcolor! "#B#; padding! 4(px; 1idt%! .((px;">posicionamiento
static, predeterminado.</di0>
<%4>R@@</%4>
<di0 style="backgroundcolor! "B##; padding! 4(px; 1idt%! 5((px;">3osicionamiento static, aun=ue en
este caso no se indicL el atributo position static, pues no %ace #alta.</di0>
'uede verse en una p!gina aparte.
7.7.%." position@ absolute
El valor absolute en el atributo position permite posicionar elementos de manera absoluta, esto es de manera de"inida por
valores de los atributos top, le"t, bottom y right, que indican la distancia con respecto a un punto. as capas o elementos con
posicionamiento absoluto quedan aparte del "lujo normal del HTM, quiere decir esto que no se a"ectan por el lugar donde
aparezcan en el c)digo HTM y tampoco a"ectan ellas a otros elementos que s# que "ormen parte del "lujo normal del
HTM.
os valores top, le"t, bottom y right se e.presan con unidades CSS y son una distancia con respecto al primer elemento
contenedor que tenga un valor de position distinto de static. Si todos los contenedores donde est$ la capa posicionada con
position absolute %todos sus padres hasta llegar a DE29& 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.
7eamos el siguiente c)digo HTM en el que hemos preparado varias capas con position absolute, pero con distintas
caracter#sticas0
<di0 style="position! absolute; 1idt%! *((px; %eig%t! 45(px; top! 4((px; le#t! *(px; background
color! "##''((; color! "###; padding! 4.px;2index! -;">
Dsta capa tiene posicionamiento absoluto.
<br>
<br>
Qe permite especi#icar top y le#t para colocarla con respecto a la es=uina superior i2=uierda.
</di0>
<di0 style="position! absolute; 1idt%! '-(px; %eig%t! *(px; padding! 4(px; backgroundcolor! "dd#;
top! 4.(px; le#t! 4(px; 2index! 4;">3osicionamiento absoluto con 2index menor (la capa aparece por
deba&o de otras =ue se superponen con 2index mayor.</di0>
<di0 style="position! absolute; 1idt%! 4((px; %eig%t! -(px; padding! 4(px; backgroundcolor! "dd#;
bottom! 4(px; rig%t! 4(px;">3osicionamiento absoluto con atributos bottom y rig%t</di0>
%(
<%4>3osicionamiento R@@</%4>
'odemos ver el ejemplo en una p!gina aparte.
a primera capa %llamamos as# a los elementos 2<7 que tienen posicionamiento CSS&, tiene como todas las del ejemplo,
posicionamiento absoluto. os atributos top0 4NNp. y le"t0 6Np. quieren decir que se posiciona a 4NN p#.eles de la parte
superior de la p!gina y a 6N 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
zAinde.0 5, 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 zAinde.04. Eso quiere decir, que en caso se posicione en el mismo lugar se
ocultar! por la capa primera, que tiene un zAinde. 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.
7eamos un segundo ejemplo donde vamos a colocar una capa con posicionamiento absoluto y dentro varias capas tambi$n
posicionadas con absolute.
<di0 style="position! absolute; top! 4((px; le#t! -((px; backgroundcolor! "##BBKK; 1idt%! 5((px;
%eig%t! 4((px;">
<di0 style="position! absolute; top! 4(px; le#t!4(px;">
Fno
</di0>
<di0 style="position! absolute; top! 4(px; le#t!4((px;">
>os
</di0>
<di0 style="position! absolute; top! 4(px; le#t!-((px;">
7res
</di0>
</di0>
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
position0 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.
7.7./." position@ relative
El valor relative en el atributo position indica que la capa s# "orma parte del "lujo normal de elementos de la p!gina, por lo
que su posici)n depender! del lugar donde est$ en el c)digo y el "lujo HTM. +dem!s, las capas con posicionamiento
relative, admiten los valores top y le"t para de"inir la distancia a la que se colocan con respecto al punto donde est$ en ese
momento el "lujo normal del HTM. Como a"ectan al mencionado "lujo del HTM, los elementos colocados despu$s de las
capas relative, tendr!n en cuenta sus dimensiones para continuar el "lujo y saber d)nde colocarse. Sin embargo, no se tendr!
en cuenta los top y le"t con"igurados.
7eamos un ejemplo que quiz!s aclare las cosas.
<%4>Aola</%4>
<di0 style="backgroundcolor! "K(K; color!"##c; padding!4(px; textalign! center; 1idt%!
*((px;">Aola esto es una prueba</di0>
<di0 style="position! relati0e; 1idt%! *((px; padding! 4(px; backgroundcolor! "(KK; color!"##c;
top!4((px; le#t! *(px;">capa de posicionamiento relati0e<br>@e tiene en cuenta esta capa para
posicionar las siguientes.</di0>
<%->%ola de nue0oI</%->
'odemos ver la p!gina en marcha.
as etiquetas H4 y H5 respetan el "lujo HTM y tambi$n tenemos un elemento 2<7 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 2<7, 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
%1
tocar#a con respecto al "lujo.
El Fltimo H5 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.
7.7.6." position@ .i3ed
Este atributo sirve para posicionar una capa con posicionamiento absoluto, pero su posici)n "inal ser! siempre "ija, es decir,
aunque se desplace el documento con las barras de desplazamiento del navegador, siempre aparecer! en la misma posici)n.
El lugar donde se *anclar!* la capa siempre es relativo al cuerpo %el espacio disponible del navegador para la p!gina&. Si
utilizamos top y le"t, estaremos marcando su posici)n con respecto a la esquina superior izquierda y si utilizamos bottom y
right su posici)n ser! relativa a la esquina in"erior derecha.
7eamos un ejemplo.
<di0 style="position! #ixed; 1idt%! *((px; %eig%t! 45(px; top! 4((px; le#t! *(px; backgroundcolor!
"##''((; color! "###; padding! 4.px;2index! 4;">
Dsta capa tiene posicionamiento #ixed.
<br>
<br>
Qe permite especi#icar top y le#t para colocarla con respecto a la es=uina superior i2=uierda.
</di0>
<di0 style="position! #ixed; 1idt%! J((px; %eig%t! *(px; padding! 4(px; backgroundcolor! "d(#; top!
4.(px; le#t! 4(px; 2index! -;">3osicionamiento #ixed</di0>
<%4>Aola</%4>
<di0 style="position! #ixed; 1idt%! 4((px; %eig%t! *(px; padding! 4(px; backgroundcolor! "(d#;
bottom! 4(px; rig%t! 4(px; 2index! 5;">3osicionamiento #ixed</di0>
<br>
<br>
<br>
<br>
3ongo texto para =ue se 0eaII
<br>
<br>
<br>
Dsto %ace despla2amiento, con tanto br
<br>
<br>
...
<br>
Se puede ver la p!gina en marcha con este c)digo.
Se puede ver que hay varias capas con position0 "i.ed y un mont)n de DP 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 a y superiores. +dem!s, para que "uncione en E.plorer tiene que declararse un 2ECT9'EG. Servir#an varios tipos de 2ECT9'EG,
sin embargo deber#a declararse con el "ormato completo. +lgo as# como0
<I>PR7H3D A7Q) 3F9)?R "//S*R//>7> A7Q) 5.(4 7ransitional//DC"
"%ttp!//111.1*.org/7O/%tml5/loose.dtd">
E por poner otro ejemplo0
<I>PR7H3D %tml 3F9)?R "//S*R//>7> TA7Q) 4.( 7ransitional//DC"
"%ttp!//111.1*.org/7O/x%tml4/>7>/x%tml4transitional.dtd">
%2
7.7.7." position@ in2erit
El valor inherit indica que el valor de position tiene que heredarse del elemento padre. 1o "unciona en E.plorer, al menos
hasta la versi)n O. Tiene en verdad poca utilidad y adem!s, como no "unciona en el navegador m!s utilizado en la actualidad,
tiene aun menos sentido usarlo. 'or ello, no ponemos ejemplos.
7.7.:." Conclusi$n sobre el atributo position de CSS
Esperemos que con las anteriores e.plicaciones y ejemplos se hayan podido entender bien las distintas posibilidades del
atributo position, que es sin duda clave para el posicionamiento CSS. o m!s comFn para la maquetaci)n -eb es utilizar el
posicionamiento static, pero el posicionamiento absoluto, junto con el posicionamiento "i.ed, e incluso relative, pueden ser
muy Ftiles para dise(os m!s complejos, donde se requiera una mayor precisi)n en la colocaci)n de los distintos elementos o
las capas.
+dem!s, para hacer e"ectos Wavascript y 2HTM en general, se utilizan "recuentemente posicionamientos absolutos. Son
muy Ftiles porque permite que los elementos din!micos no "ormen parte del "lujo normal del HTM, y por tanto, podemos
situarlos en cualquier lugar el !rea disponible del navegador, e incluso moverlos din!micamente al cambiar sus propiedades
top y le"t mediante scripts en el lado del cliente. Todos estos comportamientos din!micos quedan ya "uera de la tem!tica de
este te.to, aunque los e.plicamos con detalle en distintos manuales de la secci)n Wavascript a ,ondo, de 2esarrollo3eb.com.
7.:." EL atributo 1ver.low de CSS
!$plicamos esta propiedad interesante contemplada en la especi-icaci"n CSS 5.
En este art#culo del Manual de CSS de 2esarrollo3eb.com vamos a e.plicar una propiedad interesante de CSS, contemplada
en la especi"icaci)n CSS 5, Ever"lo-. Es un atributo de esos que nos servir!n para maquetar las capas de una -eb de una
manera m!s vers!til y detallada.
Ever"lo- sirve en el modelado de cajas para indicar al navegador qu$ es lo que debe hacer con el contenido que no cabe
dentro de una capa, segFn las dimensiones que se le han asignado.
Como sabemos, a las capas %elementos 2<7& 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-.
2icho de otro modo, over"lo- permite que se recorte el contenido de una capa, para mostrar Fnicamente el contenido que
quepa, segFn 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-0
!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.
%3
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 sigue0
>html?
>head?
>title?T#tulo>@title?
>@head?
>body?
Cuerpo...
>@body?
>@html?
Este ejemplo, habremos podido apreciar la barra de desplazamiento vertical, se obtiene con un atributo over"lo-0 autoU. El
c)digo utilizado es como sigue0
<di0 style="o0er#lo1! auto; 1idt%! *((px; %eig%t! 4((px; backgroundcolor!"ededed; border! 4px solid
"BB((((;">
RPC7DC?>P....
</di0>
+hora veamos otro ejemplo, en el que simplemente se recorta el te.to que no cabe en la capa. Hemos indicado over"lo-0
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-0 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 sigue0
<di0 style="o0er#lo1! %idden; 1idt%! -((px; %eig%t! .(px; border! 4px solid "BB((((;">
RPC7DC?>P...
</di0>
+qu# se pueden ver varios ejemplos de uso de over"lo-.
%%
Parte #:
$rucos consejos
a%an&ados so're CSS
9lgunos trucos + conse/os (undamentales 1ue debemos conocer si deseamos realizar un
uso de -55 medianamente aanzado.
:.!." ?rucos CSS para no enlo*uecer
Algunas soluciones a los problemas tipicos que te puedes encontrar con CSS.
Todav#a no tires el monitor contra la pared. +qu# los principales trucos CSS para hacer "rente a los t#picos problemas que se
en"rentan los dise(adores -eb cuando maquetan con CSS. 'odr!n e.istir discrepancias entre los lectores, pero aclaro que
estas son t$cnicas que a mi personalmente me han dado resultado, despu$s de muchas pruebas e intentos aprend# esto...
:.!.!." +sa un contenedor global para todas las ca(as <cuando las cosas se disparan=
2e 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. Ebviamente estamos hablando de
sitios Z"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 `NNp. centrado0
"contenedor {
margintop! (px;
marginrig%t! auto;
marginbottom! (px;
marginle#t! auto;
1idt%! B((px;
$
:.!.%." Aue .lote a la iz*uierda <cuando las ca(as se superponen=
Esta es una muy buena "orma de evitar incompatibilidades entre navegadores. El uso de hacSs de CSS se deb#a en gran parte
porque se trabajaba Zcentrando[ las cajas. Si por ejemplo precisas poner tres cajas de 6NNp. en un contenedor de `NNp.
puedes hacer lo siguiente.
Ejemplo0
"ca&a {
#loat! le#t;
1idt%! *((px;
$
%4
:.!./." Calcular bien los paddings o rellenos <cuando las ca(as se van aba(o=
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.
b'ara que sirven los paddings o rellenos^ Dueno, lo que hace es generar un Zrelleno[ 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 ejemplo0 si tenemos
una caja de 6NNp. y le aplicamos un padding de 4Np. en la izquierda, ahora tendremos una caja de 64Np.. 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 4p. 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 5`Np. con paddings de 4Np. a la izquierda.
Ejemplo0
"ca&a {
#loat! le#t;
1idt%! -B(px;
paddingle#t! 4(px;
backgroundcolor! "::DK>>;
$
:.!.6." El pi de p-gina con anc2o .i(o <cuando el pi de p-gina enlo*uece=@
'ara entender mejor como "unciona el uso de cajas en CSS se puede pensar en un grupo de objetos de di"erentes "ormas
que luchan por adaptarse y ocupar el espacio que se ha pre"ijado. Sucede muchas veces que los pi$ de p!gina son los m!s
problemas traen cuando se maqueta un sitio. E se va para arriba, se alinea a la izquierda, o se desborda, etc. Muchos
resolv#amos este tema pre"ijando valores "ijos a las alturas de cajas, pero no tiene sentido. o que se debe hacer es de nuevo
establecer un valor de ancho "ijo. 2e esta "orma el pi$ se va a hacer su lugar del resto e ir! a parar donde tiene que ir.
Ejemplo0
"pie {
1idt%! B((px;
backgroundcolor! "KKKKKK;
$
1o todo es 4X4K5 en CSS %cuando los anchos no cierran&
8n problema comFn 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.
:.!.7." 1tros trucos r-pidos
Trucos sencillos, de los que no hace "alta e.plicar mucho pero que son muy pr!cticos y te har!n m!s "!cil el trabajo y
evitar!n posibles errores.
A 8sa colores di"erentes para distinguir las cajas
A 'on una palabra descriptiva en cada caja
A Comenta el c)digo "uente y se(ala los "inales de los contenedores grandes
A 1o mezquines espacios entre los divs
A 1o seas un "undamentalista y no quieras escribir tu CSS con dos o tres l#neas. Si no quieres errores escribe lo necesario.
A Cuidado con el tama(o de las im!genes que insertas, estas cambian el ancho de los contenedores.
A Elige bien los nombres de cada div y trata de ser ordenado en el c)digo.
A Si vas a trabajar con varias cajas, trata de agruparlas de a grupo, esto es muy importante. 'or ejemplo un contenedor que
agrupe tres o cuatro cajas.
%B
:.!.:." 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 Zataduras[ de este tipo, si tienes alguna no dudes en comentarlas en este mismo art#culo.
=ue pasa cuando no puedes resolver un problema con CSS o similar^ + mi me ha dado resultado levantarme un rato, hacer
cualquier otra cosa y luego volver e intentar de nuevo.
2ejar de renegar y no enloquecer con CSS depender! de la cantidad de tiempo, trabajo y es"uerzo que le metas a tu trabajo.
1o lo dudes.
Artculo por Leonardo A. Correa
:.%." +tilizar porcenta(es para tamaos de te3to con CSS
!l tama/o del te$to se puede cambiar por medio de CSS# para agrandarlo o disminuirlo# por medio de
porcentajes# de modo que el nueo tama/o sea relatio al tama/o actual.
El porcentaje es otra de las medidas o unidades que podemos utilizar en los atributos de hojas de estilo en cascada %CSS&
para de"inir un tama(o. En este art#culo veremos ejemplos acerca de modi"icar los tama(os de los te.tos por medio de
porcentajes, para conseguir nuevos tama(os que sean relativos a los que se est!n utilizando.
'or ejemplo, podr#amos de"inir un estilo para escribir con un te.to el doble de grande del que se est$ trabajando0
<span style=U#ontsi2e!-((+U>Dste texto es el doble de grande</span>
Esto quiere decir que el te.to ser! el doble de grande, 5 por las unidades de te.to que estemos trabajando. 'or ejemplo, si
estamos trabajando con tama(os de te.to de 4Npt, el te.to dentro del anterior span ser#a 5Npt. El del siguiente c)digo
ejempli"ica este caso concreto0
<span style="#ontsi2e!4(pt;">Aola amigos <span style="#ontsi2e!-((+">Dste 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 4NN:. 'or ejemplo, si
quisi$ramos hacer un te.to de la mitad del tama(o utilizar#amos la siguiente etiqueta0
<span style="#ontsi2e!.(+">Dste texto es la mitad del anterior<,/span>
Si estuvi$ramos trabajando con un tama(o de te.to de 4Rpt, con la anterior etiqueta se escribir#a con tama(o Opt. El c)digo
ser#a el siguiente0
<span style="#ontsi2e!4Kpt;">Aola amigos
<span style="#ontsi2e!.(+">Dste texto es la mitad 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">
.mayor {#ontsi2e!4.(+$
.menor {#ontsi2e!J.+$
</style>
Este c)digo indica que la clase mayor es un te.to el 4MN:, es decir, la mitad m!s que el anterior, y la clase menor un te.to
del aM:, es decir tres cuartas partes del anterior. 'odr#amos utilizar estas clases con un c)digo como este0
Este es un te.to normal >span classK*mayor*?y este es mayor>@span?, este vuelve a ser normal >span classK*menor*?y
este es menor>@span?
os distintos ejemplos de este art#culo podemos verlos en una p!gina aparte.
%G
:./." CSS sem-nticas. +n nuevo en.o*ue
!$isten in-inidad de sitios en 6nternet que o-recen miles de propuestas di-erentes a la hora del uso de
hojas de estilo CSS en la maquetaci"n de portales 'eb# como sabemos aplicables a m1ltiples tecnologas2
7)T04# 8lash# etc9
o que es di"#cil de encontrar es aquella soluci)n que se adapte per"ectamente a tus desarrollos, a tu entorno concreto. =uiz!
m!s di"#cil aun es adecuar algFn en"oque similar al tuyo. Esta tarea es proclive a mFltiples errores, que ir!n saliendo
con"orme se vaya utilizando y que llegado el momento, podemos comprobar que nos hemos equivocado de base, lo que
e.ige una reestructuraci)n desde el inicio.
Este es el conte.to en el que nos encontramos actualmente. Tras una "uerte apuesta por la reestructuraci)n y organizaci)n
de CSS basadas en su sem!ntica de uso se ve que si es quiz! uno de los en"oques m!s acertados, deja bastantes puntos
abiertos que es necesario concretar. Esa es la tarea que nos proponemos aqu#.
'ara los no iniciados, comentar que el en"oque sem!ntico se basa en la idea de que la manera de estructurar la in"ormaci)n
relativa a la caa de resentaci(n de nuestros proyectos -eb debe de seguir el criterio de qu$ es y el conte.to donde se usa
cada elemento.
El entorno -eb tiene una caracter#stica "undamental que pocos otros tienen y es la capacidad y potencialidad de uso en
mFltiples 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.
%H
+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 mFltiples dispositivos.
%'
:./.!." ,untos a tener en cuenta
Estructura jer!rquica de las CSS
1uestras hojas de estilo seguir!n una estructura jer!rquica, cuyo elemento principal ser! el que incluya, para cada tipo de
dispositivo, las hojas de estilo correspondientes.
E.plicaci)n de cada una de las hojas de estilo
Pantalla"css, Imresora"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 %Iimport url%[\css[& &. 1o incluyen estilos
concretos.
3ayoutPantalla"css, 3ayoutImresora"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
%Danner, menFs, 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
4(
navegadores %<nternet E.plorer, Mozilla, ,ire"o., Epera, etc.&
1iograf$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 R5.M: en la etiqueta body, que se establece como medida
equivalente a 4em. El resto de tama(os vendr!n supeditados a este %mayores0 4.5em, 4.Mem, etc\, y menores0
N.Oem, N.Mem, etc.&
Cormularios"css" 2e"inici)n de los estilos aplicables a todas las etiquetas relacionadas con los "ormularios
gen$ricos.
:./.%." ;ocumentos asociados a este art&culo
CSS Sem!nticas . <ncluye los distintos CSS descritos.
'!gina ejemplo en VHTM con una maquetaci)n tipo basada en capas
Artculo por Jos Juan Corpas Martos
:.6." CSS sem-nticas. +n nuevo en.o*ue <##=
!ste artculo es la continuaci"n de CSS semnticas. %n nueo en-oque# y trata de dar una serie de
consejos o recomendaciones a la hora del uso de hojas de estilo y escritura de c"digo 7)T04.
Toda la in"ormaci)n est! basada en el post citado, as# como los "icheros relacionados.
:.6.!." 0ecomendaciones de uso ' escritura de c$digo
8sar las etiquetas HTM estrictamente para lo que se han concebido
Si se consigue crear un c)digo VHTM lo m!s limpio y claro posible se ver! reducido considerablemente el nFmero de
estilos propios que tendremos que crear y evitaremos la mayor#a de los errores e inconsistencias comunes.
Maquetar en base a capas %div&, no usar tablas %table&.
'!rra"os0 %p&
Encabezados0 %h4, h5, \ hR&
Tablas0 %table, thead@tr@th, tbody@tr@td&
istas0 %ul@li, ol@li&
MenFs0 basados en listas con el atributo display0inline
8so 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 %:& y el em %4em equivale a 4NN:, 4.5em a 45N:\, N.aem aN:, \&
Es muy importante este punto por varios aspectos0
1o todas las personas tienen el monitor a la misma resoluci)n y nuestra tipogra"#a le puede resultar muy peque(a o
grande segFn 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
41
constante crecimiento en las ventas de monitores de gran tama(o %4a pulgadas o m!s& y resoluci)n %4N5;caRO 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.
Crear estilos o rede"inirlos solo en el caso estrictamente necesario
Si creamos nuestras p!ginas haciendo un uso adecuado de las etiquetas VHTM 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 Jos Juan Corpas Martos
:.7." !9 errores comunes en los css
!sta es una recopilaci"n de errores comunes en las hojas de estilo. !s bastante proechoso hacer una lista
con estos y otros errores comunes.
:.7.!." !.+so innecesario del valor 9
El c)digo siguiente no necesita la unidad especi"icada si el valor es cero.
padding!(px (px .px (px;
En su lugar puede ser escrito de esta manera0
padding!( ( .px (;
2e la misma manera es igual para otros estilos. Ej.0
margin!(;
1o malgastes espacios agregando unidades tales como p., pt, em, etc, cuando el valor es cero. a Fnica 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,lineAheight puede no tener unidad.'or eso es v!lido lo siguiente0
line%eig%t!4;
2e cualquier manera puedes utilizar una unidad en concreto como em si lo deseas.
:.7.%." %.Los colores en .ormato 2e3adecimal necesitan una almo2adilla
Esto est! mal0
color! eaKbc-;
2ebe ser0
color! "eaKbc-;
E esto otro0
color! rgb (-*5.4(J.4B5);
:.7./." /.Galores duplicados en los c$digos de colores
1o escribir el c)digo de esta manera0
color! "######;
42
backgroundcolor!"((((((;
border!4px solid "eeKKaa;
os valores duplicados pueden ser omitidos.Escribiendo los c)digos de esta manera0
color!"###;
backgroundcolor!"(((;
border!4px solid "eKa;
d'or supuesto esto no debes hacerlo con c)digos como esteG
color! "#eKBb-;
:.7.6." 6.Evitar repeticiones de c$digo innecesaria
Evita usar varias l#neas cuando lo puedes conseguir con una sola. 'or ejemplo, al "ijar los bordes, algunas veces se debe hacer
por separado pero en casos como el siguiente no es necesario0
bordertop!4px solid "((#;
borderrig%t!4px solid "((#;
borderbottom!4px solid "((#;
borderle#t!4px solid "((#;
'odr#amos resumirlo en una Fnica l#nea esta0
border!4px solid "((#;
:.7.7." 7.La duplicaci$n es necesario con los estilos en cascada
En los estilos en cascada es aceptable repetir el mismo codigo para un elemento elemento dos veces, si signi"ica evitar la
repetici)n mencionada en el punto arriba. 'or ejemplo, dig!mos que tenermos un elemento donde solamente es di"erente el
*border* izquierda. En vez de poner cada *border* escrito usando cuatro l#neas, uso s)lo dos0
border!4px solid "((#;
borderle#t!4px solid "#((;
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#0
bordertop!4px solid "((#;
borderrig%t!4px solid "((#;
borderbottom!4px solid "((#;
borderle#t!4px solid "#((;
Ebviamente 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.
:.7.:." :.Los estilos inv-lidos no 2acen nada
8n ejemplo es su"iciente para e.plicar este error0
padding!auto
Este estilo solo puede ser aplicado a -idth y height pero no a padding.
:.7.B." B.C$digo Espec&.ico para cada navegador
Ebviamente este tipo de c)digo solo "uncionar! en el navegador al que va destinado , pero es hay que pensar si es rentable
puesto que solo algunos usuarios podr!n apreciar esos cambio.
:.7.C." C.Espacio perdido
1o estoy seguro del porqu$ pero muchos dise(adores estan empe(ados en desaprovechar el espacio en su c)digo, usando
43
un mont)n de innecesarios saltos de l#nea. Pecuerda que eso s)lo lo ver!s tu y estas haciendo un uso e.cesivo de ancho de
banda. Tambien tu c)digo ser! m!s "acil de leer puesto que tendr! menos *boquetes*.
'or supuesto es sabio dejar un cierto espacio para mantenerlo legible, aunque a algunos les encanta condensar todo, no
dejando ningFn espacio.
:.7.J." J.Especi.icar los colores sin usar palabras
2e"inir los colores usando las palabras que lo de"inen no es una buena idea puesto que estar#amos con"iando en el
navegador para que el interprete que color y c)digo debe aplicar.as tonalidades para un mismo nombre de color cambian
mucho de un navegador a otro.
Es una buena pr!ctica especi"icar siempre el color por su c)digo he.adecimal.
Ej.0 utilizar *L"""* en lugar de blanco.
:.7.!9." !9.Agrupar estilos idnticos
Es comFn ver los estilo escritos una y otra vez con el mismo c)digo, aFn cuando el estilo es igual.
Ser#a conveniente agruparlos y asi optimizar#amos espacio0
%4, p, "#ooter, .intro {
#ont#amily!8rial,Ael0etica,sansseri#;
$
Tambien nos hara mucho m!s "acil la tarea de actualizar el c)digo.
Artculo por Manu !utierrez
:.:." 0eglas de estilo CSS de usuario ' de autor
.eamos qu& son las reglas de estilo de usuario# con-iguradas opcionalmente por cada usuario en su
naegador# y las reglas de estilo de autor# que de-ine el desarrollador de cada 'eb.
os navegadores modernos implementan dos tipos de reglas de estilo para una p!gina -eb, las de usuario y las de autor. Son
conjuntos de reglas de estilo que a"ectan a los elementos de la p!gina, es decir, a cualquier documento HTM que se vea en
el navegador.
as reglas de estilo de usuario %user stylesheet rules& las de"ine cada persona en su navegador, a modo de con"iguraci)n
global, para todas las p!ginas que visita.
as reglas de estilo de autor %author stylesheet rules& son las que de"inen los autores de las p!ginas, es decir, los
dise(adores o desarrolladores de cada una de las p!ginas que visitamos. 'or decirlo de otra "orma, las hojas de estilo de
autor son las CSS que conocemos y que hemos aprendido a crear en el Manual de CSS.
as reglas de estilo de usuario son menos importantes para el navegador, de cara al orden de precedencia o prioridad. Es
decir, en caso que en las reglas de estilo de usuario y de autor se de"ina una misma propiedad de estilos CSS, la que se tiene
en cuenta es la regla de estilo de autor, osea, lo que haya con"igurado el dise(ador de la p!gina. Sin embargo, esto se puede
cambiar puntualmente si el usuario lo desea.
Como sabemos, cualquier elemento de la p!gina tiene unas reglas de "ormato predeterminadas, que de"inen los navegadores.
a hoja de estilo de usuario nos permite cambiar esas reglas de estilo prede"inidas, de modo que si una p!gina -eb no
declara un estilo determinado para un elemento, se tengan en cuenta las reglas de estilo de"inidas por el usuario. 'or ejemplo,
generalmente las tablas no tienen borde, o al menos es la con"iguraci)n predeterminada en los navegadores que conozco.
Con las reglas de estilo de usuario yo podr#a de"inir que todas las tablas en el navegador a partir de ahora tuvieran un borde
de 4 p#.el y de color rojo. En ese caso, si el autor no de"ine c)mo debe ser el borde de una tabla en sus CSS, la tabla siempre
tendr#a borde de 4 p#.el y color rojo.
4%
as reglas de estilo de usuario son sobreescritas por las de autor, pero ello no quita importancia a las reglas de usuario, para
determinado tipo de usuarios. <maginemos que por cualquier raz)n deseamos que las "uentes de las p!ginas que visitamos
sean de un tama(o mayor y de una "amilia tipogr!"ica determinada, para poder leerse mejor. Entonces podr#amos escribir
unas reglas de estilo de usuario como estas0
body{
#ontsi2e! 4Kpt;
#ont#amily! 0erdana, 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.
:.:.!." ;$nde se colocan las reglas de estilo de usuario
Cada navegador se con"igura de una manera distinta, luego las reglas de usuario, que aplicamos a cada cliente -eb que las
soporte, se tienen que indicar de manera distinta dependiendo de los navegadores que estemos utilizando.
En principio, se trata de un archivo de te.to que debe contener el c)digo CSS que queremos que se utilice de manera
predeterminada al ver una p!gina -eb. 'odremos alterar el estilo de cualquier elemento, igual que lo hacemos con las hojas
de estilo de autor, con la di"erencia que esos estilos se aplicar!n a todas las p!ginas que visitemos.
En el navegador ,ire"o. se pueden de"inir las reglas de estilo de usuario en un archivo llamado *userContent.css* que se
encuentra en la carpeta *chrome*, del per"il de usuario que estemos utilizando. El directorio donde est!n los per"iles de
,ire"o. depende del sistema operativo que estemos trabajando, en el caso de 3indo-s 7ista, y para mi usuario en particular,
est! en0
C0e8serseMiguele+pp2ataePoamingeMozillae,ire"o.e'ro"ilesejRbiSN;R.de"aulte
+s# que simplemente podr!s crear el archivo con los estilos que quieras, que deber#as colocarlo en una ruta como esta.
C0e8serseMiguele+pp2ataePoamingeMozillae,ire"o.e'ro"ilesejRbiSN;R.de"aultechromeeuserContent.css
El directorio *jRbiSN;R.de"ault* es el per"il de mi usuario concreto, que tendr! un nombre seguramente di"erente en el tuyo,
as# como *Miguel*, en el principio de la ruta %C0e8serseMiguele...&, que es mi nombre de usuario en el 3indo-s.
En el directorio *chrome* ver!s probablemente unos archivos llamados *userContentAe.ample.css*, que pueden servirte de
gu#a para crear tus propias reglas de estilo de usuario.
:.:.%." 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 Gimportant, 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{
#ontsi2e! 4Kpt Iimportant;
#ont#amily! 0erdana, arial;
44
$
Si vemos el anterior c)digo de ejemplo, al atributo "ontAsize le hemos aplicado la declaraci)n Gimportant, luego siempre 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 4Rpt. +hora bien, se hab#a de"inido una tipogra"#a como 7erdana, +rial, pero no era G
important, 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.
:.B." ;eclaraci$n Kimportant en CSS
!n CSS podemos declarar reglas de estilos como :important para que tomen precedencia sobre otras
reglas de estilos que se puedan encontrar en una pgina 'eb.
7amos a ver en este art#culo de 2esarrollo3eb.com, englobado dentro del Manual de CSS, una declaraci)n un tanto especial
que podemos utilizar al de"inir reglas de estilos para una p!gina -eb. Se trata de Gimportant, una palabra que har! que
determinadas propiedades tomen mayor importancia y, por tanto, se tengan m!s en cuenta que otras que puedan
sobreescribirlas.
Etra cosa que veremos de paso es c)mo el uso de Gimportant nos proporcionar! una sencilla y valida t$cnica para poder
de"inir reglas de estilos distintas para navegadores antiguos, como <nternet E.plorer R.
+dem!s, importantG se puede utilizar en las hojas de estilo de usuario, para que cada persona pueda de"inir para su propio
navegador si lo desea, un estilo CSS por de"ecto que se tenga en cuenta en todas las -eb que visitemos. Este caso ya se
e.plic) en el art#culo Peglas de estilo CSS de usuario y de autor.
:.B.!." +so ' e.ecto de la declaraci$n Kimportant
'ara utilizar Gimportant en una regla de estilo, siempre se coloca en la parte del valor del atributo, antes del punto y coma *U*.
'or ejemplo
body{
#ont#amily! 0erdana, arial Iimportant;
$
El e"ecto es que siempre se aplicar! el estilo de"inido como Gimportant, aunque luego se pueda sobrescribir con otro estilo
m!s tarde en la misma declaraci)n o en otra distinta. 7eamos este ejemplo0
td{
#ontsi2e! 4Kpt Iimportant;
#ontsi2e! 'px;
$
Tenemos una declaraci)n de estilos para los elementos T2, donde de"inimos dos veces el atributo "ontAsize. En condiciones
normales, se tendr#a en cuenta el valor de"inido en segundo lugar, porque lo sobrescribe. Sin embargo, que que el primer
"ontAsize est! de"inido como Gimportant, en realidad lo que ocurrir! es que se tenga en cuenta "inalmente y el tama(o de letra
por tanto ser! 4Rpt.
Este e"ecto lo podemos aplicar tambi$n a distintos tipos de selectores de CSS. 2e 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 Gimportant. 7eamos este ejemplo de CSS0
td{
#ont#amily! 0erdana, arial Iimportant;
$
td.micelda{
#ont#amily! monospace;
$
4B
=ue aplicado sobre el siguiente HTM0
<table>
<tr>
<td class="micelda">Aola</td>
<td>-*-*-</td>
</tr>
</table>
2ar#a como resultado, en condiciones normales, que la primera celda, de clase *micelda*, tuviese la "uente "ontA"amily0
monospace y la segunda celda, que no tiene ningFn class, tuviera el estilo "ontA"amily0 verdana, arial. Sin embargo, como el
"ontA"amily de"inido en primer caso tiene la declaraci)n Gimportant, la "uente ser! siempre verdana, arial, para las dos celdas.
:.B.%." +sar Kimportant para de.inir estilos di.erentes en navegadores antiguos
a declaraci)n Gimportant no la entienden todos los navegadores, por tanto, algunos simplemente la ignorar!n y otros no. El
caso m!s representativo, por ser un navegador que todav#a se utiliza habitualmente por los internautas, ser#a <nternet
E.plorer R.
+s# pues, utilizando Gimportant podemos conseguir de"inir estilos di"erentes para <nternet E.plorer R y para la mayor#a de
los otros navegadores que pueden visitar nuestra -eb. Esto lo podemos conseguir de la siguiente manera.
di0{
backgroundimage! url(#ondosemitransparente.png) Iimportant;
backgroundimage! url(#ondo.gi#);
$
Como <nternet E.plorer R ignora la directriz Gimportant, ocurrir! que tendr! en cuenta el segundo valor de bacSgroundA
image, ya que est! repetido y por tanto sobrescribe al primero. 'or ello, en este caso <ER mostrar! como "ondo el archivo
llamado *"ondo.gi"*.
os otros navegadores, como entienden Gimportant, mostrar!n el estilo que hab#a de"inido anteriormente y por tanto
utilizar!n como "ondo el archivo *"ondoAsemitransparente.png*.
Nota: 2icho sea de paso, como <ER tiene problemas al mostrar "ondos semitransparentes %con canal alpha en el '1Q& esta ser#a una posible
t$cnica para conseguir que en E.plorer R 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.
:.C." 0egla Lmedia de CSS
!$plicamos la regla +media permite de-inir estilos CSS espec-icos para distintos medios en los que se
pueda mostrar una pgina 'eb.
8na p!gina -eb se puede mostrar en di"erentes dispositivos. Esto es algo que ya conocemos y que, a medida que pasan los
a(os y avanzan las tecnolog#as, se hace cada vez m!s patente. 'or tanto, podemos dejar de pensar que nuestra -eb se va a
acceder simplemente desde un ordenador y para ayudarnos a que se vea bien en cualquier dispositivo, podemos de"inir
estilos distintos para cada tipo de medio con la regla Imedia.
<ncluso en el hipot$tico caso que descart$is que vuestra -eb pueda tener usuarios venidos de tel$"onos m)viles o
televisiones %por poner un par de ejemplos&, puede que necesit$is especi"icar estilos espec#"icos para cuando la p!gina -eb se
est! imprimiendo en papel. Todo ello son tipos de medios distintos, que podemos gestionar desde la llegada de CSS 5.
:.C.!." Sinta3is ' usos de la regla Lmedia de CSS %
a regla Imedia permite especi"icar estilos para distintos tipos de medios en la misma hoja de estilos. En ella podemos
4G
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 Imedia 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 papel0
@media print {
table{
1idt%! B(+;
border! -px solid "##(((;
$
.miclase{
display! none;
$
$
Como dec#amos, podemos indicar estilos CSS para varios medios a la vez0
@media t0, %and%eld {
body{
#ontsi2e! (.. em;
$
$
+dem!s, si lo deseamos, podemos especi"icar estilos para todos los medios, con el tipo de medio *all*.
@media all {
di0.imprimir {
display! %idden;
$
$
Nota0 +parte de la regla Imedia 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 <1H para enlazar con una
hoja de estilos e.terna, en el atributo *media*.
<link media="print" %re#="cssVsoloVparaVimpresion.css" rel="styles%eet" type="text/css">
'ara m!s in"ormaci)n, por "avor, accede al art#culo CSS para imprimir p!ginas -eb.
:.C.%." ?ipos de medios en CSS %
+hora podemos ver un listado de los tipos de medios que se de"inen en las especi"icaciones del lenguaje CSS 5.
+ll0 Cualquier tipo de medio.
Draille0 medio relacionado con dispositivos t!ctiles braile.
Embossed0 'ara impresoras braile.
Handheld0 para dispositivos de bolsillo o de mano que normalmente tienen una pantalla peque(a.
'rint0 medio espec#"ico para cuando se imprimen documentos en la impresora. 2esde la vista previa para imprimir
que tienen los navegadores, generalmente en el menF de +rchivo, tambi$n podemos ver el resultado de la p!gina
para impresi)n que utiliza los estilos CSS del tipo de media *print*.
'rojection0 tipo de medio que se aplica para las presentaciones que se muestran con proyector.
Screen0 medio que se utiliza para pantallas grandes, generalmente las pantallas de los ordenadores personales.
Speech0 medio para sintetizadores de voz.
Tty0 tipo de medio que se utiliza en dispositivos que tienen un tama(o "ijo de car!cter, como un teletipo, terminal,
consola de comandos etc. En este tipo de media no se puede usar la unidad de medida de p#.eles %p.& porque todo
lo que se puede mostrar es a nivel de car!cter.
Tv0 para cuando se accede a una -eb desde un dispositivo de televisi)n.
4H
Nota0 +l escribir los tipos de medios es indi"erente si lo hacemos con mayFsculas o minFsculas.
Estos tipos de medios son los que eran v!lidos con las especi"icaciones de CSS 5. 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 ejemplo0
@media t0, ne0era{
p{
backgroundcolor! "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.
:.J." ;epurar CSS
%na lista de los errores ms comunes en el c"digo CSS y c"mo aeriguar cul de esos errores se est
produciendo en tu c"digo# para depurar tus CSS.
El lenguaje para especi"icar estilos en p!ginas -eb, CSS, a veces resulta poco pr!ctico en "ase de depuraci)n. Muchas veces
es di"#cil saber qu$ errores hemos cometido y c)mo solucionarlos, pero con ayuda de una serie de consejos y buenas
pr!cticas, podremos minimizar el tiempo que perdemos en la bFsqueda de los problemas o errores cometidos cuando algo
no se ve e.actamente como nosotros quer#amos.
En este art#culo no pretendemos dar una receta, paso por paso, para hallar inequ#vocamente los errores CSS de un c)digo
dado, porque pueden ser variados y a veces esquivos, sino o"recer una serie de consejos o pr!cticas que nos ayudar!n a
encontrar un problema. 2e hecho, no siempre una Fnica t$cnica te ayudar! a encontrar el problema e.acto en cualquier
c)digo CSS, por lo que nos conviene ser e.pertos y tener a mano varios recursos para no volvernos locos cuando algo "alla.
=uiz!s merezca la pena comentar que en 2esarrollo3eb.com se public) hace tiempo un tutorial sobre c)mo hacer tu
c)digo CSS m!s correcto y resumido, as# como no cometer algunos erorres de sinta.is b!sicos. Todo ello lo puedes
encontrar en el art#culo 4N errores comunes en tu c)digo CSS. Este te.to es interesante para ayudarte a no cometer errores,
pero no cubre muchos problemas b!sicos que podemos encontrar cuando probamos los estilos que hemos de"inido. Es
decir, te ayudar! mientras est!s codi"icando, para ser m!s correcto, pero no mucho cuando has cometido el error y quieres
saber d)nde est! y cu!l es el problema, que es lo que pretendemos mostrar en este momento.
+s# que vamos ya con esas t$cnicas, herramientas, consejos y pruebas que puedes hacer para saber qu$ es lo que "all) en tu
CSS.
:.J.!." Firebug tu me(or amigo para depurar CSS
a herramienta de debug en ,ire"o., ,irebug, es bien conocida es por cualquier desarrollador con un poco de e.periencia y
amor a su tiempo productivo. Supongo que a estas alturas ya debes conocer cu!les son las ventajas y las ayudas que te o"rece
,irebug, pero si no es as#, te conviene ir instalando esta e.tensi)n de ,ire"o..
En art#culos anteriores ya hemos hablado repetidas veces de ,irebug, puedes hacer un bFsqueda con el buscador interno de
2esarrollo3eb.com por esa palabra o ir directamente a la presentaci)n de ,irebug.
,irebug tiene, entre otras cosas, un inspector de elementos que nos permite seleccionar cualquier cosa en la p!gina y ver sus
atributos CSS y otros detalles. Es ideal porque te ayudar! a encontrar errores en tus CSS, como los siguientes0
Errores de sinta.is
Errores en rutas de im!genes y otros recursos
4'
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 algFn 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 *0* o un *U*. Pevisa la sinta.is en la declaraci)n de estilos que est$ "altando en ,irebug.
Etra 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 Wavascript, 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. 9 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.
:.J.%." 1tros productos similares a Firebug para navegadores distintos de Fire.o3
Como hemos dicho, ,irebug en principio est! disponible como e.tensi)n de ,ire"o., pero podemos encontrar productos
similares para otros navegadores que nos vendr!n bien por dos motivos. 'rimero por si nosotros pre"erimos desarrollar con
otro navegador, pero sobre todo para poder hacer inspecci)n de elementos %para ver el c)digo HTM que est! entendiendo
el cliente -eb los atributos CSS que tienen los elementos de la p!gina& en otros navegadores, cuando algo "unciona como
esper!bamos en ,ire"o. pero no en otros bro-sers.
I* De!eloer 1ool.ar0
8n complemento para <nternet E.plorer a, ya que <nternet E.plorer O incluye herramientas para desarrolladores en su
instalaci)n b!sica que pueden ayudarnos a inspeccionar elementos.
De.ugBar ara *5lorer0
Etro complemento muy interesante para E.plorer que tiene mFltiples opciones para debug e inspecci)n de c)digo de
p!ginas -eb.
Cire.ug ara Doogle 'hrome0
Chrome, el navegador de Qoogle, incluye herramientas similares a las que nos aporta ,irebug en todas sus instalaciones. Sin
embargo, tambi$n e.iste la herramienta ,irebug en versi)n compatible con Chrome.
Eera Dragonfly0
8n Sit de herramientas para desarrolladores que "uncionan dentro del navegador Epera.
:.J./." Galidar tu 2o(a de estilos con un validador CSS
7alidar la hoja de estilos CSS ha sido segFn mi e.periencia clave para encontrar un error en situaciones con"usas. Hay
ocasiones que no se encuentra "!cilmente el error con ,irebug o que el error se muestra en unos navegadores y otros no.
'or ello, siempre es una buena idea validar tu c)digo CSS. Si tu c)digo CSS tiene algFn problema el validador te alertar!
sobre ello y podr!s corregirlo. =uiz!s ese error no signi"icaba un problema en un navegador en concreto y s# en otro.
E.isten varios validadores CSS, pero quiz!s el que m!s nos interese es el que comentamos en el art#culo Herramienta del
36C para validaci)n de hojas de estilo
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 Epera, podemos acceder al validador a trav$s de la tecla r!pida +T X CTP X MayFsculas
X 8.
B(
:.J.6." Aislar ' reducir el c$digo I?ML
En el caso de que seamos incapaces de detectar el problema de nuestro c)digo CSS, a pesar de utilizar un inspector de
elementos como el que nos o"rece algFn complemento como ,irebug, podemos probar algo m!s laborioso. Se trata de aislar
el c)digo "uente que te est! dando el problema, o reducirlo todo lo posible para simpli"icarlo, de modo se cambie el
conte.to donde se produce el error, para ver qu$ si eso nos da una pista.
<magina que tienes una columna que ocupa m!s anchura de la que deber#a. 'odr#as hacer lo siguiente. 7as quitando el
c)digo HTM de cada uno de los elementos que hay en esa columna y viendo si ocurre algFn cambio. Si quitando un
elemento, como una tabla, una divisi)n con 2<7, un "ormulario, un banner o cualquier otra cosa, todo vuelve a "uncionar,
puedes entender que algo con ese elemento est! provocando el problema.
Como se puede imaginar, esta t$cnica es s)lo un poco de prueba y ensayo, pero siempre procurando quitar cosas en tu
c)digo, haci$ndolo cada vez m!s simple y por consiguiente m!s sencillo para localizar el problema. Claro que esta t$cnica
representa m!s trabajo y es s)lo un recurso para cuando est!s bastante desesperado, porque te)ricamente con ,irebug ser#a
m!s "!cil encontrar el "allo. 2e hecho, esta era una de las t$cnicas m!s utilizadas para encontrar problemas cuando no
e.ist#an herramientas como ,irebug.
:.J.7." +tilizar un ;1C?M,E
Este no es un truco para hacer debug de CSS, pero es una pr!ctica que ayudar! mucho a que nuestras tareas de depuraci)n
sean mucho m!s sencillas y no nos desesperemos intentando encontrar la soluci)n a problemas tontos. Sobre todo, es un
consejo importante para que tengamos menos errores de compatibilidad de nuestra p!gina entre distintos navegadores.
El 2ECT9'E es una cadena de te.to que se debe incluir al principio del c)digo HTM, para decirle qu$ versi)n de HTM
o VHTM estamos utilizando. 2istintos 2ECT9'ES pueden hacer que un mismo c)digo HTM o CSS se vea de distinta
manera, pero no es ese el problema. o importante es que con un 2ECT9'E declarado todos los navegadores atender!n a
ese tipo de documento e interpretar!n el c)digo HTM X CSS de una manera m!s similar.
Mi recomendaci)n es indicar un 2ECT9'E al comenzar tu trabajo e ir desarrollando tu sitio -eb poco a poco con ese
2ECT9'E activo desde el principio. 1o importa mucho qu$ 2ECT9'E uses, pero s# importa que al menos uses uno de
ellos. +s# tendr!s muchas m!s probabilidades que el trabajo que est!s realizando se vea igual en todos los navegadores. Es
mejor que colocar el 2ECT9'E desde el principio y no al "inal, puesto que en el momento que lo hagamos puede haber
algunos elementos de la p!gina o estilos CSS que cambien su manera de mostrarse.
+lgunos 2ECT9'E con los que podemos trabajar, con su e.plicaci)n sobre qu$ signi"ican, podemos verlos en el art#culo
2octype HTM.
B1
Parte (:
Por d"nde continuar
9hora 1ue +a sabes bastante sobre -554 1uiz3s 1uieras abrir nueos horizontes + para
ello te damos algunas re(erencias para continuar aprendiendo.
B.!." Listado de distintos .ramewor>s CSS
%n listado de los -rame'or;s CSS que hay en el mercado para ayudar en la maquetaci"n de pginas 'eb
con CSS.
En este art#culo vamos a enumerar y comentar algunas cosas sobre "rame-orSs CSS, si es que se les puede llamar
"rame-orSs, puesto que ese concepto se usa muchas veces para sistemas que "acilitan la programaci)n de aplicaciones y en
el caso de los CSS, no es programaci)n, sino que se utilizan para obtener ayudas en la maquetaci)n de -ebs.
Como sabemos, en el momento actual las p!ginas se maquetan con CSS. Con HTM especi"icamos los contenidos y con
CSS la "orma o disposici)n con la que deben presentarse al usuario en los navegadores. CSS por tanto es un lenguaje que
sirve para especi"icar el estilo de las p!ginas, pero muchas veces hacemos cosas repetitivas, como divisiones de p!gina en
columnas, cajas de determinados tipos, etc. 'ues los ,rame-orSs CSS nos ayudan a realizar esas tareas de maquetaci)n
b!sicas, que muchas veces tenemos que implementar repetidas veces en diversos sitios, para generar las estructuras de
elementos de la p!gina.
os "rame-orSs CSS disponen una serie de clases %de hojas de estilo& ya creadas con las que ayudar a posicionar elementos
en la p!gina y crear estructuras de maquetaci)n, m!s o menos vers!tiles. +s#, en el desarrollo de p!ginas nuevas, o en el
redise(o de p!ginas antiguas, podemos ayudarnos de "rame-orSs CSS para disponer de una rejilla donde posicionar los
distintos componentes de nuestro dise(o. Con ello nos ahorraremos el tiempo de tener que crear de nuevo decenas de clases
que estamos aburridos de implementar para crear maquetaciones a 5, 6 ) ; columnas, con divisiones de cabecera, cuerpo y
pie, etc.
En 2esarrollo3eb.com hemos analizado un "rame-orS CSS y realizado un manual para e.plicar sus caracter#sticas y
"uncionamiento, que recomendamos leer para obtener m!s e.plicaciones. Se titula Maquetaci)n CSS con `RN Qrid System ,
en el que encontrar$is adem!s diversos v#deos muy ilustradores para conocer de primera mano el proceso de dise(o de una
-eb utilizando uno de estos "rame-orSs CSS.
En este art#culo pretendo simplemente enumerar este y otros "rame-orSs CSS, en un listado que pretende dar una idea de
las posibilidades que nos o"rece en este momento el mercado.
B.!.!." J:9 rid S'stem
Es, tal vez, el m!s utilizado de los "rame-orSs CSS, cuyas p!ginas se construyen en anchuras de `RN p#.eles %de ah# su
nombre&. E"rece dos posibilidades de maquetaci)n de p!ginas, con una rejilla de 45 ) 4R columnas. 1osotros escogimos
este "rame-orS CSS para e.plicarlo a los lectores de 2esarrollo3eb.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 `RN Qrid System
Manual de `RN Qrid System
B2
B.!.%." Simple
Este "rame-orS 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 2esarrollo3eb.com sobre Simple
B.!./." 5lueprint
Es un "rame-orS CSS que pretende reducir el tiempo de desarrollo de las p!ginas -eb. E"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 Ftiles 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 Dlueprint
B.!.6." M+# rids CSS
El "rame-orS CSS de 9ahooG Es un c)digo CSS que permite maquetar p!ginas con distintas anchuras %aMNp., `MNp., y
`a;p.& y hacer todas las cosas t#picas que se pueden desear en una p!gina. Tiene R plantillas prede"inidas y la posibilidad de
crear m!s de 4.NNN combinaciones de maquetaci)n, en regiones de 5, 6 y ; columnas. ,orma parte de la 9ahooG 8ser
<nter"ace ibrary, lo que da una garant#a adicional, por venir de tan renombrado buscador.
'!gina -eb de 98< Qrid CSS
B.!.7." ?ripoli
Tripoli no es un "rame-orS CSS y segFn 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-orSs CSS.
'!gina -eb de Tripoli
B.!.:." 5oilerplate
Este "rame-orS me ha parecido interesante porque est! creado por uno de los desarrolladores iniciales de Dlueprint, que ha
"undado el nuevo proyecto para poner en marcha sus ideas particulares. Como $l dice, este "rame-orS 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 Dlueprint y con convenciones de nombres que dan m!s sentido y signi"icado a lo que estamos codi"icando.
'agina -eb de Doilerplate
B.!.B." 5lue?rip
SegFn sus creadores, DlueTrip es una combinaci)n de lo mejor de distintos "rame-orSs CSS de los que hemos hablado ya.
Su nombre viene de la uni)n de D8Eprint A TP<poli, haciendo re"erencia a esa uni)n de ideas de los mejores "rame-oSs,
entre los que tambi$n se han inspirado en nuestro "rame-orS pre"erido en estos momentos, `RN grid, por su sencillez.
'!gina -eb de DlueTrip
B.!.C." 1tros Framewor> CSS
'ongo otros "rame-orSs CSS que he encontrado y que no he investigado tanto las posibilidades que o"recen, aunque
B3
tambi$n pueden ser interesantes, sobre todo puede que den en"oques di"erentes que puedan ser Ftiles en ciertas ocasiones.
Elements
ES3+T
Content -ith style
My CSS ,rame-orS
Hartija
Malo %,rame-orS CSS ultra peque(o&
emastic
Como re"erencias sobre "rame-orSs CSS seguramente tendremos m!s que su"iciente. 'ero llegado a este punto y antes de
decidirte por qu$ "rame-orS usar o si te interesa o no utilizar uno de ellos, te recomendamos leer el art#culo sobre las
ventajas e inconvenientes del uso de "rame-orSs CSS.
B.%." Framewor>s CSS@ Genta(as e inconvenientes
.entajas e inconenientes del uso de 8rame'or;s CSS# (iscutimos acerca de la coneniencia o no de usar
-rame'or;s CSS.
a conveniencia de uso, o no, de los "rame-orSs siempre es un tema pol$mico. 1o ocurre s)lo con los "rame-orSs CSS,
sino tambi$n con los "rame-orSs de otros lenguajes o tecnolog#as, aunque quiz!s en el caso de las librer#as CSS todav#a se
acentFa m!s la discusi)n.
as personas a "avor del uso de "rame-orSs siempre podr!n decir que aceleran los procesos de desarrollo y que ello es
su"iciente raz)n para usarlos, pero conviene saber que tambi$n cu!les son las desventajas y decidir si nos interesa o no
usarlos tambi$n en "unci)n de ellas.
Conviene aclarar antes de nada qu$ nos o"rece un "rame-orS CSS, pues la mayor#a de las ventajas est!n directamente
relacionadas con las !reas donde $stos actFan.
B.%.!." Componentes 2abituales de un .ramewor> CSS
Cada "rame-orS CSS es distinto, pero la mayor#a proveen de c)digo "uente Ahojas de estilo en cascadaA para resolver los
mismo asuntos0
Creaci)n de una rejilla, para que el desarrollador pueda colocar en ella los distintos elementos que "orman parte de
la -eb. Esta rejilla, que divide los espacios en distintas columnas, ayuda a posicionar con CSS los componentes de
una p!gina de una manera precisa y vers!til.
2e"iniciones de estilos de tipogra"#a para los elementos HTM, de modo que no tengamos que de"inirlos nosotros
para cada proyecto.
Soluci)n de casos de incompatibilidad entre navegadores, para que un mismo c)digo se vea igual en todos los
clientes -eb m!s habituales
Creaci)n de clases CSS est!ndares, que puedan ayudarnos a estilizar componentes avanzados de inter"aces de
usuario.
B.%.%." Genta(as de los .ramewor>s CSS
+hora que ya sabemos d)nde inciden las librer#as CSS, vamos a listar una serie de ventajas posibles de su utilizaci)n.
@a#uetaci(n acelerada y c(digo m,s limio:
Con un "rame-orS CSS podemos maquetar de una manera mucho m!s r!pida una p!gina, gracias a la rejilla que nos o"rece.
'ero adem!s utilizarlo nos ayudar! a tener un c)digo m!s limpio y m!s estructurado.
B%
Soluci(n a los ro.lemas 'SS comunes:
Casi todos los "rame-orSs est!n realizados bajo la e.periencia de trabajo con CSS en muchas p!ginas -eb. 'or ello siempre
o"recen soluciones a problemas comunes de los desarrolladores.
'omati.ilidad entre na!egadores:
os navegadores a veces interpretan de manera distinta un mismo c)digo "uente. Esto es algo que a menudo se acentFa en
<nternet E.plorer y que los "rame-orSs CSS solucionan de alguna u otra manera.
Arender trucos y r,cticas ha.ituales:
+l leer el c)digo "uente de los "rame-orSs CSS podremos aprender las pr!cticas de otros desarrolladores y en concreto para
los "rame-orSs CSS es muy sencillo e.aminar su c)digo "uente.
Desarrollar conforme a un mismo atr(n:
Cuando desarrollamos con un "rame-orS tendremos un procedimiento determinado para resolver las necesidades comunes.
Esto quiere decir que la manera de actuar en di"erentes proyectos puede ser muy similar y por ello a la larga te costar!
menos es"uerzo de mantenerlos y podr!s recordar mejor cu!les son los criterios que utilizaste para desarrollarlos.
Ayuda al tra.ajo en gruo:
2ado que trabajar con un "rame-orS CSS nos obliga a desarrollar con un patr)n determinado, en proyectos en grupo, las
personas que integren el equipo de trabajo podr!n tener m!s claras cu!les "ueron las decisiones que se tomaron a la hora de
maquetar con un breve vistazo en el c)digo.
En de"initiva, las ventajas m!s importantes de usar un "rame-orS CSS es que agilizar! el proceso de desarrollo y nos ayudar!
bastante a la hora de hacer una -eb que se vea per"ecta en cualquier navegador. 'ero dependiendo de nuestro conte.to de
trabajo podemos encontrar otras ventajas interesantes.
B.%./." ;esventa(as del uso de .ramewor>s CSS
Hasta ahora, todo lo que hemos comentado de los "rame-orSs CSS es muy bueno, pero e.isten algunas desventajas que
tambi$n debemos conocer, para valorar su conveniencia o no y minimizar en la medida de lo posible los aspectos negativos.
'ara mi, e.iste una desventaja principal bastante importante y otra serie de desventajas menos determinantes. =uiz!s la
desventaja principal es su"iciente como para desistir en el uso de "rame-orSs CSS y para entenderla tenemos que conocer
antes una de los motivos por los que se cre) CSS.
Como quiz!s sepamos, CSS es un lenguaje para de"inir estilos en p!ginas -eb, que se cre) con la intenci)n de separar el
contenido de la presentaci)n. Con HTM especi"icamos el contenido de una p!gina y con CSS especi"icamos, por separado,
la presentaci)n. 'ues bien, la mayor#a de los "rame-orSs CSS se cargan esta ventaja del lenguaje, o al menos la limitan. Esto
es porque, cuando queremos usar la rejilla para posicionar los elementos, muchas veces estamos utilizando c)digo HTM
con clases %Class de CSS& que especi"ican la posici)n que van a tener esos elementos. Eso hace que estemos volviendo a
mezclar contenido con presentaci)n y quiebra por tanto algunas de las ventajas que hab#amos adquirido al trabajar con CSS.
+similada para mi esta desventaja principal, veamos un completo listado de los inconvenientes del uso de ,rame-orSs CSS0
@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-orS 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-orS CSS contiene diversos c)digos CSS Ftiles 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-orS estamos cargando
innecesariamente el peso en bytes de nuestro c)digo CSS. Esto lo podemos arreglar *a mano* limpiando el CSS del
"rame-orS, eliminando c)digo que no lleguemos a utilizar en ninguna p!gina del sitio.
'ur!a de arendi+aje m,s lenta:
+unque aprender a usar un "rame-orS 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
B4
tardes m!s tiempo en aprender a trabajar con el "rame-orS CSS que lo que tardar#as en dise(arla sin utilizarlo. En de"initiva,
s)lo sacar!s provecho al "rame-orS cuando lo conozcas, es decir en el segundo, o siguientes dise(os que realices con $l.
No est,s arendiendo a !alerte or ti mismo:
Muchos de los problemas de dise(o t#picos ya vienen resueltos en un "rame-orS 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. 2el mismo modo, probablemente
aprender!s a resolver tus necesidades aplicando clases CSS del "rame-orS, 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-orSs no tienes una e.periencia y
conocimiento su"iciente del lenguaje CSS y sus usos, puede que aprender a dise(ar con un "rame-orS represente una
desventaja para aprender bien CSS.
Etro detalle sobre este mismo punto es que cuando quieras cambiar de ,rame-orS, 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.
B.%.6." Conclusi$n@ N+sar o no .ramewor>s CSSO
a decisi)n "inal sobre usar o no un "rame-orS debe correr a cargo de cada desarrollador. 8n "rame-orS CSS no es nada
del otro mundo, sino una serie de estilos CSS Ftiles para muchas personas, pero no por eso deben ser Ftiles para ti. <ncluso,
puede que a lo largo de tu e.periencia ya hayas creado una serie de clases CSS y estilos b!sicos que ya incluyes en todos tus
proyectos. 'or decirlo de alguna manera, puede que ya est$s usando tu propio *"rame-orS* rudimentario y no lo sepas.
En mi opini)n, su conveniencia o no tambi$n depende de c)mo utilices el "rame-orS. Si ya conoces CSS y te interesas un
poco sobre c)mo "uncionan las cosas, puedes minimizar las desventajas que tienen e incluso pueden venirte bien para
aprender. Si los usas sin conocer realmente CSS y sin importarte lo que tienen dentro y qu$ est!s aplicando realmente
cuando invocas las clases CSS puede que te resulten complicados y a la larga tampoco te bene"icien mucho en tu l#nea de
aprendizaje como desarrollador -eb.
Referencia: Si quieres aprender algFn "rame-orS CSS te recomendamos estos manuales de 2esarrollo3eb.com, sobre dos de los
"rame-orSs m!s populares0
4.A Dlueprint
5.A `RN Qrid System
B./." #ntroducci$n a CSS /
CSS < trae grandes noedades para el dise/o de 'ebs y algunos naegadores comienzan a implementar
CSS <.
2esde que CSS comenz) han pasado muchos a(os y ya vamos por la especi"icaci)n de CSS6, que incorpora una serie de
novedades que vamos a tratar de resumir en este art#culo.
B./.!." Au 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. 1o 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 VM. 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.
BB
B./.%." Con CSS /8 m-s control sobre la .orma
El objetivo inicial de CSS, separar el contenido de la "orma, se cumpli) ya con las primeras especi"icaciones del lenguaje. Sin
embargo, el objetivo de o"recer un control total a los dise(adores sobre los elementos de la p!gina ha sido m!s di"#cil de
cubrir. as especi"icaciones anteriores del lenguaje ten#an muchas utilidades para aplicar estilos a las -ebs, pero los
desarrolladores aun continFan usando trucos diversos para conseguir e"ectos tan comunes o tan deseados como los bordes
redondeados o el sombreado de elementos en la p!gina.
CSS 4 ya signi"ic) un avance considerable a la hora de dise(ar p!ginas -eb, aportando mucho mayor control de los
elementos de la p!gina. 'ero como todav#a quedaron muchas otras cosas que los dise(adores deseaban hacer, pero que CSS
no permit#a especi"icar, $stos deb#an hacer uso de trucos para el dise(o. o peor de esos trucos es que muchas veces implica
alterar el contenido de la p!gina para incorporar nuevas etiquetas HTM que permitan aplicar estilos de una manera m!s
elaborada. 2ada la necesidad de cambiar el contenido, para alterar al dise(o y hacer cosas que CSS no permit#a, se estaba
dando al traste con alguno de los objetivos para los que CSS "ue creado, que era el separar por completo el contenido de la
"orma.
CSS 5 incorpor) algunas novedades interesantes, que hoy ya utilizamos habitualmente, pero CSS 6 todav#a avanza un poco
m!s en la direcci)n, de aportar m!s control sobre los elementos de la p!gina.
+s# pues, la novedad m!s importante que aporta CSS 6, de cara a los desarrolladores de -ebs, consiste en la incorporaci)n
de nuevos mecanismos para mantener un mayor control sobre el estilo con el que se muestran los elementos de las p!ginas,
sin tener que recurrir a trucos o hacSs, que a menudo complicaban el c)digo de las -eb.
B././." ,ropiedades nuevas en CSS /
He aqu# una lista de las principales propiedades que son novedad en CSS6.
Bordes
borderAcolor
borderAimage
borderAradius
bo.Ashado-
Condos
bacSgroundAorigin
bacSgroundAclip
bacSgroundAsize
hacer capas con mFltiples im!genes de "ondo
'olor
colores HS
colores HS+
colores PQD+
Epacidad
1e5to
te.tAshado-
te.tAover"lo-
BG
Potura de palabras largas
Interfa+
bo.Asizing
resize
outline
navAtop, navAright, navAbottom, navAle"t
Selectores
Selectores por atributos
@odelo de caja .,sico
over"lo-A., over"lo-Ay
Etros
media queries
creaci)n de mFltiples columnas de te.to
propiedades orientadas a discurso o lectura autom!tica de p!ginas -eb
3eb ,onts
Este listado de nuevas propiedades de CSS 6 lo he sacado de0 http0@@---.css6.in"o@previe-@. Es un sitio en ingl$s, pero
puede estar bien visitar para ir conociendo m!s detalles sobre CSS 6.
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 6.
BH

Manual Css Hojas Estilo PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Css Hojas Estilo PDF

Cargado por

Copyright:

Formatos disponibles

Tu mejor ayuda para aprender a hacer webs

También podría gustarte