Escolar Documentos
Profissional Documentos
Cultura Documentos
CSS Tutorial
W3SchoolsIncio Prximocaptulo"
CSSumalinguagemdeestiloquedescreveaapresentao
deumdocumentoHTML(ouXML).
CSSdescrevecomoelementosdevemserrenderizadosnatela,
nopapel,ouemoutrasmdias.
EstetutorialvaiteensinarCSSdobsicoaoavanado.
Comonossoeditoronline,vocpodeeditaroCSS,eclicaremumbotoparavero
resultado.
CSS Exemplo
body{
backgroundcolor:#d0e4fe;
}
h1{
color:orange;
textalign:center;
}
p{
fontfamily:"TimesNewRoman";
fontsize:20px;
}
Tentevocmesmo
1/3
09/12/2015 CSSTutorial
Cliquenoboto"TryitYourself"botoparavercomofunciona.
Exemplos CSS
Aprendacommaisde300exemplos!Comonossoeditor,vocpodeeditaroCSS,e
clicaremumbotoparaveroresultado.
TenteItYourself!
ComeceCSSQuiz!
Referncias CSS
NaW3Schoolsvocvaiencontrarrefernciascompletasdetodasaspropriedades
CSSeseletorescomsintaxe,exemplossuporteaonavegador,emuitomais.
CSSRefernciadepropriedades
SeletoresCSSReference
AuralCSSReference
UnidadesCSS
CSSRefernciadecores
2/3
09/12/2015 CSSTutorial
Maisde10000certificadosjemitidos!
GetYourCertificate
OCertificadoHTMLdocumentaseuconhecimentodeHTML.
OCertificadoHTML5documentaseuconhecimentodeHTML5avanada.
OCertificadoCSSdocumentaseuconhecimentodeCSSavanado.
OCertificadoJavaScriptdocumentaseuconhecimentodeJavaScripteHTMLDOM.
OCertificadojQuerydocumentaseuconhecimentodojQuery.
OCertificadoPHPdocumentaseuconhecimentodePHPeSQL(MySQL).
OsCertificadosdoXMLdocumentososeuconhecimentodeXML,DOMXMLeXSLT.
W3SchoolsIncio Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
3/3
09/12/2015 CSSIntroduo
CSS Introduo
"Anterior Prximocaptulo"
O que CSS?
CSSsignificaCascadingStyleSheets
CSSdescrevecomosoelementosHTMLaserexibidonatela,papelou
emoutrosmeiosdecomunicao
CSSeconomizaummontedetrabalho.Elepodecontrolarolayoutdevrias
pginasdaWebdeumasvez
FolhasdeestiloexternassoarmazenadasemarquivosCSS
1/3
09/12/2015 CSSIntroduo
Welcome to My Homepage
Use the menu to select different Stylesheets
Stylesheet 1
Stylesheet 2
Stylesheet 3
Stylesheet 4
No Stylesheet
No Styles
This page uses DIV elements to group different sections of
HTMLfoicriadaparadescreverocontedodeumapginaweb,como:
2/3
09/12/2015 CSSIntroduo
<h1>Esteumttulo</h1>
<p>Esteumpargrafo.</p>
Quandoastagscomo<font>eatributosdecorforamadicionadosespecificao
HTML3.2,comeouumpesadeloparaosdesenvolvedoresweb.Desenvolvimentode
grandessites,ondefontesecoresinformaesforamadicionadasacadapgina,
tornouseumprocessolongoecaro.
Pararesolveresteproblema,oWorldWideWebConsortium(W3C)criadoCSS.
CSSremovidoaformataodapginaHTMLestilo!
Comumarquivodefolhadeestiloexterna,vocpodealteraraaparnciadeumsite
inteiro,alterandoapenasumarquivo!
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
3/3
09/12/2015 CSSSintaxeeSeletores
CSS Sintaxe
AregraCSSconjuntocompostodeumseletoreumblocodedeclarao:
OspontosseletorparaoelementoHTMLquevocquerdenominar.
Oblocodedeclaraocontmumaoumaisdeclaraesseparadasporpontoe
vrgula.
CadadeclaraoincluiumnomedepropriedadeCSSeumvalor,separadospordois
pontos.
AdeclaraoCSSsempreterminacomumpontoevrgula,eblocosdedeclarao
socercadasporchaves.
Noexemploaseguirtodososelementos<p>serocentroalinhados,comumacor
detextovermelho:
Exemplo
p{
color:red;
textalign:center;
}
Tentevocmesmo
1/6
09/12/2015 CSSSintaxeeSeletores
CSS Comentrios
Oscomentriossousados
paraexplicarocdigo,epodeajudarquandovoceditar
ocdigofonteemumadataposterior.Oscomentriossoignoradospelos
navegadores.
UmcomentrioCSScomeacom/*eterminacom*/.Oscomentriostambm
podemabrangervriaslinhas:
Exemplo
p{
color:red;
/*Thisisasinglelinecomment*/
textalign:center;
}
/*Thisis
amultiline
comment*/
Tentevocmesmo
Seletores CSS
SeletoresCSSsoutilizadaspara"encontrar"(ouselecione)elementosHTMLcom
basenoseunomedeelemento,id,classe,atributo,emuitomais.
O seletor de elemento
Oseletordeelementoselecionaelementoscombasenonomedoelemento.
Vocpodeselecionartodososelementos<p>emumapginacomoesta(neste
caso,todososelementos<p>serocentroalinhados,comumacordetexto
vermelho):
Exemplo
2/6
09/12/2015 CSSSintaxeeSeletores
p{
textalign:center;
color:red;
}
Tentevocmesmo
O seletor id
OseletoridusaoatributoiddeumelementoHTMLparaselecionarumelemento
especfico.
Umiddevesernicodentrodeumapgina,demodoqueoseletoridusadose
vocquiserselecionarumnicoelemento,nico.
ParaselecionarumelementocomumIDespecfico,escreverumpersonagemde
hash(#),seguidodoiddoelemento.
AregradeestiloabaixoseraplicadaaoelementoHTMLcomid="para1":
Exemplo
#para1{
textalign:center;
color:red;
}
Tentevocmesmo
VocnocomearumnomedeIDcomumnmero!
O seletor de classe
Oseletordeclasseselecionaelementoscomumatributoespecficodeclasse.
Paraselecionarelementoscomumaclasseespecfica,escreverumperodode
3/6
09/12/2015 CSSSintaxeeSeletores
caractere(.),Seguidodonomedaclasse.
Noexemploabaixo,todososelementosHTMLcomclass="center"servermelhoe
alinhadoaocentro:
Exemplo
.center{
textalign:center;
color:red;
}
Tentevocmesmo
VoctambmpodeespecificarqueelementosHTMLnicaespecficosdeveroser
afectadosporumaclasse.
Noexemploabaixo,todososelementos<p>comclass="center"serocentro
alinhados:
Exemplo
p.center{
textalign:center;
color:red;
}
Tentevocmesmo
Vocnocomearumnomedeclassecomumnmero!
Agrupando Seletores
Sevoctiverelementoscomasmesmasdefiniesdeestilo,comoeste:
4/6
09/12/2015 CSSSintaxeeSeletores
h1{
textalign:center;
color:red;
}
h2{
textalign:center;
color:red;
}
p{
textalign:center;
color:red;
}
vocpodeagruparosseletores,paraminimizarocdigo.
Paraseletoresdegrupo,separecadaseletorcomumavrgula.
Noexemploabaixotemosagrupadososseletoresdeocdigoacima:
Exemplo
h1,h2,p{
textalign:center;
color:red;
}
Tentevocmesmo
"Anterior Prximocaptulo"
5/6
09/12/2015 CSSSintaxeeSeletores
Copyright19992015byRefsnesData.AllRightsReserved.
6/6
09/12/2015 CSSComo
Quandoumnavegadorlumafolhadeestilo,eleirformatarodocumento
HTMLdeacordocomasinformaescontidasnafolhadeestilo.
Folhadeestiloexterna
Folhadeestilointerna
Estiloembutido
Cadapginadeveincluirumarefernciaparaoarquivodefolhadeestiloexterna
dentrodoelemento<link>.Oelemento<link>vaidentrodaseo<head>:
Exemplo
<head>
<linkrel="stylesheet"type="text/css"href="mystyle.css">
</head>
Tentevocmesmo
Umafolhadeestiloexternapodeserescritaemqualquereditordetexto.Oarquivo
nodeveconterqualquertaghtml.Oarquivodefolhadeestilodevesersalvacom
1/5
09/12/2015 CSSComo
umaextenso.css.
Aquiestcomoo"meuestilo.css"parece:
body{
backgroundcolor:lightblue;
}
h1{
color:navy;
marginleft:20px;
}
Noadicioneumespaoentreovalordapropriedadeedaunidade
(como marginleft:20 px).Amaneiracorreta: marginleft:
20px;
Estilosinternossodefinidosdentrodoelemento<style>,dentrodaseo<head>
deumapginaHTML:
Exemplo
<head>
<style>
body{
backgroundcolor:linen;
}
h1{
color:maroon;
marginleft:40px;
}
</style>
</head>
2/5
09/12/2015 CSSComo
Tentevocmesmo
Estilos inline
Umestiloalinhadopodeserusadaparaaplicarummodeloexclusivodeumnico
elemento.
Parausarestilosinline,adicioneoatributodeestiloaoelementorelevante.Oatributo
deestilopodeconterqualquerpropriedadeCSS.
Oexemploabaixomostracomomudaracoreamargemesquerdadeum<h1>
elemento:
Exemplo
<h1style="color:blue;marginleft:30px;">Thisisaheading.</h1>
Tentevocmesmo
Umestiloinlineperdemuitasdasvantagensdeumafolhadeestilo
(atravsdamisturadecontedocomapresentao).Utilizeeste
mtodocommoderao!
Exemplo
Suponhaqueumafolhadeestiloexternatemoseguinteestiloparao<h1>
elemento:
h1{
color:navy;
}
3/5
09/12/2015 CSSComo
emseguida,assumirqueumafolhadeestilointernatambmtemoseguinteestilo
parao<h1>elemento:
h1{
color:orange;
}
Seoestilointernodefinidoapsolinkparaafolhadeestiloexterna,os<h1>
elementossero"laranja":
Exemplo
<head>
<linkrel="stylesheet"type="text/css"href="mystyle.css">
<style>
h1{
color:orange;
}
</style>
</head>
Tentevocmesmo
Noentanto,seoestilointernodefinidoantesdolinkparaafolhadeestiloexterna,
os<h1>elementossero"navy":
Exemplo
<head>
<style>
h1{
color:orange;
}
</style>
<linkrel="stylesheet"type="text/css"href="mystyle.css">
</head>
4/5
09/12/2015 CSSComo
Tentevocmesmo
Cascading Ordem
Oestiloserusadoquandohmaisdeumestiloespecificadoparaumelemento
HTML?
Deummodogeral,podemosdizerquetodososestilosir"cascata"emumanova
folhadeestilo"virtual"pelasseguintesregras,ondeonmeroumtemamaisalta
prioridade:
1. Estiloinline(dentrodeumelementoHTML)
2. Folhasdeestiloexternaseinternas(naseohead)
3. Padrodonavegador
Assim,umestiloinline(dentrodeumelementoHTMLespecfico)temaprioridade
maisalta,oquesignificaqueeleirsubstituirumestilodefinidodentrodatag
<head>,ouemumafolhadeestiloexterna,ouumvalorpadrodonavegador.
Tentevocmesmo
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
5/5
09/12/2015 CSSFundos
CSS Fundos
"Anterior Prximocaptulo"
AspropriedadesdofundodoCSSsoutilizadasparadefiniros
efeitosdefundoparaelementos.
PropriedadesdofundodoCSS:
cordefundo
imagemdefundo
backgroundrepeat
backgroundattachment
backgroundposition
Cor de fundo
O backgroundcolor propriedadeespecificaacordefundodeumelemento.
Acordeumapginadefundodefinidaassim:
Exemplo
body{
backgroundcolor:lightblue;
}
Tentevocmesmo
ComCSS,umacormaisfreqentementeespecificadopor:
umvalorHEXcomo"#ff0000"
umvalorRGBcomo"rgb(255,0,0)"
umnomedecorvlidacomo"vermelho"
1/6
09/12/2015 CSSFundos
OlheparaValoresdecordeCSSparaumacompletalistadepossveisvaloresdecor.
Noexemploabaixo,o<h1>,<p>,e<div>elementostmdiferentescoresdefundo:
Exemplo
h1{
backgroundcolor:green;
}
div{
backgroundcolor:lightblue;
}
p{
backgroundcolor:yellow;
}
Tentevocmesmo
Imagem de fundo
O backgroundimage propriedadeespecificaumaimagemparausarcomoplanode
fundodeumelemento.
Porpadro,aimagemrepetidaparaqueelecobretodooelemento.
Aimagemdefundodeumapginapodeserdefinidaassim:
Exemplo
body{
backgroundimage:url("paper.gif");
}
Tentevocmesmo
Abaixoestumexemplodeumamcombinaodeimagemdefundoetexto.O
2/6
09/12/2015 CSSFundos
textodificilmentelegvel:
Exemplo
body{
backgroundimage:url("bgdesert.jpg");
}
Tentevocmesmo
Nota:Aousarumaimagemdefundo,useumaimagemqueno
perturbeotexto.
Algumasimagensdeveserrepetidoapenashorizontalmenteouverticalmente,oueles
voolharestranho,comoeste:
Exemplo
body{
backgroundimage:url("gradient_bg.png");
}
Tentevocmesmo
Seaimagemacimarepetidoapenashorizontalmente (backgroundrepeat:
repeatx;),ofundovaiparecermelhor:
Exemplo
3/6
09/12/2015 CSSFundos
body{
backgroundimage:url("gradient_bg.png");
backgroundrepeat:repeatx;
}
Tentevocmesmo
Nota:Pararepetirumaimagemverticalmentedefinir background
repeat:repeaty;
Exemplo
body{
backgroundimage:url("img_tree.png");
backgroundrepeat:norepeat;
}
Tentevocmesmo
Noexemploacima,aimagemdefundomostradonomesmolugarqueotexto.
Queremosmudaraposiodaimagem,demodoqueelanoperturbaotexto
demasiado.
Exemplo
body{
backgroundimage:url("img_tree.png");
backgroundrepeat:norepeat;
backgroundposition:righttop;
}
4/6
09/12/2015 CSSFundos
Tentevocmesmo
Exemplo
body{
backgroundimage:url("img_tree.png");
backgroundrepeat:norepeat;
backgroundposition:righttop;
backgroundattachment:fixed;
}
Tentevocmesmo
Apropriedadeestenogrficaparaofundo de fundo:
Exemplo
body{
background:#ffffffurl("img_tree.png")norepeatrighttop;
}
Tentevocmesmo
5/6
09/12/2015 CSSFundos
Aousarapropriedadetaquigrafiaaordemdosvaloresdepropriedade:
cordefundo
imagemdefundo
backgroundrepeat
backgroundattachment
backgroundposition
Noimportaseumdosvaloresdepropriedadeestfaltando,enquantoosoutros
so,porestaordem.
Exerccio5
background Setsallthebackgroundpropertiesinone
declaration
background Setswhetherabackgroundimageisfixedorscrolls
attachment withtherestofthepage
backgroundcolor Setsthebackgroundcolorofanelement
backgroundimage Setsthebackgroundimageforanelement
backgroundposition Setsthestartingpositionofabackgroundimage
backgroundrepeat Setshowabackgroundimagewillberepeated
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
6/6
09/12/2015 CSSBorders
CSS Borders
"Anterior Prximocaptulo"
Esteelementotemumabordasulcoque15pxdelarguraeverde.
Estilo de borda
O borderstyle propriedadeespecificaotipodefronteiraparaexibir.
Osseguintesvaloressopermitidos:
pontilhada Defineumabordapontilhada
frustradas Defineumabordatracejada
slido Defineumabordaslida
duplo Defineumamargemdupla
sulco Defineumabordasulcada3D.Oefeitodependedovalordefronteira
cor
cume Defineumabordaondulada3D.Oefeitodependedovalordefronteira
cor
inset Defineumaborda3Dembutida.Oefeitodependedovalordefronteira
cor
incio Defineumabordaincio3D.Oefeitodependedovalordefronteira
cor
nenhum Definenenhumafronteira
oculto Defineumabordaescondida
O borderstyle propriedadepodeterdeumaquatrovalores(paraolimite
superior,margemdireita,bordainferior,edafronteiraesquerda).
1/8
09/12/2015 CSSBorders
Exemplo
p.dotted{borderstyle:dotted;}
p.dashed{borderstyle:dashed;}
p.solid{borderstyle:solid;}
p.double{borderstyle:double;}
p.groove{borderstyle:groove;}
p.ridge{borderstyle:ridge;}
p.inset{borderstyle:inset;}
p.outset{borderstyle:outset;}
p.none{borderstyle:none;}
p.hidden{borderstyle:hidden;}
p.mix{borderstyle:dotteddashedsoliddouble;}
Resultado:
Adottedborder.
Adashedborder.
Asolidborder.
Adoubleborder.
Agrooveborder.Theeffectdependsonthebordercolorvalue.
Aridgeborder.Theeffectdependsonthebordercolorvalue.
Aninsetborder.Theeffectdependsonthebordercolorvalue.
Anoutsetborder.Theeffectdependsonthebordercolorvalue.
Noborder.
Ahiddenborder.
Amixedborder.
Tentevocmesmo
2/8
09/12/2015 CSSBorders
Nota:NenhumadasoutraspropriedadesdefronteiraCSSdescritos
abaixoterqualquerefeitoamenosqueo borderstyle propriedade
definida!
Largura da borda
A largurada bordapropriedadeespecificaalarguradasquatrobordas.
Alargurapodeserdefinidocomoumtamanhoespecfico(empx,PT,cm,EM,etc.)
ouusandoumadastrsvaloresprdefinidos:fino,mdio,ouespessura.
A largurada bordapropriedadepodeterdeumaquatrovalores(paraolimite
superior,margemdireita,bordainferior,edafronteiraesquerda).
Exemplo
p.one{
borderstyle:solid;
borderwidth:5px;
}
p.two{
borderstyle:solid;
borderwidth:medium;
}
p.three{
borderstyle:solid;
borderwidth:2px10px4px20px;
}
Tentevocmesmo
Cor da borda
O bordercolor propriedadeusadaparadefiniracordasquatrobordas.
Acorpodeserdefinidapor:
3/8
09/12/2015 CSSBorders
nomeespecificarumnomedecor,como"vermelho"
RGBespecificarumvalorRGB,como"rgb(255,0,0)"
Hexespecificarumvalorhexadecimal,como"#ff0000"
transparente
O bordercolor propriedadepodeterdeumaquatrovalores(paraolimite
superior,margemdireita,bordainferior,edafronteiraesquerda).
Se bordercolor noestdefinido,eleherdaacordoelemento.
Exemplo
p.one{
borderstyle:solid;
bordercolor:red;
}
p.two{
borderstyle:solid;
bordercolor:green;
}
p.three{
borderstyle:solid;
bordercolor:redgreenblueyellow;
}
Tentevocmesmo
EmCSS,htambmpropriedadesparaespecificarcadaumadasfronteiras(topo,
direitaeinferior,eesquerda):
Exemplo
4/8
09/12/2015 CSSBorders
p{
bordertopstyle:dotted;
borderrightstyle:solid;
borderbottomstyle:dotted;
borderleftstyle:solid;
}
Tentevocmesmo
Oexemploacimaforneceomesmoresultadocomoeste:
Exemplo
p{
borderstyle:dottedsolid;
}
Tentevocmesmo
Ento,aquiestcomofunciona:
borderstyle:doubleslidopontilhadotracejadas
bordasuperiorpontilhada
bordadireitaslido
bordainferiorodobro
bordaesquerdatracejada
borderstyle:pontilhadaduplaslida
bordasuperiorpontilhada
fronteirasdireitaeesquerdasoslidos
bordainferiorodobro
borderstyle:slidopontilhada
fronteirassuperioreinferiorsopontilhadas
fronteirasdireitaeesquerdasoslidos
5/8
09/12/2015 CSSBorders
borderstyle:pontilhado
todasasquatrobordassopontilhadas
O estilofronteira propriedadeusadanoexemploacima.Noentanto,ele
tambmtrabalhacom borderwidth ebordercolor.
Paraencurtarocdigo,tambmpossvelespecificartodasaspropriedadesdaborda
individuaisemumapropriedade.
A fronteira propriedadeumatalhoparaasseguintespropriedadesfronteirias
individuais:
borderwidth
borderstyle (obrigatrio)
Cordaborda
Exemplo
p{
border:5pxsolidred;
}
Tentevocmesmo
Mais Exemplos
Todasaspropriedadesdabordasuperioremumadeclarao
Esteexemplodemonstraumapropriedadeestenogrficaparaespecificartodasas
propriedadesparaabordasuperioremumadeclarao.
Definaoestilodabordainferior
Esteexemplodemonstracomodefiniroestilodabordainferior.
6/8
09/12/2015 CSSBorders
Definaalarguradabordaesquerda
Esteexemplodemonstracomodefiniralarguradabordaesquerda.
Definiracordasquatrobordas
Esteexemplodemonstracomoparadefiniracordasquatrobordas.Elepodeterde
umaquatrocores.
Definaacordabordadireita
Esteexemplodemonstracomodefiniracordabordadireita.
border Setsalltheborderpropertiesinonedeclaration
borderbottom Setsallthebottomborderpropertiesinonedeclaration
borderbottom Setsthecolorofthebottomborder
color
borderbottom Setsthestyleofthebottomborder
style
borderbottom Setsthewidthofthebottomborder
width
bordercolor Setsthecolorofthefourborders
borderleft Setsalltheleftborderpropertiesinonedeclaration
borderleftcolor Setsthecoloroftheleftborder
borderleftstyle Setsthestyleoftheleftborder
borderleftwidth Setsthewidthoftheleftborder
borderright Setsalltherightborderpropertiesinonedeclaration
borderrightcolor Setsthecoloroftherightborder
borderright Setsthestyleoftherightborder
7/8
09/12/2015 CSSBorders
style
borderright Setsthewidthoftherightborder
width
borderstyle Setsthestyleofthefourborders
bordertop Setsallthetopborderpropertiesinonedeclaration
bordertopcolor Setsthecolorofthetopborder
bordertopstyle Setsthestyleofthetopborder
bordertopwidth Setsthewidthofthetopborder
borderwidth Setsthewidthofthefourborders
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
8/8
09/12/2015 MargemCSS
CSS Margens
"Anterior Prximocaptulo"
Aspropriedadesdemargemdefinirotamanhodoespaoem
brancoforadafronteira.
Esteelementotemumamargemde80px.
Margens CSS
AspropriedadesdemargemCSSdefinirotamanhodoespaoembrancoforada
fronteira.
Nota:Asmargenssocompletamentetransparentesenopodeter
umacordefundo!
ComCSS,voctemtotalcontrolesobreasmargens.HpropriedadesCSSpara
definiramargemparacadaladodeumelemento(topo,direitaeinferior,eesquerda).
1/5
09/12/2015 MargemCSS
margintop
marginright
marginbottom
marginleft
Todasaspropriedadesdemargempodeterosseguintesvalores:
autoonavegadorcalculaamargem
comprimentoespecificaumamargemempx,pt,cm,etc.
%Especificaumamargemem%dalarguradoelementocontendo
herdarespecificaqueamargemdeveserherdadodoelementopai
Nota:tambmpossvelutilizarosvaloresnegativosparaas
margensasobreporseocontedo.
Oexemploaseguirdefinemargensdiferentesparatodososquatroladosdeum
elemento<p>:
Exemplo
p{
margintop:100px;
marginbottom:100px;
marginright:150px;
marginleft:80px;
}
Tentevocmesmo
Oexemploaseguirpermitequeamargemesquerdaserherdadodoelementopai:
Exemplo
div.container{
border:1pxsolidred;
marginleft:100px;
}
p.one{
marginleft:inherit;
}
2/5
09/12/2015 MargemCSS
Tentevocmesmo
A margemde propriedadeumatalhoparaasseguintespropriedadesdemargem
individuais:
margintop
marginright
marginbottom
marginleft
Exemplo
p{
margin:100px150px100px80px;
}
Tentevocmesmo
Ento,aquiestcomofunciona:
margin:25px50px75px100px
margemsuperior25px
margemdireita50px
margeminferiorde75px
margemesquerda100px
margin:25px50px75px
margemsuperior25px
margensdireitaeesquerdaso50px
margeminferiorde75px
3/5
09/12/2015 MargemCSS
margin:25px50px
margenssuperioreinferiorso25px
margensdireitaeesquerdaso50px
margin:25px
todasasquatromargensso25px
Oelemento,ento,tomarsealarguraespecificada,eoespaorestanteserdividido
igualmenteentreasmargensesquerdaedireita:
Exemplo
div{
width:300px;
margin:auto;
border:1pxsolidred;
}
Tentevocmesmo
4/5
09/12/2015 MargemCSS
margin Ashorthandpropertyforsettingthemarginpropertiesin
onedeclaration
margin Setsthebottommarginofanelement
bottom
marginleft Setstheleftmarginofanelement
marginright Setstherightmarginofanelement
margintop Setsthetopmarginofanelement
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
5/5
09/12/2015 PaddingCSS
CSS Padding
"Anterior Prximocaptulo"
Aspropriedadesdepreenchimentodefinirotamanhodoespaoem
brancoentreocontedodoelementoedafronteiraelemento.
Esteelementotemumpreenchimentode50px.
Padding CSS
AspropriedadesdepreenchimentoCSSdefinemoespaoembrancoentreo
contedodoelementoedafronteiraelemento.
Opreenchimentolimpaumareaemtornodocontedo(dentrodafronteira)deum
elemento.
Nota:Oacolchoamentoafectadapelacordoelementodefundo!
ComCSS,voctemtotalcontrolesobreopreenchimento.HpropriedadesCSSpara
definiropreenchimentoparacadaladodeumelemento(topo,direitaeinferior,e
esquerda).
CSStempropriedadesparaespecificaropreenchimentodecadaladodeum
elemento:
paddingtop
paddingright
paddingbottom
paddingleft
Todasaspropriedadesdepreenchimentopodeterosseguintesvalores:
comprimentoespecificaumestofamentoempx,pt,cm,etc.
%Especificaumestofamentoem%dalarguradoelementocontendo
herdarespecificaqueopreenchimentodeveserherdadodoelementopai
Oexemploaseguirdefineopreenchimentodiferenteparatodososquatroladosde
umelemento<p>:
Exemplo
p{
paddingtop:50px;
paddingright:30px;
paddingbottom:50px;
paddingleft:80px;
}
Tentevocmesmo
O preenchimento propriedadeumatalhoparaasseguintespropriedadesde
preenchimentoindividuais:
paddingtop
paddingright
paddingbottom
paddingleft
2/4
09/12/2015 PaddingCSS
Exemplo
p{
padding:50px30px50px80px;
}
Tentevocmesmo
Ento,aquiestcomofunciona:
padding:25px50px75px100px
toppreenchimento25px
preenchimentocorreto50px
preenchimentodefundo75px
paddingleft100px
padding:25px50px75px
toppreenchimento25px
paddingsdireitaeesquerdaso50px
preenchimentodefundo75px
padding:25px50px
paddingssuperioreinferiorso25px
paddingsdireitaeesquerdaso50px
padding:25px
todososquatropreenchimentosso25px
Mais Exemplos
Todasaspropriedadesdepreenchimentoemumadeclarao
Esteexemplodemonstraumapropriedadeestenogrficaparaespecificartodasas
propriedadesdepreenchimentoemumadeclarao,podeterdeumaquatro
valores.
3/4
09/12/2015 PaddingCSS
Definiropaddingleft
Esteexemplodemonstracomodefiniropreenchimentoesquerdadeumelemento
<p>.
Definaopreenchimentodireito
Esteexemplodemonstracomodefiniropreenchimentocorretodeum<p>
elemento.
Definaotopoestofamento
Esteexemplodemonstracomodefinirotopopreenchimentodeumelemento<p>.
Definaopreenchimentodefundo
Esteexemplodemonstracomodefiniropreenchimentodefundodeumelemento
<p>.
padding Ashorthandpropertyforsettingallthepaddingproperties
inonedeclaration
padding Setsthebottompaddingofanelement
bottom
paddingleft Setstheleftpaddingofanelement
paddingright Setstherightpaddingofanelement
paddingtop Setsthetoppaddingofanelement
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
4/4
09/12/2015 CSSalturaelarguraDimenses
Esteelementotemumalargurade100%.
Esteelemento<div>temumaalturade100pixelseumalargura
de500pixels.
Exemplo
1/4
09/12/2015 CSSalturaelarguraDimenses
div{
width:500px;
height:100px;
border:3pxsolid#73AD21;
}
Tentevocmesmo
Definir maxwidth
A largura maxpropriedadeusadaparadefiniralarguramximadeumelemento.
Alarguramximapodeserespecificadaemvaloresdecomprimento,comopx,cm,
etc.,ouempercentagem(%)deoblocoquecontm,oucomoNenhum(esteo
padro.Meiosquenohlarguramxima).
Dica:Arrasteajaneladonavegadorparamenordoque500pxdelargura,paravera
diferenaentreasduasdivs!
Este<div>elementotemumaalturade100pixelseummax
widthde500pixels.
Exemplo
div{
maxwidth:500px;
2/4
09/12/2015 CSSalturaelarguraDimenses
height:100px;
border:3pxsolid#73AD21;
}
Tentevocmesmo
Definiraalturadeumalarguradeumaimagemusandocento
Esteexemplodemonstracomodefiniraalturaealarguradeumaimagemusandoum
valordeporcento.
Definirminmxlarguraealarguradeumelemento
Esteexemplodemonstracomoparadefinirumalarguramnimaeumalargura
mximadeumelementocomumvalordepixel.
Conjuntodeminmaxalturaealturadeumelemento
Esteexemplodemonstracomoparadefinirumaalturamnimaeumaalturamxima
deumelementocomumvalordepixel.
height Setstheheightofanelement
maxheight Setsthemaximumheightofanelement
maxwidth Setsthemaximumwidthofanelement
minheight Setstheminimumheightofanelement
3/4
09/12/2015 CSSalturaelarguraDimenses
minwidth Setstheminimumwidthofanelement
width Setsthewidthofanelement
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
4/4
09/12/2015 CSSTexto
CSS Texto
"Anterior Prximocaptulo"
FORMATAO DE TEXTO
E s t e t e x t o d e c o r a d o c o m a lg u m a s d a s p r o p r ie d a d e s
d e f o r m a t a o d e t e x t o . O t t u lo u t iliz a o t e x t a lig n , t e x t
t r a n s f o r m , e p r o p r ie d a d e s d e c o r . O p a r g r a f o r e c u a d a ,
a lin h a d o e o e s p a o e n t r e c a r a c t e r e s e s p e c if ic a d o . O
s u b lin h a d o r e m o v id o e s t e " T e n t e v o c m e s m o q u e " lin k .
Cor do texto
A cor propriedadeusadaparadefiniracordotexto.
ComCSS,umacormaisfreqentementeespecificadopor:
umvalorHEXcomo"#ff0000"
umvalorRGBcomo"rgb(255,0,0)"
umnomedecorcomo"vermelho"
OlheparaValoresdecordeCSSparaumacompletalistadepossveisvaloresdecor.
Acordotextopadroparaumapginadefinidanoseletordecorpo.
Exemplo
body{
color:blue;
}
h1{
color:green;
}
1/8
09/12/2015 CSSTexto
Tentevocmesmo
Nota:ParaW3CCSScompatvelcom:Sevocdefinira cor da
propriedade,voctambmdevedefiniro backgroundcolor
propriedade.
Alinhamento de texto
O textoalign propriedadeusadaparadefiniroalinhamentohorizontaldeum
texto.
Umtextopodeseralinhadoaesquerdaoudireita,centralizadooujustificado.
Oexemploaseguirmostraalinhadaaocentro,esquerdaedireitatextoalinhado
(alinhamentoesquerdapadro,seadirecodotextofordaesquerdaparaa
direita,ealinhamentodireitapadro,seadireodotextodadireitaparaa
esquerda):
Exemplo
h1{
textalign:center;
}
h2{
textalign:left;
}
h3{
textalign:right;
}
Tentevocmesmo
2/8
09/12/2015 CSSTexto
Exemplo
div{
textalign:justify;
}
Tentevocmesmo
Decorao Texto
O textdecoration propriedadeusadaparadefinirouremoverdecoraesde
texto.
Exemplo
a{
textdecoration:none;
}
Tentevocmesmo
Exemplo
h1{
textdecoration:overline;
}
h2{
textdecoration:linethrough;
}
3/8
09/12/2015 CSSTexto
h3{
textdecoration:underline;
}
Tentevocmesmo
Nota:Norecomendadoparasublinharotextoquenoumlink,
comoestemuitasvezesconfundeoleitor.
Transformao de Texto
O texttransform propriedadeusadaparaespecificarletrasmaisculase
minsculasemumtexto.
Elepodeserusadoparatransformartudoemletrasmaisculasouminsculas,ou
capitalizaraprimeiraletradecadapalavra:
Exemplo
p.uppercase{
texttransform:uppercase;
}
p.lowercase{
texttransform:lowercase;
}
p.capitalize{
texttransform:capitalize;
}
Tentevocmesmo
Recuo de texto
O textindent propriedadeusadaparaespecificarorecuodaprimeiralinhadeum
4/8
09/12/2015 CSSTexto
texto:
Exemplo
p{
textindent:50px;
}
Tentevocmesmo
Espaamento carta
A letterspacing propriedadeusadaparaespecificaroespaoentreos
caracteresdeumtexto.
Oexemploqueseseguedemonstracomoparaaumentaroudiminuiroespaoentre
oscaracteres:
Exemplo
h1{
letterspacing:3px;
}
h2{
letterspacing:3px;
}
Tentevocmesmo
Altura da linha
O lineheight propriedadeusadaparaespecificaroespaoentrelinhas:
5/8
09/12/2015 CSSTexto
Exemplo
p.small{
lineheight:0.8;
}
p.big{
lineheight:1.8;
}
Tentevocmesmo
Direo do Texto
A direo propriedadeusadaparaalteraradireodotextodeumelemento:
Exemplo
div{
direction:rtl;
}
Tentevocmesmo
Palavra Espaamento
O espaamentopalavra propriedadeusadaparaespecificaroespaoentreas
palavrasemumtexto.
Oexemploqueseseguedemonstracomoparaaumentaroudiminuiroespaoentre
aspalavras:
Exemplo
6/8
09/12/2015 CSSTexto
h1{
wordspacing:10px;
}
h2{
wordspacing:5px;
}
Tentevocmesmo
Mais Exemplos
Desativarquebradetextodentrodeumelemento
Esteexemplodemonstracomodesativaraquebradetextodentrodeumelemento.
Alinhamentoverticaldeumaimagem
Esteexemplodemonstracomodefiniroalinhamentoverticaldeumaimagememum
texto.
Adicionarsombraaotexto
Esteexemplodemonstracomoadicionarsombraaotexto.
Exerccio5
color Setsthecoloroftext
direction Specifiesthetextdirection/writingdirection
letter Increasesordecreasesthespacebetweencharactersina
7/8
09/12/2015 CSSTexto
spacing text
lineheight Setsthelineheight
textalign Specifiesthehorizontalalignmentoftext
text Specifiesthedecorationaddedtotext
decoration
textindent Specifiestheindentationofthefirstlineinatextblock
textshadow Specifiestheshadoweffectaddedtotext
text Controlsthecapitalizationoftext
transform
unicodebidi Usedtogetherwiththedirectionpropertytosetorreturn
whetherthetextshouldbeoverriddentosupportmultiple
languagesinthesamedocument
verticalalign Setstheverticalalignmentofanelement
whitespace Specifieshowwhitespaceinsideanelementishandled
wordspacing Increasesordecreasesthespacebetweenwordsinatext
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
8/8
09/12/2015 CSSFontes
CSS Fontes
"Anterior Prximocaptulo"
AspropriedadesdefonteCSSdefineafamliadafonte,ousadia,tamanhoe
estilodeumtexto.
famliagenricoumgrupodefamliasdefontescomumolharsimilar(como
"Serif"ou"Monospace")
Famliadafonteumafamliafonteespecfica(como"TimesNewRoman"ou
"Arial")
1/8
09/12/2015 CSSFontes
Nota:Emtelasdecomputador,fontessansserifsoconsideradas
maisfceisdelerdoqueasfontescomserifa.
Famlia de fontes
Afamliadafontedeumtextodefinidocomo fontfamily propriedade.
O fontfamily propriedadedevecontervriosnomesdefontescomoumsistema
de"fallback".Seonavegadornosuportaaprimeirafonte,eletentaaprximafonte,
eassimpordiante.
Comececomotipodeletraquevocquer,eterminamcomumafamliagenrica,
paradeixaronavegadorescolherumafontesemelhantenafamliagenrica,seno
houveroutrasfontesestodisponveis.
Nota:Seonomedeumafamliadefontesmaisdoqueumapalavra,ele
deveestarentreaspas,como:"TimesNewRoman".
Maisdoqueumafamliadafonteespecificadoemumalistaseparadaporvrgula:
Exemplo
p{
fontfamily:"TimesNewRoman",Times,serif;
}
Tentevocmesmo
Paracombinaesdefontescomumenteusadas,consulteapginaWebseguro
FonteCombinaes.
Estilo da fonte
O fontstyle propriedademaioritariamenteutilizadoparaespecificartextoem
2/8
09/12/2015 CSSFontes
itlico.
Estapropriedadetemtrsvalores:
NormalOtextomostradonormalmente
itlicoOtextoestemitlico
oblquoOtexto"inclinandose"(oblquamuitosimilaraoitlico,masmenos
suportado)
Exemplo
p.normal{
fontstyle:normal;
}
p.italic{
fontstyle:italic;
}
p.oblique{
fontstyle:oblique;
}
Tentevocmesmo
Tamanho da fonte
O fontsize propriedadedefineotamanhodotexto.
Sercapazdegerenciarotamanhodotextoimportanteemwebdesign.Noentanto,
vocnodeveusarosajustesdetamanhodefonteparafazerpargrafosolhar
comottulos,oudasposiesparecerpargrafos.
UsesempreastagsHTMLadequados,comoo<h1><h6>parattulose<p>para
pargrafos.
Ovalordefontsizepodeserumtamanhoabsolutoourelativo.
Tamanhoabsoluto:
Defineotextoaumtamanhoespecificado
Nopermitequeumusurioaltereotamanhodotextoemtodosos
3/8
09/12/2015 CSSFontes
navegadores(ruimporquestesdeacessibilidade)
Tamanhoabsolutotilquandootamanhofsicodasadaconhecido
Tamanhorelativo:
Defineotamanhorelativoaoselementoscircundantes
Permitequeousurioaltereotamanhodotextoemnavegadores
Nota:Sevocnoespecificarumtamanhodefonte,otamanho
padroparatextonormal,comopargrafos,16px(16px=1em).
Exemplo
h1{
fontsize:40px;
}
h2{
fontsize:30px;
}
p{
fontsize:14px;
}
Tentevocmesmo
Dica:Sevocusapixels,vocaindapodeusaraferramentadezoompara
redimensionarapginainteira.
AunidadeemtamanhorecomendadopeloW3C.
1emigualaotamanhodafontedecorrente.Otamanhodetextopadroem
navegadores16px.Assim,otamanhopadro1em16px.
Otamanhopodesercalculadoapartirdospixelsparaemusandoestafrmula:pixels
/16=EM
Exemplo
h1{
fontsize:2.5em;/*40px/16=2.5em*/
}
h2{
fontsize:1.875em;/*30px/16=1.875em*/
}
p{
fontsize:0.875em;/*14px/16=0.875em*/
}
Tentevocmesmo
Noexemploacima,otamanhodotextonaEMomesmoqueoexemploanterior
empixels.Noentanto,comotamanhoem,possvelajustarotamanhodetexto
emtodososnavegadores.
Infelizmente,aindahumproblemacomversesmaisantigasdoIE.Otextotorna
semaiordoquedeveriaquandofeitomaior,emenordoquedeveriaquandofeito
menor.
Exemplo
5/8
09/12/2015 CSSFontes
body{
fontsize:100%;
}
h1{
fontsize:2.5em;
}
h2{
fontsize:1.875em;
}
p{
fontsize:0.875em;
}
Tentevocmesmo
Nossocdigoagorafuncionamuitobem!Elemostraomesmotamanhodotextoem
todososnavegadores,epermitequetodososnavegadoresparaaumentarou
redimensionarotexto!
Peso da fonte
O fontweight propriedadeespecificaopesodeumafonte:
Exemplo
p.normal{
fontweight:normal;
}
p.thick{
fontweight:bold;
}
Tentevocmesmo
6/8
09/12/2015 CSSFontes
Font Variant
O fontvariant propriedadeespecificaseounoumtextodeveserexibidoem
umafontesmallcaps.
Emumafontesmallcaps,todasasletrasminsculassoconvertidasemletras
maisculas.Noentanto,asletrasmaisculasconvertidosapareceemumtamanhode
fontemenordoqueasletrasmaisculasoriginaisnotexto.
Exemplo
p.normal{
fontvariant:normal;
}
p.small{
fontvariant:smallcaps;
}
Tentevocmesmo
Mais Exemplos
Todasaspropriedadesdefonteemumadeclarao
Esteexemplodemonstracomousaroatalhoparadefinirtodasaspropriedadesde
fonteemumadeclarao.
Exerccio5
Property Description
font Setsallthefontpropertiesinonedeclaration
fontfamily Specifiesthefontfamilyfortext
fontsize Specifiesthefontsizeoftext
fontstyle Specifiesthefontstylefortext
fontvariant Specifieswhetherornotatextshouldbedisplayedina
smallcapsfont
fontweight Specifiestheweightofafont
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
8/8
09/12/2015 LigaesEstiloCSS
CSS Ligaes
"Anterior Prximocaptulo"
ComCSS,asligaespodemserdecoradosdeformasdiferentes.
Ligaes Styling
OslinkspodemserdecoradoscomqualquerpropriedadeCSS(porexemplo,cor,
fontfamily, fundo,etc.).
Exemplo
a{
color:hotpink;
}
Tentevocmesmo
Almdisso,asligaespodemserdecoradosdeformadiferente,dependendodequal
estadoelesestoem.
Osquatroligaesestadosso:
a:link umaligaonormal,unvisited
a:visited umlinkqueousuriovisitou
a:hover umlinkquandoousuriomousessobreele
a:active umlinkdomomentoemqueforclicado
Exemplo
/*unvisitedlink*/
a:link{
1/4
09/12/2015 LigaesEstiloCSS
color:red;
}
/*visitedlink*/
a:visited{
color:green;
}
/*mouseoverlink*/
a:hover{
color:hotpink;
}
/*selectedlink*/
a:active{
color:blue;
}
Tentevocmesmo
Aodefiniroestiloparavriosestadosdeligao,existemalgumasregrasdeordem:
a:hoverDEVEvirapsa:linkea:visited
a:activeDEVEvirapsa:hover
Decorao Texto
O textdecoration propriedadeusadoprincipalmentepararemoversublinhados
delinks:
Exemplo
a:link{
textdecoration:none;
}
a:visited{
textdecoration:none;
}
2/4
09/12/2015 LigaesEstiloCSS
a:hover{
textdecoration:underline;
}
a:active{
textdecoration:underline;
}
Tentevocmesmo
Cor de fundo
O backgroundcolor propriedadepodeserusadaparaespecificarumacordefundo
paralinks:
Exemplo
a:link{
backgroundcolor:yellow;
}
a:visited{
backgroundcolor:cyan;
}
a:hover{
backgroundcolor:lightgreen;
}
a:active{
backgroundcolor:hotpink;
}
Tentevocmesmo
Mais Exemplos
3/4
09/12/2015 LigaesEstiloCSS
Adicionarestilosdiferentesemhiperlinks
Esteexemplodemonstracomoadicionaroutrosestilosemhiperlinks.
AdvancedCriarcaixasdelinks
Esteexemplodemonstraumexemplomaisavanadoemquesecombinamvrias
propriedadesCSSparaexibirlinkscomocaixas.
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
4/4
10/12/2015 ListasdeestiloCSS
CSS Lists
"Anterior Prximocaptulo"
1. Caf
2. Ch
3. CocaCola
Caf
Ch
CocaCola
listasnoordenadas(<ul>)ositensdalistasomarcadoscombalas
listasordenadas(<ol>)ositensdalistasomarcadoscomnmerosouletras
AspropriedadesdalistadeCSSpermitemquevoc:
Definadiferentesmarcadoresdeitemdelistaparalistasordenadas
Definadiferentesmarcadoresdeitemdelistaparalistasnoordenadas
Definirumaimagemcomomarcadordeitemdelista
Adicionecoresdofundoparalistaseitensdelista
Oexemploaseguirmostraalgunsdosmarcadoresdeitemdelistadisponveis:
1/6
10/12/2015 ListasdeestiloCSS
Exemplo
ul.a{
liststyletype:circle;
}
ul.b{
liststyletype:square;
}
ol.c{
liststyletype:upperroman;
}
ol.d{
liststyletype:loweralpha;
}
Tentevocmesmo
Nota:Algunsdosvaloressoparalistasnoordenadas,ealgunsparalistas
ordenadas.
Exemplo
ul{
liststyleimage:url('sqpurple.gif');
}
Tentevocmesmo
2/6
10/12/2015 ListasdeestiloCSS
Exemplo
ul{
liststyleposition:inside;
}
Tentevocmesmo
Exemplo
ul{
liststyle:squareinsideurl("sqpurple.gif");
}
Tentevocmesmo
Aousarapropriedadetaquigrafia,aordemdosvaloresdepropriedadeso:
dotipoliststyle (seliststyleimagemforespecificado,ovalordessa
propriedadeserexibidoseaimagemporalgummotivonopodeserexibida)
liststyleposition (especificaseosmarcadoresdeitemdelistadeve
aparecerdentroouforadofluxodecontedo)
liststyleimage (especificaumaimagemcomomarcadordeitemdelista)
Seumdosvaloresdepropriedadeacimaestiverfaltando,ovalorpadroparaa
propriedadeemfaltaserinserido,sehouver.
3/6
10/12/2015 ListasdeestiloCSS
Qualquercoisaadicionadotag<ol>ou<ul>,afetatodaalista,enquantoas
propriedadesadicionadotag<li>afetarositensdelistaindividuais:
Exemplo
ol{
background:#ff9999;
padding:20px;
}
ul{
background:#3399ff;
padding:20px;
}
olli{
background:#ffe5e5;
padding:5px;
marginleft:35px;
}
ulli{
background:#cce5ff;
margin:5px;
}
Resultado:
1. Coffee
2. Tea
3. CocaCola
4/6
10/12/2015 ListasdeestiloCSS
Coffee
Tea
CocaCola
Tentevocmesmo
Mais Exemplos
Delarguratotallistadelimitada
Esteexemplodemonstracomocriarumalistadelimitadasembalas.
Todososdiferentesmarcadoresdeitemdelistaparalistas
EsteexemplodemonstraosdiferentesmarcadoresdeitemdelistaemCSS.
liststyle Setsallthepropertiesforalistinonedeclaration
liststyle Specifiesanimageasthelistitemmarker
image
liststyle Specifiesifthelistitemmarkersshouldappearinsideor
position outsidethecontentflow
liststyle Specifiesthetypeoflistitemmarker
type
"Anterior Prximocaptulo"
5/6
10/12/2015 ListasdeestiloCSS
Copyright19992015byRefsnesData.AllRightsReserved.
6/6
10/12/2015 TabelasEstiloCSS
CSS Tabelas
"Anterior Prximocaptulo"
OolhardeumatabelaHTMLpodesermuitomelhoradacomCSS:
Tabela Borders
ParaespecificarbordasdatabelaemCSS,usea fronteira propriedade.
Oexemploaseguirespecificaumabordapretapara<table>,<th>,e<td>
elementos:
Firstname Lastname
Peter Griffin
Lois Griffin
Exemplo
1/9
10/12/2015 TabelasEstiloCSS
table,th,td{
border:1pxsolidblack;
}
Tentevocmesmo
Observequeatabelanoexemploacimatembordasduplas.Issoocorreporquetanto
atabelaeo<th>e<td>elementostmfronteirasdistintas.
Firstname Lastname
Peter Griffin
Lois Griffin
Exemplo
table{
bordercollapse:collapse;
}
table,th,td{
border:1pxsolidblack;
}
Tentevocmesmo
Sevocsdesejaumabordaaoredordamesa,especifiqueapenasa fronteira
propriedadepara<table>:
2/9
10/12/2015 TabelasEstiloCSS
Firstname Lastname
Peter Griffin
Lois Griffin
Exemplo
table{
border:1pxsolidblack;
}
Tentevocmesmo
Oexemploabaixodefinealarguradatabelapara100%,eaalturado<th>
elementospara50px:
Exemplo
table{
width:100%;
}
th{
height:50px;
}
3/9
10/12/2015 TabelasEstiloCSS
Tentevocmesmo
Alinhamento horizontal
O textalign propriedadedefineoalinhamentohorizontal(comoesquerda,
direitaouaocentro)docontedo<th>ou<td>.
Porpadro,ocontedode<th>elementossoalinhadasaocentroeaocontedo
do<td>elementossoalinhadosesquerda.
Oexemploaseguirdeixoualinhaotextoem<th>elementos:
Exemplo
th{
textalign:left;
}
Tentevocmesmo
Alinhamento vertical
A verticalalign propriedadedefineoalinhamentovertical(comosuperior,
inferior,oumeio)partedocontedo<th>ou<td>.
Porpadro,oalinhamentoverticaldocontedoemumatabelameio(paraambos
<th>e<td>elementos).
Oexemploaseguirdefineoalinhamentodetextoverticalparabaixopara<td>
elementos:
4/9
10/12/2015 TabelasEstiloCSS
Exemplo
td{
height:50px;
verticalalign:bottom;
}
Tentevocmesmo
Tabela Padding
Paracontrolaroespaoentreabordaeocontedoemumatabela,utilizeo
preenchimento propriedadeem<td>e<th>elementos:
Exemplo
th,td{
5/9
10/12/2015 TabelasEstiloCSS
padding:15px;
textalign:left;
}
Tentevocmesmo
Divisores horizontais
Primeironome Sobrenome Poupana
Exemplo
th,td{
borderbottom:1pxsolid#ddd;
}
Tentevocmesmo
Tabela Hoverable
Use a:hover selectorem<tr>pararealaraslinhasdatabelanomousesobre:
Exemplo
tr:hover{backgroundcolor:#f5f5f5}
Tentevocmesmo
Tabelas listradas
Primeironome Sobrenome Poupana
Exemplo
tr:nthchild(even){backgroundcolor:#f2f2f2}
Tentevocmesmo
Tabela de cores
Oexemploabaixoespecificaacordofundoetextodecor<th>elementos:
Exemplo
th{
backgroundcolor:#4CAF50;
color:white;
}
Tentevocmesmo
Tabela Responsive
Amesasensvelirexibirumabarraderolagemhorizontalseatelamuitopequeno
paraexibirocontedocompleto:
Adicionarumelementoderecipiente(como<div>)com overflowx:auto em
tornodoelemento<table>paratornlosensvel:
Exemplo
<divstyle="overflowx:auto;">
<table>
...tablecontent...
</table>
</div>
8/9
10/12/2015 TabelasEstiloCSS
Tentevocmesmo
Mais Exemplos
Faaumatabelaextravagante
Esteexemplodemonstracomocriarumamesadefantasia.
Ajusteaposiodalegendadatabela
Esteexemplodemonstracomoposicionaralegendadatabela.
Exerccio5 Exerccio6
border Setsalltheborderpropertiesinonedeclaration
border Specifieswhetherornottablebordersshouldbecollapsed
collapse
border Specifiesthedistancebetweenthebordersofadjacent
spacing cells
captionside Specifiestheplacementofatablecaption
emptycells Specifieswhetherornottodisplaybordersandbackground
onemptycellsinatable
tablelayout Setsthelayoutalgorithmtobeusedforatable
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
9/9
10/12/2015 CSSBoxModel
OmodelodecaixaCSSessencialmenteumacaixaqueenvolvetodososelementos
HTML.constitudapor:margens,bordas,preenchimentoecontedoreal.
Aimagemabaixoilustraomodelodecaixa:
Explicaodasdiferentespartes:
ContedoOcontedodacaixa,emqueotextoeasimagensaparecem
PaddingLimpaumareaemtornodocontedo.Opreenchimento
transparente
BorderAfronteiraquevaiaoredordopreenchimentoecontedo
MarginLimpaumareaforadafronteira.Amargemtransparente
Omodelodecaixanospermiteadicionarumabordaemtornodeelementos,epara
definiroespaoentreoselementos.
1/3
10/12/2015 CSSBoxModel
Exemplo
div{
width:300px;
padding:25px;
border:25pxsolidnavy;
margin:25px;
}
Tentevocmesmo
Importante:Quandovocdefiniraspropriedadesdelarguraealtura
deumelementocomCSS,vocapenasdefiniralarguraealturada
readecontedo.Paracalcularotamanhototaldeumelemento,
voctambmdeveadicionarespaamentos,bordasemargens.
Vamosassumirquequeremosestilodeumelemento<div>paraterumalargura
totalde350px:
Exemplo
div{
width:320px;
padding:10px;
border:5pxsolidgray;
margin:0;
}
Tentevocmesmo
Aquiestamatemtica:
320px(largura)
+20px(esquerda+direitapreenchimento)
2/3
10/12/2015 CSSBoxModel
+10px(esquerda+direitafronteira)
+0px(esquerda+direitamargem)
=350px
Alarguratotaldeumelementodevesercalculadoassim:
Larguratotaldoelemento=largura+paddingleft+estofamentodireita+borda
esquerda+bordadireita+margemesquerda+margemdireita
Aalturatotaldeumelementodevesercalculadoassim:
Alturatotalelemento=altura+top+preenchimentopreenchimentodefundo+
bordasuperior+limiteinferior+top+margemmargeminferior
NotaparaovelhoIE:InternetExplorer8eversesanteriores,
incluempreenchimentoebordanapropriedadewidth.Paracorrigir
esseproblema,adicioneum<!DOCTYPEhtml>paraapginade
HTML.
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
3/3
10/12/2015 PropriedadesdoesbooCSS
CSS Contorno
"Anterior Prximocaptulo"
AspropriedadesesbooCSSespecificaroestilo,corelarguradeumesboo.
Esteelementotemumabeirapretafinaeumcontornoduploque10pxde
larguraeverde.
Esboo CSS
Umesbooumalinhaquedesenhadaemtornodeelementos(foradasfronteiras)
parafazeroelemento"destacamse".
Noentanto,apropriedadeesboodiferentedapropriedadefronteiraOesquema
noumapartedeumelementodedimenseslarguraeaalturatotaldoelemento
noafectadapelalarguradocontorno.
1/6
10/12/2015 PropriedadesdoesbooCSS
Estilo Contorno
O estilodeesboo propriedadeespecificaoestilodoesboo.
O estilodeesboo propriedadepodeterumdosseguintesvalores:
pontilhada Defineumalinhapontilhada
frustradas Defineumcontornotracejado
slido Defineumcontornoslido
duplo Defineumesboodobro
sulco Defineumesbooranhuras3D.Oefeitodependedovaloresboocor
cume Defineumesbooridged3D.Oefeitodependedovaloresboocor
inset Defineumesbooinserir3D.Oefeitodependedovaloresboocor
incio Defineumesbooincio3D.Oefeitodependedovaloresboocor
nenhum Definesemcontorno
oculto Defineumesbooescondido
Oexemploaseguirdefineprimeiroumabeirapretafinaemtornodecadaelemento
<p>,emseguida,elemostraasdiferentes estiloesboo valores:
Exemplo
p{
border:1pxsolidblack;
outlinecolor:red;
}
p.dotted{outlinestyle:dotted;}
p.dashed{outlinestyle:dashed;}
p.solid{outlinestyle:solid;}
p.double{outlinestyle:double;}
p.groove{outlinestyle:groove;}
p.ridge{outlinestyle:ridge;}
p.inset{outlinestyle:inset;}
p.outset{outlinestyle:outset;}
Resultado:
Adottedoutline.
2/6
10/12/2015 PropriedadesdoesbooCSS
Adashedoutline.
Asolidoutline.
Adoubleoutline.
Agrooveoutline.Theeffectdependsontheoutlinecolorvalue.
Aridgeoutline.Theeffectdependsontheoutlinecolorvalue.
Aninsetoutline.Theeffectdependsontheoutlinecolorvalue.
Anoutsetoutline.Theeffectdependsontheoutlinecolor
value.
Tentevocmesmo
Nota:NenhumadasoutraspropriedadesdoesbooCSSdescritos
abaixoterqualquerefeitoamenosqueo estilodecontorno
propriedadedefinida!
Delinear a cores
O outlinecolor propriedadeusadaparadefiniracordocontorno.
Acorpodeserdefinidapor:
nomeespecificarumnomedecor,como"vermelho"
RGBespecificarumvalorRGB,como"rgb(255,0,0)"
Hexespecificarumvalorhexadecimal,como"#ff0000"
invertidorealizaumainversodecores(quegarantequeoesboovisvel,
independentementedacordefundo)
Exemplo
p{
border:1pxsolidblack;
outlinestyle:double;
outlinecolor:red;
}
3/6
10/12/2015 PropriedadesdoesbooCSS
Resultado:
Acoloredoutline.
Tentevocmesmo
Esboo Largura
A largurado contornopropriedadeespecificaalarguradocontorno.
Alargurapodeserdefinidocomoumtamanhoespecfico(empx,PT,cm,EM,etc.)
ouusandoumadastrsvaloresprdefinidos:fino,mdio,ouespessura.
Exemplo
p{border:1pxsolidblack;}
p.one{
outlinestyle:double;
outlinecolor:red;
outlinewidth:thick;
}
p.two{
outlinestyle:double;
outlinecolor:green;
outlinewidth:3px;
}
Resultado:
Athickoutline.
Athinneroutline.
4/6
10/12/2015 PropriedadesdoesbooCSS
Tentevocmesmo
O esboo propriedadeumatalhoparaasseguintespropriedadesdecontorno
individuais:
outlinewidth
esboodeestilo (obrigatrio)
outlinecolor
Exemplo
p{
border:1pxsolidblack;
outline:5pxdottedred;
}
Resultado:
Anoutline.
Tentevocmesmo
Property Description
outline Setsalltheoutlinepropertiesinonedeclaration
outlinecolor Setsthecolorofanoutline
outline Specifiesthespacebetweenanoutlineandtheedgeor
offset borderofanelement
outlinestyle Setsthestyleofanoutline
outlinewidth Setsthewidthofanoutline
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
6/6
10/12/2015 LayoutCSSOvisordoimvel
A exibiode propriedadeapropriedadeCSSmaisimportanteparao
controledelayout.
O visor do imvel
A exibio propriedadeespecificase/comoumelementoexibido.
CadaelementoHTMLtemumvalorpadrodeexibio,dependendodotipode
elementoque.Ovalordeexibiopadroparaamaioriadoselementos bloco
ou em linha.
Oelemento<div>umelementodenveldebloco.
Exemplosdeelementosemnveldebloco:
<div>
<h1><h6>
<p>
<form>
<header>
<footer>
<section>
Elementos inline
1/4
10/12/2015 LayoutCSSOvisordoimvel
Umelementoinlinenoiniciaremumanovalinhaesocupatantolarguraconforme
necessrio.
Exemplosdeelementosemlinha:
<span>
<a>
<img>
Display: none;
display:none; comumenteusadocomJavaScriptparaocultaremostrar
elementossemexcluirerecrilos.
Mudarumelementoinlineparaumelementodebloco,ouviceversa,podesertil
parafazerapginaparecerumamaneiraespecfica,eaindaseguemospadresweb.
Exemplo
li{
display:inline;
}
Tentevocmesmo
Nota:Definirapropriedadedeumelementodeexibiosmudaa
formacomooelementoexibido,nootipodeelementoque.
Assim,umelementoinlinecom display:block; nopermitidoter
outroselementosdeblocodentrodela.
2/4
10/12/2015 LayoutCSSOvisordoimvel
Oexemploaseguirexibe<span>elementoscomoelementosdebloco:
Exemplo
span{
display:block;
}
Tentevocmesmo
Exemplo
h1.hidden{
display:none;
}
Tentevocmesmo
visibility:hidden; tambmescondeumelemento.
Noentanto,oelementoaindavaiocuparomesmoespaoqueantes.Oelemento
serescondido,masaindaafetamolayout:
Exemplo
h1.hidden{
visibility:hidden;
}
3/4
10/12/2015 LayoutCSSOvisordoimvel
Tentevocmesmo
Mais Exemplos
display:nonecontravisibility:hidden
Esteexemplodemonstradisplay:nonecontravisibility:hidden
display Specifieshowanelementshouldbedisplayed
visibility Specifieswhetherornotanelementshouldbevisible
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
4/4
10/12/2015 LayoutCSSwidthemaxwidth
Este<div>elementotemumalargurade500px,eamargem
definidocomoauto.
Este<div>elementotemummaxwidthde500px,eamargem
definidocomoauto.
Dica:Arrasteajaneladonavegadorparamenordoque500pxdelargura,paravera
diferenaentreasduasdivs!
Aquiestumexemplodasduasdivsacima:
Exemplo
1/2
10/12/2015 LayoutCSSwidthemaxwidth
div.ex1{
width:500px;
margin:auto;
border:3pxsolid#73AD21;
}
div.ex2{
maxwidth:500px;
margin:auto;
border:3pxsolid#73AD21;
}
Tentevocmesmo
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
2/2
10/12/2015 LayoutCSSAposiodePropriedade
A posio propriedadeespecificaotipodemtodoutilizadoparao
posicionamentodeumelemento(esttica,relativo,fixoouabsoluto).
A posio de propriedade
A posio propriedadeespecificaotipodemtodoutilizadoparaoposicionamentode
umelemento.
Hquatrovaloresdiferentesdeposio:
esttico
parente
fixo
absoluto
Oselementossoentoposicionadosusandoapartesuperior,inferior,esquerdoe
direitopropriedades.Noentanto,essaspropriedadesnofuncionaramenosquea
posio propriedadedefinidaemprimeirolugar.Elestambmfuncionamdeforma
diferente,dependendodovalordaposio.
posio: esttico;
ElementosHTMLestoposicionadosestticaporpadro.
Elementosposicionadosestticasnosoafetadosporcima,embaixo,esquerda,e
aspropriedadescertas.
Este<div>elementotemposio:esttico
Este<div>elementotemposio:
fixo
AquiestoCSSqueusado:
1/6
10/12/2015 LayoutCSSAposiodePropriedade
Exemplo
div.static{
position:static;
border:3pxsolid#73AD21;
}
Tentevocmesmo
position: relative;
Umelementocom posio:relativo; posicionadoemrelaosuaposio
normal.
Definirotopo,direitaeinferior,easpropriedadesdeixadasdeumelemento
relativamenteposicionadofarcomqueelesejaajustadoforadesuaposionormal.
Outroscontedosnoserajustadoparacaberemqualquerespaodeixadopelo
elemento.
Este<div>elementotemposition:relative
AquiestoCSSqueusado:
Exemplo
div.relative{
position:relative;
left:30px;
border:3pxsolid#73AD21;
}
Tentevocmesmo
position: fixed;
Umelementocom posio:fixo; estposicionadoemrelaojaneladeexibio,
2/6
10/12/2015 LayoutCSSAposiodePropriedade
oquesignificaquepermanecesemprenomesmolugar,mesmoqueapginarolada.
Apartesuperior,direito,inferiorepropriedadesrestantessousadasparaposicionaro
elemento.
Umelementofixonodeixaumalacunanapginaemquenormalmenteteriasido
localizado.
Observeoelementofixonocantoinferiordireitodapgina.AquiestoCSSque
usado:
Exemplo
div.fixed{
position:fixed;
bottom:0;
right:0;
width:300px;
border:3pxsolid#73AD21;
}
Tentevocmesmo
position: absolute;
Umelementocom posio:absoluto; posicionadoemrelaoaoantepassado
posicionadomaisprximo(emvezdeposicionadaemrelaojaneladevisualizao,
comofixo).
Contudoseumelementoposicionadoabsolutonotemantepassadosposicionado,
eleusaocorpododocumento,esemovejuntocomrolagemdepgina.
Nota:A"posicionada"elementoaquelecujaposionadaalmdeesttica.
Aquiestumexemplosimples:
Este<div>elementotemposition:relative
Este<div>elementotem
position:absolute
3/6
10/12/2015 LayoutCSSAposiodePropriedade
AquiestoCSSqueusado:
Exemplo
div.relative{
position:relative;
width:400px;
height:200px;
border:3pxsolid#73AD21;
}
div.absolute{
position:absolute;
top:80px;
right:0;
width:200px;
height:100px;
border:3pxsolid#73AD21;
}
Tentevocmesmo
Elementos sobrepostos
Quandooselementossoposicionados,quepodemsobreporseoutroselementos.
O ndicez propriedadeespecificaaordemdapilhadeumelemento(elementoque
devesercolocadoemfrentede,ouportrs,osoutros).
Umelementopodeterumaordemdepilhapositivoounegativo:
Exemplo
img{
position:absolute;
left:0px;
top:0px;
4/6
10/12/2015 LayoutCSSAposiodePropriedade
zindex:1;
}
Tentevocmesmo
Umelementocommaiorordemdapilhaestsemprenafrentedeumelementocom
umaordemdepilhainferior.
Nota:Sedoiselementosposicionadossobrepemsemum ndicez
especificado,oelementoposicionadoltimanocdigoHTMLser
mostradonotopo.
Mais Exemplos
Definiraformadeumelemento
Esteexemplodemonstracomoparadefiniraformadeumelemento.Oelemento
cortadoparaestaforma,eexibidos.
Comomostrarestouroemumelementousandorolagem
Esteexemplodemonstracomodefinirapropriedadeoverflowparacriarumabarrade
rolagemquandoocontedodeumelementograndedemaisparacaberemumarea
especificada.
Comoconfiguraronavegadorparatratarautomaticamentetransbordar
Esteexemplodemonstracomoconfiguraronavegadorparatratarautomaticamente
estouro.
Alterarocursor
Esteexemplodemonstracomoalterarocursor.
Exerccio5
5/6
10/12/2015 LayoutCSSAposiodePropriedade
Property Description
bottom Setsthebottommarginedgeforapositionedbox
clip Clipsanabsolutelypositionedelement
cursor Specifiesthetypeofcursortobedisplayed
left Setstheleftmarginedgeforapositionedbox
overflow Specifieswhathappensifcontentoverflowsan
element'sbox
overflowx Specifieswhattodowiththeleft/rightedgesofthe
contentifitoverflowstheelement'scontentarea
overflowy Specifieswhattodowiththetop/bottomedgesofthe
contentifitoverflowstheelement'scontentarea
position Specifiesthetypeofpositioningforanelement
right Setstherightmarginedgeforapositionedbox
top Setsthetopmarginedgeforapositionedbox
zindex Setsthestackorderofanelement
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
6/6
10/12/2015 LayoutCSSflutuadoreclara
O flutuador propriedadeespecificaseounoumelementodeveflutuar.
A clara propriedadeusadaparacontrolarocomportamentodeelementos
flutuantes.
O flutuador Propriedade
Noseuusomaissimples,o flutuador propriedadepodeserusadaparaquebraro
textoemtornodeimagens.
Oexemploaseguirespecificaqueumaimagemdeveflutuarparaadireitaemum
texto:
Exemplo
img{
float:right;
margin:0010px10px;
}
Tentevocmesmo
A propriedade clear
A clara propriedadeusadaparacontrolarocomportamentodeelementos
flutuantes.
Elementsapsumelementoflutuantevaifluiremtornodele.Paraevitarisso,useo
claro estabelecimento.
1/4
10/12/2015 LayoutCSSflutuadoreclara
A clara propriedadeespecificaemqueosladosdeumelementoelementos
flutuantesnoestoautorizadosaflutuar:
Exemplo
div{
clear:left;
}
Tentevocmesmo
Exemplo
.clearfix{
overflow:auto;
}
Tentevocmesmo
Exemplo
div{
2/4
10/12/2015 LayoutCSSflutuadoreclara
border:3pxsolidblue;
}
.clearfix{
overflow:auto;
}
nav{
float:left;
width:200px;
border:3pxsolid#73AD21;
}
section{
marginleft:206px;
border:3pxsolidred;
}
Tentevocmesmo
Mais Exemplos
Umaimagemcomfronteiraemargensqueflutuaparaadireitaemumpargrafo
Deixeumaimagemflutuanteparaadireitaemumpargrafo.Adicionarfronteirae
margensparaaimagem.
Umaimagemcomumalegendaqueflutuadireita
Deixeumaimagemcomumalegendaflutuadorparaadireita.
Deixeaprimeiraletradeumpargrafoflutuadoresquerda
deixeaprimeiraletradeumpargrafoflutuadoresquerdaeestilodaletra.
CriandoumMenuhorizontal
Usebiacomumalistadelinksparacriarummenuhorizontal.
Criandoumapginasemtabelas
Usefloatparacriarumahomepagecomumcabealho,rodap,contedoedeixouo
contedoprincipal.
Property Description
clear Specifiesonwhichsidesofanelementwherefloating
elementsarenotallowedtofloat
float Specifieswhetherornotanelementshouldfloat
overflow Specifieswhathappensifcontentoverflowsanelement's
box
overflowx Specifieswhattodowiththeleft/rightedgesofthe
contentifitoverflowstheelement'scontentarea
overflowy Specifieswhattodowiththetop/bottomedgesofthe
contentifitoverflowstheelement'scontentarea
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
4/4
10/12/2015 LayoutCSSinlineblock
O valor inlineblock
Temsidopossvelporumlongotempoparacriarumagradedecaixasquepreenche
alarguradonavegadoreenvolvebem(quandoonavegadorredimensionada),
usandoa bia propriedade.
elementosinlineblocosocomoelementosinline,maselespodemterumalargurae
umaaltura.
Exemplos
Avelhamaneirausando bia (notequenstambmprecisamosespecificaruma
clara propriedadeparaoelementoapsascaixasflutuantes):
Exemplo
.floatingbox{
float:left;
width:150px;
height:75px;
margin:10px;
border:3pxsolid#73AD21;
}
.afterbox{
clear:left;
}
1/2
10/12/2015 LayoutCSSinlineblock
Tentevocmesmo
Exemplo
.floatingbox{
display:inlineblock;
width:150px;
height:75px;
margin:10px;
border:3pxsolid#73AD21;
}
Tentevocmesmo
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
2/2
10/12/2015 LayoutCSSAlignHorizontal
Oelemento,ento,tomarsealarguraespecificada,eoespaorestanteserdividido
igualmenteentreasduasmargens:
Exemplo
.center{
margin:auto;
width:60%;
border:3pxsolid#73AD21;
padding:10px;
}
Tentevocmesmo
1/4
10/12/2015 LayoutCSSAlignHorizontal
definido(oudefinidopara100%).
Dica:Paraalinhartexto,veroCSSTextocaptulo.
Exemplo
.right{
position:absolute;
right:0px;
width:300px;
border:3pxsolid#73AD21;
padding:10px;
}
Tentevocmesmo
Nota:elementosposicionadosabsolutossoremovidosdofluxonormal,epode
sobreporelementos.
HtambmumproblemacomoIE8eanterior,quandoseutilizaposio.Seum
elementoderecipiente(nonossocaso<divclass="container">)temumalargura
especificada,bemcomoadeclaraoDOCTYPE!Estfaltando,IE8everses
anterioresiradicionarumamargemde17pxnoladodireito.Esteparecesero
espaoreservadoparaumabarraderolagem.Ento,sempredefinaadeclarao
DOCTYPEaousar!Posio:
Exemplo
body{
margin:0;
padding:0;
2/4
10/12/2015 LayoutCSSAlignHorizontal
.container{
position:relative;
width:100%;
}
.right{
position:absolute;
right:0px;
width:300px;
backgroundcolor:#b0e0e6;
}
Tentevocmesmo
Exemplo
.right{
float:right;
width:300px;
border:3pxsolid#73AD21;
padding:10px;
}
Tentevocmesmo
HtambmumproblemacomoIE8eanterior,quandoseutilizaflutuador.Sea
declarao!DOCTYPEestfaltando,IE8eversesanterioresiradicionaruma
margemde17pxnoladodireito.Estepareceseroespaoreservadoparaumabarra
3/4
10/12/2015 LayoutCSSAlignHorizontal
derolagem.Ento,sempredefinaadeclaraoDOCTYPEaousar!Flutuador:
Exemplo
body{
margin:0;
padding:0;
}
.right{
float:right;
width:300px;
backgroundcolor:#b0e0e6;
}
Tentevocmesmo
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
4/4
10/12/2015 CSSCombinadores
CSS Combinadores
"Anterior Prximocaptulo"
CSS Combinadores
Umcombinadoralgoqueexplicaarelaoentreosselectores.
UmseletorCSSpodecontermaisdeumseletorsimples.Entreosseletoressimples,
quepodeincluirumelementodecombinao.
HquatrodiferentescombinadoresemCSS3:
seletordescendente(espao)
selectorcriana(>)
seletorirmoadjacente(+)
selectorirmoemgeral(~)
Selector descendente
Oseletordescendentecorrespondeatodososelementosquesodescendentesde
umelementoespecificado.
Oexemploaseguirselecionatodososelementos<p>dentro<div>elementos:
Exemplo
divp{
backgroundcolor:yellow;
}
Tentevocmesmo
1/3
10/12/2015 CSSCombinadores
Selector Criana
Oseletorfilhoselecionatodososelementosquesoosfilhosimediatosdeum
elementoespecificado.
Oexemploaseguirselecionatodososelementos<p>quesofilhosimediatasde
<div>elemento:
Exemplo
div>p{
backgroundcolor:yellow;
}
Tentevocmesmo
Irmoelementosdevemteromesmoelementopai,e"adjacente"significa
"imediatamenteaseguir".
Oexemploaseguirselecionatodososelementos<p>quesocolocados
imediatamenteapso<div>elementos:
Exemplo
div+p{
backgroundcolor:yellow;
}
Tentevocmesmo
2/3
10/12/2015 CSSCombinadores
Oexemploaseguirselecionatodososelementos<p>quesoirmosde<div>
elementos:
Exemplo
div~p{
backgroundcolor:yellow;
}
Tentevocmesmo
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
3/3
10/12/2015 CSSPseudoclasses
CSS Pseudoclasses
"Anterior Prximocaptulo"
Quais so pseudoclasses?
Apseudoclasseusadaparadefinirumestadoespecialdeumelemento.
Porexemplo,elepodeserusadopara:
Estiloumelementoquandoousuriopassaomousesobreele
Estilovisitadosenovisitadosligaesdeformadiferente
Sintaxe
Asintaxedepseudoclasses:
selector:pseudoclass{
property:value;
}
Anchor pseudoclasses
Oslinkspodemserexibidosdediferentesformas:
Exemplo
/*unvisitedlink*/
a:link{
color:#FF0000;
}
1/7
10/12/2015 CSSPseudoclasses
/*visitedlink*/
a:visited{
color:#00FF00;
}
/*mouseoverlink*/
a:hover{
color:#FF00FF;
}
/*selectedlink*/
a:active{
color:#0000FF;
}
Tentevocmesmo
Exemplo
a.highlight:hover{
color:#ff0000;
}
Tentevocmesmo
Quandovocpassaomousesobreolinknoexemplo,elevaimudardecor.
A:primeirocrianapseudoclassecorrespondeaumelementoespecificadoqueo
primeirofilhodeoutroelemento.
Exemplo
p:firstchild{
color:blue;
}
Tentevocmesmo
Exemplo
pi:firstchild{
color:blue;
}
Tentevocmesmo
Noexemploaseguir,oselectordejogostudo<i>emelementos<p>elementosque
sooprimeirofilhodeoutroelemento:
Exemplo
p:firstchildi{
color:blue;
}
Tentevocmesmo
Exemplo
<html>
<head>
<style>
q:lang(no){
quotes:"~""~";
}
</style>
</head>
<body>
<p>Sometext<qlang="no">Aquoteinaparagraph</q>Sometext.
</p>
</body>
</html>
Tentevocmesmo
4/7
10/12/2015 CSSPseudoclasses
Mais Exemplos
Adicionarestilosdiferentesemhiperlinks
Esteexemplodemonstracomoadicionaroutrosestilosemhiperlinks.
Usode:foco
Esteexemplodemonstracomousara:concentrarpseudoclasse.
attributevaluestartingwith"it"
6/7
10/12/2015 CSSPseudoclasses
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
7/7
10/12/2015 CSSPseudoelementos
CSS Pseudoelementos
"Anterior Prximocaptulo"
Quais so PseudoElements?
ACSSpseudoelementousadoparapeasdeestiloespecificadodeumelemento.
Porexemplo,elepodeserusadopara:
Estiloaprimeiraletra,oulinha,deumelemento
Inserircontedoantesde,ouaps,ocontedodeumelemento
Sintaxe
Asintaxedepseudoelementos:
selector::pseudoelement{
property:value;
}
1/8
10/12/2015 CSSPseudoelementos
O :: firstline Pseudoelemento
A ::primeiralinha pseudoelementousadoparaadicionarumestiloespecial
paraaprimeiralinhadeumtexto.
Oexemploaseguirformataaprimeiralinhadotextoemtodososelementos<p>:
Exemplo
p::firstline{
color:#ff0000;
fontvariant:smallcaps;
}
Tentevocmesmo
propriedadesdafonte
propriedadesdecor
propriedadesdofundo
wordspacing
letterspacing
textdecoration
verticalalign
texttransform
alturadalinha
Claro
O :: firstletter Pseudoelemento
A ::primeiracarta pseudoelementousadoparaadicionarumestiloespecial
paraaprimeiraletradeumtexto.
Oexemploaseguirformataaprimeiraletradotextoemtodososelementos<p>:
2/8
10/12/2015 CSSPseudoelementos
Exemplo
p::firstletter{
color:#ff0000;
fontsize:xxlarge;
}
Tentevocmesmo
Asseguintespropriedadesaplicamseaoelemento::pseudoprimeiraletra:
propriedadesdafonte
propriedadesdecor
propriedadesdofundo
propriedadesdemargem
Propriedadesdepreenchimento
propriedadesdaborda
textdecoration
verticalalign(apenasse"float""none")
texttransform
alturadalinha
flutuador
Claro
Exemplo
p.intro::firstletter{
color:#ff0000;
fontsize:200%;
}
3/8
10/12/2015 CSSPseudoelementos
Tentevocmesmo
Oexemploacimairexibiraprimeiraletradepargrafoscomclass="introduo",
emvermelhoeemumtamanhomaior.
Vrias Pseudoelementos
Vriospseudoelementospodemtambmsercombinados.
Noexemploaseguir,aprimeiraletradeumpargrafoservermelha,emum
tamanhodefontexxlarge.Orestantedaprimeiralinhaserazul,eemsmallcaps.O
restodopargrafoserotamanhodafonteeacorpadro:
Exemplo
p::firstletter{
color:#ff0000;
fontsize:xxlarge;
}
p::firstline{
color:#0000ff;
fontvariant:smallcaps;
}
Tentevocmesmo
Oexemploaseguirinsereumaimagemantesqueocontedodecada<h1>
elemento:
Exemplo
4/8
10/12/2015 CSSPseudoelementos
h1::before{
content:url(smiley.gif);
}
Tentevocmesmo
Oexemploaseguirinsereumaimagemapsocontedodecada<h1>elemento:
Exemplo
h1::after{
content:url(smiley.gif);
}
Tentevocmesmo
AsseguintespropriedadesCSSpodeseraplicadaa :: seleco:cor,fundo,
cursor,e contorno.
Oexemploaseguirfazcomqueotextoselecionadovermelhosobreumfundo
amarelo:
Exemplo
::selection{
5/8
10/12/2015 CSSPseudoelementos
color:red;
background:yellow;
}
Tentevocmesmo
6/8
10/12/2015 CSSPseudoelementos
7/8
10/12/2015 CSSPseudoelementos
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
8/8
10/12/2015 CSSNavigationBar
Incio
Notcia
Contato
Cercade
Horizontal
Barras de navegao
Tendoanavegaoeasytouseimportanteparaqualquersitedaweb.
ComCSSvocpodetransformarmenusHTMLchatoembarrasdeboaaparnciade
navegao.
1/13
10/12/2015 CSSNavigationBar
Emnossosexemplos,vamosconstruirabarradenavegaoapartirdeumalista
HTMLpadro.
Umabarradenavegaobasicamenteumalistadelinks,portanto,usandoo<ul>e
<li>elementosfaztodoosentido:
Exemplo
<ul>
<li><ahref="default.asp">Home</a></li>
<li><ahref="news.asp">News</a></li>
<li><ahref="contact.asp">Contact</a></li>
<li><ahref="about.asp">About</a></li>
</ul>
Tentevocmesmo
Agoravamosremoverasbalaseasmargensepreenchimentodalista:
Exemplo
ul{
liststyletype:none;
margin:0;
padding:0;
}
Tentevocmesmo
Exemploexplicou:
liststyletype:none; Removeasbalas.Umabarradenavegaono
precisademarcadoresdelista
Set margin:0; e padding:0; pararemoverasconfiguraespadrodo
navegador
Ocdigonoexemploacimaocdigopadrousadoemambasasbarrasde
navegaoverticais,ehorizontais.
2/13
10/12/2015 CSSNavigationBar
Exemplo
lia{
display:block;
width:60px;
}
Tentevocmesmo
Exemploexplicou:
display:block; Apresentaodasligaescomoelementosdeblocofaz
todaareaclickablelink(noapenasotexto),eissonospermiteespecificara
largura(epreenchimento,margem,altura,etc.,sevocquiser)
width:60px; elementosdoBlocoocupamtodaalarguradisponvelpor
padro.Queremosespecificarumalargurade60pixels
Voctambmpodedefiniralargurado<ul>eremovaalargurade<a>,comoeles
voocupartodaalarguradisponvelquandoexibidocomoelementosdebloco.Isto
irproduziromesmoresultadoqueonossoexemploanterior:
Exemplo
ul{
liststyletype:none;
margin:0;
padding:0;
width:60px;
}
lia{
display:block;
}
3/13
10/12/2015 CSSNavigationBar
Tentevocmesmo
Incio
Notcia
Contato
Cercade
Exemplo
ul{
liststyletype:none;
margin:0;
padding:0;
width:200px;
backgroundcolor:#f1f1f1;
}
lia{
display:block;
color:#000;
padding:8px08px16px;
textdecoration:none;
}
/*Changethelinkcoloronhover*/
lia:hover{
backgroundcolor:#555;
color:white;
}
Tentevocmesmo
4/13
10/12/2015 CSSNavigationBar
Incio
Notcia
Contato
Cercade
Exemplo
.active{
backgroundcolor:#4CAF50;
color:white;
}
Tentevocmesmo
Incio
Notcia
Contato
Cercade
Exemplo
5/13
10/12/2015 CSSNavigationBar
ul{
border:1pxsolid#555;
}
li{
textalign:center;
borderbottom:1pxsolid#555;
}
li:lastchild{
borderbottom:none;
}
Tentevocmesmo
Home
FixedFullheightSideNav
News
Trytoscrollthisarea,andseehowthe
Contact
sidenavstickstothepage
About
Sometext..
Sometext..
Sometext..
Sometext..
Exemplo
ul{
liststyletype:none;
margin:0;
padding:0;
width:25%;
backgroundcolor:#f1f1f1;
height:100%;/*Fullheight*/
6/13
10/12/2015 CSSNavigationBar
position:fixed;/*Makeitstick,evenonscroll*/
overflow:auto;/*Enablescrollingifthesidenavhastoo
muchcontent*/
}
Tentevocmesmo
Exemplo
li{
display:inline;
}
Tentevocmesmo
Exemploexplicou:
display:inline; Porpadro,<li>elementossoelementosdebloco.Aqui,
nsremovemosasquebrasdelinhaantesedepoisdecadaitemdalista,para
exibilosemumalinha
Exemplo
7/13
10/12/2015 CSSNavigationBar
li{
float:left;
}
a{
display:block;
padding:8px;
backgroundcolor:#dddddd;
}
Tentevocmesmo
Exemploexplicou:
float:left; usofloatparaobterelementosdeblocoparadeslizaraolado
dooutro
display:block; Apresentaodasligaescomoelementosdeblocofaz
todaareaclickablelink(noapenasotexto),eissonospermiteespecificar
preenchimento(ealtura,largura,asmargens,etc.,sevocquiser)
padding:8px; Umavezqueoselementosdoblocoocupamalarguratotal
disponvel,nopodemflutuaraoladodooutro.Portanto,especificaralgum
estofamentoparatornloscombomaspecto
backgroundcolor:#dddddd; Adicioneumfundocinzentocorparacadaum
elemento
Dica:Adicioneobackgroundcolorpara<ul>emvezdecadaelemento<a>sevoc
querumacordefundodelarguratotal:
Exemplo
ul{
backgroundcolor:#dddddd;
}
Tentevocmesmo
Criarumabarradenavegaohorizontalbsicocomumacordefundoescuroe
mudaracordoslinksdefundoquandoousuriomoveomousesobreeles:
Exemplo
ul{
liststyletype:none;
margin:0;
padding:0;
overflow:hidden;
backgroundcolor:#333;
}
li{
float:left;
}
lia{
display:block;
color:white;
textalign:center;
padding:14px16px;
textdecoration:none;
}
/*Changethelinkcolorto#111(black)onhover*/
lia:hover{
backgroundcolor:#111;
}
Tentevocmesmo
9/13
10/12/2015 CSSNavigationBar
Exemplo
.active{
backgroundcolor:#4CAF50;
}
Tentevocmesmo
Exemplo
<ul>
<li><aclass="active"href="#home">Home</a></li>
<li><ahref="#news">News</a></li>
<li><ahref="#contact">Contact</a></li>
<ulstyle="float:right;liststyletype:none;">
<li><ahref="#about">About</a></li>
<li><ahref="#login">Login</a></li>
</ul>
</ul>
Tentevocmesmo
Divisores de fronteira
Adicioneo borderright propriedadepara<li>paracriardivisoresdelink:
10/13
10/12/2015 CSSNavigationBar
Exemplo
/*Addagrayrightbordertoalllistitems,exceptthelast
item(lastchild)*/
li{
borderright:1pxsolid#bbb;
}
li:lastchild{
borderright:none;
}
Tentevocmesmo
FixedTopNav
Thenavigationbarwillstayatthetopof
thepagewhilescrolling
Sometextsometextsometextsometext..
Sometextsometextsometextsometext..
Corrigido Top
ul{
position:fixed;
11/13
10/12/2015 CSSNavigationBar
top:0;
width:100%;
}
Tentevocmesmo
FixedBottomNav
Thenavigationbarwillstayatthebottom
ofthepagewhilescrolling
Sometextsometextsometextsometext..
ul{
position:fixed;
bottom:0;
width:100%;
}
Tentevocmesmo
Exemplo
12/13
10/12/2015 CSSNavigationBar
ul{
border:1pxsolid#e7e7e7;
backgroundcolor:#f3f3f3;
}
lia{
color:#666;
}
Tentevocmesmo
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
13/13
10/12/2015 CSSDropdowns
CSS Dropdowns
"Anterior Prximocaptulo"
CriarumalistasuspensahoverablecomCSS.
Exemplos suspensas
Passeomousesobreosexemplosabaixo:
Textosuspensa
Menususpenso
Deoutros:
Dropdown Bsico
Criarumacaixasuspensaqueaparecequandoousuriomoveomousesobreum
elemento.
Exemplo
<style>
.dropdown{
position:relative;
display:inlineblock;
}
.dropdowncontent{
display:none;
position:absolute;
1/5
10/12/2015 CSSDropdowns
backgroundcolor:#f9f9f9;
minwidth:160px;
boxshadow:0px8px16px0pxrgba(0,0,0,0.2);
padding:12px16px;
zindex:1;
}
.dropdown:hover.dropdowncontent{
display:block;
}
</style>
<divclass="dropdown">
<span>Mouseoverme</span>
<divclass="dropdowncontent">
<p>HelloWorld!</p>
</div>
</div>
Tentevocmesmo
Exemplo Explicado
HTML)Usequalquerelementoparaabrirocontedosuspenso,porexemplo,um
<span>,ouumelemento<button>.
Useumelementoderecipiente(como<div>)paracriarocontedosuspensoe
adicionaroquequiserdentrodele.
Enroleumelemento<div>emtornodoselementosparaposicionarocontedo
suspensocorretamentecomCSS.
O .dropdowncontent classecontmocontedorealsuspensa.Elaestescondida
porpadro,eserexibidoemfoco(vejaabaixo).Observeo minwidth est
definidocomo160px.Sintaselivreparamudarisso.Dica:Sevocquiseralargura
docontedopendenteparasertograndecomoobotosuspenso,definaa
largura para100%(e overflow:auto parapermitirrolagememtelaspequenas).
2/5
10/12/2015 CSSDropdowns
menudropdownolharcomoum"carto".
A:hoverseletorusadoparamostraromenususpensoquandoousuriomoveo
mousesobreobotosuspenso.
Menu suspenso
Criarummenususpensoquepermitequeousurioescolhaumaopoapartirde
umalista:
Menususpenso
Esteexemplosemelhanteaoanterior,excetoqueadicionarlinksdentrodacaixade
listasuspensaeestilolosparacaberumbotosuspensodenominado:
Exemplo
<style>
/*StyleTheDropdownButton*/
.dropbtn{
backgroundcolor:#4CAF50;
color:white;
padding:16px;
fontsize:16px;
border:none;
cursor:pointer;
}
/*Thecontainer<div>neededtopositionthedropdowncontent
*/
.dropdown{
position:relative;
display:inlineblock;
}
/*DropdownContent(HiddenbyDefault)*/
.dropdowncontent{
display:none;
position:absolute;
backgroundcolor:#f9f9f9;
3/5
10/12/2015 CSSDropdowns
minwidth:160px;
boxshadow:0px8px16px0pxrgba(0,0,0,0.2);
}
/*Linksinsidethedropdown*/
.dropdowncontenta{
color:black;
padding:12px16px;
textdecoration:none;
display:block;
}
/*Changecolorofdropdownlinksonhover*/
.dropdowncontenta:hover{backgroundcolor:#f1f1f1}
/*Showthedropdownmenuonhover*/
.dropdown:hover.dropdowncontent{
display:block;
}
/*Changethebackgroundcolorofthedropdownbuttonwhenthe
dropdowncontentisshown*/
.dropdown:hover.dropbtn{
backgroundcolor:#3e8e41;
}
</style>
<divclass="dropdown">
<buttonclass="dropbtn">Dropdown</button>
<divclass="dropdowncontent">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</div>
</div>
Tentevocmesmo
4/5
10/12/2015 CSSDropdowns
Deixou Certo
Sevocdesejaqueomenudropdownparairdadireitaparaaesquerda,emvezde
esquerdaparaadireita,adicione adireita:0;
Exemplo
.dropdowncontent{
right:0;
}
Tentevocmesmo
Mais Exemplos
Imagemsuspensa
Esteexemplodemonstracomoadicionarumaimagemeoutroscontedosdentroda
caixasuspensa.
SuspensaNavbar
Esteexemplodemonstracomoadicionarummenususpensonointeriordeumabarra
denavegao.
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
5/5
10/12/2015 GaleriaCSSImagem
CSSpodeserusadoparacriarumagaleriadeimagens.
Adicioneuma
descrioda
imagemaqui
Galeria de imagens
OseguintegaleriadeimagemcriadacomCSS:
Exemplo
<html>
<head>
<style>
div.img{
1/3
10/12/2015 GaleriaCSSImagem
margin:5px;
border:1pxsolid#ccc;
float:left;
width:180px;
}
div.img:hover{
border:1pxsolid#777;
}
div.imgimg{
width:100%;
height:auto;
}
div.desc{
padding:15px;
textalign:center;
}
</style>
</head>
<body>
<divclass="img">
<atarget="_blank"href="fjords.jpg">
<imgsrc="fjords.jpg"alt="Fjords"width="300"height="200">
</a>
<divclass="desc">Addadescriptionoftheimagehere</div>
</div>
<divclass="img">
<atarget="_blank"href="img_forest.jpg">
<imgsrc="img_forest.jpg"alt="Forest"width="300"
height="200">
</a>
<divclass="desc">Addadescriptionoftheimagehere</div>
</div>
<divclass="img">
<atarget="_blank"href="lights.jpg">
<imgsrc="img_lights.jpg"alt="NorthernLights"width="300"
height="200">
</a>
<divclass="desc">Addadescriptionoftheimagehere</div>
2/3
10/12/2015 GaleriaCSSImagem
</div>
<divclass="img">
<atarget="_blank"href="img_mountains.jpg">
<imgsrc="img_mountains.jpg"alt="Mountains"width="300"
height="200">
</a>
<divclass="desc">Addadescriptionoftheimagehere</div>
</div>
</body>
</html>
Tentevocmesmo
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
3/3
10/12/2015 CSSImagemOpacidade/Transparncia
CriarimagenstransparentescomCSSfcil.
PrimeirovamosmostrarlhecomocriarumaimagemtransparentecomCSS.
ImagemRegular:
Amesmaimagemcomatransparncia:
OlheparaoseguinteCSS:
Exemplo
img{
opacity:0.4;
1/4
10/12/2015 CSSImagemOpacidade/Transparncia
filter:alpha(opacity=40);/*ForIE8andearlier*/
}
Tentevocmesmo
A opacidade propriedadepodeterumvalor0,01,0.Ovalormaisbaixo,omais
transparente.
ACSStemestaaparncia:
Exemplo
img{
opacity:0.4;
filter:alpha(opacity=40);/*ForIE8andearlier*/
}
img:hover{
opacity:1.0;
filter:alpha(opacity=100);/*ForIE8andearlier*/
}
Tentevocmesmo
2/4
10/12/2015 CSSImagemOpacidade/Transparncia
OprimeiroblocoCSSsemelhanteaocdigonoexemplo1.Almdisso,ns
adicionamosoquedeveacontecerquandoumusuriopassaomousesobreumadas
imagens.Nestecaso,querqueaimagemnosertransparentequandoousurio
passaomousesobreele.OCSSparaisso opacidade: 1.
Quandooponteirodomouseseafastadaimagem,aimagemsertransparente
novamente.
Esteumtextoquecolocadonacaixatransparente.
Ocdigofonteseparececomisso:
Exemplo
<html>
<head>
<style>
div.background{
background:url(klematis.jpg)repeat;
border:2pxsolidblack;
}
div.transbox{
margin:30px;
backgroundcolor:#ffffff;
border:1pxsolidblack;
opacity:0.6;
filter:alpha(opacity=60);/*ForIE8andearlier*/
}
div.transboxp{
margin:5%;
fontweight:bold;
3/4
10/12/2015 CSSImagemOpacidade/Transparncia
color:#000000;
}
</style>
</head>
<body>
<divclass="background">
<divclass="transbox">
<p>Thisissometextthatisplacedinthetransparentbox.
</p>
</div>
</div>
</body>
</html>
Tentevocmesmo
Primeiro,criamosumelemento<div>(class="background")umaimagemdefundo,
eumaborda.Entovamoscriarumoutro<div>(class="transbox")dentrodo
primeiro<div>.O<divclass="transbox">temumacordefundo,eumabordaa
divtransparente.Dentrodotransparente<div>,queadicionaalgumtextodentro
deumelemento<p>.
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
4/4
10/12/2015 SpritesCSSImagem
Sprites imagem
Umspritedeimagemumacoleodeimagenscolocadasemumanicaimagem.
Umapginawebcommuitasimagenspodelevarumlongotempoparacarregare
geravriassolicitaesdoservidor.
Usandospritesimagemvaireduzironmerodesolicitaesdoservidore
economizarlarguradebanda.
ComCSS,podemosmostrarapenasapartedaimagemqueprecisamos.
NoexemploaseguiroCSSespecificaqualpartedaimagem"img_navsprites.gif"para
mostrar:
Exemplo
#home{
width:46px;
height:44px;
background:url(img_navsprites.gif)00;
}
1/5
10/12/2015 SpritesCSSImagem
Tentevocmesmo
Exemploexplicou:
<imgid="home"src="img_trans.gif"> defineapenasumapequena
imagemtransparenteporqueoatributosrcnopodeestarvazio.Aimagem
exibidaseraimagemdefundoqueespecificaremCSS
width:46px;height:44px; Defineaporodaimagemquedesejausar
background:url(img_navsprites.gif)00; Defineaimagemdefundoe
suaposio(0pxesquerda,superior0px)
Estaamaneiramaisfcildeusarspritesdeimagem,agoraqueremosexpandila
usandolinksepairarefeitos.
NsvamosusarumalistadeHTML,porquepodeserumlinketambmsuportauma
imagemdefundo:
Exemplo
#navlist{
position:relative;
}
#navlistli{
margin:0;
padding:0;
liststyle:none;
position:absolute;
top:0;
}
#navlistli,#navlista{
height:44px;
display:block;
}
2/5
10/12/2015 SpritesCSSImagem
#home{
left:0px;
width:46px;
background:url('img_navsprites.gif')00;
}
#prev{
left:63px;
width:43px;
background:url('img_navsprites.gif')47px0;
}
#next{
left:129px;
width:43px;
background:url('img_navsprites.gif')91px0;
}
Tentevocmesmo
Exemploexplicou:
#navlist{position:relative}posioficadefinidaemrelaoaopermitiro
posicionamentoabsolutodentrodele
#navlistli{margin:0padding:0liststyle:noneposition:absolutetop:0}
margemepaddingdefinidocomo0,liststyleremovidoetodosositensda
listasoabsolutosposicionado
#navlistli,#navlistum{height:44pxdisplay:block}aalturadetodasas
imagensso44px
Agoracomeamaposioeestiloparacadaparteespecfica:
#home{left:0pxwidth:46px}Posicionadotodoocaminhoparaa
esquerda,ealarguradaimagem46px
#home{background:url(img_navsprites.gif)00}Defineaimagemdefundo
esuaposio(0pxesquerda,superior0px)
#prev{left:63pxwidth:43px}Posicionado63pxparaadireita(largura
#home46px+algumespaoextraentreositens),ealargurade43px.
#prev{background:url('img_navsprites.gif')47px0}Defineo47px
imagemdefundoparaadireita(#homelargura46px+1pxlinhadivisria)
#next{left:129pxwidth:43px}Posicionado129pxparaadireita(incioda
#prev63px43px+largura+#prevespaoextra),ealargurade43px.
#next{background:url('img_navsprites.gif')91px0}Defineo91px
imagemdefundoparaadireita(#homelargura46px+1pxlinhadivisria+
3/5
10/12/2015 SpritesCSSImagem
largura+#prev43px1pxlinhadivisria)
Dica:A:hoverseletorpodeserusadoemtodososelementos,no
somenteemlinks.
Anovaimagem("img_navsprites_hover.gif")contmtrsimagensdenavegaoe
trsimagensautilizarparaefeitosdefoco:
Porqueestaumanicaimagem,enoseisarquivosseparados,nohaver
nenhumatrasodecarregamentoquandoumusuriopassaomousesobrea
imagem.
Nssadicionartrslinhasdecdigoparaadicionaroefeitohover:
Exemplo
#homea:hover{
background:url('img_navsprites_hover.gif')045px;
}
#preva:hover{
background:url('img_navsprites_hover.gif')47px45px;
}
#nexta:hover{
background:url('img_navsprites_hover.gif')91px45px;
}
Tentevocmesmo
Exemploexplicou:
4/5
10/12/2015 SpritesCSSImagem
#homea:hover{background:urltransparente('img_navsprites_hover.gif')0
45px}Paratodasastrsimagensdopairoqueespecificaramesmaposio
defundo,nica45pxaindamaisparabaixo
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
5/5
10/12/2015 AtributoCSSSelector
Oexemploaseguirselecionatodososelementos<a>comumatributodedestino:
Exemplo
a[target]{
backgroundcolor:yellow;
}
Tentevocmesmo
Oexemploaseguirselecionatodososelementos<a>comumtarget="_blank"
1/5
10/12/2015 AtributoCSSSelector
atributo:
Exemplo
a[target="_blank"]{
backgroundcolor:yellow;
}
Tentevocmesmo
Oexemploaseguirselecionatodososelementoscomumatributotitlequecontm
umalistaseparadaporespaosdepalavras,umdosquais"flor":
Exemplo
[title~="flower"]{
border:5pxsolidyellow;
}
Tentevocmesmo
Oexemploacimaircorrespondercomelementostitle="flor",title="flordo
vero",etitle="flornova",masnotitle="myflor"outitle="flores".
Oexemploaseguirselecionatodososelementoscomumvalordeatributodeclasse
quecomeacom"top":
2/5
10/12/2015 AtributoCSSSelector
Nota:Ovalortemqueserumapalavrainteira,sozinho,comoclass="top",ou
seguidoporumhfen(),comoclass="toptexto"!
Exemplo
[class|="top"]{
background:yellow;
}
Tentevocmesmo
Oexemploaseguirselecionatodososelementoscomumvalordeatributodeclasse
quecomeacom"top":
Nota:Ovalornotemdeserumapalavrainteira!
Exemplo
[class^="top"]{
background:yellow;
}
Tentevocmesmo
Oexemploaseguirselecionatodososelementoscomumvalordeatributodeclasse
queterminacom"teste":
3/5
10/12/2015 AtributoCSSSelector
Nota:Ovalornotemdeserumapalavrainteira!
Exemplo
[class$="test"]{
background:yellow;
}
Tentevocmesmo
Oexemploaseguirselecionatodososelementoscomumvalordeatributodeclasse
quecontm"te":
Nota:Ovalornotemdeserumapalavrainteira!
Exemplo
[class*="te"]{
background:yellow;
}
Tentevocmesmo
Formas Styling
OsseletoresdeatributopodesertilparaformasdestylingsemclasseouID:
Exemplo
4/5
10/12/2015 AtributoCSSSelector
input[type="text"]{
width:150px;
display:block;
marginbottom:10px;
backgroundcolor:yellow;
}
input[type="button"]{
width:120px;
marginleft:35px;
display:block;
}
Tentevocmesmo
Exerccio5 Exerccio6
ParaobterumarefernciacompletadetodososseletoresCSS,porfavor,vao
nossoCSSSeletoresdereferncia.
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
5/5
10/12/2015 ContadoresCSS
CSS Contadores
"Anterior Prximocaptulo"
ParatrabalharcomcontadoresCSS,vamosutilizarasseguintespropriedades:
counterreset Criaouredefineumcontador
counterincrement Aumentaumvalorcontador
contedo Inserescontedogerado
contador() ou contadores() funoAdicionaovalordeumcontador
paraumelemento
ParausarumcontadorCSS,eledeveprimeirosercriadocomcounterreset.
Oexemploaseguircriaumcontadorparaapgina(noseletordecorpo),em
seguida,incrementaovalordocontadorparacada<h2>elementoeadiciona"Seo
<valordocontador>:"aoinciodecada<h2>elemento:
Exemplo
body{
counterreset:section;
}
h2::before{
counterincrement:section;
content:"Section"counter(section)":";
}
Tentevocmesmo
1/3
10/12/2015 ContadoresCSS
Contadores de nidificao
Oexemploaseguircriaumcontadorparaapgina(seo)eumcontadorparacada
<h1>elemento(subseo).A"seo"contadorsercontadoparacada<h1>
elementocom"Seo<valordocontadordeseo>.",Eocontador"subseo"ser
contadoparacada<h2>elementocom"<valordocontadordeseco><.valordo
contadorsubseco>":
Exemplo
body{
counterreset:section;
}
h1{
counterreset:subsection;
}
h1::before{
counterincrement:section;
content:"Section"counter(section)".";
}
h2::before{
counterincrement:subsection;
content:counter(section)"."counter(subsection)"";
}
Tentevocmesmo
Umcontadortambmpodesertilparafazerlistasdescritasporqueumanova
instnciadeumcontadorautomaticamentecriadaemelementosfilho.Aquiusamos
os contadores() funoparainserirumaseqnciadecaracteresentrediferentes
nveisdecontadoresaninhadas:
Exemplo
ol{
counterreset:section;
2/3
10/12/2015 ContadoresCSS
liststyletype:none;
}
li::before{
counterincrement:section;
content:counters(section,".")"";
}
Tentevocmesmo
content Usedwiththe::beforeand::afterpseudoelements,to
insertgeneratedcontent
counter Incrementsoneormorecountervalues
increment
counterreset Createsorresetsoneormorecounters
"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
3/3