Tecnologias para Internet - 2013.1 - Aula 3

  • Published on
    29-Jun-2015

  • View
    218

  • Download
    0

Embed Size (px)

DESCRIPTION

Tecnologias para Internet - 2013.1 - Aula 3

Transcript

  • 1. TecnologiasparaInternet Prof. Thyago Prof.Thyago MaiaGestodaTI 2013.1

2. Aula3:FolhasdeEstiloObjetivos Introduziroconceitodefolhasdeestilop g Apresentaralgunsrecursosdatecnologia Definir e apresentar as principaisDefinireapresentarasprincipaispropriedadesCSS Fazer com que o aluno crie seuFazercomqueoalunocrieseuprimeiroprojetoWebHTML+CSS2 3. IntroduoaoCSSIntroduo ao CSS 4. IntroduoaoCSS FolhadeEstiloApartirdoHTML4.0,todaformataodeumapginaHTMLpodeserdefinidaemumafolhadepgina HTML pode ser definida em uma folha deestilo;Quandoumnavegadorlumafolhadeestilo,oQ dd l f lh dilmesmoformataodocumentoHTMLdeacordocomasespecificaesdefinidasnafolhade ifi d fi id f lh destilo; 4 5. IntroduoaoCSS OqueCSS?SiglaparaCascading StyleSheets;g p g y;EstilosdefinemcomooselementosHTMLseroapresentados/formatados;EstilosforamadicionadosnoHTML4.0pararesolverumproblema:resolver um problema: Separarocontedodasuaformatao!Folhasdeestilopodemserarmazenadasemlh dlddarquivos.css aoseremdefinidasemdocumentosHTML;5 6. ArquiteturadeSistemasWeb QualcamadaoCSSseenquadra?6 7. ArquiteturadeSistemasWeb QualcamadaoCSSseenquadra?7 8. IntroduoaoCSS SintaxeCSS UmaregraCSSpossuiduaspartes:Umseletore g p p umaoumaisdeclaraes;h1 Seletor S l t{ Color: blue;Declarao Font-size: 12 F t i12px;}ValorPropriedade OseletornormalmenteumelementoHTML q queirseguirasespecificaesdefinidasnas g p declaraes(h1,body,p,a,etc.); 8 9. IntroduoaoCSS Tag usadaemumdocumentoHTMLpara qreferenciarumarquivoCSS:rel= stylesheet type= text/css href= exemplo.css > Taltag deverserdeclaradaentreastags( p ge(cabealhodeumapginaHTML; 10. AlgumaspropriedadesCSSAlgumas propriedades CSS 11. AlgumaspropriedadesCSS g p pApropriedadeBackground Utilizadaparadefinirefeitosdefundoemum p elementoCSS; Algunspossveisefeitos:background color (cor Alguns possveis efeitos: backgroundcolor (cor defundo),backgroundimage (imagemde fundo),background repeat (repetiodaimagem fundo) backgroundrepeat (repetio da imagem defundo);body{ background-color: #b0c4de;} 11 12. AlgumaspropriedadesCSS g p pFormataodetextocomCSS Utilizamosapropriedadecolor parasetar umap p p cornotextodeumdeterminadoelemento; ComCSS,umacorpodeserespecificadacom: Com CSS uma cor pode ser especificada com:Umvalorhexadecimal(Ex.:#FF0000)UmvalorRGB(Ex.:rgb(255,0,0))Um valor RGB (Ex : rgb(255 0 0))Onomedacoremingls(Ex.:red)body{ color: blue;}12 13. AlgumaspropriedadesCSSg p p AlinhamentodetextocomCSS Utilizamosapropriedadetextalign paradefiniro alinhamentohorizontalemtextos; Otextopodesercentralizado(center),alinhadoa esquerdaoudireita(left ouright)oujustificado(justify);h1{ text-align: right;}P{ text-align: center;}13 14. AlgumaspropriedadesCSS g p pDecoraodetextoscomCSS Apropriedadetextdecoration usadaparasetar p p p ouremoverdecoraesemtextos;a { text-decoration: none; }h1 { text-decoration: line-through; } text decoration: line through;h2 { text-decoration: underline; }h3 { text-decoration: overline; }h4 { text-decoration: blink; }14 15. AlgumaspropriedadesCSS g p pTransformaesdetextos Apropriedadetexttransform usadapara p p p mantertextosemcaixaaltaoucaixabaixa;p { text-transform: uppercase;}#area { text-transform: lowercase;}#area2 { text-transform: capitalize;} 15 16. AlgumaspropriedadesCSSg p pIndentaoApropriedadetextindent usadaparap ppespecificaraindentao daprimeiralinhadeumtexto; ;p{text-indent: 50px;}16 17. AlgumaspropriedadesCSSg p pTiposdeFonteApropriedadefontfamily usadaparasetar op py ptipodefonteaserutilizadoemumtexto;PodemosdefinirvriostiposdefonteparaaPodemos definir vrios tipos de fonte para amesmapropriedade. Casoumoumaisnavegadoresnosuporteumdos Caso um ou mais navegadores no suporte um dos tiposlistados;p{font-family: Times new Roman, Times, Serif;} 17 18. AlgumaspropriedadesCSSg p pEstilosdeFonteApropriedadefontstyle usadaparadefinirop py pestilodefonteaserutilizadoemumtexto;p{font-style: italic;}#exemplo{ font-style: oblique;} 18 19. AlgumaspropriedadesCSSg p pTamanhodeFonteApropriedadefontsize setaotamanhodotexto;p p;p{font-size: 40px;}#exemplo{ font-size: 14px;} 19 20. AlgumaspropriedadesCSSg p pLarguraealturadeumelementoAspropriedadeswidth eheight (larguraealtura) p p g ( g)setam,respectivamente,alarguraealturadeumdeterminadoelemento; ;p{width: 240px;height: 100px; g p ;} 20 21. AlgumaspropriedadesCSS g p pBordasAtravsdapropriedadeborder (borda)podemosp p ( )pinserirbordasemelementosCSS;p{border: 5px solid red;}#exemplo{ border: 1px dotted blue;} 21 22. AlgumaspropriedadesCSS g p pMargens Atravsdapropriedademargin podemosinserirp pg p margensemelementosCSS;#exemplo{ margin-top: 100 i t 100px; margin-bottom: 100px; margin-left: 100px; margin-right: 100 i i ht 100px;}22 23. AlgumaspropriedadesCSSg p pPadding Apropriedadepadding defineoespaoentrea p p p gp bordadeumelementoeseucontedo;#exemplo{ padding-top: 100 ddi t 100px; padding-bottom: 100px; padding-left: 100px; padding-right: 100 ddi i ht 100px;}23 24. IntroduoaoCSS Osseletoresid eclassAlmdosseletoresdeelementosHTML,CSStambmpermitequenscriemosnossostambm permite que ns criemos nossosprpriosseletores,chamadosid eclass; 24 25. IntroduoaoCSSOsseletoresidSeletoresidsousadosparaespecificarumestilop pparaumelementonico;SeletoresidformatamelementosHTMLqueosSeletores id formatam elementos HTML que osinvocamapartirdoatributoid;/* no css */#paragrafos{

co o : ed; color: red;} 25 26. IntroduoaoCSS OsseletoresclassSeletoresclass sousadosparaespecificarum p pestiloparaumgrupodeelementos;Seletoresclass formatamelementosHTMLqueosSeletores class formatam elementos HTML que osinvocamapartirdoatributoclass;/* no css */.centro{text-align:

ce te ;center;} 26 27. IntroduoaoCSS OsseletoresclassTambmpodemosespecificarqueapenasalgunsp p qpgtiposdeelementosHTMLdeveroserafetadosppelaclasse;;/* no css */p.centro{text-align:

ce te ;center;}27