CSS1. © 2010 IBM Corporation
ibm.com
GWPS – Queue 1
Cascading Style Sheets
Rafael Cavalcante
November 2010
2. © 2010 IBM Corporation
ibm.com inside sales
2
“o que é?”
3. © 2010 IBM Corporation
ibm.com inside sales
3
o que é?
- “bla bla bla bla bla...”
- pt.wikipedia.org (Cascading Style Sheets)
4. © 2010 IBM Corporation
ibm.com inside sales
4
o que é?
A seguir vocês vão ver algumas imagens de como
uma página deve ser SEM o CSS.
Vou usar o portal Terra como exemplo.
5. © 2010 IBM Corporation
ibm.com inside sales
5
o que é?
6. © 2010 IBM Corporation
ibm.com inside sales
6
o que é?
Um dos milhares de padrões para o desenvolvimento
para a web impõe que toda imagem que não tenha
relação ao conteúdo deve ser declara/inserida por
CSS. Repare que as imagens que você vê na página
dop terra são relacionadas ao conteúdo (notícia).
7. © 2010 IBM Corporation
ibm.com inside sales
7
o que é?
8. © 2010 IBM Corporation
ibm.com inside sales
8
“css é experiência”
Breve explicação sobre conhecimento de CSS
9. © 2010 IBM Corporation
ibm.com inside sales
9
“qualidade versus quantidade”
Tempo/Quantidade/Verba X Qualidade
10. © 2010 IBM Corporation
ibm.com inside sales
10
“Ids são únicas, classes são rangers”
Um dos erros mais praticados
11. © 2010 IBM Corporation
ibm.com inside sales
11
@import ou <link>?
Dúvida de Rafael Guerra e Thiago Turra
12. © 2010 IBM Corporation
ibm.com inside sales
12
o que é o tal do “em”?
Dúvida de Guilherme Camillo
13. © 2010 IBM Corporation
ibm.com inside sales
13
o que é o tal do “em”?
Dúvida de Guilherme Camillo
14. © 2010 IBM Corporation
ibm.com inside sales
14
layouts “líquidos”
Dúvida de Gabriel Basan
15. © 2010 IBM Corporation
ibm.com inside sales
15
-moz-bla-bla-bla
Dúvida de Bruno Talanski
16. © 2010 IBM Corporation
ibm.com inside sales
16
-moz-bla-bla-bla
Dúvida de Bruno Talanski
17. © 2010 IBM Corporation
ibm.com inside sales
17
position
18. © 2010 IBM Corporation
ibm.com inside sales
18
css box model
19. © 2010 IBM Corporation
ibm.com inside sales
19
css box model
Muita gente ainda tem dúvidas de como fica um box
em CSS, confunde padding com margin, não sabe
onde ficam as coisas...
Fonte: W3Schools
20. © 2010 IBM Corporation
ibm.com inside sales
20
css box model
Você estipula 4 valores em algumas propriedades,
como margin e padding, sendo que cada valor
corresponde à um lado.
Fonte: Eu mesmo *coolface*
#box {
margin-top:10px;
margin-bottom:20px;
margin-right:30px;
margin-left:40px;
}
21. © 2010 IBM Corporation
ibm.com inside sales
21
css box model
Declarando de um jeito mais reduzido, você pode
usar:
#box {
margin:10px 30px 20px 40px;
}
A lógica por trás dessa declaração é que você declara
primeiro o valor de cima e depois declara o resto em
sentido horário. Ex: Cima, Direita, Baixo, Esquerda.
Mais à frente veremos mais declarações reduzidas.
22. © 2010 IBM Corporation
ibm.com inside sales
22
sprites (com background position)
Brinde
23. © 2010 IBM Corporation
ibm.com inside sales
23
sprites
O uso de sprites tem como objetivo requisitar menos
coisas do servidor. Pensando em longo prazo, vale
muito a pena. Pode ser a diferença entre o servidor
cair ou não.
A seguir mostro dois exemplos...
24. © 2010 IBM Corporation
ibm.com inside sales
24
sprites
Portfólio de Ricardo Saavedra (na página)
25. © 2010 IBM Corporation
ibm.com inside sales
25
sprites
Portfólio de Ricardo Saavedra (sprite)
26. © 2010 IBM Corporation
ibm.com inside sales
26
sprites
Aqui estão os sprites na página. Legal, né?
27. © 2010 IBM Corporation
ibm.com inside sales
27
sprites
Aqui estão os sprites na página. Legal, né?
28. © 2010 IBM Corporation
ibm.com inside sales
28
sprites
Quando você acessa a tela de login do Gmail, também
recebe um sprite. Olhe o botão e a imagem de fundo
dele:
29. © 2010 IBM Corporation
ibm.com inside sales
29
sprites
O sprite funciona assim:
Uma DIV (ou outra coisa) O sprite
30. © 2010 IBM Corporation
ibm.com inside sales
30
sprites
Exemplo (situação):
Quero fazer um botão que fique opaco mas que fique com as cores
normais quando eu passar o mouse em cima...]
#facebook {
background-image:url(facebook.jpg);
background-position:bottom;
}
#facebook:hover {
background-position:top;
}
31. © 2010 IBM Corporation
ibm.com inside sales
31
sprites
Resultado
Você pode ver abaixo as como o botão fica quando fica em estado
normal e como fica quando o usuário coloca o mouse em cima,
respectivamente.
32. © 2010 IBM Corporation
ibm.com inside sales
32
tunning, otimização, etc.
Brinde!
33. © 2010 IBM Corporation
ibm.com inside sales
33
tunning, otimização, etc.
O CSS permite que você faça declarações mais curtas
e com o mesmo efeito das normais.
para fixar:
Repare primeiro prefixo de cada propriedade
34. © 2010 IBM Corporation
ibm.com inside sales
34
tunning, otimização, etc.
#wrapper {
font-size:12px;
font-family:arial;
font-style:normal;
}
reparou no prefixo “font” ?
35. © 2010 IBM Corporation
ibm.com inside sales
35
tunning, otimização, etc.
#wrapper {
font:12px Arial normal;
}
Pronto ;)
36. © 2010 IBM Corporation
ibm.com inside sales
36
no-wrap
37. © 2010 IBM Corporation
ibm.com inside sales
37
no-wrap
Fonte: Six Revisions (sixrevisions.com)
Usado raramente, porém é bem útil (esteticamente
falando). Aqui vai um exemplo de antes e depois de
usar a tag “no-wrap” em um “a” (link).
Sem no-wrap a { white-space: nowrap; }
38. © 2010 IBM Corporation
ibm.com inside sales
38
line-height
39. © 2010 IBM Corporation
ibm.com inside sales
39
line-height
Fonte: Six Revisions (sixrevisions.com)
O texto sempre será alinhado verticalmente no centro de uma linha.
O exemplo funciona dentro de uma div com 100px de altura e
largura.
div p { text-align:center; }
O texto sempre será alinhado verticalmente no centro de uma linha.
O exemplo funciona dentro de uma div com 100px de altura e
largura.
div p {
text-align:center;
line-height:100px;
}
40. © 2010 IBM Corporation
ibm.com inside sales
40
quer mais?
- maujor.com
- w3schools.com/css
- apostilando.com/
- csszengarden.com
- w3.org/Style/CSS/
41. © 2010 IBM Corporation
ibm.com inside sales
41
Os companheiros
- firebug
- css validator
- google reader
- networking, forums e grupos
- projetos pessoais
42. © 2010 IBM Corporation
ibm.com inside sales
42
43. © 2010 IBM Corporation
ibm.com inside sales
43
OBRIGADOOBRIGADO