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 2012
1 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

2. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Roteiro
1 Introdu¸˜o
ca
2 Sintaxe CSS
3 Tipos de CSS
4 Propriedades CSS
5 Casos de uso
2 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

3. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Qual 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
3 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

4. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Qual 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
3 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

5. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Qual 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 IFAL
Programa¸˜o Web
ca

6. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Qual 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
3 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

7. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Qual 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 IFAL
Programa¸˜o Web
ca

8. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Qual 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
3 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

9. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Qual 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 IFAL
Programa¸˜o Web
ca

10. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Qual 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 ca
4 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

11. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Defini¸˜o
ca
O 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 IFAL
Programa¸˜o Web
ca

12. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Defini¸˜o
ca
O 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 IFAL
Programa¸˜o Web
ca

13. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Defini¸˜o
ca
O 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!
ca
5 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

14. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Regras
A 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 IFAL
Programa¸˜o Web
ca

15. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Regras
Definindo 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
7 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

16. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Regras
Definindo 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
7 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

17. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Regras
Definindo 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 IFAL
Programa¸˜o Web
ca

18. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Regras
Exemplos
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 IFAL
Programa¸˜o Web
ca

19. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Regras
Coment´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 IFAL
Programa¸˜o Web
ca

20. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Agrupamento de seletores
O 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 IFAL
Programa¸˜o Web
ca

21. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Seletores class e id
O 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
11 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

22. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Seletores class e id
O 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 id
11 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

23. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Seletores class e id
O 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 IFAL
Programa¸˜o Web
ca

24. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Seletores class e id
Usando 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 IFAL
Programa¸˜o Web
ca

25. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Seletores class e id
Extendendo 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 IFAL
Programa¸˜o Web
ca

26. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
O seletor id
Usando 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 IFAL
Programa¸˜o Web
ca

27. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
O seletor id
Usando 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 a
16 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

28. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
O seletor id
Quando utilizar o seletor id e quando utilizar class
17 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

29. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
O seletor id
Quando 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
a
17 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

30. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Inser¸˜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
ca
18 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

31. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Folhas de estilo externos
Folhas 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 IFAL
Programa¸˜o Web
ca

32. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Folha de estilo definido no header
Folha 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 IFAL
Programa¸˜o Web
ca

33. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Folha de estilo inline
Folha de estilo inline
O estilo ´ definido dentro do parˆmetro style
e a
21 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

34. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Folha de estilo inline
Folha 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 IFAL
Programa¸˜o Web
ca

35. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Conflito entre estilos e efeito cascata
Conflito entre estilos
O que acontece quando dois estilos s˜o aplicados ao mesmo
a
elemento em escopos diferentes?
22 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

36. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Conflito entre estilos e efeito cascata
Conflito 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
22 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

37. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Conflito entre estilos e efeito cascata
Conflito 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?
a
22 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

38. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Conflito entre estilos e efeito cascata
Conflito 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!
a
22 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

39. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Font e text
Customizando 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
ıvel
23 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

40. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Font e text
Color
Existem trˆs formas de representar cores:
e
24 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

41. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Font e text
Color
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 exemplo
24 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

42. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Font e text
Font-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 IFAL
Programa¸˜o Web
ca

43. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Font e text
Font-size
Especifica o tamanho da fonte:
xx-small
x-small
small
medium
...
length: uma medida reconhecida pelas CSS (px, pt, em, cm,
...)
%
Ver exemplo
26 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

44. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Font e text
Font-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 IFAL
Programa¸˜o Web
ca

45. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Font e text
font-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 IFAL
Programa¸˜o Web
ca

46. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Font e text
font-weight
Define a intensidade da cor (n´ de negrito)
ıvel
normal
bold
bolder
lighter
100
200
...
Ver exemplo
29 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

47. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Font e text
Formata¸˜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
tratados
30 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

48. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Font e text
letter-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 IFAL
Programa¸˜o Web
ca

49. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Font e text
word-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 IFAL
Programa¸˜o Web
ca

50. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Font e text
text-align
Define o estilo de alinhamento
left
right
center
justify
Ver demais exemplos na p´gina...
a
33 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

51. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Font e text
text-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 IFAL
Programa¸˜o Web
ca

52. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Margens, bordas e padding
Margens
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 IFAL
Programa¸˜o Web
ca

53. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Margens, bordas e padding
Bordas
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 IFAL
Programa¸˜o Web
ca

54. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Margens, bordas e padding
Padding
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 IFAL
Programa¸˜o Web
ca

55. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Margens, bordas e padding
Outras 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
etc
38 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

56. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Visibilidade e Posicionamento
Visibilidade
´
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 IFAL
Programa¸˜o Web
ca

57. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Visibilidade e Posicionamento
Posicionamento
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 relativo
40 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

58. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Visibilidade e Posicionamento
Elementos 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 IFAL
Programa¸˜o Web
ca

59. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Visibilidade e Posicionamento
Posicionamento 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 IFAL
Programa¸˜o Web
ca

60. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Visibilidade e Posicionamento
Posicionamento 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 IFAL
Programa¸˜o Web
ca

61. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Visibilidade e Posicionamento
Sobreposi¸˜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 IFAL
Programa¸˜o Web
ca

62. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Pseudoclasses e Pseudoelemtos
Pseudoclasses
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 IFAL
Programa¸˜o Web
ca

63. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Pseudoclasses e Pseudoelemtos
Ancoras
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 efeito
46 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

64. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Pseudoclasses e Pseudoelemtos
A 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 IFAL
Programa¸˜o Web
ca

65. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Barras de navega¸˜o
ca
Barra 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
48 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

66. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Barras de navega¸˜o
ca
Barra 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 e
48 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

67. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Barras de navega¸˜o
ca
Passo 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 IFAL
Programa¸˜o Web
ca

68. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Barras de navega¸˜o
ca
Passo 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 IFAL
Programa¸˜o Web
ca

69. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Barras de navega¸˜o
ca
Passou 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 IFAL
Programa¸˜o Web
ca

70. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Barras de navega¸˜o
ca
Barra 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 IFAL
Programa¸˜o Web
ca

71. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
D´vidas?
u
53 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca

72. Introdu¸˜o
ca Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso
Exerc´ 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 ca
54 / 54 Ivo Calado IFAL
Programa¸˜o Web
ca