© 2010 IBM Corporation
ibm.com
GWPS – Queue 1
Cascading Style Sheets
Rafael Cavalcante
November 2010
© 2010 IBM Corporation
ibm.com inside sales
2
“o que é?”
© 2010 IBM Corporation
ibm.com inside sales
3
o que é?
- “bla bla bla bla bla...”
- pt.wikipedia.org (Cascading Style Shee...
© 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 ...
© 2010 IBM Corporation
ibm.com inside sales
5
o que é?
© 2010 IBM Corporation
ibm.com inside sales
6
o que é?
Um dos milhares de padrões para o desenvolvimento
para a web impõe ...
© 2010 IBM Corporation
ibm.com inside sales
7
o que é?
© 2010 IBM Corporation
ibm.com inside sales
8
“css é experiência”
Breve explicação sobre conhecimento de CSS
© 2010 IBM Corporation
ibm.com inside sales
9
“qualidade versus quantidade”
Tempo/Quantidade/Verba X Qualidade
© 2010 IBM Corporation
ibm.com inside sales
10
“Ids são únicas, classes são rangers”
Um dos erros mais praticados
© 2010 IBM Corporation
ibm.com inside sales
11
@import ou <link>?
Dúvida de Rafael Guerra e Thiago Turra
© 2010 IBM Corporation
ibm.com inside sales
12
o que é o tal do “em”?
Dúvida de Guilherme Camillo
© 2010 IBM Corporation
ibm.com inside sales
13
o que é o tal do “em”?
Dúvida de Guilherme Camillo
© 2010 IBM Corporation
ibm.com inside sales
14
layouts “líquidos”
Dúvida de Gabriel Basan
© 2010 IBM Corporation
ibm.com inside sales
15
-moz-bla-bla-bla
Dúvida de Bruno Talanski
© 2010 IBM Corporation
ibm.com inside sales
16
-moz-bla-bla-bla
Dúvida de Bruno Talanski
© 2010 IBM Corporation
ibm.com inside sales
17
position
© 2010 IBM Corporation
ibm.com inside sales
18
css box model
© 2010 IBM Corporation
ibm.com inside sales
19
css box model
Muita gente ainda tem dúvidas de como fica um box
em CSS, con...
© 2010 IBM Corporation
ibm.com inside sales
20
css box model
Você estipula 4 valores em algumas propriedades,
como margin ...
© 2010 IBM Corporation
ibm.com inside sales
21
css box model
Declarando de um jeito mais reduzido, você pode
usar:
#box {
...
© 2010 IBM Corporation
ibm.com inside sales
22
sprites (com background position)
Brinde
© 2010 IBM Corporation
ibm.com inside sales
23
sprites
O uso de sprites tem como objetivo requisitar menos
coisas do servi...
© 2010 IBM Corporation
ibm.com inside sales
24
sprites
Portfólio de Ricardo Saavedra (na página)
© 2010 IBM Corporation
ibm.com inside sales
25
sprites
Portfólio de Ricardo Saavedra (sprite)
© 2010 IBM Corporation
ibm.com inside sales
26
sprites
Aqui estão os sprites na página. Legal, né?
© 2010 IBM Corporation
ibm.com inside sales
27
sprites
Aqui estão os sprites na página. Legal, né?
© 2010 IBM Corporation
ibm.com inside sales
28
sprites
Quando você acessa a tela de login do Gmail, também
recebe um sprit...
© 2010 IBM Corporation
ibm.com inside sales
29
sprites
O sprite funciona assim:
Uma DIV (ou outra coisa) O sprite
© 2010 IBM Corporation
ibm.com inside sales
30
sprites
Exemplo (situação):
Quero fazer um botão que fique opaco mas que fi...
© 2010 IBM Corporation
ibm.com inside sales
31
sprites
Resultado
Você pode ver abaixo as como o botão fica quando fica em ...
© 2010 IBM Corporation
ibm.com inside sales
32
tunning, otimização, etc.
Brinde!
© 2010 IBM Corporation
ibm.com inside sales
33
tunning, otimização, etc.
O CSS permite que você faça declarações mais curt...
© 2010 IBM Corporation
ibm.com inside sales
34
tunning, otimização, etc.
#wrapper {
font-size:12px;
font-family:arial;
fon...
© 2010 IBM Corporation
ibm.com inside sales
35
tunning, otimização, etc.
#wrapper {
font:12px Arial normal;
}
Pronto ;)
© 2010 IBM Corporation
ibm.com inside sales
36
no-wrap
© 2010 IBM Corporation
ibm.com inside sales
37
no-wrap
Fonte: Six Revisions (sixrevisions.com)
Usado raramente, porém é be...
© 2010 IBM Corporation
ibm.com inside sales
38
line-height
© 2010 IBM Corporation
ibm.com inside sales
39
line-height
Fonte: Six Revisions (sixrevisions.com)
O texto sempre será ali...
© 2010 IBM Corporation
ibm.com inside sales
40
quer mais?
- maujor.com
- w3schools.com/css
- apostilando.com/
- csszengard...
© 2010 IBM Corporation
ibm.com inside sales
41
Os companheiros
- firebug
- css validator
- google reader
- networking, for...
© 2010 IBM Corporation
ibm.com inside sales
42
© 2010 IBM Corporation
ibm.com inside sales
43
OBRIGADOOBRIGADO
Upcoming SlideShare
Loading in...5
×

CSS

480

Published on

Apresentação feita para o debate sobre CSS @ IBM

Este slide não está completo. Em breve postarei um próximo com tudo comentado, irei transcrever a parte que foi conversada, ja que algumas páginas apresentam somente os tópicos.

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
480
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS

  1. 1. © 2010 IBM Corporation ibm.com GWPS – Queue 1 Cascading Style Sheets Rafael Cavalcante November 2010
  2. 2. © 2010 IBM Corporation ibm.com inside sales 2 “o que é?”
  3. 3. © 2010 IBM Corporation ibm.com inside sales 3 o que é? - “bla bla bla bla bla...” - pt.wikipedia.org (Cascading Style Sheets)
  4. 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. 5. © 2010 IBM Corporation ibm.com inside sales 5 o que é?
  6. 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. 7. © 2010 IBM Corporation ibm.com inside sales 7 o que é?
  8. 8. © 2010 IBM Corporation ibm.com inside sales 8 “css é experiência” Breve explicação sobre conhecimento de CSS
  9. 9. © 2010 IBM Corporation ibm.com inside sales 9 “qualidade versus quantidade” Tempo/Quantidade/Verba X Qualidade
  10. 10. © 2010 IBM Corporation ibm.com inside sales 10 “Ids são únicas, classes são rangers” Um dos erros mais praticados
  11. 11. © 2010 IBM Corporation ibm.com inside sales 11 @import ou <link>? Dúvida de Rafael Guerra e Thiago Turra
  12. 12. © 2010 IBM Corporation ibm.com inside sales 12 o que é o tal do “em”? Dúvida de Guilherme Camillo
  13. 13. © 2010 IBM Corporation ibm.com inside sales 13 o que é o tal do “em”? Dúvida de Guilherme Camillo
  14. 14. © 2010 IBM Corporation ibm.com inside sales 14 layouts “líquidos” Dúvida de Gabriel Basan
  15. 15. © 2010 IBM Corporation ibm.com inside sales 15 -moz-bla-bla-bla Dúvida de Bruno Talanski
  16. 16. © 2010 IBM Corporation ibm.com inside sales 16 -moz-bla-bla-bla Dúvida de Bruno Talanski
  17. 17. © 2010 IBM Corporation ibm.com inside sales 17 position
  18. 18. © 2010 IBM Corporation ibm.com inside sales 18 css box model
  19. 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. 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. 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. 22. © 2010 IBM Corporation ibm.com inside sales 22 sprites (com background position) Brinde
  23. 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. 24. © 2010 IBM Corporation ibm.com inside sales 24 sprites Portfólio de Ricardo Saavedra (na página)
  25. 25. © 2010 IBM Corporation ibm.com inside sales 25 sprites Portfólio de Ricardo Saavedra (sprite)
  26. 26. © 2010 IBM Corporation ibm.com inside sales 26 sprites Aqui estão os sprites na página. Legal, né?
  27. 27. © 2010 IBM Corporation ibm.com inside sales 27 sprites Aqui estão os sprites na página. Legal, né?
  28. 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. 29. © 2010 IBM Corporation ibm.com inside sales 29 sprites O sprite funciona assim: Uma DIV (ou outra coisa) O sprite
  30. 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. 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. 32. © 2010 IBM Corporation ibm.com inside sales 32 tunning, otimização, etc. Brinde!
  33. 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. 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. 35. © 2010 IBM Corporation ibm.com inside sales 35 tunning, otimização, etc. #wrapper { font:12px Arial normal; } Pronto ;)
  36. 36. © 2010 IBM Corporation ibm.com inside sales 36 no-wrap
  37. 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. 38. © 2010 IBM Corporation ibm.com inside sales 38 line-height
  39. 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. 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. 41. © 2010 IBM Corporation ibm.com inside sales 41 Os companheiros - firebug - css validator - google reader - networking, forums e grupos - projetos pessoais
  42. 42. © 2010 IBM Corporation ibm.com inside sales 42
  43. 43. © 2010 IBM Corporation ibm.com inside sales 43 OBRIGADOOBRIGADO
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×