Este documento discute conceitos básicos de CSS e HTML, incluindo: 1) XHTML é usado para estrutura e conteúdo, enquanto CSS é usado para estilo e apresentação visual. 2) CSS permite definir estilos para páginas HTML de maneiras flexíveis através de seletores e declarações. 3) O modelo de caixa controla como elementos são dispostos na página e como interagem entre si e com outros elementos.

1. CSS e HTML
Básico
a.k.a. Tin@Open Party 2008.12.27
Tin is a consultant in thoughtworks studio

2. XHTML e CSS
XHTML => conteúdo (estrutura)
CSS => apresentação (visual)

3. XHTML e CSS
Recomendações:
HTML semântico
Nomes de class/id com significado
(red-text alert-text)
Minimize a estrutura HTML e as regras CSS

4. Exemplo Html

6. CSS Básico
Cascading Style Sheets (CSS) é uma coleção de
instruções para a aparência de uma página HTML
Podemos ter vários arquivos CSS em uma página
CSS específico para diferentes dispositivos
<link rel="stylesheet"
type="text/css" media="screen"
href="reset.css" />
<style type="text/css">
body { font-size: 13px; }
</style>

7. CSS Básico
Cascading Style Sheets (CSS) é uma coleção de
instruções para a aparência de uma página HTML
Podemos ter vários arquivos CSS em uma página
CSS específico para diferentes dispositivos
<link rel="stylesheet"
type="text/css" media="screen"
href="reset.css" />
<style type="text/css">
body { font-size: 13px; }
</style>
Seletor CSS

8. Seletor CSS- Declaração
Seletor Bloco de declaração
Declaração Declaração
H1 { color: red; background: yellow; }
Propriedade Valor Propriedade Valor

9. Seletor CSS- Declaração
Elemento
h1 { font-weight: bold;}
li a { text-decoration: none; }
Class
.warn { color: red }
.full-width { width: 100% }

10. Seletor CSS- Declaração
ID
#sidebar { float: right; width: 27em; }
Pseudo class
a:link { color: blue; }
li:hover { background-color: grey; }
input:focus { background-color: yellow; }

11. Seletor CSS- Declaração
Seletor Universal
* { padding: 0; margin: 0; }

12. Especificidade CSS
Quatro níveis de especificidade
nível 1(1000): inline style, <div style=”color: red”>
nível 2(0100): ID
nível 3(0010): class, pseudo class, attribute selector
nível 4(0001): element selector, universal selector
Nível especial: !important (exceção IE6)
A última declaração ganha

13. Especificidade CSS
Regra Peso Peso total
Style=”” 1, 0, 0, 0 1000
#wrapped #content {} 0, 2, 0, 0 200
#content .date {} 0, 1, 1, 0 110
div#content {} 0, 1, 0, 1 101
#content {} 0, 1, 0, 0 100
p.comment .date {} 0, 0, 2, 1 21
p.comment {} 0,0, 1, 1 11
div p {} 0, 0, 0, 2 2
p {} 0, 0, 0, 1 1

14. CSS: Herança e cascata
Herança: algumas propriedades quando aplicadas
nos elementos pais influenciam nos filhos. Ex: color,
font-size (font*)
Propriedades sem herança: padding, margin, border,
background

15. CSS: Herança e cascata
Cascata: é o estabelecimento de uma prioridade para
aplicação da regra de estilo ao elemento.
Ordem de importância
folha de estilo padrão do navegador do usuário e do usuário;
estilo incorporado (definido na seção head do documento);
estilo inline (dentro de um elemento HTML);
declarações com !important;

16. Box model

17. Box model
margin: top right bottom left;

18. Box model
margin: top right bottom left;
border

19. Box model
margin: top right bottom left;
border
padding

20. Box model
margin: top right bottom left;
border
padding
width
Content Area
height

21. Box model Background
margin: top right bottom left;
border
padding
width
Content Area
height

22. IE box model
This file is licensed under the
Creative Commons
Attribution ShareAlike 3.0 Unported
(http://en.wikipedia.org/wiki/
Image:W3C_and_Internet_Explorer_box
_models.png)

23. Para não dar pau no IE
Não use padding e margin no mesmo elemento
Has-layout=true (zoom: 1,não valida no W3C)
Não use width: 100% e padding no mesmo elemento (use
95%)

24. Tipos de exibição - Block Level
Block-Level é um elemento com display: block
Gera um box que preenche a área do elemento pai
Não aceita elementos ao seu lado
Quebra a linha antes ou depois dele
min-width/max-width
Div é elemento block por padrão

25. Formato do Block box
margin: top right bottom left;
border
padding
width
Content Area
height

26. Formato do Block box
The containing block
border
padding
auto margin width
Content Area
height
negative margin
border
padding
width
Content Area
height
border
padding
fixed margin width
Content Area
height
Fixed width

27. Tipo de exibição - Inline Level
Inline-level é um elemento com display: inline
Gera um box que não quebra a linha (como um texto)
O tamanho é determinado pelo seu conteúdo
Elementos inline podem conter somente elementos
inline
Não aceita margem
line-height e vertical-align

28. Fluxo normal de layout

29. Outros tipos de exibição
Inline-block: não quebra a linha, mas você pode
especificar width, height, margin.
display: none (esconde o conteúdo, remove do fluxo
do layout)
sobre visibility: hidden (esconde o conteúdo mas não
remove do fluxo)

30. float: left;
1

31. float: left;
1

32. float: left;
1
2

33. float: left;
1
2

34. float: left;
1
2
3

35. float: left;
1
2
3

36. float: left;
1
2
3 4

37. float: left;
1
2
3 4

38. float: left;
1
2
3 4

39. clear: left;
1

40. clear: left;
1

41. clear: left;
1
2

42. clear: left;
1
2

43. clear: left;
1
2
clear: left

44. clear: left;
1
2
clear: left
3

45. clear: left;
1
2
clear: left 3

46. Position: relative

47. Position: relative
position: relative; left: -5px; top: -10px;

48. Position: absolute

49. Position: absolute
Position: absolute; left: 0; top: 0;

50. Position: absolute
Position: absolute; left: 0; top: 0;

51. Position: absolute
Position: absolute; left: 0; top: 0;

52. Position: absolute
z-index controla a ordem das camadas

53. Dicas
Evite CSS inline
Não se repita (crie padrões)
Colocar ID pra cada seção do site
Conditional comments
Usar position absolute para ítens que não dependem
dos outros
Declaração CSS mínima
Validar

54. One more thing...

55. NUNCA USE CSS INLINE