CSS

© 2010 IBM Corporation
ibm.com
GWPS – Queue 1
Cascading Style Sheets
Rafael Cavalcante
November 2010

ibm.com inside sales
2
“o que é?”

3
o que é?
- “bla bla bla bla bla...”
- pt.wikipedia.org (Cascading Style Sheets)

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
o que é?

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
o que é?

8
“css é experiência”
Breve explicação sobre conhecimento de CSS

9
“qualidade versus quantidade”
Tempo/Quantidade/Verba X Qualidade

10
“Ids são únicas, classes são rangers”
Um dos erros mais praticados

11
@import ou <link>?
Dúvida de Rafael Guerra e Thiago Turra

12
o que é o tal do “em”?
Dúvida de Guilherme Camillo

13
o que é o tal do “em”?
Dúvida de Guilherme Camillo

14
layouts “líquidos”
Dúvida de Gabriel Basan

15
-moz-bla-bla-bla
Dúvida de Bruno Talanski

16
-moz-bla-bla-bla
Dúvida de Bruno Talanski

17
position

18
css box model

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
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
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
sprites (com background position)
Brinde

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
sprites
Portfólio de Ricardo Saavedra (na página)

25
sprites
Portfólio de Ricardo Saavedra (sprite)

26
sprites
Aqui estão os sprites na página. Legal, né?

27
sprites
Aqui estão os sprites na página. Legal, né?

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
sprites
O sprite funciona assim:
Uma DIV (ou outra coisa) O sprite

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
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
tunning, otimização, etc.
Brinde!

33
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
#wrapper {
font-size:12px;
font-family:arial;
font-style:normal;
}
reparou no prefixo “font” ?

35
#wrapper {
font:12px Arial normal;
}
Pronto ;)

36
no-wrap

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
line-height

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
quer mais?
- maujor.com
- w3schools.com/css
- apostilando.com/
- csszengarden.com
- w3.org/Style/CSS/

41
Os companheiros
- firebug
- css validator
- google reader
- networking, forums e grupos
- projetos pessoais

42

43
OBRIGADOOBRIGADO

CSS

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (18)

Semelhante a CSS

Semelhante a CSS (20)

Último

Último (20)

CSS