23/03/2015

online.unip.br/imprimir/imprimirconteudo

CSSasiglaeminglsparaCascadingStyleSheetqueemportugusfoitraduzido
parafolhadeestiloemcascataedefinidacomo:
Folhadeestiloemcascataummecanismosimplesparaadicionarestilos(p.ex.,
fontes,cores,espaamentos)aosdocumentosWeb.
WebStandardspodesertraduzidocomoPadresWebetemporobjetivoacriaode
umaWebuniversal.
WebStandardsumconjuntodenormas,diretrizes,recomendaes,notas,artigos,
tutoriaiseafinsdecartertcnico,produzidospeloW3Cedestinadosaorientar
fabricantes,desenvolvedoreseprojetistasparaousodeprticasquepossibilitema
criaodeumaWebacessvelatodos,independentementedosdispositivosusadosou
desuasnecessidadesespeciais.

PorqueCSS?
AgrandevantagemdousodeCSSadesepararamarcaoHTML,daapresentao
dosite.Emoutraspalavras,valedizerqueoHTMLdestinaseunicamenteaestruturare
marcarocontedo,ficandoporcontadasCSStodaaresponsabilidadepelovisualdo
documento.
HTMLmarcaeestruturatextos,cabealhos,pargrafos,links,botes,formulrios,
imagensedemaiselementosdapginaeCSSdefinecores,posicionamentonatela,
estilosdelinhas,bordasetudoomaisrelacionadoapresentao.
Aadoodestatcnicaresultaemmltiplasvantagensebenefciosquenoso
conseguidosquandoseutilizaoconceitolargamenteempregadoparaconstruo
dewebsites,baseadonousodetabelasedeatributosdeestilizaodentrodas
tagsHTML.
Projetarumsitenavegveltantoemmonitorde1280x1024quantoemumatelinhade
320x240deumPDA,comutilizaodamesmamarcaofantsticoepossvel.Basta
projetardeacordocomasWebStandardsentregandosCSSamissodeacomodaro
contedonatela!
Algumasrestries(pocadesteescrito2003)aindafreiamousoplenogerale
irrestritodeCSSnaWeb.Asrestriessoporcontadaincapacidadedealguns
browsersemdarsuportetotalsCSS.Comopassardotempoatendnciaadecair
emdesusototalosbrowsersantigosquenosuportamoumesmosuportam
parcialmenteCSS.SomaseafavordasCSSanormatizaoqueoW3Cvem
implementandosobreoassuntoeodesejodosfabricantesdeseadequarquelas
normas.umaquestodetempo!

OpoderdasCSS
ParaterumaidiadopoderdasCSSnocontroledolayoutdeumapginaweb,
recomendovisitaroZenGarden.
LvocfazodownloaddeumamarcaoHTMLpadroquenopodeseralteradae
http://online.unip.br/imprimir/imprimirconteudo

1/3

23/03/2015

online.unip.br/imprimir/imprimirconteudo

criaasuaFolhadeEstiloemCascataparadefinirseuprpriolayout,cores,imagens,
enfimtodaapartevisualaplicvelnacodificaaopadrofornecida.
Visiteositeenavegueporalgunstrabalhosemexposio.Garantoquevocvaise
surpreender!

Trechoobtidodosite:http://www.maujor.com/index.php

Abaixoseguealgunslinksparaestudo:
www.maujor.com
http://www.abpsoft.com/criacaoweb/cssbasico.html
http://ptbr.html.net/tutorials/css/introduction.asp

Exerccio1:

QuandoexisteconflitodeestilosparaummesmoelementoHTMLoquedeveserfeito?

AEstabelecerprioridadeparaaaplicaodaregradeestiloparaoelemento.
BNofazernada,poisacorreoautomtica.
CEstabelelecerprioridadeemordemdecrescente.
DEstabelecerprioridadealtaparaestilopadrodonavegador
ETodasasalternativasestocorretas
Comentrios:
EssadisciplinanoEDouvocnofezcomentrios
Exerccio2:

OqueumseletorID

Adefinidocomoumidentificadornicoparaumelemento.
BDentrodocontextodeestilizaosemelhanteclasse.
CAsintaxedeuma"id"semprecomeacomuma#(tralha)seguidapelonomedaid.
DUmseletorIDspodeserusadoumavezemcadapgina.
ETodasasalternativasacimaestocorretas.
Comentrios:
EssadisciplinanoEDouvocnofezcomentrios
Exerccio3:

EscolhaaalternativaincorretasobreefeitocascatadeumCSS.
http://online.unip.br/imprimir/imprimirconteudo

2/3

23/03/2015

online.unip.br/imprimir/imprimirconteudo

AAordempodeserdotipocascata.
BAordemnopodeserdotipocascata.
CAsdeclaraespodemsernormais.
DPodemserdotipoespecificidadedeumseletor.
EPararesolverconflitosentreregrasdeestilo,onavegadorcolocaemordemdecrescente.
Comentrios:
EssadisciplinanoEDouvocnofezcomentrios
Exerccio4:

Oprocedimentoparadeterminaraordemdecascatapodeser:
AIdentificaodasdeclaraesdeestilo.
BEstabelecerordemascendentedeprioridade.
COrdenarasregrascomamesmaimportnciaeorigempelaespecificidadedoseletor.
DAprecednciaparaaquelesqueforamescritasporltimonafolhadeestilo.
ETodasasalternativasacimaestocorretas.
Comentrios:
EssadisciplinanoEDouvocnofezcomentrios
Exerccio5:

Emrelaoaoscomandosabaixo,responda.
<pclass="diferente">Pargrafo</p>

p.diferente{fontsize:12px}
p{fontsize:16px}
AAsduasregrassoaplicveismarcaosugeridanoexemplo.
BOtipopgenrico.
Coseletorclassep.diferentemaisespecfico.
DAplicaseatodosospargrafosdodocumento.
ETodasasalternativasacimaestocorretas.
Comentrios:
EssadisciplinanoEDouvocnofezcomentrios

http://online.unip.br/imprimir/imprimirconteudo

3/3