O documento apresenta os principais conceitos e sintaxes de CSS, incluindo seletores, propriedades, valores e unidades comuns. Explica como aplicar estilos a elementos HTML através de regras CSS internas ou externas, e como manipular propriedades como cores, fontes, bordas, espaçamentos e posicionamento.

1. Unifesp - Cursos de Verão 2010
Luiz Gustavo
Soares
@luizgrs

2. CSS?
Sintaxe
Seletores
Propriedades
Box Model
Demo
Futuro
Curiosidades
Referências

3. Cascading Style Sheets
Apresentação
XHTML

5. <link>
<style>
style=“”

6. Regras
seletor
{
propriedade1: valor1;
propriedade2: valor2;
propriedade3: valor3;
}

7. Descrição do alvo;
Quais tags estilizar;

8. O que e como mudar;
borda
fonte
preenchimento
posição
...

9. Qualquer elemento;
* { ... }

10. Um tipo de tag específica;
a { ... }
table { ... }

11. Elemento específico;
Baseado no atributo ID;
#header { ... }
#menu { ... }

12. Elementos específicos;
Baseado no atributo class;
.botao { ... }
.foto { ... }

13. Elementos “dentro” de outros;
table a { ... }
div .foto { ... }
#header img { ... }

14. Elementos filhos;
table > a { ... }
div > .foto { ... }
#header > img { ... }

15. Elementos que estão “ao lado” de outros;
table + a { ... }
div + .foto { ... }
#header + img { ... }

16. Elementos que contêm o atributo
a[href] { ... }
.foto > a[target] { ... }
body select[multiple]{ ... }

17. Elementos que contêm o atributo com o
valor específico
a[target=“_blank”] { ... }
#cadastro input[type=“text”] { ... }
img[alt=“Help”] { ... }

18. :focus
Ativado quando elemento recebe foco
:hover
Ativado quando mouse está em cima do
elemento
:first-child
Ativado quando elemento é o primeiro filho
de seu pai

19. #menu a:hover { … }
input[type=text]:focus { … }
td:first-child { … }

20. img, a[target=“_blank”] { ... }
.foto, .peixe, #cadastro input[type=“text”] { ...
}
table, thead, img[alt=“Help”] { ... }

21. Valores pré-definidos, keyword
URLs
url(‘http://…’)
Número
Unidades
em
px
in
cm
mm

22. Cores
nome
rgb(x, y, z)
#rrggbb
#rgb

23. color: #cor
text-align: center | right | left | justify
text-decoration: none | underline | overline
line-through | blink
text-indent: unidade;

24. font-family: “fonte 1”, fonte2, fonte3
font-style: normal | italic | oblique
font-size: unidade;
font-variant: small-caps | normal
font-weight: normal | bold | 100 | … | 900;

25. font: [font-style] [font-variant] [font-weight]
font-size/[line-height] font-family

26. list-style-type: none | disc | circle | square
decimal | lower-alpha |
upper-alpha | lower-roman |
upper-roman
list-style-image: url()
list-style-position: inside | outside

27. list-style: [type] [position] [image]

28. background-color: #cor
background-image: url()
background-repeat: repeat | no-repeat |
repeat-x | repeat-y
background-attachment: scroll | fixed
background-position: top left | top center | top
right | center left | center center | center right |
bottom left | bottom center | bottom right | x% y% |

29. background: [background-color]
[background-image] [background-repeat]
[background-attachment] [background-
position]

30. Font
e

31. width: unidade
height: unidade
max-height: unidade
min-height: unidade
max-width: unidade
min-width: unidade

32. padding-top: unidade
padding-right: unidade
padding-bottom: unidade
padding-left: unidade

33. padding: unidade
padding: unidade unidade
padding: unidade unidade unidade
padding: unidade unidade unidade
unidade

34. border-left-style: none | dotted | dashed |
solid | double | groove | ridge | inset |
outset
border-left-color: #cor;
border-left-width: unidade;

35. border-style: tipo
border-style: tipo tipo
border-style: tipo tipo tipo
border-style: tipo tipo tipo tipo

36. border-color: #cor
border-color: #cor #cor
border-color: #cor #cor #cor
border-color: #cor #cor #cor #cor

37. border-width: unidade
border-width: unidade unidade
border-width: unidade unidade unidade
border-width: unidade unidade unidade
unidade

38. border: [width] [style] [color]
border-top: [width] [style] [color]
border-right: [width] [style] [color]
border-bottom: [width] [style] [color]
border-left: [width] [style] [color]

39. margin-top: unidade
margin-right: unidade
margin-bottom: unidade
margin-left: unidade

40. margin: unidade
margin: unidade unidade
margin: unidade unidade unidade
margin: unidade unidade unidade unidade

41. position: fixed | static | relative | absolute
left: unidade
top: unidade
bottom: unidade
right: unidade
z-index: numero

42. float: left | right | none
clear: none | left | right | both

43. DEMO

44. :nth-child, :last-child, :only-child, :empty,
Animações
Múltiplos Backgrounds
Múltiplas Bordas
RGBA
Font Face
Bordas Arredondadas
Sombras

45. Homer Simpson CSS
Jogo em CSS
CSS Animation AT-AT

46. http://www.w3.org
http://www.w3schools.com/
http://www.maujor.com
http://www.css3.info
http://delicious.com/luizgrs

47. http://www.w3.org
http://www.w3schools.com/
http://www.maujor.com
http://www.css3.info
http://delicious.com/luizgrs

48. Luiz Gustavo
Soares
@luizgrs
http://luizsoares.
net
luiz@luizsoares.