ApostilaCSS

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

1
http://www.fe.up.pt/~jvv/CSS/html/CSS.htmlhttp://www.fe.up.pt/~jvv/CSS/html/CSS.html 112525--1010--20042004
CSSCSS
I sidr o Vila Ver deI sidr o Vila Ver de
CascadingCascading St yleSt yle Sheet sSheet s
2525--1010--20042004 http://www.fe.up.pt/~jvv/CSS/html/CSS.htmlhttp://www.fe.up.pt/~jvv/CSS/html/CSS.html 22
Folhas de Est iloFolhas de Est ilo
99 A f or ma estA f or ma est áá a t or nara t or nar --se t ant o, ou mais, impor t ant e se t ant o, ou mais, impor t ant e 
do que o cont edo que o cont eúúdodo
99 Sist emat izar o design de uma colecSist emat izar o design de uma colecçção de document os ão de document os 
implica def iniimplica def iniçções de est iloões de est ilo
ƒƒ CSS CSS -- CascadingCascading St yleSt yle Sheet sSheet s
99 Âmbit o das def iniÂmbit o das def iniççõesões
ƒƒ f olha de est ilof olha de est ilo
oo acessacessíível a uma colecvel a uma colecçção int eir a de document osão int eir a de document os
ƒƒ mar ca mar ca <<st ylest yle>>no cabeno cabeççalho de um alho de um docdoc
oo ger al par a t odo o document oger al par a t odo o document o
ƒƒ at r ibut o at r ibut o st ylest yle em mar cas especem mar cas especííf icasf icas
oo act ivo dent r o da mar caact ivo dent r o da mar ca
99 mais especmais especííf ico pr evalece (daf ico pr evalece (daíí o o cascadingcascading))
ƒƒ em caso de empat e, o mais r ecent eem caso de empat e, o mais r ecent e
2
2525--1010--20042004 http://www.fe.up.pt/~jvv/CSS/html/CSS.htmlhttp://www.fe.up.pt/~jvv/CSS/html/CSS.html 33
<<ht mlht ml>>
<<headhead>>
<<t it le>t it le>Est ilosEst ilos</</ t it let it le>>
<<linklink relrel==st ylesheetst ylesheet hrefhref ="="est ilogeral.cssest ilogeral.css" " t ypet ype="t ext /="t ext / csscss">">
<<linklink relrel==st ylesheetst ylesheet hrefhref ="="est ilot it ulos.cssest ilot it ulos.css" " t ypet ype="t ext /="t ext / csscss">">
<<st ylest yle>>
<!<!---- / * / * pint apint a de de vermelhovermelho * / * / H1 { color: red}H1 { color: red} ---->>
</</ st ylest yle>>
</</ headhead>>
<<bodybody>>
<<h1h1>>TT íít ulot ulo def inidodef inido com CSS no com CSS no Document oDocument o</</ h1h1>>
<<h2h2>sub>sub-- tt íít ulot ulo com a f or ma com a f or ma def inidadef inida emem est ilot it ulosest ilot it ulos</</ h2h2>>
<<pp>>PPááginagina dede
<<aa hrefhref ="ht t p:/ /="ht t p:/ / www.f e.up.pt / ~j vv/ GOI Iwww.f e.up.pt / ~j vv/ GOI I / ">GOI I <// ">GOI I </ aa></></ pp>>
<<p classp class="pt ipo1">="pt ipo1">PPááginagina do do 
<<a a hrefhref ="ht t p:/ /="ht t p:/ / www.f e.up.pt / ~j vvwww.f e.up.pt / ~j vv/ " / " st ylest yle="f ont="f ont -- size: size: 
100%">100%">aut oraut or </</ aa></></ pp>>
<<pp>>Text oText o do do element oelement o P</P</ pp>>
Text oText o do do element oelement o BODY.BODY.
<<divdiv> > Est eEst e blocobloco de de t ext ot ext o t em a f orma t em a f orma def inidadef inida emem
est ilogeral.cssest ilogeral.css</</ divdiv>>
<<divdiv st ylest yle="background="background--color : #color : # f f f f ccf f f f cc; color : # 660000"> ; color : # 660000"> 
Est eEst e blocobloco de de t ext ot ext o t em<t em<brbr >>
a f or ma a f or ma def inidadef inida ' inline' </' inline' </ divdiv>>
</</ bodybody>>
</</ ht mlht ml>>
Uso de Est ilosUso de Est ilos
Resultado no Resultado no 
prpróóximoximo SlideSlide
a { texta { text--decoration: none; decoration: none; 
color: white; color: white; 
fontfont--size: 180%size: 180%
}}
body { backgroundbody { background--color: # 000000;color: # 000000;
color: # 88ee88;color: # 88ee88;
fontfont--family: family: monospacemonospace;;
}}
H1,H2,H3,H4,P{ color: blue}H1,H2,H3,H4,P{ color: blue}
H1,H2{ color: yellow}H1,H2{ color: yellow}
2525--1010--20042004 http://www.fe.up.pt/~jvv/CSS/html/CSS.htmlhttp://www.fe.up.pt/~jvv/CSS/html/CSS.html 44
Exemplo 18Exemplo 18
3
2525--1010--20042004 http://www.fe.up.pt/~jvv/CSS/html/CSS.htmlhttp://www.fe.up.pt/~jvv/CSS/html/CSS.html 55
Exemplo 19Exemplo 19
<<ht mlht ml><><headhead>>
<<st ylest yle>>
<<linklink r elr el="="st ylesheetst ylesheet " t ype="t ext /" t ype="t ext / csscss" " 
hr efhr ef ="="css19.csscss19.css" media="scr een"/ >" media="scr een"/ >
</</ st ylest yle>>
</</ headhead> <> <bodybody>>
<<pp>p</>p</ pp>>
<<p idp id="xy01">p id="xy01"</="xy01">p id="xy01"</ pp>>
<<p classp class="c1">p class="c1"</="c1">p class="c1"</ pp>>
<<p classp class="c2">p class="c2"</="c2">p class="c2"</ pp>>
<<p classp class="c3">p class="c3"</="c3">p class="c3"</ pp>>
<<p classp class="c4">p class="c4"</="c4">p class="c4"</ pp>>
<<divdiv>>divdiv</</ divdiv>>
<<div iddiv id="xy02">div id="xy02"</="xy02">div id="xy02"</ divdiv>>
<<div classdiv class="c1">div class="c1"</="c1">div class="c1"</ divdiv>>
<<div classdiv class="c2">div class="c2"</="c2">div class="c2"</ divdiv>>
<<div classdiv class="c3">div class="c3"</="c3">div class="c3"</ divdiv>>
<<div classdiv class="c4">div class="c4"</="c4">div class="c4"</ divdiv>>
<<span classspan class="c1">span class="c1"</="c1">span class="c1"</ spanspan>>
<<brbr >>
<<span classspan class="c2">span class="c2"</="c2">span class="c2"</ spanspan>>
</</ bodybody></></ ht mlht ml>>
div { color: red }div { color: red }
p{ colorp{ color: blue}: blue}
.c1{ color: green}.c1{ color: green}
.c2{ color: teal}.c2{ color: teal}
.c3{ color: maroon}.c3{ color: maroon}
p.c2{ color: magenta}p.c2{ color: magenta}
div.c3{ color: fuchsia}div.c3{ color: fuchsia}
# xy01{ color:olive}# xy01{ color:olive}
# xy02{ color:silver# xy02{ color:silver}}
2525--1010--20042004 http://www.fe.up.pt/~jvv/CSS/html/CSS.htmlhttp://www.fe.up.pt/~jvv/CSS/html/CSS.html 66
Element os de sint axeElement os de sint axe
99 For ma bFor ma báásicasica
ƒƒ mar ca {pr op1:valor 1; pr op2:valor 2 valor 3; mar ca {pr op1:valor 1; pr op2:valor 2 valor 3; ……}}
ƒƒ ExEx : H1 {: H1 {f ontf ont --st ylest yle : : it alicit alic}}
99 aplicar a vaplicar a váár ias mar casr ias mar cas
ƒƒ H1, H2, H3, H4, H5, H6 {H1, H2, H3, H4, H5, H6 {f ontf ont --st ylest yle : : it alicit alic}}
99 aplicar saplicar sóó em cont ext oem cont ext o
ƒƒ OL LI {OL LI {listlist -- st ylest yle: : upperupper --alphaalpha}}
ƒƒ OL OL LI {OL OL LI {listlist --st ylest yle: : upperupper -- r omanr oman}}
ƒƒ OL OL OL LI {OL OL OL LI {listlist --st ylest yle: : lowerlower --alphaalpha}}
oo it em numa list a de nit em numa list a de níível 3 ident if icado com let r as vel 3 ident if icado com let r as 
minminúúsculassculas
ƒƒ H1 EM, P STRONG {H1 EM, P STRONG {colorcolor : : r edr ed}}
ƒƒ P UL STRONG {P UL STRONG {colorcolor : : blueblue}}
oo caso vcaso váár ios cont ext os sej am aplicr ios cont ext os sej am aplicááveis, usar o mais veis, usar o mais 
especespecííf icof ico
4
2525--1010--20042004 http://www.fe.up.pt/~jvv/CSS/html/CSS.htmlhttp://www.fe.up.pt/~jvv/CSS/html/CSS.html 77
Element os de sint axeElement os de sint axe
99 Aplicar a element os bem ident if icadosAplicar a element os bem ident if icados
ƒƒ # xyz# xyz { { t extt ext -- indentindent : 5em }: 5em }
99 Aplicar a Aplicar a pseudopseudo--classesclasses
ƒƒ A:linkA:link { color : r ed } / * unvisit ed link * /{ color : r ed } / * unvisit ed link * /
ƒƒ A:visit edA:visit ed { color : blue } / * visit ed links * /{ color : blue } / * visit ed links * /
ƒƒ A:act iveA:act ive { color : lime } / * act ive links * /{ color : lime } / * act ive links * /
ƒƒ A.myclass.LinkA.myclass.Link {{colorcolor : : pur plepur ple} } 
99 Aplicar a Aplicar a pseudopseudo--Element osElement os
ƒƒ P:f ir stP:f ir st -- let t er { f ontlet t er { f ont -- size: 300%; f loat : lef t }size: 300%; f loat : lef t }
ƒƒ P:f ir stP:f ir st -- lineline {{t extt ext -- indentindent : 5em }: 5em }
2525--1010--20042004 http://www.fe.up.pt/~jvv/CSS/html/CSS.htmlhttp://www.fe.up.pt/~jvv/CSS/html/CSS.html 88
Uso de ClassesUso de Classes
99
Uma classe def ine um conj unt o de Uma classe def ine um conj unt o de 
pr opr iedades par a uma mar capr opr iedades par a uma mar ca
ƒƒ per mit e vper mit e váár ios est ilos par a a mesma mar car ios est ilos par a a mesma mar ca
P.r esumoP.r esumo {{f ontf ont -- st ylest yle: : it alicit alic; ; lef tlef t --mar ginmar gin: 0.5cm; : 0.5cm; r ightr ight --mar ginmar gin: 0.5cm}: 0.5cm}
P.equacaoP.equacao {{f ontf ont -- f amilyf amily: : SymbolSymbol; ; t extt ext --alignalign: : cent ercent er }}
ƒƒ usamusam--se def inindo o at r ibut o se def inindo o at r ibut o classclass na mar cana mar ca
<p <p class=r esumoclass=r esumo>Est e t ext o dest ina>Est e t ext o dest ina-- sese……</ p></ p>
99 classes genclasses genéér icas aplicamr icas aplicam--se a vse a váár ias mar casr ias mar cas
.cor r igido {.cor r igido {colorcolor : : r edr ed} <em } <em class=cor r igidoclass=cor r igido>>nabissa<nabissa</ em>/ em>
99 as classes her dam as pr opr iedades da mar ca as classes her dam as pr opr iedades da mar ca 
basebase
ƒƒ não hnão háá her anher ançça ent r e classesa ent r e classes
ƒƒ especif icar bast ant e a mar ca, e def inir classes que especif icar bast ant e a mar ca, e def inir classes que 
ssóó alt er am o especalt er am o especííf icof ico
5
2525--1010--20042004 http://www.fe.up.pt/~jvv/CSS/html/CSS.htmlhttp://www.fe.up.pt/~jvv/CSS/html/CSS.html 99
Algumas pr opr iedades do CSS2Algumas pr opr iedades do CSS2
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Teste</title>
</head>
<body>
<div style="overflow:auto;width:20em;height:4em">
Este texto está escrito com tantos caracteres quantos
os necessários para não caber na caixa de 20em por 4em. Espero que apareça 
uma scrollbar do lado direito 
</div>
</body>
</html>
Ex1.xht mlEx1.xht ml
2525--1010--20042004 http://www.fe.up.pt/~jvv/CSS/html/CSS.htmlhttp://www.fe.up.pt/~jvv/CSS/html/CSS.html 1010
Algumas pr opr iedades do CSS2Algumas pr opr iedades do CSS2
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Teste</title>
</head>
<body>
<div style="position:absolute;top:3em;left:20em;border:solid blue 2px">
Aqui vai o texto para uma posição a 3em do topo e a 20em da esquerda;
</div>
<div style="border:red 1px dotted">Este texto não esta condicionado a 
nenhum posicionamento específico, logo flutua pelo ecrã de acordo com o espaço 
disponivel existente. Repare que pode sobrepor-se a outro texto que eventualmente 
exista na área definida em termos absolutos</div>
</body>
</html>
Ex2.xht mlEx2.xht ml
6
2525--1010--20042004 http://www.fe.up.pt/~jvv/CSS/html/CSS.htmlhttp://www.fe.up.pt/~jvv/CSS/html/CSS.html 1111
Algumas pr opr iedades do CSS2Algumas pr opr iedades do CSS2
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Teste</title>
</head>
<body>
<div style="position:absolute;top:0em;left:0em;
border:solid blue 2px;z-index:1">
<img style="border:solid blue 2px;" src="./feup.png"
alt="fachadas dos departamentos da feup" />
</div>
<div style="position:absolute;top:2em;left:3em;z-index:2;
font-size:150%;color:red;">Edifícios dos Departamentos</div>
</body>
</html>
Ex3.xht mlEx3.xht ml
2525--1010--20042004 http://www.fe.up.pt/~jvv/CSS/html/CSS.htmlhttp://www.fe.up.pt/~jvv/CSS/html/CSS.html 1212
Pr opr iedades nos est ilosPr opr iedades nos est ilos
99 Gr upos de pr opr iedades def inGr upos de pr opr iedades def inííveisveis
ƒƒ f ont es, cor es e f undos, t ext o, caixas e f ont es, cor es e f undos, t ext o, caixas e 
disposidisposiçção, list as, mar casão, list as, mar cas
99 ht t p:/ / www.ht mlhelp.com/ r ef er ence/ csht t p:/ / www.ht mlhelp.com/ r ef er ence/ cs
s/ pr oper t ies.ht mls/ pr oper t ies.ht ml
99 ht t p:/ / www.pager esour ce.com/ dht ml/ csht t p:/ / www.pager esour ce.com/ dht ml/ cs
spr ops.ht mspr ops.ht m
7
2525--1010--20042004 http://www.fe.up.pt/~jvv/CSS/html/CSS.htmlhttp://www.fe.up.pt/~jvv/CSS/html/CSS.html 1313
99 Nor maNor ma
ƒƒ ht t p:/ / www.w3.or g/ TR/ RECht t p:/ / www.w3.or g/ TR/ REC--CSS1CSS1
99 Ref er ênciasRef er ências
ƒƒ ht t p:/ /ht t p:/ / www.ht mlhelp.com/ r ef er ence/ csswww.ht mlhelp.com/ r ef er ence/ css//
ƒƒ Tut or ialTut or ial (CERN)(CERN)
oo ht t p:/ / alf .f e.up.pt /ht t p:/ / alf .f e.up.pt / ~lmr~lmr // mgimgi// csscss//
ƒƒ Tut or ialTut or ial ((J ohnJ ohn AllsoppAllsopp ofof West er nWest er n Civilisat ionCivilisat ion))
oo ht t p:/ /ht t p:/ / www.west civ.comwww.west civ.com// st yle_mast erst yle_mast er // academyacademy// css_tcss_t
ut or ialut or ial//