CSS
Upcoming SlideShare
Loading in...5
×
 

CSS

on

  • 286 views

 

Statistics

Views

Total Views
286
Views on SlideShare
286
Embed Views
0

Actions

Likes
0
Downloads
15
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS CSS Presentation Transcript

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Introdu¸˜o ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso D´vidas? u53 / 54 Ivo Calado IFALPrograma¸˜o Web ca
  • 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