CSS

© 2010 IBM Corporation

ibm.com GWPS – Queue 1Cascading Style Sheets

Rafael CavalcanteNovember 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 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



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;}



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.



22

sprites (com background position)

Brinde



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...



24

spritesPortfólio de Ricardo Saavedra (na página)



25

spritesPortfólio de Ricardo Saavedra (sprite)



26

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



27

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



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:



29

spritesO sprite funciona assim:

Uma DIV (ou outra coisa) O sprite



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;}



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.



32

tunning, otimização, etc.

Brinde!



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


#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

Education

Transcript of CSS