Aplicando estilo a las pginas web: Hojas de

Estilo en Cascada (Cascade Style Sheet)

1. Hojas de estilo: una base para el marcado semntico
Una hoja de estilo es un conjunto de especificaciones que declaa c!"o
deben "ostase los co"ponentes de una pgina web# es deci# c!"o debe
intepeta el na$egado# a efectos de pesentaci!n $isual# los distintos
ele"entos pesentes en una pgina web% El fo"ato de cada ele"ento de
una pgina web se especifica "ediante declaaciones de estilo deno"inadas
eglas%
2. Reglas
Una egla CSS se co"pone de tes pates:
&% Selecto
'% (opiedad
)% *alo
Una egla si"ple ogani+a los tes co"ponentes anteioes de acuedo a la
siguiente estuctua:
selecto ,popiedad: $alo-.
(o eje"plo# la egla siguiente e$ita que un ele"ento "acado con h&
apae+ca en negita%:
h& , font/weight: no"al- .
Una egla puede contene "s de una popiedad con sus especti$os
$aloes# sepaadas ente ellas po punto y co"a (se considea una buena
pctica a0adi ta"bi1n punto y co"a al final)% Eje"plo:
h& , font/weight: no"al- color: red-.
Una egla puede da fo"ato a "s de un ele"ento a la $e+# sepaando
estos "ediante co"as% Eje"plo:
h1, h2, h3, h4 , font/weight: no"al- colo: ed- .
3. Declaracin
2as eglas de las hojas de estilo se pueden declaa en tes sitios distintos:
&% En la pgina web
'% En un achi$o e3teno
)% En un ele"ento
En los casos & y '# las eglas de declaan con la "is"a sinta3is (que es la
que ya he"os $isto)% En el caso n4"eo )# hay una sinta3is espec5fica ya
que se declaa dento de un ele"ento (6)H782 y debe espeta sus
con$enciones% Ade"s# cada fo"a de declaaci!n necesita el pocedi"iento
de $inculaci!n espec5fico que se "uesta a continuaci!n%
3.1. n la pgina !eb
2a hoja de estilo se declaa en la secci!n head# dento del ele"ento style%
(o eje"plo:
9head:
9title:Aqu5 $a un t5tulo9;title:
"st#le t#pe$%te&t'css%(
h&# h'# h) , font/weight: no"al- colo: blue- .
"'st#le(
9;head:
3.2. n un archi)o e&terno
2as declaaciones se esciben en un achi$o de te3to con e3tensi!n .css sin
ning4n tipo de pe"bulo%
En la secci!n head de la pgina se debe indica el enlace con el achi$o que
contiene las declaaciones de la hoja de estilo "ediante el ele"ento lin< y
los atibutos el# hef y type:
9head:
9title:Aqu5 $a un t5tulo9;title:
"lin* rel$%st#lesheet% hre+$%estilo.css% t#pe$%te&t'css% '(
9;head:
Co"o se puede $e# el atibuto el (relation) ad$iete que se tata de una
hoja de estilo# hef apota el no"be (y el ca"ino si fuea necesaio) del
achi$o y type indica que se tata de un achi$o de te3to que contiene una
hoja de estilo que sigue la no"a CSS%
3.3. n un elemento
2os estilos se pueden aplica a ni$el de un ele"ento indi$idual% En el
siguiente eje"plo# se aplica un estilo espec5fico a un ele"ento acony"% En
condiciones no"ales# un te3to "acado con acony" apaece5a en leta
no"al (edonda)% En el siguiente eje"plo# se ha definido un estilo a ni$el
de una ocuencia este ele"ento paa que la palaba "acada con acony"
en este caso apae+ca en cusi$a:
9p:9acony" st#le$%+ont,st#le: italic%:=)C9;acony": son las siglas
del =old =ide =eb Consotiu"9;p:
Co"o se puede $e hay un ca"bio significati$o en la sinta3is% Se utili+an las
"is"as deno"inaciones paa las popiedades y sus $aloes# peo# po
co"patibilidad con el lenguaje 6H782# todo el conjunto popiedad;$alo de
CSS se deli"ita "ediante co"illas y se pesenta a su $e+ co"o un $alo de
del atibuto style de (6)H782%
4. -ajas
>esde el punto de $ista de CSS# todo lo que hay en una pgina web es una
caja% 2o que hace un selecto es identifica la caja a la que se aplica el
fo"ato%
2as cajas tienen:
-ontenido (content)% El contenido de la caja: te3to# i"agen# etc%
Relleno (padding)% 2a distancia ente el contenido y el bode%
.orde (border)% El bode de la caja%
/argen (margin)% 2a distancia ente el bode y el ele"ento
contenedo (p%e% body) u oto ele"ento adyacente%
El siguiente diaga"a "uesta "odelo oficial de cajas de CSS seg4n el
=)C:
2os co"ponentes de la caja se pueden di$idi en cuato pates: top# bottom#
right y left% (o tanto# en la ilustaci!n anteio# las siglas 28# ?8# etc%#
significan LeftMargin# Right Margin# etc%
2a figua siguiente# debida a @e"ie Auaida# ilusta estas ideas
co"paando el "odelo de cajas de CSS con un cuado colgado en la paed y
de acuedo con el cual margin se5a la elaci!n ente el cuado y la paed#
border el goso del "aco# etc%:
2as hojas de estilo pueden aplica fo"ato (p%e% colo# anchua# tipo de
l5nea# etc%) a cualquiea de los co"ponentes de esta caja# as5 co"o pe"ite
posiciona estas cajas en el conjunto de la pgina%
>e este "odo# si quee"os que un ele"ento "ueste el bode en fo"a de
puntos de colo a+ul# pode"os genea esta declaaci!n:
p , bode/style: dotted- bode/colo: blue.
A pati de lo anteio# este c!digo en la pgina:
9p:Eje"plos de hojas de Estilo9;p:
Se "osta as5:
Si quee"os a"plia el elleno ente el contenido y el bode as5 co"o tene
un ta"a0o de punto "s peque0o pode"os "odifica la egla anteio
acudiendo a las popiedades de bode (bode) y de "agen (padding):
p , bode/style: dotted- bode/width: 'p3- bode/colo: blue-
padding: &Bp3- .
Ahoa# el na$egado lo "osta as5:
0. Herencia
2as cajas estn contenidas dento de otas cajas y heedan los estilos de la
caja contenedoa si no hay una egla de ni$el espec5fico% (o eje"plo# si
declaa"os un tipo de leta paa el ele"ento body# todos los ele"entos que
estn dento# co"o h&# h'# p# etc% heedan este tipo de leta%
En el siguiente eje"plo declaa"os un colo de leta paa body y oto
distinto paa h'% >e este "odo# todos los ele"entos# e3cepto h'# tendn el
colo declaado paa body# "ientas que h' tend su popio colo%
*ea"os% (i"eo la declaaci!n de eglas CSS:
body , colo: blue .
h' , colo: ed .
Ahoa el c!digo ht"l de la pgina:
9h&:Esto es un ele"ento h&9;h&:
9p:Este es un pafo9;p:
9h':Esto es h'9;h':
9p:8s te3to "acado co"o pafo9;p:
9h):Esto es h)9;h):
9ul:
9li:Cte" &9;li:
9li:Cte" '9;li:
9li:Cte" )9;li:
9;ul:
9p:Apuesto a que todo es a+ul en esta pgina "enos uno de los
ele"entos9;p:
Ahoa# el esultado en el na$egado:
1. 2ipos de selectores
E3isten dos gandes catego5as de selectoes:
Elementos: son los no"bes coespondientes a ele"entos del
lenguaje (6)H782 co"o body# h&# p# table# etc%
Nombres propios: son no"bes que puede cea el auto de la
hoja de estilo% >e esta clase de selectoes# e3isten# a su $e+
dos tipo: de clase (class) y de identidad (id)%
(o tanto# en ealidad tene"os en total tres tipos de selectoes que
e3a"inae"os a continuaci!n%
6.1. Selectores de elemento
Se declaan utili+ando co"o selecto un ele"ento (6)H782# p%e%:
h& , colo: blue .
>e este "odo# el aspecto de todos y cada uno de los ele"entos que fo"an
el lenguaje (6)H782 puede se "odificado "ediante un egla% Cabe
ecoda que los na$egadoes disponen de una hoja de estilo intena que es
la que otoga fo"ato a los ele"entos (6)H782 cuando no hay ninguna hoja
de estilo espec5fica% (o eje"plo# a4n sin hoja de estilo la "ayo pate de
los na$egadoes aplican negita a los ele"entos "acados co"o stong# as5
co"o un tipo de leta supeio D negita a los ele"entos "acados con h&#
etc%
6.2. Selectores de clase
Estos selectoes se declaan "ediante una palaba popia que asigna el
auto de la hoja de estilo% Esta palaba $a pecedida po un punto% (o
eje"plo: suponga"os que se necesita una clase de selectoes paa
fo"atea t5tulos de pel5culas (ponga"os que se tata de una web sobe
cine"a)% El auto de la hoja de estilo puede cea el selecto con el no"be
tituloEil" paa fo"atea de la "is"a fo"a los t5tulos de los fil"s% (aa
ello# escibe esta egla:
%tituloEil" , font/si+e: &%Be"- font/fa"ily: 7i"es Few ?o"an- colo:
blue-.
Se aplica "ediante el atibuto class seguido po el no"be del selecto (sin
el punto)% (o eje"plo# en el siguiente c!digo fuente solo a uno de los dos
ele"entos de pafo (p) se le ha a0adido esta clase de selecto:
9p class$3titulo4ilm3:'GG&: Una odisea del espacio9;p:
9p:2a oba de @ubic< "ac! un punto de infle3i!n en el g1neo de la
ciencia/ficci!n9;p:
2a declaaci!n sola"ente afecta a uno de ellos y el esultado es que el
pi"e pafo tend un aspecto "uy distinto de los de"s:
6.3. Selectores de identidad
2os selectoes de identidad se no"ban "ediante una palaba popia
pecedida po el s5"bolo 5 (al"ohadilla)% (o eje"plo:
Hna$egacion , bac<gound/colo: 2ightAey- .
2os selectoes de identidad solo se pueden aplica a un ele"ento en cada
pgina% >icho al e$1s# y to"ando el eje"plo anteio: en cada pgina
sola"ente puede habe un ele"ento Hna$egacion (en ca"bio# pode"os
tene "4ltiples ele"entos de clase en una "is"a pgina)%
En este caso# he"os supuesto que quee"os da un estilo popio a la +ona
de na$egaci!n de cada pgina% Se supone que desea"os destaca la baa
de na$egaci!n "ediante un fondo gis y quee"os que la fuente del te3to
en esa +ona sea un poco "s peque0a% 2a declaaci!n se5a la siguiente:
Hna$egacion , bac<gound/colo: 2ightAey- font/si+e: G%Ie" .
El c!digo fuente en la pgina se5a el siguiente:
9di$ idJKna$egacionK:
9ul:
9li:9a hefJKite"&%ht"K:Cte" &9;a:9;li:
9li:9a hefJKite"'%ht"K:Cte" '9;a:9;li:
9li:9a hefJKite")%ht"K:Cte" )9;a:9;li:
9;ul:
9;di$:
Se supone que Cte" &# Cte" '# etc%# son opciones de "en4% El esultado
se5a este:
6. 7so de di) # span
El lenguaje (6)H782 dispone de dos ele"entos con gan potencialidad
cuando se utili+an junto con las hojas de estilo# y cuya caacte5stica
pincipal# a difeencia de ele"entos co"o body# p# h&# etc%# es que no
poseen ning4n significado int5nseco% Son los siguientes:
di$
span
8ientas el ele"ento di$ es de bloque# el ele"ento span es de l5nea%
?ecode"os que los ele"entos de bloque tienen un salto de l5nea integado%
El eje"plo "s conocido es p% Un ele"ento de l5nea# po el contaio no
genea ning4n espacio a su alededo# sino que se "antienen en la "is"a
l5nea que lo contiene% Un buen eje"plo puede se stong%
7anto di$ co"o span pueden utili+ase paa "ejoa la apaiencia de una
pgina# peo ade"s contibuyen a a0adi $alo se"ntico a la "is"a%
6.1. di)
En conceto# di$ ayuda a cea la estuctua bsica de la pgina% (o
eje"plo# pode"os i"agina un sitio web cuyas pginas se estuctuan en
tes gandes secciones# co"o "uesta la figua siguiente:
Ttulo
Navegacin
Contenido
Pie
Con una estuctua co"o la anteio# el c!digo fuente de cada pgina puede
contene cuato ele"entos di$# cada uno de ellos identificado con un
atibuto id difeente# de este "odo:
9body:
9di$ idJKtitulo(agK:
9;di$:
9di$ idJKna$egacionK:
9;di$:
9di$ idJKcontenidoK:
9;di$:
9di$ idJKpie(agK:
9;di$:
9;body:
2a estuctuaci!n anteio pe"iti defini estilos paa las cuato secciones
de la pgina sin pejuicio de aplica estilos "s espec5ficos "ediante
selectoes de ele"ento# de clase# etc% Esta estuctuaci!n facilita el
"anteni"iento de los estilos del sitio y# en caso necesaio# el
posiciona"iento de los "is"os en la pgina%
6.2. span
El ele"ento span suele utili+ase ta"bi1n co"binado con id o con class paa
especifica con tanto ni$el de detalle el aspecto de cualquie ele"ento de la
pgina% (o eje"plo# pode"os desea "aca y tata de fo"a distinta el
apellido de una lista de no"bes# paa lo cual pode"os usa span de este
"odo% >efini"os un selecto de clase apellido paa el cual declaa"os un
estilo:
%apellido , font/style: italic- font/weight: bold .
Aplica"os entonces span y class a los co"ponentes (li) de la siguiente lista:
9h&:?eali+adoes de los a0os LG9;h&:
9ul:
9li:8atin 9span classJKapellidoK:Escosese9;span:9;li:
9li:Ma"es 9span classJKapellidoK:Ca"eon9;span:9;li:
9li:(edo 9span classJKapellidoK:Al"od!$a9;span:9;li:
9;ul:
El esultado en el na$egado se el siguiente:
8. 9osicionamiento
2as hojas de estilo popocionan popiedades que pe"iten posiciona de
fo"a fija# absoluta o elati$a (fixed, absolute, relative) las cajas en una
pgina web% Estas popiedades# junto con los selectoes de clase y de
identidad que pe"iten identifica y clasifica las cajas especti$a"ente#
popocionan al dise0ado un do"inio total de la estuctua de la pgina sin
necesidad de ecui# po eje"plo# al uso de tablas%
A t5tulo ilustati$o# "osta"os un eje"plo t5pico de c!digo de estilo con
indicaciones de posiciona"iento:
Hna$egacion , position: absolute- top: G- left: G- width: )GN- .
Hcontenido , width: OGN- "agin/left: )GN- .
El c!digo anteio genea5a dos secciones co"o las que "uesta la figua
siguiente:
Navegacin
Contenido
2o cieto es que el posiciona"iento "ediante CSS "eece un cap5tulo
apate y po ello escapa a los objeti$os de esta pesentaci!n% (eo no
he"os queido deja de se0ala su i"potancia con el fin de ani"a a todo
aquel que# pecisa"ente# quiea a$an+a en estos te"as%
:. -onclusiones # buenas prcticas
:.1. -onclusiones
El uso (adecuado) de hojas de estilo es una de las bases de la codificaci!n
se"ntica# la cual descansa sobe el pincipio esencial de sepaa el
contenido de la pesentaci!n%
>e este "odo# se po"ue$e la utili+aci!n de los ele"entos de (6)H782 con
$alo se"ntico# y no paa da fo"ato% Pste 4lti"o es esponsabilidad de
las eglas que se declaan en las hojas de estilo% (o eje"plo# si no nos
gusta que el t5tulo pincipal de una pgina apae+ca en negita# la buena
pctica consisti en "odifica la apaiencia de h&# y no en "aca el t5tulo
con un ele"ento que no le coesponda (o al e$1s# si nos inteesa dota a
una palaba o una fase de un ta"a0o "ayo# la cla$e esta en defini su
pesentaci!n con una egla de estilo y no en asignale# po eje"plo# un
"aca de cabecea que no le coesponda)%
:.2. .uenas prcticas
(aa finali+a# "ostae"os una lista de algunas buenas pcticas:
&% >eclaa la hoja de estilo en un achi$o sepaado ("ejo que en la
hoja de estilo# sal$o necesidad espec5fica)%
'% Utili+a "edidas elati$as (tanto po ciento en luga de p53eles# o
unidades e" en luga de puntos# etc%)%
)% Usa ele"entos se"nticos (h&# h'# bloc<quote# etc%) paa
ogani+a los contenidos de la pgina# no paa consegui una
dete"inada apaiencia de la "is"a%
Q% 8odifica la apaiencia de la pgina e3clusi$a"ente "ediante
estilos (y no con ele"entos o atibutos desaconsejados co"o font#
cente# etc% o usando ele"entos fuea de luga)%
B% 2i"ita al "3i"o declaa estilos dento de ele"entos
indi$iduales (es deci# e$ita el uso del atibuto style dento de
ele"entos)%
R% >eno"ina los selectoes de clase y de identidad con no"bes de funci!n#
p%e%: tituloEil"# "enuAlobal# "enu2ocal# etc%# (y no con el no"be de la
apaiencia esultante# p%e%# negita# leta8eno# letaAande# etc%)% (o tanto:
usa no"bes semnticos y no de apariencia%
O% Sgani+a los ele"entos pincipales de la pgina# p%e% cabecea# na$egaci!n#
contenido# etc%# con secciones "acadas co"o ele"entos di$%
I% Utili+a ele"entos di$ (as5 co"o atibutos y selectoes id) con popiedades de
posiciona"iento paa establece la estuctua de la pgina (layout) si fuea
necesaio en luga de tablas o frames%
Empezando con Estilos
Estilos sobre texto
Fuente
Familia
Color
Decoracin
Estilo
2a fo"a bsica de declaa un tipo de fuente es:
+ont,+amil#: "+uente(;
Tien# ahoa $ee"os qu1 pode"os pone en 9fuente:% Antes de nada debes
sabe que las fuentes se di$iden pincipal"ente en tes clases: seif (las fuentes
Kcon seifaK al estilo 7i"es# Aeogia%%%)- sans/seif (las fuentes Ksin seifaK al
estilo Aial# Hel$etica# Aene$a%%%)- y "ono que son las de anchua fija co"o
Couie o 8onaco (ideales paa c!digo fuente po eje"plo)%
A la hoa de defini una o "s fuentes con las que quee"os que se $ea un
te3to# sie"pe debe"os da co"o 4lti"a altenati$a uno de los tes gupos
gen1icos- paa que en caso de que el $isitante no tenga instalada la fuente (o
fuentes) espec5ficas que nos gusta5a# su na$egado escoja co"o altenati$a una
del "is"o tipo que s5 tenga instalada%
Tien# paa defini las fuentes que quee"os: si son $aias fuentes se sepaan con
co"as- y si su no"be contiene espacios se pone ente co"illas (esto es
aplicable a todos los atibutos)% Eje"plo:
+ont,+amil#: <eorgia, %.oo* =nti>ua%, 9alatino, 2imes, %2imes ?e!
Roman%, seri+;
En este eje"plo# el te3to se $e5a con Aeogia- si 1sta no est disponible con
Too< Antiqua- si 1sta no est disponible con (alatino# y as5 sucesi$a"ente hasta
llega al caso en que ninguna fuente de las que he"os eco"endado est1
disponible% En ese caso se utili+a5a una pedete"inada del gupo KseifK%
Tien# ahoa $ee"os c!"o defini el colo%
colo: 9colo:-
2os coloes en CSS se pueden defini de $aias fo"as:
He3agesi"al: H??AATT% Se define con una al"ohadilla seguida de las
cantidades de colo paa ojo# $ede y a+ul% 2as cantidades se e3pesan en
he3agesi"al (es deci# dos d5gitos de GL a AE ) % >e esta "anea nego es
HGGGGGG# ojo es HEEGGGG# gis oscuo es H)))))) y blanco HEEEEEE% E3isten
poga"as que te calculan estas cantidades a pati de un colo que t4 le das%
He3agesi"al abe$iado: H?AT% Si en el caso anteio los dos d5gitos paa
ojo# $ede y a+ul son los "is"os (po eje"plo >># TT o '') se puede abe$ia
dejando s!lo uno%
>e esta "anea nego es HGGG# ojo es HEGG# gis oscuo es H))) y blanco
HEEE%
Co"binaciones pedefinidas en ingl1s: E3isten una seie de coloes si"ples
que ya $ienen pedefinidos y que pode"os usa con sus no"bes en ingl1s%
>e esta "anea el nego es blac<- ojo es ed# gis oscuo es gay# y blanco
white%
colo: HAGGGGG-
Tien- ahoa $ea"os co"o "odifica el ta"a0o de la fuente:
font/si+e: 9ta"a0o:-
CSS nos d "ucha libetad a la hoa de especifica ta"a0os# ya que 1stos los
pode"os e3pesa en "uchas "edidas: po eje"plo p3# pt# e"# c"# ""%%% :)
Eje"plo:
font/si+e: &Rp3-
Tien# pase"os ahoa a la decoaci!n que le pode"os da a un te3to% El pi"e
atibuto que $ee"os paa decoa nuestos te3tos es:
te3t/decoation: 9decoaci!n:-
>onde 9decoaci!n: puede $ale lo siguiente:
undeline: Subaya nuesto te3to%
o$eline: 25nea po enci"a de nuesto te3to%
line/though: 7acha nuesto te3to%
none: 8odo no"al# sin subaya# sin l5nea po enci"a y sin tacha% Aunque
este "odo es el pedete"inado en algunas etiquetas# en otas co"o 9a: el
"odo pedete"inado es undeline po lo que pode"os ponelo a none si no
quee"os subaya los enlaces%
font/style: 9estilo:-
>onde 9estilo: puede $ale lo siguiente:
italic: (one el te3to en cusi$a% Eje"plo
oblique: (one el te3to en obl5cuo (casi id1ntico a la cusi$a)% Eje"plo
no"al: 8odo no"al# no cusi$a ni obl5cuo% Eje"plo
Ahoa pase"os al goso%
font/weight: 9goso:-
>onde 9goso: puede $ale lo siguiente:
bold: 2a t5pica negita%
bolde: 8s gueso que la t5pica negita% Eje"plo
lighte: 2igeo% Eje"plo
Un n4"eo del &GG al LGG: >ifeentes $aloes desde el "5ni"o (&GG) al
"3i"o (LGG)% Eje"plo ($alo &GG)
no"al: Aoso no"al%
Siga"os con el fo"ateado de te3tos% Con CSS pode"os especifica el ta"a0o
ente letas%
lette/spacing: 9ta"a0o:-
El ta"a0o (al igual que en todos los ta"a0os en CSS) se especifica de la "is"a
fo"a que co"o $e5a"os en font/si+e%
lette/spacing: Bp3-
7a"bi1n pode"os especifica el ta"a0o ente palabas:
wod/spacing: 9ta"a0o:-
En H782 paa KindentaK o espacia un te3to ten5a"os que tia de cosas co"o
Unbsp-% Con CSS pode"os usa te3t/indent%
te3t/indent: 9ta"a0o:-
Co"o sie"pe# los ta"a0os se especifican igual que antes% Ade"s en este
atibuto ta"bi1n le pode"os da un $alo en pocentaje con especto al
ele"ento contenedo%
te3t/indent: )c"-
Con CSS ta"bi1n pode"os tansfo"a las "ay4sculas y "in4sculas de los
te3tos%
te3t/tansfo": 9tansfo"aci!n:-
>onde 9tansfo"aci!n: puede $ale lo siguiente:
uppecase: 7odo a "ay4sculas
lowecase: 7odo a "in4sculas
capitali+e: 2a pi"ea leta de cada palaba a "ay4sculas
none: Sin tansfo"aci!n (pedete"inado)
Sto atibuto que pode"os especifica paa los te3tos es el intelineado# es deci#
el ta"a0o enten las l5neas de un te3to:
line/height: 9ta"a0o:-
9ta"a0o: se e3pesa co"o he"os $isto sie"pe
Alineado de 7e3tos
Fo hace falta usa alignJKcenteK ni cosas paecidas paa nada% Con CSS
tene"os "ucho "s contol:
te3t/align: 9alineado:-
>onde 9alineado: puede $ale left# ight# cente o justify% (o eje"plo si
aplica"os este estilo a un pafo%%%
te3t/align: cente-
%%% el te3to del pafo esta centado
El fondo de un elemento
Sl$5date de atibutos H782 tales co"o bgcolo: en CSS tene"os "ucho "s
contol sobe el fondo de los ele"entos:
(aa ca"bia el colo de fondo:
bac<gound/colo: 9colo:-
7a"bi1n pode"os especifica el colo tanspaent%
Con CSS pode"os pone co"o fondo un gfico:
bac<gound/i"age: 9i"gen:-
2as i"genes en CSS se e3pesan con la funci!n U?2:
ul(Ki"agen%jpgK)
(o eje"plo:
bac<gound/i"age: ul(K;pic;fondo%pngK)-
?ecueda que si la i"agen es un (FA con tanspaencia alpha pods consegui
efectos i"pesionantes
(aa consegui que el gfico de fondo se quede fijo en el sitio y no se "ue$a
con el scoll no hace falta utili+a el infa"e bgpopetiesJKfi3edK popietaio de
8icosoft:
bac<gound/attach"ent: fi3ed-
Ade"s con CSS tene"os "s contol: no"al"ente cuando pone"os un
gfico de fondo en un objeto- si este es "s peque0o que el objeto se i
epitiendo en "osaico hasta llena todo el objeto%
Con CSS pode"os contola esta epetici!n:
bac<gound/epeat: 9"odo:-
>onde 9"odo: puede se uno de los siguientes:
no/epeat: Si"ple"ente cuando acabe el gfico no lo epite# de "anea
que el esto del objeto queda sin fondo% 7a"bi1n si especifica"os un colo de
fondo apate de la i"gen# donde no cuba la i"gen se $e el colo%
epeat/3: Se epite la i"gen hoi+ontal"ente peo no $etical"ente%
epeat/y: Se epite la i"gen $etical"ente peo no hoi+ontal"ente%
epeat: Se epite tanto hoi+ontal"ente co"o $etical"ente% 7a"bi1n
pode"os especifica d!nde quee"os que e"piece la i"agen:
bac<gound/position: 9posici!n:-
En posici!n pode"os e3pesa dos "edidas sepaadas po espacio% 2a pi"ea es
las coodenadas 6 y la segunda las coodenadas V%
(ode"os e3pesa las "edidas en unidades (co"o he"os $isto sie"pe)#
pocentajes con especto al contenedo- o palabas co"o top# botto" left y ight
que hacen efeencia a las distintas esquinas de la pantalla%
Eje"plos:
bac<gound/position: &Qp3 'Lp3-
bac<gound/position: top ight-
Bordes
Con CSS pode"os especifica bodes a los ele"entos de todo tipo%
En este apatado $a"os a $e la sinta3is abe$iada paa inclu5 bodes% Con esta
sinta3is tene"os cuato atibutos:
bode: 9tipo: 9goso: 9colo:-
bode/top: 9tipo: 9goso: 9colo:-
bode/botto": 9tipo: 9goso: 9colo:-
bode/left: 9tipo: 9goso: 9colo:-
bode/ight: 9tipo: 9goso: 9colo:-
El pi"e at5buto hace efeencia al bode geneal del objeto (los cuato lados) y
los siguientes hacen efeencia a lados en conceto%
El oden de los $aloes no tiene poque se ese# puede se cualquie oden e
incluso pode"os o"iti $aloes (estos to"an el $alo pedete"inado)%
En 9tipo: pone"os el tipo de bode que quee"os% (uede se uno de los
siguientes:
solid: Un bode s!lido# es deci# una l5nea%
dashed: Un bode KayadoK# con l5nea discont5nua%
dotted: Un bode hecho a pati de puntos%
double: >os l5neas s!lidas%
Todes )>: Fada eco"endados# peo son: goo$e# idge# inset# outset%
none
En cuanto a 9goso: y 9colo: se especifican co"o he"os $isto hasta ahoa:
goso en unidades (c"# p3%%%) y colo co"o sie"pe%
*ea"os un eje"plo# aplicando algo de lo que he"os apendido:
%"ibode ,
bode/top: solid 'p3 HaGGGGG-
bode/botto": outset )p3 HaGGGGG- bode/left: dotted 'p3 HaGGGGG-
bode/ight: dashed 'p3 HaGGGGG- font/si+e: 'Gp3-colo: HaGGGGG-font/
$aiant: s"all/caps-.
Ahoa s!lo tene"os que aplica la clase a un objeto paa $e el esultado
Pseudoclases
En CSS e3isten unas clases especiales que se lla"an pseudoclases que afectan a
co"pota"ientos especiales co"o pasa el at!n po enci"a# etc%
(aa defini una pseudoclase:
etiqueta:pseudoclase ,
9Eo"atos CSS:
.
Co"o $e"os se ponen dos puntos y despu1s el no"be de la pseudoclase
pedefinida%
ho$e: Esta pseudoclase se acti$a "ientas el at!n est po enci"a del
objeto% Aeneal"ente se aplica a enlaces y fo"ulaios%
$isited: Esta pseudoclase se acti$a en los enlaces que ya han sido
$isitados%
lin<: Enlaces en estado no"al (no $isitados y el at!n no enci"a)
acti$e: Esta pseudoclase se define "ientas el objeto est acti$o%
taget: Esta pseudoclase se acti$a cuando un ele"ento que he"os definido
con un KidK es $isitado a ta$1s de un enlaceancla%
Hay "s# peo estas suelen funciona en todos los na$egadoes% Algunas co"o
afte y befote las $ee"os en el siguiente cap5tulo :)
(o eje"plo# al pasa po enci"a de los enlaces de este docu"ento se acti$an
unos efectos (ca"bio de colo po eje"plo) que se pueden defini con a:ho$e%
Display. Bloques.
En H782 hay ele"entos de $aios tipos: po eje"plo los inline que se $isuali+an
en la "is"a l5nea (tales co"o 9a:# 9span:%%%) o los bloc< que son bloques
(co"o 9di$:# 9p:%%% ) %
Con CSS pode"os "odifica el tipo de ele"ento H782 que quea"os# utili+ando
el atibuto
display%
display: 9tipo:-
>onde 9tipo: puede se po eje"plo inline# bloc<# list/ite" (co"o las etiquetas
9li: %%%) Con esto pode"os# po eje"plo# hace listas que se $isualicen en la
"is"a l5nea-
Si un ele"ento es de tipo bloc< (co"o un di$) pode"os defini nosotos su
altua y anchua con los atibutos:
width: 9ancho:-
height: 9alto:-
El ancho y el alto los pode"os e3pesa con unidades peo ta"bi1n con
pocentajes
width: BBp3-
height: &'Gp3-
8genes y KpaddingK
2os "genes nos si$en paa egula el espacio que hay a continuaci!n de un
ele"ento en cualquiea de sus lados%
"agin/top: 9cantidad:- "agin/botto": 9cantidad:- "agin/left:
9cantidad:- "agin/ight: 9cantidad:-
2a cantidad se e3pesa co"o todas las "edidas en CSS% Eje"plo:
"agin/botto": Op3-
Sto $alo que pode"os usa es auto# donde el na$egado calcula
auto"tica"ente los "genes que le hay que da al objeto paa# po eje"plo#
centalo%
(o eje"plo:
di$%centado , width: BGGp3- "agin/left: auto-
"agin/ight: auto-
te3t/align: ight-
.
Con ese c!digo el di$ con clase KcentadoK se un di$ de BGGp3 alineado en el
cento de la pantalla# peo que el te3to que contiene est alineado a la deecha
(o su pate# el padding es el espacio ente el bode y el contenido de un objeto#
y se e3pesa igual que los "genes peo con KpaddingK en $e+ de K"aginK%
Eje"plo:
padding/left: '""-
Elementos AFTER y BEFORE
Una de las cosas potentes de CSS son los pseudoele"entos AE7E? y TEES?E#
que junto con la popiedad KContentK nos pe"ite inseta cosas antes y despues
de un ele"ento (6)H782%
Co"o eje"plo $ee"os c!"o pone en un bloc<quote esas Kco"illasK que se $en
"uchas $eces# que Ken$uel$enK el contenido%
bloc<quote
,
colo: H))))))-
.
bloc<quote:befoe ,
colo: HTETETE-
content: ul(Kbloc<quote%gifK) K K att(cite)-
.
bloc<quote:afte
,
content: ul(Kbloc<quotefin%gifK)-
.
En $ede estn "acados los ele"entos AE7E? y TEES?E% Est clao lo que
hacen# el TEES?E inseta la i"agen de las co"illas antes del contenido y AE7E?
inseta las co"illas despues% Esto lo consegui"os gacias al atibuto content %
(eo ta"bi1n $e"os eso de att(cite)% WXu1 es esoY (ues eso nos Kde$uel$eK el
contenido del at5buto KciteK que le ponga"os al bloc<quote (p%e% 9bloc<quote
citeJKhttp:;;www%baapunto%co"K: )%
7a"bi1n con$iene "ete el contenido del Tloc<quote dento de un 9di$: paa
que $alide el 6H782%
Co"o i"genes podeis usa estas: i"gen & e i"gen '%
Capas
(o fin# llega"os a una de las pates de CSS "s potente%
Aacias a las capas tene"os todo el contol que quea"os sobe los ele"entos
de nuesta pgina web%
Fo"al"ente la posici!n de los ele"entos de una pgina es elati$a# es deci#
que depende de los de"s ele"entos de una pgina% (o eje"plo# un pafo
esta "s abajo si antes de 1l hay "s pafos o ele"entos%
>ebido a esto# no"al"ente cuando se que5a coloca ele"entos en un sitio
conceto# se ecu5a a las tablas in$isibles o i"genes espaciadoas in$isibles# lo
que es una chapu+a y "uy poco accesible co"o he"os $isto en el cap5tulo uno%
Con CSS esto ha ca"biado: ahoa pode"os coloca los ele"entos en posici!n
absoluta# es deci# indicando el ta"a0o y coodenadas e3actas al na$egado paa
que las coloque
Tien# e"pe+ae"os desde el pincipio :) %
Antes de nada deci que debido a su natuale+a las capas se suelen usa con
bloques 9di$:% (o eje"plo cada capa un bloque >C* con un identificado 4nico
que despues defini"os en el achi$o CSS :) %
Tien# $ee"os ahoa lo pi"eo: c!"o indica que un ele"ento tiene posici!n
absoluta y no
elati$a:
position: 9posici!n:-
V 9posici!n: puede $ale:
absolute: 2a posici!n del ele"ento no depende de ninguna ota etiqueta%
Fo"al"ente lo
que nos inteesa paa las capas
fi3ed: Al igual que el anteio la posici!n es absoluta# peo el ele"ento se
queda fijo en el sitio al hace KscollK con el docu"ento% Co"o eje"plo# el "en4
de este "is"o
docu"ento :)
elati$e: (osici!n elati$a- no"al"ente lo pedete"inado
static: Al igual que el anteio la posici!n es elati$a# peo no pode"os
edi"ensiona
(po eje"plo) el objeto%
>e "anea que paa las capas debe"os pone la posici!n a absolute o fi3ed :)
Especificando las coodenadas
Tien# ya tene"os nuesta capa con posici!n absoluta (o fija) peo%%% Wc!"o le
situa"osY Ecil: utili+ando los atibutos top# botto"# left y ight%
Fo"al"ente se especifican s!lo top y left:
top: 9posici!n:-
left: 9posici!n:-
9posici!n: se especifica co"o las "edidas en CSS en unidades co"o po
eje"plo p3% 7a"bi1n
se ad"iten pocentajes :)
>e esta "anea:
H"icapa ,
position: absolute-
top: 'GGp3- left: &BGp3- width: &OBp3- height: &OBp3-
bode: dashed &p3 "aoon-
te3t/align: cente-
colo: "aoon-
font/fa"ily: K2ucida AandeK# *edana# Aial# Hel$etica# sans/seif-
font/si+e: &Rp3-
.
>espues hace"os un 9di$ idJK"icapaK: en un docu"ento H782 de puebas
que est1s
haciendo :) y dento coloca"os un fag"ento de te3to# cea"os el di$ y
co"poba"os el esultado
:)
2a capa se un cuadado de &OBp3 de lado# en la posici!n 'GG3&BG# con un
bode "a!n discont5nuo# tipo de leta 2ucida Aande# colo "a!n# ta"a0o
&Rp3 y centado :)
El +inde3
A $eces tene"os $aias capas unas po enci"a de otas y quee"os especifica
cules estn po enci"a de c4ales :)
(aa esto usa"os el +/inde3:
+/inde3: 95ndice:-
Zinde3 es un n4"eo cualquiea# la capa con "ayo +inde3 apaece
po enci"a de la capa con +
inde3 "eno# etc%