Your SlideShare is downloading. ×
0
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS

175

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
175
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso Programa¸˜o Web ca Cascading Style Sheets Ivo Calado Instituto Federal de Educa¸˜o, Ciˆncia e Tecnologia de Alagoas ca e 7 de Maio de 20121 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 2. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoRoteiro 1 Introdu¸˜o ca 2 Sintaxe CSS 3 Tipos de CSS 4 Propriedades CSS 5 Casos de uso2 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 3. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoQual o problema com o HTML? Suponha que desejamos criar uma aplica¸˜o Web, quais seriam os ca passos? Definimos o conte´do que vamos querer exibir u3 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 4. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoQual o problema com o HTML? Suponha que desejamos criar uma aplica¸˜o Web, quais seriam os ca passos? Definimos o conte´do que vamos querer exibir u Definimos a estrutura¸˜o do conte´do na tela ca u3 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 5. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoQual o problema com o HTML? Suponha que desejamos criar uma aplica¸˜o Web, quais seriam os ca passos? Definimos o conte´do que vamos querer exibir u Definimos a estrutura¸˜o do conte´do na tela ca u Fazemos uso de tags para definirmos a hierarquia do conte´do u (tags <h>, por exemplo)3 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 6. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoQual o problema com o HTML? Suponha que desejamos criar uma aplica¸˜o Web, quais seriam os ca passos? Definimos o conte´do que vamos querer exibir u Definimos a estrutura¸˜o do conte´do na tela ca u Fazemos uso de tags para definirmos a hierarquia do conte´do u (tags <h>, por exemplo) Definimos a formata¸˜o a ser adotada (cores, tamanhos de ca fonte, espa¸amentos etc.) c3 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 7. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoQual o problema com o HTML? Suponha que desejamos criar uma aplica¸˜o Web, quais seriam os ca passos? Definimos o conte´do que vamos querer exibir u Definimos a estrutura¸˜o do conte´do na tela ca u Fazemos uso de tags para definirmos a hierarquia do conte´do u (tags <h>, por exemplo) Definimos a formata¸˜o a ser adotada (cores, tamanhos de ca fonte, espa¸amentos etc.) c Qual o problema com a abordagem anterior?3 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 8. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoQual o problema com o HTML? Suponha que desejamos criar uma aplica¸˜o Web, quais seriam os ca passos? Definimos o conte´do que vamos querer exibir u Definimos a estrutura¸˜o do conte´do na tela ca u Fazemos uso de tags para definirmos a hierarquia do conte´do u (tags <h>, por exemplo) Definimos a formata¸˜o a ser adotada (cores, tamanhos de ca fonte, espa¸amentos etc.) c Qual o problema com a abordagem anterior? Estamos acomplando o conte´do a ser exibido de sua formata¸˜o! u ca3 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 9. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoQual o problema com o HTML? Suponha que desejamos criar uma aplica¸˜o Web, quais seriam os ca passos? Definimos o conte´do que vamos querer exibir u Definimos a estrutura¸˜o do conte´do na tela ca u Fazemos uso de tags para definirmos a hierarquia do conte´do u (tags <h>, por exemplo) Definimos a formata¸˜o a ser adotada (cores, tamanhos de ca fonte, espa¸amentos etc.) c Qual o problema com a abordagem anterior? Estamos acomplando o conte´do a ser exibido de sua formata¸˜o! u ca ... considere um site que todos os anos altera o seu layout!3 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 10. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoQual o problema com o HTML?CSS: a solu¸˜o! ca Separa a marca¸˜o do HTML da apresenta¸˜o do site ca ca Agora a responsabilidade do HTML ´ apenas estruturar o e conte´do enquanto que o visual ´ de responsabilidade do CSS u e HTML marca e estrutura textos, cabe¸alhos, par´grafos, links, c a bot˜es, formul´rios, imagens e demais elementos da p´gina o a a CSS define cores, posicionamento na tela, estilos de linhas, bordas e tudo o mais relacionado ` apresenta¸˜o a ca4 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 11. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoDefini¸˜o caO que ´? e Acrˆnimo de Cascading Style Sheets o Define como os elementos HTML ser˜o exibidos a Foi adicionado ao HTML 4.0 Podem ser definidos tanto dentro do arquivo HTML quanto em um arquivo separado (*.css)5 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 12. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoDefini¸˜o caO que ´? e Acrˆnimo de Cascading Style Sheets o Define como os elementos HTML ser˜o exibidos a Foi adicionado ao HTML 4.0 Podem ser definidos tanto dentro do arquivo HTML quanto em um arquivo separado (*.css) Quando utilizar dentro do pr´prio HTML e quando deve estar em o um arquivo separado?5 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 13. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoDefini¸˜o caO que ´? e Acrˆnimo de Cascading Style Sheets o Define como os elementos HTML ser˜o exibidos a Foi adicionado ao HTML 4.0 Podem ser definidos tanto dentro do arquivo HTML quanto em um arquivo separado (*.css) Quando utilizar dentro do pr´prio HTML e quando deve estar em o um arquivo separado? Se a formata¸˜o representar poucos elementos, pode ser utilizado ca dentro do pr´prio arquivo. Por´m, se a formata¸˜o do CSS o e ca abranger todo o conte´do da p´gina e/ou a aplica¸˜o Web for u a ca composta de diversas p´ginas, deve ser utilizado em um arquivo a separado de modo a possibilitar reutiliza¸˜o! ca5 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 14. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoRegrasA regra CSS e sua sintaxe Uma regra CSS ´ uma declara¸˜o que segue uma sintaxe e ca pr´pria e que define como ser´ aplicado estilo a um ou mais o a elementos HTML Um conjunto de regras CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, comp˜e-se de trˆs o e partes: um seletor, uma propriedade e um valor e tem a seguinte sintaxe seletor { propriedade : valor ; }6 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 15. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoRegrasDefinindo os elementos Seletores: ´ o elemento HTML para qual a regra ser´ e a v´lida. Pode ser uma tag, uma classe, ou por uma ID etc. a (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...) Propriedade: ´ o atributo do elemento HTML ao qual ser´ e a aplicada a regra (por exemplo: font, color, background, etc...) Valor: ´ a caracter´ e ıstica espec´ ıfica a ser assumida pela propriedade7 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 16. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoRegrasDefinindo os elementos Seletores: ´ o elemento HTML para qual a regra ser´ e a v´lida. Pode ser uma tag, uma classe, ou por uma ID etc. a (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...) Propriedade: ´ o atributo do elemento HTML ao qual ser´ e a aplicada a regra (por exemplo: font, color, background, etc...) Valor: ´ a caracter´ e ıstica espec´ ıfica a ser assumida pela propriedade A atribui¸˜o dos valores `s propriedades ´ feito atraves do ca a e operador ’:’ e n˜o do operador ’=’ ! a7 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 17. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoRegrasDefinindo os elementos Seletores: ´ o elemento HTML para qual a regra ser´ e a v´lida. Pode ser uma tag, uma classe, ou por uma ID etc. a (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...) Propriedade: ´ o atributo do elemento HTML ao qual ser´ e a aplicada a regra (por exemplo: font, color, background, etc...) Valor: ´ a caracter´ e ıstica espec´ ıfica a ser assumida pela propriedade A atribui¸˜o dos valores `s propriedades ´ feito atraves do ca a e operador ’:’ e n˜o do operador ’=’ ! a O operador ’;’ ´ opcional se houver apenas uma propriedade ou no e caso da ultima! ´7 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 18. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoRegrasExemplos Listing 1: Elementos ’p’ e ’body’ customizados p { f o n t −s i z e : 12 px ; } body { c o l o r : #000000; b a c k g r o u n d : #FFFFFF ; f o n t −w e i g h t : b o l d ; } Listing 2: Altera¸˜o da fonte para o conte´do do elemento ’h3’ ca u h3 { f o n t −f a m i l y : " Comic Sans MS " }8 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 19. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoRegrasComent´rios a ´ E poss´ introduzir coment´rios ao longo das regras CSS. Para ıvel a tal, colocase entre os elementos /* */ seletor { p r o p r i e d a d e : v a l o r ; /∗O que e s t i v e r a q u i n˜ o s e r ´ a a considerado !∗/ }9 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 20. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoAgrupamento de seletoresO que ´ e como fazer? e Muitas vezes precisamos definir a mesma regra para v´rios a seletores Deste modo, ´ necess´rio agrupar todos os elementos em uma e a unica regra ´ Listing 3: Exemplo de agrupamento de seletores h1 , h2 , h3 , h4 , h5 , h6 { c o l o r : #00FF00 ; }10 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 21. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoSeletores class e idO seletor class At´ agora vimos a aplica¸˜o de estilos `s tags e ca a Mas quais s˜o as limita¸˜es disso? a co11 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 22. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoSeletores class e idO seletor class At´ agora vimos a aplica¸˜o de estilos `s tags e ca a Mas quais s˜o as limita¸˜es disso? a co N˜o ´ poss´ definir diferentes estilos ao mesmo tag ao a e ıvel mesmo tempo! Nestes casos fazem-se uso dos seletores class e id11 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 23. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoSeletores class e idO seletor class O seletor class permite que vocˆ defina seus pr´prios e o identificadores que s˜o utilizados nas regras de estilo. a elemento . minhaclasse { propriedade : valor ; } p . c o r −um { c o l o r :#000; } p . c o r −d o i s { c o l o r :#0 f f ; }12 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 24. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoSeletores class e idUsando o seletor class <p c l a s s =" cor - um "> e s t e p a r ´ g r a f o s e r ´ na c o r p r e t a .</ a a p> <p c l a s s =" cor - dois ">e s t e p a r ´ g r a f o s e r ´ na c o r a z u l .</ a a p>13 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 25. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoSeletores class e idExtendendo o seletor class para v´rias tags a Ao criar uma classe vocˆ talvez queira que ela seja aplic´vel a e a qualquer elemento HTML. Neste caso basta que se omita o nome do elemento antes da classe. . c o r −t r e s { c o l o r : #00 f ; }14 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 26. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoO seletor idUsando o seletor id ´ O seletor ID difere do seletor classe, por ser UNICO Um seletor ID de determinado nome s´ pode ser aplicado a o UM e somente UM elemento HTML dentro do documento #meuID { propriedade : valor ; } p#c o r { c o l o r : #00 f ; }15 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 27. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoO seletor idUsando o seletor id <p i d =" cor "> e s t e p a r ´ g r a f o s e r ´ na c o r p r e t a .</p> a a16 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 28. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoO seletor idQuando utilizar o seletor id e quando utilizar class17 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 29. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoO seletor idQuando utilizar o seletor id e quando utilizar class O seletor id deve ser usado quando apenas 1 elemento dever´ ser a alterado. O elemento class ser´ utilizado quando muitos elementos a ser˜o customizados a17 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 30. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoInser¸˜o de folhas de estilo ca Existem 3 formas de inser¸˜o de c´digo CSS ca o Defini¸˜o em arquivo externo ca Defini¸˜o no elemento header ca Defini¸˜o inline ca18 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 31. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFolhas de estilo externosFolhas de estilo externos Definido em um arquivo com extens˜o .css a Ap´s isso, ele ´ referenciado de duas formas o e <head> ... < l i n k r e l=" stylesheet " type=" text / css " h r e f=" estilo . css "> ... </ head> <head> ... < s t y l e type=" text / css "> @i mpo rt u r l ( " estilo . css " ) ; </ s t y l e> ...19 / 54 </ head> Ivo Calado IFALPrograma¸˜o Web ca
  • 32. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFolha de estilo definido no headerFolha de estilo definido no header As folhas de estilos s˜o definidos dentro da table style a <head> < s t y l e type=" text / css "> <!−− body { background : #000; u r l ( i m a g e n s / minhaimagem . g i f ) ; } h3 { c o l o r : #f 0 0 ; } p { margin− l e f t : 15 px ; p a d d i n g : 1 . 5 em ; } −−> </ s t y l e> </ head>20 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 33. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFolha de estilo inlineFolha de estilo inline O estilo ´ definido dentro do parˆmetro style e a21 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 34. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFolha de estilo inlineFolha de estilo inline O estilo ´ definido dentro do parˆmetro style e a <p s t y l e=" color :#000; margin : 5 px ;"> Aqui um p a r ´ g r a f o de c o r p r e t a e com 5 px n a s 4 a margens . </p>21 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 35. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoConflito entre estilos e efeito cascataConflito entre estilos O que acontece quando dois estilos s˜o aplicados ao mesmo a elemento em escopos diferentes?22 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 36. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoConflito entre estilos e efeito cascataConflito entre estilos O que acontece quando dois estilos s˜o aplicados ao mesmo a elemento em escopos diferentes? H´ uma situa¸˜o de conflito. a ca22 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 37. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoConflito entre estilos e efeito cascataConflito entre estilos O que acontece quando dois estilos s˜o aplicados ao mesmo a elemento em escopos diferentes? H´ uma situa¸˜o de conflito. a ca Neste caso ´ utilizado o efeito Cascata (Cascade) e Ent˜o o que acontece? a22 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 38. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoConflito entre estilos e efeito cascataConflito entre estilos O que acontece quando dois estilos s˜o aplicados ao mesmo a elemento em escopos diferentes? H´ uma situa¸˜o de conflito. a ca Neste caso ´ utilizado o efeito Cascata (Cascade) e ´ Ent˜o o que acontece? E utilizado o valor mais interno! a22 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 39. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFont e textCustomizando a fonte As propriedades para as fontes, definem as caracter´ ısticas (os valores na regra CSS) das letras que constituem os textos dentro dos elementos HTML color: cor da fonte font-family: tipo da fonte font-size: tamanho da fonte font-style: estilo da fonte font-variant: fontes mai´sculas de menor altura u font-weight: n´ de negrigo ıvel23 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 40. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFont e textColor Existem trˆs formas de representar cores: e24 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 41. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFont e textColor Existem trˆs formas de representar cores: e c´digo hexadecimal: #FFFFFF o c´digo rgb: rgb(255,235,0) o nome da cor: red, blue, green...etc Ver exemplo24 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 42. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFont e textFont-family Define o nome das fontes a serem utilizadas < s t y l e type=" text / css "> <!−− h2 { f o n t −f a m i l y : a r i a l , h e l v e t i c a , s e r i f ;} p { f o n t −f a m i l y : s a n s − s e r i f ; } −−> </ s t y l e>25 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 43. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFont e textFont-size Especifica o tamanho da fonte: xx-small x-small small medium ... length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) % Ver exemplo26 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 44. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFont e textFont-style Define estilos de fontes como it´lico, oblicuo a < s t y l e type=" text / css "> <!−− h1 { f o n t −s t y l e : i t a l i c ; } h2 { f o n t −s t y l e : n o r m a l ; } p { f o n t −s t y l e : o b l i q u e ; } −−> </ s t y l e>27 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 45. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFont e textfont-variant Define varia¸˜es para fontes. Existem duas variantes principais: co normal: fonte normal small-caps: transforma em mai´sculas de menor altura u < s t y l e type=" text / css "> <!−− h3 { f o n t −v a r i a n t : n o r m a l ; } p{ f o n t −v a r i a n t : s m a l l −c a p s ; } −−> p</ s t y l e>28 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 46. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFont e textfont-weight Define a intensidade da cor (n´ de negrito) ıvel normal bold bolder lighter 100 200 ... Ver exemplo29 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 47. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFont e textFormata¸˜o de texto ca Al´m das fontes, ´ poss´ realizar diversas customiza¸˜es no e e ıvel co texto propriamente dito letter-spacing: espa¸amento entre letras c word-spacing: espa¸amento entre palavras c text-align: alinhamento text-decoration: decora¸˜o de texto (underline, overline, ca blink etc) text-inden: identa¸˜o do texto ca text-transform: transforma¸˜o de texto (mai´sculo para ca u min´sculo e vice-versa) u white-space: especifica como os espa¸os em branco ser˜o c a tratados30 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 48. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFont e textletter-spacing normal: ´ o espa¸amento default e c lenght: uma medida reconhecida pelas CSS (px, pt, cm, ...) S˜o v´lidos valores negativos a a < s t y l e type=" text / css "> <!−− h2 { l e t t e r −s p a c i n g : 1 . 2 cm ; } p { l e t t e r −s p a c i n g : 0 . 4 cm ; } −−> </ s t y l e>31 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 49. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFont e textword-spacing Segue a mesma estrutura de espa¸amento de palavras c < s t y l e type=" text / css "> <!−− h2 { word−s p a c i n g : 1 . 8em; } p { word−s p a c i n g : 80 px ; } −−>32 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 50. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFont e texttext-align Define o estilo de alinhamento left right center justify Ver demais exemplos na p´gina... a33 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 51. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoFont e texttext-indent Especifica o recuo de um texto em termo de gradua¸˜o ca < s t y l e type=" text / css "> <!−− h3 { t e x t −i n d e n t : 80 px ; } p { t e x t −i n d e n t : 3em; } −−> </ s t y l e>34 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 52. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoMargens, bordas e paddingMargens A propriedade para margens, define um valor para espessura das margens dos elementos HTML margin-top margin-left margin-right margin-bottom < s t y l e type=" text / css "> <!−− p { margin−t o p : 2cm ; } −−> </ s t y l e>35 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 53. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoMargens, bordas e paddingBordas As propriedades para as bordas, definem as caracter´ ısticas (os valores na regra CSS) das quatro bordas de um elemento HTML Existem em torno de 20 diferentes propriedades que podem ser customizadas!! Todavia, todas as propriedades est˜o relacionadas ` largura, a a estilo e cor das bordas < s t y l e type=" text / css "> <!−− p { border −width : t h i n ; border −top−s t y l e : h i d d e n ; border −r i g h t −c o l o r : r g b ( 2 5 5 , 2 3 5 , 0 ) ; }36 / 54 −−> Ivo Calado IFALPrograma¸˜o Web ca
  • 54. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoMargens, bordas e paddingPadding Uma outra propriedade que pode ser configurada ´ a distˆncia e a entre a borda e o elemento HTML S˜o definidas as propriedades: padding-top, padding-right, a padding-bottom, padding-left < s t y l e type=" text / css "> <!−− p { p a d d i n g −t o p : 2cm ; } −−> </ s t y l e>37 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 55. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoMargens, bordas e paddingOutras propriedades CSS Al´m das propriedades j´ apresentadas, diversas outras op¸˜es de e a co configura¸˜o s˜o poss´ ca a ıveis, como: Background Listas Entrelinhas etc38 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 56. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoVisibilidade e PosicionamentoVisibilidade ´ E poss´ tornar um elemento “invis´ ıvel ıvel” a partir do CSS Existem duas op¸˜es com resultados levementes diferentes co h1 . h i d d e n { v i s i b i l i t y : h i d d e n ; } h1 . h i d d e n { d i s p l a y : none ; }39 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 57. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoVisibilidade e PosicionamentoPosicionamento Css possibilita customizar a posi¸˜o do elemento pretendido ca ´ E poss´ posicionar um elemento a esquerda, direita, cima, ıvel embaixo e inclusive com sobreposi¸˜o entre elementos ca O posicionamento de elementos podem ser fixos ou relativo40 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 58. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoVisibilidade e PosicionamentoElementos Fixos Elementos n˜o se movem com a barra de rolagem a p. pos fixed { position : fixed ; t o p : 3 0 px ; r i g h t : 5 px ; }41 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 59. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoVisibilidade e PosicionamentoPosicionamento relativo Aqui o posicionamento ´ relativo ao que deveria ser sua e posi¸˜o “original” ca h2 . p o s l e f t { position : relative ; l e f t : −20 px ; } h2 . p o s r i g h t { position : relative ; l e f t : 2 0 px ; }42 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 60. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoVisibilidade e PosicionamentoPosicionamento absoluto Com posicionamento absoluto ´ poss´ definir onde cada e ıvel elemento vai se encontrar exatamente Neste tipo de posi¸˜o pode haver sobreposi¸˜o de elementos ca ca h2 { position : absolute ; l e f t : 1 0 0 px ; t o p : 1 5 0 px ; }43 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 61. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoVisibilidade e PosicionamentoSobreposi¸˜o de elementos ca Conforme apresentado com o posicionamento absoluto, ´ e poss´ ocorrer sobreposi¸˜o de elementos ıvel ca Para tal, pode-se definir a ordem de qual elemento ser´ a exibido atrav´s do parˆmetro z-index e a img { position : absolute ; l e f t : 0 px ; t o p : 0 px ; z−i n d e x : −1 }44 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 62. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoPseudoclasses e PseudoelemtosPseudoclasses Em CSS pseudoclasses s˜o usada para adicionar efeitos especiais a a alguns seletores Sintaxe: s e l e c t o r : pseudo−c l a s s { p r o p e r t y : v a l u e ; } s e l e c t o r . c l a s s : pseudo−c l a s s { p r o p e r t y : v a l u e ; } Diversos tipos de pseudoclasses podem ser utilizadas Anchor (ˆncoras) a first-child Outros: focus, first-line, before, after etc.45 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 63. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoPseudoclasses e PseudoelemtosAncoras Links podem ser exibidos de diferentes formas em navegadores que suportam CSS a : l i n k { c o l o r :#FF0000 ; } /∗ u n v i s i t e d l i n k ∗/ a : v i s i t e d { c o l o r :#00 FF00 ; } /∗ v i s i t e d l i n k ∗/ a : h o v e r { c o l o r :#FF00FF ; } /∗ mouse o v e r l i n k ∗/ a : a c t i v e { c o l o r :#0000FF ; } /∗ s e l e c t e d l i n k ∗/ Notas a:hover DEVE ser apresentado ap´s a:link e a:visited na o defini¸˜o de CSS para que haja efeito ca a:active DEVE ser apresentado ap´s a:hover na defini¸˜o o ca CSS para que haja efeito46 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 64. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoPseudoclasses e PseudoelemtosA pseudoclasse :first-child Objetivo: customizar o primeiro elemento dentro de um outro elemento Listing 4: Encontra o primeiro elemento p < s t y l e type=" text / css "> p : f i r s t −c h i l d { color : blue ; } </ s t y l e>47 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 65. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoBarras de navega¸˜o caBarra de Navega¸˜o Horizontal ca A cria¸˜o de barras de navega¸˜o ´ importante em qualquer ca ca e Website Com CSS ´ poss´ transformar menus HTML em barras de e ıvel navega¸˜o estilizadas ca48 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 66. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoBarras de navega¸˜o caBarra de Navega¸˜o Horizontal ca A cria¸˜o de barras de navega¸˜o ´ importante em qualquer ca ca e Website Com CSS ´ poss´ transformar menus HTML em barras de e ıvel navega¸˜o estilizadas ca Barras de navega¸˜o == Lista de links!! ca Uma barra de navega¸˜o ´ basicamente uma lista de links ca e48 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 67. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoBarras de navega¸˜o caPasso 1: cria¸˜o da lista de links ca <u l> < l i ><a h r e f=" home . html ">Home</a></ l i > < l i ><a h r e f=" noticias . html ">News</a></ l i > < l i ><a h r e f=" contatos . html ">C o n t a c t</a></ l i > < l i ><a h r e f=" sobre . html ">About</a></ l i > </ u l>49 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 68. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoBarras de navega¸˜o caPasso 2: remover marcadores da lista e espa¸os c ul { l i s t −s t y l e −t y p e : none ; /∗ Remove o s m a r c a d o r e s ∗/ m a r g i n : 0 ; /∗ Remove e s p a c o e n t r e a margem ∗/ ¸ p a d d i n g : 0 ; /∗ Remove e s p a c o i n t e r n o da c ´ l u l a ∗/ ¸ e } li { float : left ; }50 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 69. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoBarras de navega¸˜o caPassou 3: definido comportamento dos links a : link , a : visited { display : block ; w i d t h : 1 2 0 px ; f o n t −w e i g h t : b o l d ; c o l o r :#FFFFFF ; b a c k g r o u n d −c o l o r :#98 b f 2 1 ; t e x t −a l i g n : c e n t e r ; p a d d i n g : 4 px ; t e x t −d e c o r a t i o n : none ; t e x t −t r a n s f o r m : u p p e r c a s e ; } a : hover , a : a c t i v e { b a c k g r o u n d −c o l o r :#7A991A ; }51 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 70. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoBarras de navega¸˜o caBarra de navega¸˜o vertical ca Para transformar nosso exemplo em uma barra vertical temos apenas de retirar a flutua¸˜o dos elementos ca li { float : left ; }52 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 71. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso D´vidas? u53 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 72. Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de usoExerc´ I ıcio Com base no HTML apresentado aqui http://paste.pocoo.org/raw/382563/, crie uma p´gina como a esta: http://tinyurl.com/5t8fg4d Altere o c´digo apresentado em o http://paste.pocoo.org/raw/382566/ retirando todo o conte´do de formata¸˜o e movendo-o para um conte´do CSS u ca u Altere o html (http://maujor.com/temas/html- padrao zengarden-maujor.zip) adicionando as devidas formata¸˜es CSS. Usem inser¸˜o de imagens, posicionamento, co ca transparˆncia, altera¸˜o de fontes etc. Sejam criativos!! :) e ca54 / 54 Ivo Calado IFALPrograma¸˜o Web ca

×