css para principiantes

30/08/2013

Efeito cascata


Fontes das folhas de estilo


Aula 4 – Modelo CSS






Curso: Técnico em Informática / 2º módulo
Disciplina: Desenvolvimento Web
Professora: Luciana Balieiro Cosme

Ordem em cascata




Folha de estilo padrão do navegador
Folha de estilo do usuário
Folha de estilo do autor







Estilo externo
Estilo incorporado (seção head)
Estilo inline
Declaração do autor com !important



Autor
Usuário
Agente do usuário (por ex, navegador)

Desafio de programar para Web
Conflitos


Efeito em cascata

Declarações normais e importantes




Autor tem precedência sobre o usuário
Para mudar a precedência: important
Ex.:




p {color: black !important}

Uma regra !important tem precedência sobre uma regra normal

Declaração do usuário com !important

Especificidade de um seletor

Exemplo

Considere:
HTML
Um parágrafo qualquer Exercício Seletores

Um texto para um parágrafo qualquer que irá testar a especificidade de um seletor
...




CSS
p.diferente {font-size: 12px;} p {font-size: 18px;}


1

30/08/2013

Exemplo

Exemplo

Seletores.css p{ color: red; font-size: 12px;
}



Teste sua solução.







Acrescente ao CSS
p.diferente{
color: blue; font-size: 22px;
}
As duas regras são aplicadas. Mas qual foi a ordem de cascata?

Exemplo

Modelo de formatação dos boxes

Agora acrescente !important p{ color: red; font-size: 12px !important;
}










Dimensões, posição, tipo, relacionamento com outros boxes e informações externas.

A precedência é do seletor mais específico
Mas pode haver modificadores

Box Model




Implica que cada elemento da árvore do documento crie um ou mais boxes (caixas)
São características dos boxes:

Fonte: http://www.w3.org/TR/CSS2/box.html

Container





Bloco de conteúdo
Box retangular
Pode conter outros