css
Post on 04-Dec-2014
693 Views
Preview:
DESCRIPTION
TRANSCRIPT
© 2010 IBM Corporation
ibm.com GWPS – Queue 1Cascading Style Sheets
Rafael CavalcanteNovember 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 Sheets)
© 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.
© 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 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).
© 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 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
© 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;}
© 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.
© 2010 IBM Corporation
ibm.com inside sales
22
sprites (com background position)
Brinde
© 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...
© 2010 IBM Corporation
ibm.com inside sales
24
spritesPortfólio de Ricardo Saavedra (na página)
© 2010 IBM Corporation
ibm.com inside sales
25
spritesPortfólio de Ricardo Saavedra (sprite)
© 2010 IBM Corporation
ibm.com inside sales
26
spritesAqui estão os sprites na página. Legal, né?
© 2010 IBM Corporation
ibm.com inside sales
27
spritesAqui estão os sprites na página. Legal, né?
© 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:
© 2010 IBM Corporation
ibm.com inside sales
29
spritesO sprite funciona assim:
Uma DIV (ou outra coisa) O sprite
© 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;}
© 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.
© 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 curtas e com o mesmo efeito das normais.
para fixar:
Repare primeiro prefixo de cada propriedade
© 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” ?
© 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 é 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; }
© 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á 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;}
© 2010 IBM Corporation
ibm.com inside sales
40
quer mais?
- maujor.com - w3schools.com/css - apostilando.com/ - csszengarden.com - w3.org/Style/CSS/
© 2010 IBM Corporation
ibm.com inside sales
41
Os companheiros
- firebug - css validator - google reader - networking, forums e grupos - projetos pessoais
© 2010 IBM Corporation
ibm.com inside sales
42
© 2010 IBM Corporation
ibm.com inside sales
43
OBRIGADOOBRIGADO
top related