of 46/46
Introdução a CSS Willian Massami Watanabe [email protected] 1 Agradecimentos a prof. Dra. Renata Pontin de Mattos Fortes Wednesday, December 5, 12

Introdução ao CSS

  • View
    316

  • Download
    2

Embed Size (px)

Text of Introdução ao CSS

  • 1. Agradecimentos a prof. Dra. Renata Pontin de Mattos FortesIntroduo a CSSWillian Massami [email protected] 1Wednesday, December 5, 12

2. Sumrio Histrico Denio Por que usar CSS? Vantagens Sintaxe bsica Como inserir uma folha de estilo Agrupando elementos Algumas propriedades 2Wednesday, December 5, 12 3. Histrico A especificao CSS-1 foi criada pela Microsoft(1996) A W3C aprovou, formalizou e recomendou aespecicao 1998 surge o CSS-2, como extenso da CSS-1 eresolvendo algumas de suas limitaes CSS-3 est atualmente como release http://www.css3.info/3Wednesday, December 5, 12 4. Denio CSS - Cascading Style Sheets Styles descrevem como os documentosdevem ser apresentados Styles so normalmente armazenados emStyle Sheets Mltiplas definies de estilo vo cascatearem um 4Wednesday, December 5, 12 5. Por que usar CSS? HTML no tem um conjunto infinito de tags HTML, por si s, no tem informaes relacionada apresentao Um Browser (navegador) no tem idia do que estrepresentado em um documento HTML A informao em um documento HTML pode no estarna forma em que se deseja apresent-la; Portanto, deve existir algo que, em adio aodocumento HTML, fornea informaes sobre amaneira que o mesmo deve ser apresentado ouprocessado; Soluo: CSS. 5Wednesday, December 5, 12 6. Vantagens Separa o contedo da apresentao Portanto, os autores de contedo no precisam sepreocupar com a apresentao Reuso de dados: o mesmo contedo pode servisualizado de formas diferentes em vrios contextos Estilo customizado s preferncias do usurio(acessibilidade): tamanho de impresso, cor, layoutsimplificado para leitores auditivos Uma nica folha de estilo pode definir e manter aconsistncia de uma coleo de documentos, porexemplo: caso um usurio queira alterar a cor de fundode um site basta atualizar cdigo fonte6Wednesday, December 5, 12 7. Sintaxe bsicaseletor {propriedade: valor}body {color:black}p {font-family:"sans serif"}p {text-align:center;color:red}h1,h2,h3,h4,h5,h6 {color:green} 7Wednesday, December 5, 12 8. Sintaxe bsicaComentrios em CSS/* isto um comentrio e no ser interpretadopelo navegador... */body {color:black} 8Wednesday, December 5, 12 9. Sintaxe bsicaExemplo 19Wednesday, December 5, 12 10. Sintaxe bsicaExemplo 210Wednesday, December 5, 12 11. Sintaxe bsicaExemplo 211Wednesday, December 5, 12 12. Como inserir uma folha de estilo Existem trs formas de insero de folhas de estilo: Folhas de estilo externas (External Style Sheet) Folhas de estilo internas (Internal Style Sheet) Folhas de estilo inline12Wednesday, December 5, 12 13. Como inserir uma folha de estilo Folhas de estiloexternas 13Wednesday, December 5, 12 14. Como inserir uma folha de estilo Folhas de estiloIdeal para aplicar em vrias pginas externasCada pgina deve linkar pgina de estilo usando a tag A tag deve vir no cabealho do arquivo .html 14Wednesday, December 5, 12 15. Como inserir uma folha de estilo Folhas de estilo externas Para que a pgina default.htmlcarregue as regras de CSS denidasno arquivo style.css, utiliza-se aseguinte referncia:15Wednesday, December 5, 12 16. Como inserir uma folha de estilo Folhas de estiloexternas 16Wednesday, December 5, 12 17. Como inserir uma folha de estilo Folhas de estilo Outras formas de realizar a declarao externasde folhas de estilo externas 17Wednesday, December 5, 12 18. Como inserir uma folha de estilo Folhas de estilointernas18Wednesday, December 5, 12 19. Como inserir uma folha de estilo Folhas de estiloUtilizado quando um documentointernas tem um estilo nico 19Wednesday, December 5, 12 20. Como inserir uma folha de estilo Folhas de estilointernas20Wednesday, December 5, 12 21. Como inserir uma folha de estilo Folhas de estilointernas Folhas de estilointerna para sobrescrever a externa21Wednesday, December 5, 12 22. Como inserir uma folha de estilo Folhas de estiloinline22Wednesday, December 5, 12 23. Como inserir uma folha de estiloUsado quando um estilo deve ser Folhas de estilo aplicado num nico elemento; inlineMistura o contedo com a apresentao;O estilo denido dentro do elemento:

This is aparagraph.

23Wednesday, December 5, 12 24. Como inserir uma folha de estiloSe diferentes estilos forem denidos para um mesmo elemento, utilizando o mesmo SELETOR, prevalece o de maior prioridade CascadingOrdem crescente de prioridade (Cascading Order):1. Denio do navegador (Browser)2. Folhas de estilo externas3. Folhas de estilo internas4. Estilos inline 24Wednesday, December 5, 12 25. Como inserir uma folha de estiloFolhas de estiloFolhas de estilo externasinternas Folhas de estilo ... inline 25Wednesday, December 5, 12 26. Como inserir uma folha de estiloComo resultado do cascateamento dos estilos:color:red; Declarao Externatext-align:right;Declarao Internafont-size:30pt Declarao Inlineoutras configuraes Browser26Wednesday, December 5, 12 27. Agrupando elementos Usando classes Temos duas listas de links para diferentes tipos de uvas usadas na produo de vinho branco e de vinho tinto 27Wednesday, December 5, 12 28. Agrupando elementosQueremos que os links para vinho branco sejam na cor amarela, para vinho tinto na cor vermelha e os demais links na pgina permaneam na cor azul. 28Wednesday, December 5, 12 29. Agrupando elementosAgora podemos denir propriedades especcas para links pertencentes as classes whitewine e redwine, respectivamente. 29Wednesday, December 5, 12 30. Agrupando elementos Usando ID 30Wednesday, December 5, 12 31. Agrupando elementos Usando ID 31Wednesday, December 5, 12 32. Agrupando elementosOs elementos e

so usados para agrupar e estruturar um documento e so freqentemente usados em conjunto com os atributos class e id;O elemento um elemento neutro e que no adiciona qualquer tipo de semntica ao documento. Contudo, pode ser usado pelas CSS para adicionar efeitos visuais a partes especcas do texto no seu documento. 32Wednesday, December 5, 12 33. Agrupando elementosExemplo utilizando o elemento 33Wednesday, December 5, 12 34. Agrupando elementosObs: claro que voc pode usar id para estilizar o elemento ; contudo dever usar uma nica id para cada um os trs elementos .Enquanto usado dentro de um elemento no nvel de bloco,
usado para agrupar um ou mais elementos no nvel de bloco.34Wednesday, December 5, 12 35. Agrupando elementosExemplo utilizando o elemento
35Wednesday, December 5, 12 36. Agrupando elementosExemplo utilizando o elemento
36Wednesday, December 5, 12 37. Algumas propriedadesbackground-color37Wednesday, December 5, 12 38. Algumas propriedadesbackground-image38Wednesday, December 5, 12 39. Algumas propriedadesbackground-image mais dicashttp://maujor.com/tutorial/backtut.php39Wednesday, December 5, 12 40. Algumas propriedadesbackground-image mais dicasbackground-repeatbackground-attachmentbackground positionhttp://maujor.com/tutorial/backtut.php40Wednesday, December 5, 12 41. Algumas propriedadesline-height 41Wednesday, December 5, 12 42. Algumas propriedadestext-transform 42Wednesday, December 5, 12 43. Algumas propriedadestext-decoration 43Wednesday, December 5, 12 44. Algumas propriedadesfont-style 44Wednesday, December 5, 12 45. Onde procurar ajudawww.w3schools.comwww.pt-br.html.net/tutorials/css/www.maujor.com/tutorial/www.csszengarden.com/45Wednesday, December 5, 12 46. ExerccioFazer uma pgina web que apresente o seguinte contedo: 46Wednesday, December 5, 12