Css

09/12/2015 CSSTutorial
CSS Tutorial
W3SchoolsIncio Prximocaptulo"
CSSumalinguagemdeestiloquedescreveaapresentao
deumdocumentoHTML(ouXML).
CSSdescrevecomoelementosdevemserrenderizadosnatela,
nopapel,ouemoutrasmdias.
EstetutorialvaiteensinarCSSdobsicoaoavanado.
Exemplos Em cada captulo

EstetutorialCSScontmcentenasdeexemplosdeCSS.
Comonossoeditoronline,vocpodeeditaroCSS,eclicaremumbotoparavero
resultado.
CSS Exemplo
body{
backgroundcolor:#d0e4fe;
}
h1{
color:orange;
textalign:center;
}
p{
fontfamily:"TimesNewRoman";
fontsize:20px;
}
Tentevocmesmo
1/3
Cliquenoboto"TryitYourself"botoparavercomofunciona.
Exemplos CSS
Aprendacommaisde300exemplos!Comonossoeditor,vocpodeeditaroCSS,e
clicaremumbotoparaveroresultado.
TenteItYourself!
CSS Teste o Quiz

TestesuashabilidadesemCSSW3Schools!
ComeceCSSQuiz!
Referncias CSS
NaW3Schoolsvocvaiencontrarrefernciascompletasdetodasaspropriedades
CSSeseletorescomsintaxe,exemplossuporteaonavegador,emuitomais.
CSSRefernciadepropriedades
SeletoresCSSReference
AuralCSSReference
UnidadesCSS
CSSRefernciadecores
Exame Obtenha seu diploma!
2/3
Certificao Online W3Schools '

Asoluoperfeitaparaprofissionaisquenecessitamdeequilibrartrabalho,famlia,
econstruodecarreira.
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
Demonstrao CSS Uma pgina HTML vrios

estilos!
Aqui,vamosmostrarumapginaHTMLexibidacomquatrofolhasdeestilodiferentes.
Cliquenoboto"Stylesheet1","2deestilos","Stylesheet3","4"Stylesheetlinks
abaixoparaverosdiferentesestilos:
1/3
Welcome to My Homepage
Use the menu to select different Stylesheets
Stylesheet 1
Stylesheet 2
Stylesheet 3
Stylesheet 4
No Stylesheet
Same Page Different

Stylesheets
This is a demonstration of how different stylesheets can
change the layout of your HTML page. You can change the
layout of this page by selecting different stylesheets in the
menu, or by selecting one of the following links:
Stylesheet1, Stylesheet2, Stylesheet3, Stylesheet4.
No Styles
This page uses DIV elements to group different sections of
Por que usar CSS?

CSSusadoparadefinirestilosparasuaspginasdaweb,incluindoodesign,layoute
asvariaesnaexibioparadiferentesdispositivosetamanhosdetela.
CSS resolveu um problema Big

HTMLfoinuncapretendeucontertagsdeformataodeumapginadaweb!
HTMLfoicriadaparadescreverocontedodeumapginaweb,como:
2/3
<h1>Esteumttulo</h1>
<p>Esteumpargrafo.</p>
Quandoastagscomo<font>eatributosdecorforamadicionadosespecificao
HTML3.2,comeouumpesadeloparaosdesenvolvedoresweb.Desenvolvimentode
grandessites,ondefontesecoresinformaesforamadicionadasacadapgina,
tornouseumprocessolongoecaro.
Pararesolveresteproblema,oWorldWideWebConsortium(W3C)criadoCSS.
CSSremovidoaformataodapginaHTMLestilo!
CSS economiza muito trabalho!

Asdefiniesdeestilonormalmentesosalvosemarquivos.cssexternos.
Comumarquivodefolhadeestiloexterna,vocpodealteraraaparnciadeumsite
inteiro,alterandoapenasumarquivo!
3/3
09/12/2015 CSSSintaxeeSeletores
CSS Sintaxe e Seletores

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
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
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
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
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
Testese com exerccios!

Exerccio1 Exerccio2 Exerccio3 Exerccio4
5/6
6/6
09/12/2015 CSSComo
CSS: Como ...

Quandoumnavegadorlumafolhadeestilo,eleirformatarodocumento
HTMLdeacordocomasinformaescontidasnafolhadeestilo.
Trs maneiras de inserir CSS

Htrsmaneirasdeinserirumafolhadeestilo:
Folhadeestiloexterna
Folhadeestilointerna
Estiloembutido
Folha de estilo externa

Comumafolhadeestiloexterna,vocpodealteraraaparnciadeumsiteinteiro,
alterandoapenasumarquivo!
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;
Folha de estilo interna

Umafolhadeestilointernapodeserutilizadaseumanicapginatemumestilo
nico.
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!
Vrias folhas de estilo

Sealgumaspropriedadesforamdefinidosparaomesmoseletor(elemento)em
folhasdeestilodiferentes,ovalordaltimafolhadeestilodeleituraserusado.
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>
<style>
h1{
color:orange;
}
</style>
</head>
Tentevocmesmo
Noentanto,seoestilointernodefinidoantesdolinkparaafolhadeestiloexterna,
os<h1>elementossero"navy":
Exemplo
<head>
<style>
h1{
color:orange;
}
</style>
</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

5/5
09/12/2015 CSSFundos
CSS Fundos
AspropriedadesdofundodoCSSsoutilizadasparadefiniros
efeitosdefundoparaelementos.
PropriedadesdofundodoCSS:
cordefundo
imagemdefundo
backgroundrepeat
backgroundattachment
backgroundposition
Cor de fundo
O backgroundcolor propriedadeespecificaacordefundodeumelemento.
Acordeumapginadefundodefinidaassim:
Exemplo
body{
}
Tentevocmesmo
ComCSS,umacormaisfreqentementeespecificadopor:
umvalorHEXcomo"#ff0000"
umvalorRGBcomo"rgb(255,0,0)"
umnomedecorvlidacomo"vermelho"
1/6
OlheparaValoresdecordeCSSparaumacompletalistadepossveisvaloresdecor.
Noexemploabaixo,o<h1>,<p>,e<div>elementostmdiferentescoresdefundo:
Exemplo
h1{
backgroundcolor:green;
}
div{
}
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
textodificilmentelegvel:
Exemplo
body{
backgroundimage:url("bgdesert.jpg");
}
Tentevocmesmo
Nota:Aousarumaimagemdefundo,useumaimagemqueno
perturbeotexto.
Imagem de Fundo Repetir horizontalmente ou

verticalmente
Porpadro,o backgroundimage propriedaderepeteumaimagemhorizontalmente
everticalmente.
Algumasimagensdeveserrepetidoapenashorizontalmenteouverticalmente,oueles
voolharestranho,comoeste:
Exemplo
body{
backgroundimage:url("gradient_bg.png");
}
Tentevocmesmo
Seaimagemacimarepetidoapenashorizontalmente (backgroundrepeat:
repeatx;),ofundovaiparecermelhor:
Exemplo
3/6
body{
backgroundimage:url("gradient_bg.png");
backgroundrepeat:repeatx;
}
Tentevocmesmo
Nota:Pararepetirumaimagemverticalmentedefinir background
repeat:repeaty;
Imagem de fundo Definir posio e norepeat

Mostrandoaimagembackgoundapenasumaveztambmespecificadopelo
fundorepita propriedade:
Exemplo
body{
backgroundimage:url("img_tree.png");
backgroundrepeat:norepeat;
}
Tentevocmesmo
Noexemploacima,aimagemdefundomostradonomesmolugarqueotexto.
Queremosmudaraposiodaimagem,demodoqueelanoperturbaotexto
demasiado.
Aposiodaimagemespecificadopelo backgroundposition propriedade:
Exemplo
body{
backgroundposition:righttop;
}
4/6
Tentevocmesmo
Imagem de Fundo posio fixa

Paraespecificarqueaimagemdefundodeveserfixado(novairolarcomorestoda
pgina),useo backgroundattachment propriedade:
Exemplo
body{
backgroundposition:righttop;
backgroundattachment:fixed;
}
Tentevocmesmo
Background propriedade Taquigrafia

Paraencurtarocdigo,tambmpossvelespecificartodasaspropriedadesdefundo
emumanicapropriedade.Issochamadodepropriedadeestenogrfica.
Apropriedadeestenogrficaparaofundo de fundo:
Exemplo
body{
background:#ffffffurl("img_tree.png")norepeatrighttop;
}
Tentevocmesmo
5/6
Aousarapropriedadetaquigrafiaaordemdosvaloresdepropriedade:
cordefundo
imagemdefundo
backgroundrepeat
backgroundattachment
backgroundposition
Noimportaseumdosvaloresdepropriedadeestfaltando,enquantoosoutros
so,porestaordem.

Exerccio5
Todas as propriedades do fundo do CSS

Property Description
background Setsallthebackgroundpropertiesinone
declaration
background Setswhetherabackgroundimageisfixedorscrolls
attachment withtherestofthepage
backgroundcolor Setsthebackgroundcolorofanelement
backgroundimage Setsthebackgroundimageforanelement
backgroundposition Setsthestartingpositionofabackgroundimage
backgroundrepeat Setshowabackgroundimagewillberepeated
6/6
09/12/2015 CSSBorders
CSS Borders
Propriedades de Fronteira CSS

AspropriedadesdefronteiraCSSpermitemquevocespecifiqueoestilo,
larguraecordabordadeumelemento.
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
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
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
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
nomeespecificarumnomedecor,como"vermelho"
RGBespecificarumvalorRGB,como"rgb(255,0,0)"
Hexespecificarumvalorhexadecimal,como"#ff0000"
transparente
O bordercolor propriedadepodeterdeumaquatrovalores(paraolimite
Se bordercolor noestdefinido,eleherdaacordoelemento.
Exemplo
p.one{
borderstyle:solid;
bordercolor:red;
}
p.two{
borderstyle:solid;
bordercolor:green;
}
p.three{
borderstyle:solid;
bordercolor:redgreenblueyellow;
}
Tentevocmesmo
Border Sides individuais

Apartirdosexemplosacimatenhavistoquepossvelespecificarumaborda
diferenteparacadalado.
EmCSS,htambmpropriedadesparaespecificarcadaumadasfronteiras(topo,
direitaeinferior,eesquerda):
Exemplo
4/8
p{
bordertopstyle:dotted;
borderrightstyle:solid;
borderbottomstyle:dotted;
borderleftstyle:solid;
}
Tentevocmesmo
Oexemploacimaforneceomesmoresultadocomoeste:
Exemplo
p{
borderstyle:dottedsolid;
}
Tentevocmesmo
Ento,aquiestcomofunciona:
Seo borderstyle propriedadetemquatrovalores:
borderstyle:doubleslidopontilhadotracejadas
bordasuperiorpontilhada
bordadireitaslido
bordainferiorodobro
bordaesquerdatracejada
Seo borderstyle propriedadetemtrsvalores:
borderstyle:pontilhadaduplaslida
bordasuperiorpontilhada
fronteirasdireitaeesquerdasoslidos
bordainferiorodobro
Seo borderstyle propriedadetemdoisvalores:
borderstyle:slidopontilhada
fronteirassuperioreinferiorsopontilhadas
fronteirasdireitaeesquerdasoslidos
5/8
Seo borderstyle propriedadetemumvalor:
borderstyle:pontilhado
todasasquatrobordassopontilhadas
O estilofronteira propriedadeusadanoexemploacima.Noentanto,ele
tambmtrabalhacom borderwidth ebordercolor.
Border Propriedade Taquigrafia

Comovocpodevernosexemplosacima,existemmuitaspropriedadesaconsiderar
quandosetratadefronteiras.
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
Definaalarguradabordaesquerda
Esteexemplodemonstracomodefiniralarguradabordaesquerda.
Definiracordasquatrobordas
Esteexemplodemonstracomoparadefiniracordasquatrobordas.Elepodeterde
umaquatrocores.
Definaacordabordadireita
Esteexemplodemonstracomodefiniracordabordadireita.

Todas as propriedades de fronteira CSS

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
style
borderright Setsthewidthoftherightborder
width
borderstyle Setsthestyleofthefourborders
bordertop Setsallthetopborderpropertiesinonedeclaration
bordertopcolor Setsthecolorofthetopborder
bordertopstyle Setsthestyleofthetopborder
bordertopwidth Setsthewidthofthetopborder
borderwidth Setsthewidthofthefourborders
8/8
09/12/2015 MargemCSS
CSS Margens
Propriedades Margem CSS

AspropriedadesdemargemCSSsousados
paragerar

espaoemtornodeelementos.
Aspropriedadesdemargemdefinirotamanhodoespaoem
brancoforadafronteira.
Esteelementotemumamargemde80px.
Margens CSS
AspropriedadesdemargemCSSdefinirotamanhodoespaoembrancoforada
fronteira.
Nota:Asmargenssocompletamentetransparentesenopodeter
umacordefundo!
ComCSS,voctemtotalcontrolesobreasmargens.HpropriedadesCSSpara
definiramargemparacadaladodeumelemento(topo,direitaeinferior,eesquerda).
Margem Sides individuais

CSStempropriedadesparaespecificaramargemdecadaladodeumelemento:
1/5
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
Tentevocmesmo
Margem Propriedade Taquigrafia

Paraencurtarocdigo,possvelespecificartodasaspropriedadesdemargemem
umapropriedade.
A margemde propriedadeumatalhoparaasseguintespropriedadesdemargem
individuais:
margintop
marginright
marginbottom
marginleft
Exemplo
p{
margin:100px150px100px80px;
}
Tentevocmesmo
Sea margemde propriedadetemquatrovalores:
margin:25px50px75px100px
margemsuperior25px
margemdireita50px
margeminferiorde75px
margemesquerda100px
Sea margemde propriedadetemtrsvalores:
margin:25px50px75px
margemsuperior25px
margensdireitaeesquerdaso50px
margeminferiorde75px
3/5
Sea margemde propriedadetemdoisvalores:
margin:25px50px
margenssuperioreinferiorso25px
margensdireitaeesquerdaso50px
Sea margemde propriedadetemumvalor:
margin:25px
todasasquatromargensso25px
Aplicar o valor de auto

Vocpodedefinirapropriedadedemargempara auto paracentrarhorizontalmente
oelementodentrodeseurecipiente.
Oelemento,ento,tomarsealarguraespecificada,eoespaorestanteserdividido
igualmenteentreasmargensesquerdaedireita:
Exemplo
div{
width:300px;
margin:auto;
border:1pxsolidred;
}
Tentevocmesmo

Exerccio1 Exerccio2 Exerccio3
Todas as propriedades de margem CSS

4/5
margin Ashorthandpropertyforsettingthemarginpropertiesin
onedeclaration
margin Setsthebottommarginofanelement
bottom
marginleft Setstheleftmarginofanelement
marginright Setstherightmarginofanelement
margintop Setsthetopmarginofanelement
5/5
09/12/2015 PaddingCSS
CSS Padding
Propriedades de preenchimento CSS

AspropriedadesdepreenchimentoCSSsousados
paragerarespao

emtornodocontedo.
Aspropriedadesdepreenchimentodefinirotamanhodoespaoem
brancoentreocontedodoelementoedafronteiraelemento.
Esteelementotemumpreenchimentode50px.
Padding CSS
AspropriedadesdepreenchimentoCSSdefinemoespaoembrancoentreo
contedodoelementoedafronteiraelemento.
Opreenchimentolimpaumareaemtornodocontedo(dentrodafronteira)deum
elemento.
Nota:Oacolchoamentoafectadapelacordoelementodefundo!
ComCSS,voctemtotalcontrolesobreopreenchimento.HpropriedadesCSSpara
definiropreenchimentoparacadaladodeumelemento(topo,direitaeinferior,e
esquerda).
Enchimento Sides individuais

1/4
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
Enchimento Propriedade Taquigrafia

Paraencurtarocdigo,possvelespecificartodasaspropriedadesdepreenchimento
emumapropriedade.
O preenchimento propriedadeumatalhoparaasseguintespropriedadesde
preenchimentoindividuais:
paddingtop
paddingright
paddingbottom
paddingleft
2/4
Exemplo
p{
padding:50px30px50px80px;
}
Tentevocmesmo
Seo preenchimento propriedadetemquatrovalores:
padding:25px50px75px100px
toppreenchimento25px
preenchimentocorreto50px
preenchimentodefundo75px
paddingleft100px
Seo preenchimento propriedadetemtrsvalores:
padding:25px50px75px
toppreenchimento25px
paddingsdireitaeesquerdaso50px
preenchimentodefundo75px
Seo preenchimento propriedadetemdoisvalores:
padding:25px50px
paddingssuperioreinferiorso25px
paddingsdireitaeesquerdaso50px
Seo preenchimento propriedadetemumvalor:
padding:25px
todososquatropreenchimentosso25px
Mais Exemplos
Todasaspropriedadesdepreenchimentoemumadeclarao
Esteexemplodemonstraumapropriedadeestenogrficaparaespecificartodasas
propriedadesdepreenchimentoemumadeclarao,podeterdeumaquatro
valores.
3/4
Definiropaddingleft
Esteexemplodemonstracomodefiniropreenchimentoesquerdadeumelemento
<p>.
Definaopreenchimentodireito
Esteexemplodemonstracomodefiniropreenchimentocorretodeum<p>
elemento.
Definaotopoestofamento
Esteexemplodemonstracomodefinirotopopreenchimentodeumelemento<p>.
Definaopreenchimentodefundo
Esteexemplodemonstracomodefiniropreenchimentodefundodeumelemento
<p>.

Todas as propriedades Padding CSS

padding Ashorthandpropertyforsettingallthepaddingproperties
inonedeclaration
padding Setsthebottompaddingofanelement
bottom
paddingleft Setstheleftpaddingofanelement
paddingright Setstherightpaddingofanelement
paddingtop Setsthetoppaddingofanelement
4/4
09/12/2015 CSSalturaelarguraDimenses
CSS altura e largura Dimenses

Propriedades CSS Dimenso

AspropriedadesdedimensoCSSpermitemcontrolaraalturaelarguradeum
elemento.
Esteelementotemumalargurade100%.
Ajuste a altura ea largura

As altura e largura propriedadessousadasparadefiniraalturaealargurade
umelemento.
A altura e alargura podeserajustadaparaautomvel(esteopadro.

Significaqueonavegadorcalculaaalturaelargura),ouserespecificadoemvalores
decomprimento,comopx,cm,etc.,ouempercentagem(%)doblococontendo.
Esteelemento<div>temumaalturade100pixelseumalargura
de500pixels.
Nota:A altura e largura propriedadesnoincluempreenchimento,bordas,ou

margenselesdefiniraaltura/larguradareadentrodoespaamento,bordae
margemdoelemento!
Oexemploaseguirmostrauma <div> elementocomumaalturade100pixelse

umalargurade500pixels:
Exemplo
1/4
div{
width:500px;
height:100px;
border:3pxsolid#73AD21;
}
Tentevocmesmo
Definir maxwidth
A largura maxpropriedadeusadaparadefiniralarguramximadeumelemento.
Alarguramximapodeserespecificadaemvaloresdecomprimento,comopx,cm,
etc.,ouempercentagem(%)deoblocoquecontm,oucomoNenhum(esteo
padro.Meiosquenohlarguramxima).
Oproblemacomo <div> acimaocorrequandoajaneladonavegadormenordo

quealarguradoelemento(500pixels).Onavegador,emseguida,adicionauma
barraderolagemhorizontalparaapgina.
Usando maxwidth emvezdisso,nestasituao,vaimelhoraramovimentaodo

navegadordepequenasjanelas.
Dica:Arrasteajaneladonavegadorparamenordoque500pxdelargura,paravera
diferenaentreasduasdivs!
Este<div>elementotemumaalturade100pixelseummax
widthde500pixels.
Nota:Ovalorda largura maxsobreposiesdepropriedadesdelargura.
Oexemploaseguirmostrauma <div> elementocomumaalturade100pixelse

ummaxwidthde500pixels:
Exemplo
div{
maxwidth:500px;
2/4
height:100px;
}
Tentevocmesmo
Tente voc mesmo Exemplos

Ajusteaalturaealarguradeelementos
Esteexemplodemonstracomodefiniraalturaealarguradediferenteselementos.
Definiraalturadeumalarguradeumaimagemusandocento
Esteexemplodemonstracomodefiniraalturaealarguradeumaimagemusandoum
valordeporcento.
Definirminmxlarguraealarguradeumelemento
Esteexemplodemonstracomoparadefinirumalarguramnimaeumalargura
mximadeumelementocomumvalordepixel.
Conjuntodeminmaxalturaealturadeumelemento
Esteexemplodemonstracomoparadefinirumaalturamnimaeumaalturamxima
deumelementocomumvalordepixel.

Exerccio1 Exerccio2
Todas as propriedades de dimenso CSS

height Setstheheightofanelement
maxheight Setsthemaximumheightofanelement
maxwidth Setsthemaximumwidthofanelement
minheight Setstheminimumheightofanelement
3/4
minwidth Setstheminimumwidthofanelement
width Setsthewidthofanelement
4/4
09/12/2015 CSSTexto
CSS Texto
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
Quandoo textalign propriedadedefinidacomo"justify",cadalinhaesticadade

modoquecadalinhatemamesmalargura,easmargensesquerdaedireitasoretas
(comoemrevistasejornais):
2/8
09/12/2015 CSSTexto
Exemplo
div{
textalign:justify;
}
Tentevocmesmo
Decorao Texto
O textdecoration propriedadeusadaparadefinirouremoverdecoraesde
texto.
Ovalor textdecoration:none; muitasvezesusadopararemoversublinhados

delinks:
Exemplo
a{
textdecoration:none;
}
Tentevocmesmo
Osoutros textdecoration valoressousados

paradecorarotexto:

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
Todas as propriedades CSS texto

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
8/8
09/12/2015 CSSFontes
CSS Fontes
AspropriedadesdefonteCSSdefineafamliadafonte,ousadia,tamanhoe
estilodeumtexto.
Diferena entre fontes com serifa e sem serifa
Famlias CSS Font

EmCSS,existemdoistiposdenomesdefamliadafonte:
famliagenricoumgrupodefamliasdefontescomumolharsimilar(como
"Serif"ou"Monospace")
Famliadafonteumafamliafonteespecfica(como"TimesNewRoman"ou
"Arial")
Generic Fontfamily Description

family
Serif TimesNew Seriffontshavesmalllinesatthe

endsonsomecharacters
Roman
Georgia
Sansserif Arial "Sans"meanswithoutthesefonts
donothavethelinesattheendsof
Verdana characters
1/8
Monospace CourierNew Allmonospacecharactershavethe

samewidth
Lucida
Console
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
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
navegadores(ruimporquestesdeacessibilidade)
Tamanhoabsolutotilquandootamanhofsicodasadaconhecido
Tamanhorelativo:
Defineotamanhorelativoaoselementoscircundantes
Permitequeousurioaltereotamanhodotextoemnavegadores
Nota:Sevocnoespecificarumtamanhodefonte,otamanho
padroparatextonormal,comopargrafos,16px(16px=1em).
Definir Tamanho da Fonte Com Pixels

Definirotamanhodetextocompixelslhedcontroletotalsobreotamanhodo
texto:
Exemplo
h1{
fontsize:40px;
}
h2{
fontsize:30px;
}
p{
fontsize:14px;
}
Tentevocmesmo
Dica:Sevocusapixels,vocaindapodeusaraferramentadezoompara
redimensionarapginainteira.
Definir Tamanho da fonte com o EM

Parapermitiraosutilizadoresredimensionarotexto(nomenudonavegador),muitos
desenvolvedoresusamemvezdepixels.
4/8
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.
Use uma combinao de cento e Em

Asoluoquefuncionaemtodososnavegadores,definirumfontsizepadrode
porcentoparaoelemento<body>:
Exemplo
5/8
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
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
Todas as propriedades da fonte CSS

7/8
font Setsallthefontpropertiesinonedeclaration
fontfamily Specifiesthefontfamilyfortext
fontsize Specifiesthefontsizeoftext
fontstyle Specifiesthefontstylefortext
fontvariant Specifieswhetherornotatextshouldbedisplayedina
smallcapsfont
fontweight Specifiestheweightofafont
8/8
09/12/2015 LigaesEstiloCSS
CSS Ligaes
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
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{
}
a:visited{
}
2/4
a:hover{
}
a:active{
}
Tentevocmesmo
Cor de fundo
O backgroundcolor propriedadepodeserusadaparaespecificarumacordefundo
paralinks:
Exemplo
a:link{
}
a:visited{
backgroundcolor:cyan;
}
a:hover{
backgroundcolor:lightgreen;
}
a:active{
backgroundcolor:hotpink;
}
Tentevocmesmo
Mais Exemplos
3/4
Adicionarestilosdiferentesemhiperlinks
Esteexemplodemonstracomoadicionaroutrosestilosemhiperlinks.
AdvancedCriarcaixasdelinks
Esteexemplodemonstraumexemplomaisavanadoemquesecombinamvrias
propriedadesCSSparaexibirlinkscomocaixas.

4/4
10/12/2015 ListasdeestiloCSS
CSS Lists
1. Caf
2. Ch
3. CocaCola
Caf
Ch
CocaCola
Listas de HTML e CSS Propriedades da lista

EmHTML,existemdoistiposprincipaisdelistas:
listasnoordenadas(<ul>)ositensdalistasomarcadoscombalas
listasordenadas(<ol>)ositensdalistasomarcadoscomnmerosouletras
AspropriedadesdalistadeCSSpermitemquevoc:
Definadiferentesmarcadoresdeitemdelistaparalistasordenadas
Definadiferentesmarcadoresdeitemdelistaparalistasnoordenadas
Definirumaimagemcomomarcadordeitemdelista
Adicionecoresdofundoparalistaseitensdelista
Diferentes marcadores lista de itens

O liststyletype propriedadeespecificaotipodemarcadoritemdalista.
Oexemploaseguirmostraalgunsdosmarcadoresdeitemdelistadisponveis:
1/6
Exemplo
ul.a{
liststyletype:circle;
}
ul.b{
liststyletype:square;
}
ol.c{
liststyletype:upperroman;
}
ol.d{
liststyletype:loweralpha;
}
Tentevocmesmo
Nota:Algunsdosvaloressoparalistasnoordenadas,ealgunsparalistas
ordenadas.
Uma imagem como marcador de item de lista

O liststyleimage propriedadeespecificaumaimagemcomomarcadordeitem
delista:
Exemplo
ul{
liststyleimage:url('sqpurple.gif');
}
Tentevocmesmo
2/6
Posicione os marcadores de item de lista

O liststyleposition propriedadeespecificaseosmarcadoresdeitemdelista
deveaparecerdentroouforadofluxodecontedo:
Exemplo
ul{
liststyleposition:inside;
}
Tentevocmesmo
Lista propriedade Taquigrafia

O liststyle propriedadeumapropriedadetaquigrafia.Eleusadoparadefinir
todasaspropriedadesdelistaemumadeclarao:
Exemplo
ul{
liststyle:squareinsideurl("sqpurple.gif");
}
Tentevocmesmo
Aousarapropriedadetaquigrafia,aordemdosvaloresdepropriedadeso:
dotipoliststyle (seliststyleimagemforespecificado,ovalordessa
propriedadeserexibidoseaimagemporalgummotivonopodeserexibida)
liststyleposition (especificaseosmarcadoresdeitemdelistadeve
aparecerdentroouforadofluxodecontedo)
liststyleimage (especificaumaimagemcomomarcadordeitemdelista)
Seumdosvaloresdepropriedadeacimaestiverfaltando,ovalorpadroparaa
propriedadeemfaltaserinserido,sehouver.
3/6
Lista Styling Com Cores

Nstambmpodemoslistasdeestilocomcores,paratornlosumpoucomais
interessante.
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
Coffee
Tea
CocaCola
Tentevocmesmo
Mais Exemplos
Delarguratotallistadelimitada
Esteexemplodemonstracomocriarumalistadelimitadasembalas.
Todososdiferentesmarcadoresdeitemdelistaparalistas
EsteexemplodemonstraosdiferentesmarcadoresdeitemdelistaemCSS.

Todas as propriedades Lista CSS

liststyle Setsallthepropertiesforalistinonedeclaration
liststyle Specifiesanimageasthelistitemmarker
image
liststyle Specifiesifthelistitemmarkersshouldappearinsideor
position outsidethecontentflow
liststyle Specifiesthetypeoflistitemmarker
type
5/6
6/6
10/12/2015 TabelasEstiloCSS
CSS Tabelas
OolhardeumatabelaHTMLpodesermuitomelhoradacomCSS:
Companhia Contato Pas
Alfreds Futterkiste Maria Anders Alemanha
Berglunds snabbkp Christina Berglund Sucia
Centro comercial Moctezuma Francisco Chang Mxico
Ernst Handel Roland Mendel ustria
Ilha de Negociao Helen Bennett Reino Unido
Kniglich Essen Philip Cramer Alemanha
Rir Bacchus Winecellars Yoshi Tannamuri Canad
Magazzini Alimentari Riuniti Giovanni Rovelli Itlia
Tabela Borders
ParaespecificarbordasdatabelaemCSS,usea fronteira propriedade.
Oexemploaseguirespecificaumabordapretapara<table>,<th>,e<td>
elementos:
Firstname Lastname
Peter Griffin
Lois Griffin
Exemplo
1/9
table,th,td{
border:1pxsolidblack;
}
Tentevocmesmo
Observequeatabelanoexemploacimatembordasduplas.Issoocorreporquetanto
atabelaeo<th>e<td>elementostmfronteirasdistintas.
Reduzir os limites da tabela

O bordercollapse propriedadedefineseoslimitesdetabelasdevemserrecolhidas
emumanicafronteira:
Firstname Lastname
Peter Griffin
Lois Griffin
Exemplo
table{
bordercollapse:collapse;
}
table,th,td{
}
Tentevocmesmo
Sevocsdesejaumabordaaoredordamesa,especifiqueapenasa fronteira
propriedadepara<table>:
2/9
Firstname Lastname
Peter Griffin
Lois Griffin
Exemplo
table{
}
Tentevocmesmo
Tabela Largura e Altura

Larguraealturadeumatabelasodefinidaspelas largura e altura propriedades.
Oexemploabaixodefinealarguradatabelapara100%,eaalturado<th>
elementospara50px:
Firstname Lastname Savings
Peter Griffin $100

Lois Griffin $150
Joe Swanson $300
Exemplo
table{
width:100%;
}
th{
height:50px;
}
3/9
Tentevocmesmo
Alinhamento horizontal
O textalign propriedadedefineoalinhamentohorizontal(comoesquerda,
direitaouaocentro)docontedo<th>ou<td>.
Porpadro,ocontedode<th>elementossoalinhadasaocentroeaocontedo
do<td>elementossoalinhadosesquerda.
Oexemploaseguirdeixoualinhaotextoem<th>elementos:

Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
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
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Exemplo
td{
height:50px;
verticalalign:bottom;
}
Tentevocmesmo
Tabela Padding
Paracontrolaroespaoentreabordaeocontedoemumatabela,utilizeo
preenchimento propriedadeem<td>e<th>elementos:
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Exemplo
th,td{
5/9
padding:15px;
textalign:left;
}
Tentevocmesmo
Divisores horizontais
Primeironome Sobrenome Poupana
Pedro Griffin $100
Lois Griffin $150
Joe Swanson $300
Adicioneo borderbottom propriedadepara<th>e<td>paradivisoreshorizontais:
Exemplo
th,td{
borderbottom:1pxsolid#ddd;
}
Tentevocmesmo
Tabela Hoverable
Use a:hover selectorem<tr>pararealaraslinhasdatabelanomousesobre:
Pedro Griffin $100
Lois Griffin $150
Joe Swanson $300

6/9
Exemplo
tr:hover{backgroundcolor:#f5f5f5}
Tentevocmesmo
Tabelas listradas
Pedro Griffin $100
Lois Griffin $150
Joe Swanson $300
Paratabelascomlistrasdezebra,utilizeo nthchild() selectoreadicionarum

backgroundcolor paratodosatmesmo(oumpares)linhasdatabela:
Exemplo
tr:nthchild(even){backgroundcolor:#f2f2f2}
Tentevocmesmo
Tabela de cores
Oexemploabaixoespecificaacordofundoetextodecor<th>elementos:
Pedro Griffin $100
Lois Griffin $150
Joe Swanson $300

7/9
Exemplo
th{
backgroundcolor:#4CAF50;
color:white;
}
Tentevocmesmo
Tabela Responsive
Amesasensvelirexibirumabarraderolagemhorizontalseatelamuitopequeno
paraexibirocontedocompleto:
Primeiro Sobrenome Pontos Pontos Pontos Pontos Pontos Pontos

nome
Jill Ferreiro 50 50 50 50 50 50
Vspera Jackson 94 94 94 94 94 94
Ado Johnson 67 67 67 67 67 67
Adicionarumelementoderecipiente(como<div>)com overflowx:auto em
tornodoelemento<table>paratornlosensvel:
Exemplo
<divstyle="overflowx:auto;">
<table>
...tablecontent...
</table>
</div>
8/9
Tentevocmesmo
Mais Exemplos
Faaumatabelaextravagante
Esteexemplodemonstracomocriarumamesadefantasia.
Ajusteaposiodalegendadatabela
Esteexemplodemonstracomoposicionaralegendadatabela.

Exerccio5 Exerccio6
Propriedades da tabela CSS

border Setsalltheborderpropertiesinonedeclaration
border Specifieswhetherornottablebordersshouldbecollapsed
collapse
border Specifiesthedistancebetweenthebordersofadjacent
spacing cells
captionside Specifiestheplacementofatablecaption
emptycells Specifieswhetherornottodisplaybordersandbackground
onemptycellsinatable
tablelayout Setsthelayoutalgorithmtobeusedforatable
9/9
10/12/2015 CSSBoxModel
CSS Box Model

O modelo de caixa CSS

TodososelementosdeHTMLpodeserconsideradocomocaixas.EmCSS,otermo
"modelodecaixa"usadoquandosefaladedesignelayout.
OmodelodecaixaCSSessencialmenteumacaixaqueenvolvetodososelementos
HTML.constitudapor:margens,bordas,preenchimentoecontedoreal.
Aimagemabaixoilustraomodelodecaixa:
Explicaodasdiferentespartes:
ContedoOcontedodacaixa,emqueotextoeasimagensaparecem
PaddingLimpaumareaemtornodocontedo.Opreenchimento
transparente
BorderAfronteiraquevaiaoredordopreenchimentoecontedo
MarginLimpaumareaforadafronteira.Amargemtransparente
Omodelodecaixanospermiteadicionarumabordaemtornodeelementos,epara
definiroespaoentreoselementos.
1/3
Exemplo
div{
width:300px;
padding:25px;
border:25pxsolidnavy;
margin:25px;
}
Tentevocmesmo
Largura e altura de um elemento

Afimdedefiniralarguraealturadeumelementocorretamenteemtodosos
navegadores,vocprecisasabercomofuncionaomodelodecaixa.
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
+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.

3/3
10/12/2015 PropriedadesdoesbooCSS
CSS Contorno
Propriedades do esboo CSS

Umesbooumalinhatraadaemtornodeumelementoforadafronteira.Isso
podeserusadoparafazerumelemento"destacamse".
AspropriedadesesbooCSSespecificaroestilo,corelarguradeumesboo.
Esteelementotemumabeirapretafinaeumcontornoduploque10pxde
larguraeverde.
Esboo CSS
Umesbooumalinhaquedesenhadaemtornodeelementos(foradasfronteiras)
parafazeroelemento"destacamse".
Noentanto,apropriedadeesboodiferentedapropriedadefronteiraOesquema
noumapartedeumelementodedimenseslarguraeaalturatotaldoelemento
noafectadapelalarguradocontorno.
1/6
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{
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
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{
outlinestyle:double;
outlinecolor:red;
}
3/6
Resultado:
Acoloredoutline.
Tentevocmesmo
Esboo Largura
A largurado contornopropriedadeespecificaalarguradocontorno.
Alargurapodeserdefinidocomoumtamanhoespecfico(empx,PT,cm,EM,etc.)
ouusandoumadastrsvaloresprdefinidos:fino,mdio,ouespessura.
Exemplo
p{border:1pxsolidblack;}
p.one{
outlinecolor:red;
outlinewidth:thick;
}
p.two{
outlinecolor:green;
outlinewidth:3px;
}
Resultado:
Athickoutline.
Athinneroutline.
4/6
Tentevocmesmo
Esboo propriedade Taquigrafia

Paraencurtarocdigo,tambmpossvelespecificartodasaspropriedadesde
contornoindividuaisdeumapropriedade.
O esboo propriedadeumatalhoparaasseguintespropriedadesdecontorno
individuais:
outlinewidth
esboodeestilo (obrigatrio)
outlinecolor
Exemplo
p{
outline:5pxdottedred;
}
Resultado:
Anoutline.
Tentevocmesmo

Todas as propriedades do esboo CSS

5/6
outline Setsalltheoutlinepropertiesinonedeclaration
outlinecolor Setsthecolorofanoutline
outline Specifiesthespacebetweenanoutlineandtheedgeor
offset borderofanelement
outlinestyle Setsthestyleofanoutline
outlinewidth Setsthewidthofanoutline
6/6
10/12/2015 LayoutCSSOvisordoimvel
CSS Layout O visor do imvel

A exibiode propriedadeapropriedadeCSSmaisimportanteparao
controledelayout.
O visor do imvel
A exibio propriedadeespecificase/comoumelementoexibido.
CadaelementoHTMLtemumvalorpadrodeexibio,dependendodotipode
elementoque.Ovalordeexibiopadroparaamaioriadoselementos bloco
ou em linha.
Elementos em nvel de bloco

Umelementodenveldeblococomeasempreemumanovalinhaeocupatodaa
larguradisponvel(estendeseesquerdaedireitaomaislongequepuder).
Oelemento<div>umelementodenveldebloco.
Exemplosdeelementosemnveldebloco:
<div>
<h1><h6>
<p>
<form>
<header>
<footer>
<section>
Elementos inline
1/4
Umelementoinlinenoiniciaremumanovalinhaesocupatantolarguraconforme
necessrio.
Este uminline<span>elementodentro deumpargrafo.
Exemplosdeelementosemlinha:
<span>
<a>
<img>
Display: none;
display:none; comumenteusadocomJavaScriptparaocultaremostrar
elementossemexcluirerecrilos.
O <script> elementousar display:none; comopadro.
Substituir o valor de exibio padro

Comomencionado,cadaelementotemumvalordeexibiopadro.Noentanto,
vocpodesubstituiresse.
Mudarumelementoinlineparaumelementodebloco,ouviceversa,podesertil
parafazerapginaparecerumamaneiraespecfica,eaindaseguemospadresweb.
Umexemplocomumfazeremlinha <li> elementosparamenushorizontais:
Exemplo
li{
display:inline;
}
Tentevocmesmo
Nota:Definirapropriedadedeumelementodeexibiosmudaa
formacomooelementoexibido,nootipodeelementoque.
Assim,umelementoinlinecom display:block; nopermitidoter
outroselementosdeblocodentrodela.
2/4
Oexemploaseguirexibe<span>elementoscomoelementosdebloco:
Exemplo
span{
display:block;
}
Tentevocmesmo
Esconder um elemento display: none ou

visibility: hidden?
Escondendoumelementopodeserfeitodefinindoa exibiode propriedadede
ningum.Oelementoserescondido,eapginaserexibidocomoseoelemento
noestl:
Exemplo
h1.hidden{
display:none;
}
Tentevocmesmo
visibility:hidden; tambmescondeumelemento.
Noentanto,oelementoaindavaiocuparomesmoespaoqueantes.Oelemento
serescondido,masaindaafetamolayout:
Exemplo
h1.hidden{
visibility:hidden;
}
3/4
Tentevocmesmo
Mais Exemplos
display:nonecontravisibility:hidden
Esteexemplodemonstradisplay:nonecontravisibility:hidden

CSS Exibir / Propriedades Visibilidade

display Specifieshowanelementshouldbedisplayed
visibility Specifieswhetherornotanelementshouldbevisible
4/4
10/12/2015 LayoutCSSwidthemaxwidth
CSS Layout width e maxwidth

Usando largura, maxwidth e margin: auto;

Comomencionadonocaptuloanteriorumelementodenveldeblocosempreocupa
alarguratotaldisponvel(estendeseesquerdaedireitaomaislongequepuder).
Definira largura deumelementonveldeblocoirimpedilodealongamentopara

asbordasdeseurecipiente.Emseguida,vocpodedefinirasmargensdeauto,para
centrarhorizontalmenteoelementodentrodeseurecipiente.Oelementovaiocupar
alarguraespecificada,eoespaorestanteserdivididoigualmenteentreasduas
margens:
Este<div>elementotemumalargurade500px,eamargem
definidocomoauto.
Nota:Oproblemacomo <div> acimaocorrequandoajaneladonavegador

menordoquealarguradoelemento.Onavegador,emseguida,adicionaumabarra
derolagemhorizontalparaapgina.
Usando maxwidth emvezdisso,nestasituao,vaimelhoraramovimentaodo

navegadordepequenasjanelas.Issoimportantequandofazerumsiteusvelem
dispositivospequenos:
Este<div>elementotemummaxwidthde500px,eamargem
definidocomoauto.
Dica:Arrasteajaneladonavegadorparamenordoque500pxdelargura,paravera
diferenaentreasduasdivs!
Aquiestumexemplodasduasdivsacima:
Exemplo
1/2
10/12/2015 LayoutCSSwidthemaxwidth
div.ex1{
width:500px;
margin:auto;
}
div.ex2{
maxwidth:500px;
margin:auto;
}
Tentevocmesmo
2/2
10/12/2015 LayoutCSSAposiodePropriedade
CSS Layout A posio de propriedade

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.
Umelementocom posio:esttico, noestposicionadoemqualquermaneira

especialelasempreposicionadosdeacordocomofluxonormaldapgina:
Este<div>elementotemposio:esttico
Este<div>elementotemposio:
fixo
AquiestoCSSqueusado:
1/6
Exemplo
div.static{
position:static;
}
Tentevocmesmo
position: relative;
Umelementocom posio:relativo; posicionadoemrelaosuaposio
normal.
Definirotopo,direitaeinferior,easpropriedadesdeixadasdeumelemento
relativamenteposicionadofarcomqueelesejaajustadoforadesuaposionormal.
Outroscontedosnoserajustadoparacaberemqualquerespaodeixadopelo
elemento.
Este<div>elementotemposition:relative
Exemplo
div.relative{
position:relative;
left:30px;
}
Tentevocmesmo
position: fixed;
Umelementocom posio:fixo; estposicionadoemrelaojaneladeexibio,
2/6
oquesignificaquepermanecesemprenomesmolugar,mesmoqueapginarolada.
Apartesuperior,direito,inferiorepropriedadesrestantessousadasparaposicionaro
elemento.
Umelementofixonodeixaumalacunanapginaemquenormalmenteteriasido
localizado.
Observeoelementofixonocantoinferiordireitodapgina.AquiestoCSSque
usado:
Exemplo
div.fixed{
position:fixed;
bottom:0;
right:0;
width:300px;
}
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
Exemplo
div.relative{
position:relative;
width:400px;
height:200px;
}
div.absolute{
position:absolute;
top:80px;
right:0;
width:200px;
height:100px;
}
Tentevocmesmo
Elementos sobrepostos
Quandooselementossoposicionados,quepodemsobreporseoutroselementos.
O ndicez propriedadeespecificaaordemdapilhadeumelemento(elementoque
devesercolocadoemfrentede,ouportrs,osoutros).
Umelementopodeterumaordemdepilhapositivoounegativo:
Exemplo
img{
position:absolute;
left:0px;
top:0px;
4/6
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
Todas as propriedades de posicionamento CSS
5/6
bottom Setsthebottommarginedgeforapositionedbox
clip Clipsanabsolutelypositionedelement
cursor Specifiesthetypeofcursortobedisplayed
left Setstheleftmarginedgeforapositionedbox
overflow Specifieswhathappensifcontentoverflowsan
element'sbox
overflowx Specifieswhattodowiththeleft/rightedgesofthe
contentifitoverflowstheelement'scontentarea
overflowy Specifieswhattodowiththetop/bottomedgesofthe
position Specifiesthetypeofpositioningforanelement
right Setstherightmarginedgeforapositionedbox
top Setsthetopmarginedgeforapositionedbox
zindex Setsthestackorderofanelement
6/6
10/12/2015 LayoutCSSflutuadoreclara
CSS Layout flutuador e clara

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
A clara propriedadeespecificaemqueosladosdeumelementoelementos
flutuantesnoestoautorizadosaflutuar:
Exemplo
div{
clear:left;
}
Tentevocmesmo
O clearfix Hack overflow: auto;

Seumelementomaisaltodoqueoelementoqueocontm,eflutuou,eleir
transbordarforadeseurecipiente.
Ento,podemosadicionar overflow:auto; paraoelementoquecontmpara

corrigiresseproblema:
Exemplo
.clearfix{
overflow:auto;
}
Tentevocmesmo
Layout da Web Exemplo

comumfazerlayoutsdawebinteirasusandoo flutuador propriedade:
Exemplo
div{
2/4
border:3pxsolidblue;
}
.clearfix{
overflow:auto;
}
nav{
float:left;
width:200px;
}
section{
marginleft:206px;
border:3pxsolidred;
}
Tentevocmesmo
Mais Exemplos
Umaimagemcomfronteiraemargensqueflutuaparaadireitaemumpargrafo
Deixeumaimagemflutuanteparaadireitaemumpargrafo.Adicionarfronteirae
margensparaaimagem.
Umaimagemcomumalegendaqueflutuadireita
Deixeumaimagemcomumalegendaflutuadorparaadireita.
Deixeaprimeiraletradeumpargrafoflutuadoresquerda
deixeaprimeiraletradeumpargrafoflutuadoresquerdaeestilodaletra.
CriandoumMenuhorizontal
Usebiacomumalistadelinksparacriarummenuhorizontal.
Criandoumapginasemtabelas
Usefloatparacriarumahomepagecomumcabealho,rodap,contedoedeixouo
contedoprincipal.
Todas as propriedades CSS Float

3/4
clear Specifiesonwhichsidesofanelementwherefloating
elementsarenotallowedtofloat
float Specifieswhetherornotanelementshouldfloat
overflow Specifieswhathappensifcontentoverflowsanelement's
box
overflowx Specifieswhattodowiththeleft/rightedgesofthe
overflowy Specifieswhattodowiththetop/bottomedgesofthe
4/4
10/12/2015 LayoutCSSinlineblock
CSS Layout inlineblock

O valor inlineblock
Temsidopossvelporumlongotempoparacriarumagradedecaixasquepreenche
alarguradonavegadoreenvolvebem(quandoonavegadorredimensionada),
usandoa bia propriedade.
Noentanto,o inlineblock valorda exibiode propriedadetornaissoainda

maisfcil.
elementosinlineblocosocomoelementosinline,maselespodemterumalargurae
umaaltura.
Exemplos
Avelhamaneirausando bia (notequenstambmprecisamosespecificaruma
clara propriedadeparaoelementoapsascaixasflutuantes):
Exemplo
.floatingbox{
float:left;
width:150px;
height:75px;
margin:10px;
}
.afterbox{
clear:left;
}
1/2
10/12/2015 LayoutCSSinlineblock
Tentevocmesmo
Omesmoefeitopodeserconseguidousandoo inlineblock valorda exibio

dapropriedade(notarquenenhuma clara propriedadenecessrio):
Exemplo
.floatingbox{
display:inlineblock;
width:150px;
height:75px;
margin:10px;
}
Tentevocmesmo
2/2
10/12/2015 LayoutCSSAlignHorizontal
CSS Layout Align Horizontal

Em CSS, vrias propriedades pode

ser usada para alinhar os
elementos horizontalmente.
Centro Alinhar Usando margem

Definiralarguradeumelementonveldeblocoirimpedilodealongamentoparaas
bordasdeseurecipiente.Use margin: auto,paracentrarhorizontalmenteum
elementodentrodeseurecipiente.
Oelemento,ento,tomarsealarguraespecificada,eoespaorestanteserdividido
igualmenteentreasduasmargens:
Exemplo
.center{
margin:auto;
width:60%;
padding:10px;
}
Tentevocmesmo
Dica:Centrodealinhamentonotemefeitosea largura propriedadenoest
1/4
definido(oudefinidopara100%).
Dica:Paraalinhartexto,veroCSSTextocaptulo.
Esquerda e Direita Alinhar Usando posio

Ummtodoparaalinharelementosusar position: absolute:
Exemplo
.right{
position:absolute;
right:0px;
width:300px;
padding:10px;
}
Tentevocmesmo
Nota:elementosposicionadosabsolutossoremovidosdofluxonormal,epode
sobreporelementos.
Dica:Aoalinharelementoscom posio,sempredefinir margem e

preenchimento parao <body> elemento.Issoparaevitardiferenasvisuaisem
diferentesnavegadores.
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
.container{
position:relative;
width:100%;
}
.right{
position:absolute;
right:0px;
width:300px;
backgroundcolor:#b0e0e6;
}
Tentevocmesmo
Esquerda e Direita Alinhar Usando flutuador

Outromtodoparaalinharoselementosusaro flutuador propriedades:
Exemplo
.right{
float:right;
width:300px;
padding:10px;
}
Tentevocmesmo
Dica:Aoalinharelementoscom flutuador,sempredefinir margem e

preenchimento parao <body> elemento.Issoparaevitardiferenasvisuaisem
diferentesnavegadores.
HtambmumproblemacomoIE8eanterior,quandoseutilizaflutuador.Sea
declarao!DOCTYPEestfaltando,IE8eversesanterioresiradicionaruma
margemde17pxnoladodireito.Estepareceseroespaoreservadoparaumabarra
3/4
derolagem.Ento,sempredefinaadeclaraoDOCTYPEaousar!Flutuador:
Exemplo
body{
margin:0;
padding:0;
}
.right{
float:right;
width:300px;
backgroundcolor:#b0e0e6;
}
Tentevocmesmo

Exerccio1 Exerccio2
4/4
10/12/2015 CSSCombinadores
CSS Combinadores
CSS Combinadores
Umcombinadoralgoqueexplicaarelaoentreosselectores.
UmseletorCSSpodecontermaisdeumseletorsimples.Entreosseletoressimples,
quepodeincluirumelementodecombinao.
HquatrodiferentescombinadoresemCSS3:
seletordescendente(espao)
selectorcriana(>)
seletorirmoadjacente(+)
selectorirmoemgeral(~)
Selector descendente
Oseletordescendentecorrespondeatodososelementosquesodescendentesde
umelementoespecificado.
Oexemploaseguirselecionatodososelementos<p>dentro<div>elementos:
Exemplo
divp{
}
Tentevocmesmo
1/3
Selector Criana
Oseletorfilhoselecionatodososelementosquesoosfilhosimediatosdeum
elementoespecificado.
Oexemploaseguirselecionatodososelementos<p>quesofilhosimediatasde
<div>elemento:
Exemplo
div>p{
}
Tentevocmesmo
Selector Irmos adjacente

Oseletorirmoadjacenteselecionatodososelementosquesoosirmos
adjacentesdeumelementoespecificado.
Irmoelementosdevemteromesmoelementopai,e"adjacente"significa
"imediatamenteaseguir".
Oexemploaseguirselecionatodososelementos<p>quesocolocados
imediatamenteapso<div>elementos:
Exemplo
div+p{
}
Tentevocmesmo
2/3
Geral Irmos Selector

Oseletorirmoemgeralselecionatodososelementosquesoirmosdeum
elementoespecificado.
Oexemploaseguirselecionatodososelementos<p>quesoirmosde<div>
elementos:
Exemplo
div~p{
}
Tentevocmesmo

3/3
10/12/2015 CSSPseudoclasses
CSS Pseudoclasses
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
/*visitedlink*/
a:visited{
color:#00FF00;
}
/*mouseoverlink*/
a:hover{
color:#FF00FF;
}
/*selectedlink*/
a:active{
color:#0000FF;
}
Tentevocmesmo
Nota: a:hover DEVEviraps a:link e a: visited!Nadefinio

CSS,afimdesereficaz a:active DEVEviraps a:hover na
definioCSS,afimdesereficaz!Nomesdeclassepseudonoso
maisculasdeminsculas.
Pseudoclasses e classes CSS

PseudoclassespodemsercombinadascomclassesCSS:
Exemplo
a.highlight:hover{
color:#ff0000;
}
Tentevocmesmo
Quandovocpassaomousesobreolinknoexemplo,elevaimudardecor.
CSS O: primeirocriana Pseudoclasse

2/7
A:primeirocrianapseudoclassecorrespondeaumelementoespecificadoqueo
primeirofilhodeoutroelemento.
Combinar o primeiro elemento <p>

Noexemploaseguir,oselectorcorrespondeaqualquerelemento<p>queo
primeirofilhodequalquerelemento:
Exemplo
p:firstchild{
color:blue;
}
Tentevocmesmo
Combinar os primeiros <i> elemento em todos

os elementos <p>
Noexemploaseguir,oseletorassociaaprimeira<i>elementoemtodosos
elementos<p>:
Exemplo
pi:firstchild{
color:blue;
}
Tentevocmesmo
Combinar todas as <i> elementos em todas as

primeira criana elementos <p>
3/7
Noexemploaseguir,oselectordejogostudo<i>emelementos<p>elementosque
sooprimeirofilhodeoutroelemento:
Exemplo
p:firstchildi{
color:blue;
}
Tentevocmesmo
CSS A: Pseudoclasse lang

A:langpseudoclassepermitequevocdefinaregrasespeciaisparadiferentes
idiomas.
Noexemplo abaixo,:lang defineasaspaspara<q>elementoscomlang="no":
Exemplo
<html>
<head>
<style>
q:lang(no){
quotes:"~""~";
}
</style>
</head>
<body>
<p>Sometext<qlang="no">Aquoteinaparagraph</q>Sometext.
</p>
</body>
</html>
Tentevocmesmo
4/7
Mais Exemplos
Adicionarestilosdiferentesemhiperlinks
Esteexemplodemonstracomoadicionaroutrosestilosemhiperlinks.
Usode:foco
Esteexemplodemonstracomousara:concentrarpseudoclasse.

Todos os CSS Pseudo Classes

Selector Example Exampledescription
:active a:active Selectstheactivelink
:checked input:checked Selectseverychecked<input>element
:disabled input:disabled Selectseverydisabled<input>element
:empty p:empty Selectsevery<p>elementthathasno

children
:enabled input:enabled Selectseveryenabled<input>element
:firstchild p:firstchild Selectsevery<p>elementsthatisthe

firstchildofitsparent
:firstoftype p:firstoftype Selectsevery<p>elementthatisthe

first<p>elementofitsparent
:focus input:focus Selectsthe<input>elementthathas

focus
:hover a:hover Selectslinksonmouseover
:inrange input:inrange Selects<input>elementswithavalue

withinaspecifiedrange
:invalid input:invalid Selectsall<input>elementswithan

invalidvalue
:lang(language) p:lang(it) Selectsevery<p>elementwithalang

5/7
attributevaluestartingwith"it"
:lastchild p:lastchild Selectsevery<p>elementsthatisthe

lastchildofitsparent
:lastoftype p:lastoftype Selectsevery<p>elementthatisthe

last<p>elementofitsparent
:link a:link Selectsallunvisitedlinks
:not(selector) :not(p) Selectseveryelementthatisnota<p>

element
:nthchild(n) p:nthchild(2) Selectsevery<p>elementthatisthe

secondchildofitsparent
:nthlast p:nthlast Selectsevery<p>elementthatisthe

child(n) child(2) secondchildofitsparent,countingfrom
thelastchild
:nthlastof p:nthlastof Selectsevery<p>elementthatisthe

type(n) type(2) second<p>elementofitsparent,
countingfromthelastchild
:nthoftype(n) p:nthof Selectsevery<p>elementthatisthe

type(2) second<p>elementofitsparent
:onlyoftype p:onlyoftype Selectsevery<p>elementthatisthe

only<p>elementofitsparent
:onlychild p:onlychild Selectsevery<p>elementthatisthe

onlychildofitsparent
:optional input:optional Selects<input>elementswithno

"required"attribute
:outofrange input:outof Selects<input>elementswithavalue

range outsideaspecifiedrange
:readonly input:read Selects<input>elementswitha

only "readonly"attributespecified
:readwrite input:read Selects<input>elementswithno

write "readonly"attribute
:required input:required Selects<input>elementswitha

"required"attributespecified
:root root Selectsthedocument'srootelement
:target #news:target Selectsthecurrentactive#newselement

(clickedonaURLcontainingthatanchor
name)
6/7
:valid input:valid Selectsall<input>elementswithavalid

value
:visited a:visited Selectsallvisitedlinks
Todos CSS Pseudo Elements

::after p::after Insertcontentafterevery<p>element
::before p::before Insertcontentbeforeevery<p>element
::firstletter p::firstletter Selectsthefirstletterofevery<p>element
::firstline p::firstline Selectsthefirstlineofevery<p>element
::selection p::selection Selectstheportionofanelementthatis

selectedbyauser
7/7
10/12/2015 CSSPseudoelementos
CSS Pseudoelementos
Quais so PseudoElements?
ACSSpseudoelementousadoparapeasdeestiloespecificadodeumelemento.
Porexemplo,elepodeserusadopara:
Estiloaprimeiraletra,oulinha,deumelemento
Inserircontedoantesde,ouaps,ocontedodeumelemento
Sintaxe
Asintaxedepseudoelementos:
selector::pseudoelement{
property:value;
}
Observeanotaodedoispontosduplo ::firstline contra:

firstlineOsdoispontosduplossubstituiuanotaonicaevrgula,
parapseudoelementosemCSS3.EstafoiumatentativadeW3Cpara
distinguirentrepseudoclassesepseudoelementos.Asintaxe
singlecolonfoiusadaparaambosospseudoclassesepseudo
elementosemCSS2eCSS1.Paracompatibilidadecomverses
anteriores,asintaxesingleclonaceitvelparaCSS2eCSS1
pseudoelementos.
1/8
O :: firstline Pseudoelemento
A ::primeiralinha pseudoelementousadoparaadicionarumestiloespecial
paraaprimeiralinhadeumtexto.
Oexemploaseguirformataaprimeiralinhadotextoemtodososelementos<p>:
Exemplo
p::firstline{
color:#ff0000;
}
Tentevocmesmo
Nota:O ::primeiralinha pseudoelementospodeseraplicadoaoblocode

nvelmaiselementos.
Asseguintespropriedadessoreferentesao ::firstline pseudoelemento:
propriedadesdafonte
propriedadesdecor
propriedadesdofundo
wordspacing
letterspacing
textdecoration
verticalalign
texttransform
alturadalinha
Claro
O :: firstletter Pseudoelemento
A ::primeiracarta pseudoelementousadoparaadicionarumestiloespecial
paraaprimeiraletradeumtexto.
Oexemploaseguirformataaprimeiraletradotextoemtodososelementos<p>:
2/8
Exemplo
p::firstletter{
color:#ff0000;
fontsize:xxlarge;
}
Tentevocmesmo
Nota:A ::firstletter pseudoelementospodeseraplicadaparabloqueara

nveldeelementos.
Asseguintespropriedadesaplicamseaoelemento::pseudoprimeiraletra:
propriedadesdafonte
propriedadesdecor
propriedadesdofundo
propriedadesdemargem
Propriedadesdepreenchimento
propriedadesdaborda
textdecoration
verticalalign(apenasse"float""none")
texttransform
alturadalinha
flutuador
Claro
Pseudoelementos e classes CSS

PseudoelementospodemsercombinadoscomclassesCSS:
Exemplo
p.intro::firstletter{
color:#ff0000;
fontsize:200%;
}
3/8
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;
}
Tentevocmesmo
CSS O :: antes Pseudoelemento

A ::antes pseudoelementopodeserusadoparainseriralgumcontedoantesque
ocontedodeumelemento.
Oexemploaseguirinsereumaimagemantesqueocontedodecada<h1>
elemento:
Exemplo
4/8
h1::before{
content:url(smiley.gif);
}
Tentevocmesmo
CSS O :: aps Pseudoelemento

A ::aps pseudoelementopodeserusadoparainseriralgunscontedosdepoisdo
contedodeumelemento.
Oexemploaseguirinsereumaimagemapsocontedodecada<h1>elemento:
Exemplo
h1::after{
content:url(smiley.gif);
}
Tentevocmesmo
CSS A seleo :: Pseudoelemento

A ::seleco pseudoelementocoincidecomapartedequalquerelementoque
sejaseleccionadoporumutilizador.
AsseguintespropriedadesCSSpodeseraplicadaa :: seleco:cor,fundo,
cursor,e contorno.
Oexemploaseguirfazcomqueotextoselecionadovermelhosobreumfundo
amarelo:
Exemplo
::selection{
5/8
color:red;
background:yellow;
}
Tentevocmesmo

Todos CSS Pseudo Elements

::after p::after Insertsomethingafterthecontentofeach

<p>element
::before p::before Insertsomethingbeforethecontentofeach

<p>element
::firstletter p::firstletter Selectsthefirstletterofeach<p>element
::firstline p::firstline Selectsthefirstlineofeach<p>element
::selection p::selection Selectstheportionofanelementthatis

selectedbyauser
Todos os CSS Pseudo Classes

:active a:active Selectstheactivelink
:checked input:checked Selectseverychecked<input>element
:disabled input:disabled Selectseverydisabled<input>element
:empty p:empty Selectsevery<p>elementthathasno

children
:enabled input:enabled Selectseveryenabled<input>element
6/8
:firstchild p:firstchild Selectsevery<p>elementsthatisthe

firstchildofitsparent
:firstoftype p:firstoftype Selectsevery<p>elementthatisthe

first<p>elementofitsparent
:focus input:focus Selectsthe<input>elementthathas

focus
:hover a:hover Selectslinksonmouseover
:inrange input:inrange Selects<input>elementswithavalue

withinaspecifiedrange
:invalid input:invalid Selectsall<input>elementswithan

invalidvalue
:lang(language) p:lang(it) Selectsevery<p>elementwithalang

attributevaluestartingwith"it"
:lastchild p:lastchild Selectsevery<p>elementsthatisthe

lastchildofitsparent
:lastoftype p:lastoftype Selectsevery<p>elementthatisthe

last<p>elementofitsparent
:link a:link Selectsallunvisitedlinks
:not(selector) :not(p) Selectseveryelementthatisnota<p>

element
:nthchild(n) p:nthchild(2) Selectsevery<p>elementthatisthe

secondchildofitsparent
:nthlast p:nthlast Selectsevery<p>elementthatisthe

child(n) child(2) secondchildofitsparent,countingfrom
thelastchild
:nthlastof p:nthlastof Selectsevery<p>elementthatisthe

type(n) type(2) second<p>elementofitsparent,
countingfromthelastchild
:nthoftype(n) p:nthof Selectsevery<p>elementthatisthe

type(2) second<p>elementofitsparent
:onlyoftype p:onlyoftype Selectsevery<p>elementthatisthe

only<p>elementofitsparent
:onlychild p:onlychild Selectsevery<p>elementthatisthe

onlychildofitsparent
:optional input:optional Selects<input>elementswithno

"required"attribute
7/8
:outofrange input:outof Selects<input>elementswithavalue

range outsideaspecifiedrange
:readonly input:read Selects<input>elementswitha

only "readonly"attributespecified
:readwrite input:read Selects<input>elementswithno

write "readonly"attribute
:required input:required Selects<input>elementswitha

"required"attributespecified
:root root Selectsthedocument'srootelement
:target #news:target Selectsthecurrentactive#newselement

(clickedonaURLcontainingthatanchor
name)
:valid input:valid Selectsall<input>elementswithavalid

value
:visited a:visited Selectsallvisitedlinks
8/8
10/12/2015 CSSNavigationBar
CSS Navigation Bar

Demonstrao: barras de navegao

Vertical
Incio
Notcia
Contato
Cercade
Horizontal
Incio Notcia Contato Cercade
Barras de navegao
Tendoanavegaoeasytouseimportanteparaqualquersitedaweb.
ComCSSvocpodetransformarmenusHTMLchatoembarrasdeboaaparnciade
navegao.
Barra de Navegao = lista de links

UmabarradenavegaoprecisadeHTMLpadrocomobase.
1/13
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
Vertical Navigation Bar

Paraconstruirumabarradenavegaovertical,vocpodeestilizaroselementos
<a>dentrodalista,almdeocdigoacima:
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
Tentevocmesmo
Vertical Navigation Bar Exemplos

Criarumabarradenavegaoverticalbsicocomumacordefundocinzaemudara
cordoslinksdefundoquandoousuriomoveomousesobreeles:
Incio
Notcia
Contato
Cercade
Exemplo
ul{
liststyletype:none;
margin:0;
padding:0;
width:200px;
backgroundcolor:#f1f1f1;
}
lia{
display:block;
color:#000;
padding:8px08px16px;
}
/*Changethelinkcoloronhover*/
lia:hover{
backgroundcolor:#555;
color:white;
}
Tentevocmesmo
4/13
Ativo / atual do link de navegao

Adicioneumaclasse"ativo"paraaligaoatualparaqueousuriosaibaqualpgina
ele/elaestem:
Incio
Notcia
Contato
Cercade
Exemplo
.active{
color:white;
}
Tentevocmesmo
Centro Ligaes & Add Borders

Adicionar textalign:center para<li>ou<a>paracentralizaroslinks.
Adicionara fronteira propriedadea<ul>adicionarumabordaemtornodabarra

denavegao.Sevoctambmquiserfronteirasdentrodabarradenavegao,
adicioneum borderbottom paratodos<li>elementos,excetoparaoltimo:
Incio
Notcia
Contato
Cercade
Exemplo
5/13
ul{
border:1pxsolid#555;
}
li{
textalign:center;
borderbottom:1pxsolid#555;
}
li:lastchild{
borderbottom:none;
}
Tentevocmesmo
De altura completa Fixo Navbar Vertical

Criarumdealturacompleta,"sticky"navegaolateral:
Home
FixedFullheightSideNav
News
Trytoscrollthisarea,andseehowthe
Contact
sidenavstickstothepage
About
Sometext..
Sometext..
Sometext..
Sometext..
Exemplo
ul{
liststyletype:none;
margin:0;
padding:0;
width:25%;
height:100%;/*Fullheight*/
6/13
position:fixed;/*Makeitstick,evenonscroll*/
overflow:auto;/*Enablescrollingifthesidenavhastoo
muchcontent*/
}
Tentevocmesmo
Horizontal Navigation Bar

Hduasmaneirasdecriarumabarradenavegaohorizontal.Usandolinhaou
flutuanteitensdalista.
Lista de Itens inline

Umamaneiradeconstruirumabarradenavegaohorizontalespecificaros<li>
elementoscomoinline,almdocdigo"standard"acima:
Exemplo
li{
display:inline;
}
Tentevocmesmo
Exemploexplicou:
display:inline; Porpadro,<li>elementossoelementosdebloco.Aqui,
nsremovemosasquebrasdelinhaantesedepoisdecadaitemdalista,para
exibilosemumalinha
Flutuante Lista de Itens

Outramaneiradecriarumabarradenavegaohorizontalflutuaroselementos
<li>eespecifiqueumlayoutparaoslinksdenavegao:
Exemplo
7/13
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
Horizontal Navigation Bar Exemplos

8/13
Criarumabarradenavegaohorizontalbsicocomumacordefundoescuroe
mudaracordoslinksdefundoquandoousuriomoveomousesobreeles:
Exemplo
ul{
liststyletype:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
}
lia{
display:block;
color:white;
textalign:center;
padding:14px16px;
}
/*Changethelinkcolorto#111(black)onhover*/
lia:hover{
}
Tentevocmesmo
Ativo / atual do link de navegao

Adicioneumaclasse"ativo"paraaligaoatualparaqueousuriosaibaqualpgina
ele/elaestem:
9/13
Exemplo
.active{
}
Tentevocmesmo
Ligaes alinhar direita

Ligaesalinhardireita,adicionandoumnovo<ul>dentrodo<ul>com float:
right:
Incio Notcia Contato Cercade Entrar
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
Incio Notcia Contato Cercade Entrar
Exemplo
/*Addagrayrightbordertoalllistitems,exceptthelast
item(lastchild)*/
li{
borderright:1pxsolid#bbb;
}
li:lastchild{
borderright:none;
}
Tentevocmesmo
Corrigido barra de navegao

Faaabarradenavegaoestadianotopoounaparteinferiordapgina,mesmo
quandoousuriorolaapgina:
Home News Contact
FixedTopNav
Thenavigationbarwillstayatthetopof
thepagewhilescrolling
Sometextsometextsometextsometext..
Corrigido Top
ul{
position:fixed;
11/13
top:0;
width:100%;
}
Tentevocmesmo
FixedBottomNav
Thenavigationbarwillstayatthebottom
ofthepagewhilescrolling
Home News Contact

Parte inferior fixo
ul{
position:fixed;
bottom:0;
width:100%;
}
Tentevocmesmo
Cinza Horizontal Navbar

Umexemplodeumabarradenavegaohorizontalcinzacomumabordacinzafina:
Exemplo
12/13
ul{
border:1pxsolid#e7e7e7;
}
lia{
color:#666;
}
Tentevocmesmo
13/13
10/12/2015 CSSDropdowns
CSS Dropdowns
CriarumalistasuspensahoverablecomCSS.
Exemplos suspensas
Passeomousesobreosexemplosabaixo:
Textosuspensa
Menususpenso
Deoutros:
Dropdown Bsico
Criarumacaixasuspensaqueaparecequandoousuriomoveomousesobreum
elemento.
Exemplo
<style>
.dropdown{
position:relative;
}
.dropdowncontent{
display:none;
position:absolute;
1/5
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.
CSS)O .dropdown usoclasse position: relative,quenecessrioquandose

desejaqueocontedopendenteparasercolocadologoabaixodobotosuspenso
(usando position: absolute).
O .dropdowncontent classecontmocontedorealsuspensa.Elaestescondida
porpadro,eserexibidoemfoco(vejaabaixo).Observeo minwidth est
definidocomo160px.Sintaselivreparamudarisso.Dica:Sevocquiseralargura
docontedopendenteparasertograndecomoobotosuspenso,definaa
largura para100%(e overflow:auto parapermitirrolagememtelaspequenas).
Emvezdeusarumaborda,temosusadoo boxshadow propriedadeparafazero
2/5
menudropdownolharcomoum"carto".
A:hoverseletorusadoparamostraromenususpensoquandoousuriomoveo
mousesobreobotosuspenso.
Menu suspenso
Criarummenususpensoquepermitequeousurioescolhaumaopoapartirde
umalista:
Menususpenso
Esteexemplosemelhanteaoanterior,excetoqueadicionarlinksdentrodacaixade
listasuspensaeestilolosparacaberumbotosuspensodenominado:
Exemplo
<style>
/*StyleTheDropdownButton*/
.dropbtn{
color:white;
padding:16px;
fontsize:16px;
border:none;
cursor:pointer;
}
/*Thecontainer<div>neededtopositionthedropdowncontent
*/
.dropdown{
position:relative;
}
/*DropdownContent(HiddenbyDefault)*/
.dropdowncontent{
display:none;
position:absolute;
3/5
minwidth:160px;
boxshadow:0px8px16px0pxrgba(0,0,0,0.2);
}
/*Linksinsidethedropdown*/
.dropdowncontenta{
color:black;
padding:12px16px;
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>
</div>
</div>
Tentevocmesmo
Alinhado direita contedo Dropdown
4/5
Deixou Certo
Sevocdesejaqueomenudropdownparairdadireitaparaaesquerda,emvezde
esquerdaparaadireita,adicione adireita:0;
Exemplo
.dropdowncontent{
right:0;
}
Tentevocmesmo
Mais Exemplos
Imagemsuspensa
Esteexemplodemonstracomoadicionarumaimagemeoutroscontedosdentroda
caixasuspensa.
SuspensaNavbar
Esteexemplodemonstracomoadicionarummenususpensonointeriordeumabarra
denavegao.
5/5
10/12/2015 GaleriaCSSImagem
CSS Galeria de Imagens

CSSpodeserusadoparacriarumagaleriadeimagens.
Adicioneuma Adicioneuma Adicioneuma

descrioda descrioda descrioda
imagemaqui imagemaqui imagemaqui
Adicioneuma
descrioda
imagemaqui
Galeria de imagens
OseguintegaleriadeimagemcriadacomCSS:
Exemplo
<html>
<head>
<style>
div.img{
1/3
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>
</div>
<divclass="img">
<atarget="_blank"href="lights.jpg">
<imgsrc="img_lights.jpg"alt="NorthernLights"width="300"
height="200">
</a>
2/3
</div>
<divclass="img">
<atarget="_blank"href="img_mountains.jpg">
<imgsrc="img_mountains.jpg"alt="Mountains"width="300"
height="200">
</a>
</div>
</body>
</html>
Tentevocmesmo
3/3
10/12/2015 CSSImagemOpacidade/Transparncia
CSS Imagem Opacidade / Transparncia

CriarimagenstransparentescomCSSfcil.
OCSS opacidade propriedadeumapartedarecomendaoCSS3.
Exemplo 1 Criando uma imagem transparente

ApropriedadeCSS3paraatransparncia a opacidade.
PrimeirovamosmostrarlhecomocriarumaimagemtransparentecomCSS.
ImagemRegular:
Amesmaimagemcomatransparncia:
OlheparaoseguinteCSS:
Exemplo
img{
opacity:0.4;
1/4
filter:alpha(opacity=40);/*ForIE8andearlier*/
}
Tentevocmesmo
A opacidade propriedadepodeterumvalor0,01,0.Ovalormaisbaixo,omais
transparente.
IE8eusoanterior filter:alpha(opacidade= x).Oxpodeassumirumvalor

entre0100.Umvalormaisbaixotornaoelementomaistransparente.
Exemplo 2 Transparncia Imagem Passe

Effect
Passeomousesobreasimagens:
ACSStemestaaparncia:
Exemplo
img{
opacity:0.4;
}
img:hover{
opacity:1.0;
}
Tentevocmesmo
2/4
OprimeiroblocoCSSsemelhanteaocdigonoexemplo1.Almdisso,ns
adicionamosoquedeveacontecerquandoumusuriopassaomousesobreumadas
imagens.Nestecaso,querqueaimagemnosertransparentequandoousurio
passaomousesobreele.OCSSparaisso opacidade: 1.
Quandooponteirodomouseseafastadaimagem,aimagemsertransparente
novamente.
Exemplo 3 Texto em caixa transparente
Esteumtextoquecolocadonacaixatransparente.
Ocdigofonteseparececomisso:
Exemplo
<html>
<head>
<style>
div.background{
background:url(klematis.jpg)repeat;
}
div.transbox{
margin:30px;
backgroundcolor:#ffffff;
opacity:0.6;
}
div.transboxp{
margin:5%;
fontweight:bold;
3/4
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>.

Exerccio1 Exerccio2
4/4
10/12/2015 SpritesCSSImagem
CSS Sprites Imagem

Sprites imagem
Umspritedeimagemumacoleodeimagenscolocadasemumanicaimagem.
Umapginawebcommuitasimagenspodelevarumlongotempoparacarregare
geravriassolicitaesdoservidor.
Usandospritesimagemvaireduzironmerodesolicitaesdoservidore
economizarlarguradebanda.
Sprites Imagem Exemplo Simples

Emvezdeusartrsimagensseparadas,usamosestaimagemnica
("img_navsprites.gif"):
ComCSS,podemosmostrarapenasapartedaimagemqueprecisamos.
NoexemploaseguiroCSSespecificaqualpartedaimagem"img_navsprites.gif"para
mostrar:
Exemplo
#home{
width:46px;
height:44px;
background:url(img_navsprites.gif)00;
}
1/5
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.
Sprites imagem Criar uma lista de Navegao

Queremosusaraimagemdosprite("img_navsprites.gif")paracriarumalistade
navegao.
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
#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
largura+#prev43px1pxlinhadivisria)
Sprites imagem Efeito Hover

Agoraqueremosadicionarumefeitohoverparaanossalistadenavegao.
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
#homea:hover{background:urltransparente('img_navsprites_hover.gif')0
45px}Paratodasastrsimagensdopairoqueespecificaramesmaposio
defundo,nica45pxaindamaisparabaixo
5/5
10/12/2015 AtributoCSSSelector
CSS atributo Seletores

Elementos do estilo HTML com atributos

especficos
possvelestilizarelementosHTMLquetenhamatributosespecficosouvaloresde
atributos.
CSS [atributo] Selector

O [atributo] seletorusadoparaselecionarelementoscomumatributo
especificado.
Oexemploaseguirselecionatodososelementos<a>comumatributodedestino:
Exemplo
a[target]{
}
Tentevocmesmo
CSS [atributo = "valor"] Selector

O [atributo="valor"] seletorusadoparaselecionarelementoscomum
atributoevalorespecificado.
Oexemploaseguirselecionatodososelementos<a>comumtarget="_blank"
1/5
atributo:
Exemplo
a[target="_blank"]{
}
Tentevocmesmo
CSS [atributo ~ = "valor"] Selector

O [atributo~="valor"] seletorusadoparaselecionarelementoscomum
valordeatributoquecontmumapalavraespecificada.
Oexemploaseguirselecionatodososelementoscomumatributotitlequecontm
umalistaseparadaporespaosdepalavras,umdosquais"flor":
Exemplo
[title~="flower"]{
border:5pxsolidyellow;
}
Tentevocmesmo
Oexemploacimaircorrespondercomelementostitle="flor",title="flordo
vero",etitle="flornova",masnotitle="myflor"outitle="flores".
CSS [atributo | = "valor"] Selector

O [atributo|="valor"] seletorusadoparaselecionarelementoscomo
atributoespecificadocomeandocomovalorespecificado.
Oexemploaseguirselecionatodososelementoscomumvalordeatributodeclasse
quecomeacom"top":
2/5
Nota:Ovalortemqueserumapalavrainteira,sozinho,comoclass="top",ou
seguidoporumhfen(),comoclass="toptexto"!
Exemplo
[class|="top"]{
background:yellow;
}
Tentevocmesmo
CSS [atributo ^ = "valor"] Selector

O [atributo^="valor"] seletorusadoparaselecionarelementoscujovalor
doatributocomeacomumvalorespecificado.
quecomeacom"top":
Nota:Ovalornotemdeserumapalavrainteira!
Exemplo
[class^="top"]{
background:yellow;
}
Tentevocmesmo
CSS [atribuem $ = "valor"] Selector

O [atributo$="valor"] seletorusadoparaselecionarelementoscujovalor
doatributoterminacomumvalorespecificado.
queterminacom"teste":
3/5
Exemplo
[class$="test"]{
background:yellow;
}
Tentevocmesmo
CSS [* = atributo "valor"] Selector

O [*=atributo"valor"] seletorusadoparaselecionarelementoscujovalor
doatributocontmumvalorespecificado.
quecontm"te":
Exemplo
[class*="te"]{
background:yellow;
}
Tentevocmesmo
Formas Styling
OsseletoresdeatributopodesertilparaformasdestylingsemclasseouID:
Exemplo
4/5
input[type="text"]{
width:150px;
display:block;
marginbottom:10px;
}
input[type="button"]{
width:120px;
marginleft:35px;
display:block;
}
Tentevocmesmo

Exerccio5 Exerccio6
Mais Exemplos de CSS Seletores

UtilizeonossoTesterSelectorCSSparademonstrarasdiferentesseletores.
ParaobterumarefernciacompletadetodososseletoresCSS,porfavor,vao
nossoCSSSeletoresdereferncia.
5/5
10/12/2015 ContadoresCSS
CSS Contadores
Usando contadores CSS

ContadoresCSSsocomo"variveis".Osvaloresdasvariveis
podeser

incrementadoporregrasCSS(quevairastrearquantasvezeselessoutilizados).
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
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{
}
h1{
counterreset:subsection;
}
h1::before{
content:"Section"counter(section)".";
}
h2::before{
counterincrement:subsection;
content:counter(section)"."counter(subsection)"";
}
Tentevocmesmo
Umcontadortambmpodesertilparafazerlistasdescritasporqueumanova
instnciadeumcontadorautomaticamentecriadaemelementosfilho.Aquiusamos
os contadores() funoparainserirumaseqnciadecaracteresentrediferentes
nveisdecontadoresaninhadas:
Exemplo
ol{
2/3
liststyletype:none;
}
li::before{
content:counters(section,".")"";
}
Tentevocmesmo
Propriedades do contador CSS

content Usedwiththe::beforeand::afterpseudoelements,to
insertgeneratedcontent
counter Incrementsoneormorecountervalues
increment
counterreset Createsorresetsoneormorecounters
3/3

Css

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Css

Diunggah oleh

Hak Cipta:

Format Tersedia

09/12/2015 CSSTutorial

Exemplos Em cada captulo

CSS Teste o Quiz

Exame Obtenha seu diploma!

Certificao Online W3Schools '

Demonstrao CSS Uma pgina HTML vrios

Same Page Different

Por que usar CSS?

CSS resolveu um problema Big

CSS economiza muito trabalho!

CSS Sintaxe e Seletores

Testese com exerccios!

CSS: Como ...

Trs maneiras de inserir CSS

Folha de estilo externa

Folha de estilo interna

Vrias folhas de estilo

Testese com exerccios!

Imagem de Fundo Repetir horizontalmente ou

Imagem de fundo Definir posio e norepeat

Aposiodaimagemespecificadopelo backgroundposition propriedade:

Imagem de Fundo posio fixa

Background propriedade Taquigrafia

Testese com exerccios!

Todas as propriedades do fundo do CSS

Propriedades de Fronteira CSS

Border Sides individuais

Seo borderstyle propriedadetemquatrovalores:

Seo borderstyle propriedadetemtrsvalores:

Seo borderstyle propriedadetemdoisvalores:

Seo borderstyle propriedadetemumvalor:

Border Propriedade Taquigrafia

Testese com exerccios!

Todas as propriedades de fronteira CSS

Propriedades Margem CSS

Margem Sides individuais

Margem Propriedade Taquigrafia

Sea margemde propriedadetemquatrovalores:

Sea margemde propriedadetemtrsvalores:

Sea margemde propriedadetemdoisvalores:

Sea margemde propriedadetemumvalor:

Aplicar o valor de auto

Testese com exerccios!

Todas as propriedades de margem CSS

Propriedades de preenchimento CSS

Enchimento Sides individuais

Enchimento Propriedade Taquigrafia

Seo preenchimento propriedadetemquatrovalores:

Seo preenchimento propriedadetemtrsvalores:

Seo preenchimento propriedadetemdoisvalores:

Seo preenchimento propriedadetemumvalor:

Testese com exerccios!

Todas as propriedades Padding CSS

CSS altura e largura Dimenses

Propriedades CSS Dimenso

Ajuste a altura ea largura

A altura e alargura podeserajustadaparaautomvel(esteopadro.

Nota:A altura e largura propriedadesnoincluempreenchimento,bordas,ou

Oexemploaseguirmostrauma <div> elementocomumaalturade100pixelse

Oproblemacomo <div> acimaocorrequandoajaneladonavegadormenordo

Usando maxwidth emvezdisso,nestasituao,vaimelhoraramovimentaodo

Nota:Ovalorda largura maxsobreposiesdepropriedadesdelargura.

Oexemploaseguirmostrauma <div> elementocomumaalturade100pixelse

Tente voc mesmo Exemplos