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.
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% }
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
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;
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
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)
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