css
DESCRIPTION
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.TRANSCRIPT
![Page 1: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/1.jpg)
© 2010 IBM Corporation
ibm.com GWPS – Queue 1Cascading Style Sheets
Rafael CavalcanteNovember 2010
![Page 2: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/2.jpg)
© 2010 IBM Corporation
ibm.com inside sales
2
“o que é?”
![Page 3: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/3.jpg)
© 2010 IBM Corporation
ibm.com inside sales
3
o que é?
- “bla bla bla bla bla...” - pt.wikipedia.org (Cascading Style Sheets)
![Page 4: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/4.jpg)
© 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.
![Page 5: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/5.jpg)
© 2010 IBM Corporation
ibm.com inside sales
5
o que é?
![Page 6: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/6.jpg)
© 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).
![Page 7: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/7.jpg)
© 2010 IBM Corporation
ibm.com inside sales
7
o que é?
![Page 8: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/8.jpg)
© 2010 IBM Corporation
ibm.com inside sales
8
“css é experiência”
Breve explicação sobre conhecimento de CSS
![Page 9: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/9.jpg)
© 2010 IBM Corporation
ibm.com inside sales
9
“qualidade versus quantidade”
Tempo/Quantidade/Verba X Qualidade
![Page 10: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/10.jpg)
© 2010 IBM Corporation
ibm.com inside sales
10
“Ids são únicas, classes são rangers”
Um dos erros mais praticados
![Page 11: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/11.jpg)
© 2010 IBM Corporation
ibm.com inside sales
11
@import ou <link>?
Dúvida de Rafael Guerra e Thiago Turra
![Page 12: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/12.jpg)
© 2010 IBM Corporation
ibm.com inside sales
12
o que é o tal do “em”?
Dúvida de Guilherme Camillo
![Page 13: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/13.jpg)
© 2010 IBM Corporation
ibm.com inside sales
13
o que é o tal do “em”?
Dúvida de Guilherme Camillo
![Page 14: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/14.jpg)
© 2010 IBM Corporation
ibm.com inside sales
14
layouts “líquidos”
Dúvida de Gabriel Basan
![Page 15: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/15.jpg)
© 2010 IBM Corporation
ibm.com inside sales
15
-moz-bla-bla-bla
Dúvida de Bruno Talanski
![Page 16: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/16.jpg)
© 2010 IBM Corporation
ibm.com inside sales
16
-moz-bla-bla-bla
Dúvida de Bruno Talanski
![Page 17: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/17.jpg)
© 2010 IBM Corporation
ibm.com inside sales
17
position
![Page 18: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/18.jpg)
© 2010 IBM Corporation
ibm.com inside sales
18
css box model
![Page 19: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/19.jpg)
© 2010 IBM Corporation
ibm.com inside sales
19
css box modelMuita 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
![Page 20: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/20.jpg)
© 2010 IBM Corporation
ibm.com inside sales
20
css box modelVocê 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;}
![Page 21: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/21.jpg)
© 2010 IBM Corporation
ibm.com inside sales
21
css box modelDeclarando 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 emsentido horário. Ex: Cima, Direita, Baixo, Esquerda.Mais à frente veremos mais declarações reduzidas.
![Page 22: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/22.jpg)
© 2010 IBM Corporation
ibm.com inside sales
22
sprites (com background position)
Brinde
![Page 23: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/23.jpg)
© 2010 IBM Corporation
ibm.com inside sales
23
spritesO 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...
![Page 24: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/24.jpg)
© 2010 IBM Corporation
ibm.com inside sales
24
spritesPortfólio de Ricardo Saavedra (na página)
![Page 25: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/25.jpg)
© 2010 IBM Corporation
ibm.com inside sales
25
spritesPortfólio de Ricardo Saavedra (sprite)
![Page 26: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/26.jpg)
© 2010 IBM Corporation
ibm.com inside sales
26
spritesAqui estão os sprites na página. Legal, né?
![Page 27: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/27.jpg)
© 2010 IBM Corporation
ibm.com inside sales
27
spritesAqui estão os sprites na página. Legal, né?
![Page 28: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/28.jpg)
© 2010 IBM Corporation
ibm.com inside sales
28
spritesQuando você acessa a tela de login do Gmail, também recebe um sprite. Olhe o botão e a imagem de fundo dele:
![Page 29: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/29.jpg)
© 2010 IBM Corporation
ibm.com inside sales
29
spritesO sprite funciona assim:
Uma DIV (ou outra coisa) O sprite
![Page 30: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/30.jpg)
© 2010 IBM Corporation
ibm.com inside sales
30
spritesExemplo (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;}
![Page 31: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/31.jpg)
© 2010 IBM Corporation
ibm.com inside sales
31
spritesResultado
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.
![Page 32: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/32.jpg)
© 2010 IBM Corporation
ibm.com inside sales
32
tunning, otimização, etc.
Brinde!
![Page 33: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/33.jpg)
© 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
![Page 34: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/34.jpg)
© 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” ?
![Page 35: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/35.jpg)
© 2010 IBM Corporation
ibm.com inside sales
35
tunning, otimização, etc.
#wrapper {font:12px Arial normal;}
Pronto ;)
![Page 36: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/36.jpg)
© 2010 IBM Corporation
ibm.com inside sales
36
no-wrap
![Page 37: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/37.jpg)
© 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; }
![Page 38: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/38.jpg)
© 2010 IBM Corporation
ibm.com inside sales
38
line-height
![Page 39: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/39.jpg)
© 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;}
![Page 40: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/40.jpg)
© 2010 IBM Corporation
ibm.com inside sales
40
quer mais?
- maujor.com - w3schools.com/css - apostilando.com/ - csszengarden.com - w3.org/Style/CSS/
![Page 41: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/41.jpg)
© 2010 IBM Corporation
ibm.com inside sales
41
Os companheiros
- firebug - css validator - google reader - networking, forums e grupos - projetos pessoais
![Page 42: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/42.jpg)
© 2010 IBM Corporation
ibm.com inside sales
42
![Page 43: CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051609/54803b9ab4af9f104e8b4610/html5/thumbnails/43.jpg)
© 2010 IBM Corporation
ibm.com inside sales
43
OBRIGADOOBRIGADO