Aula CSS

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

*
*
*
*
*
*
Separação 
entre camadas
HTML: 
Conteúdo;
Dados e estrutura;
CSS: 
Apresentação;
Formatação, layout, cores, fontes, posicionamento.
JavaScript: 
Comportamentos;
Programação.
*
*
*
CSS
Folhas de Estilo em Cascata;
Padrão de formatação;
Permitem a separação entre a estrutura (HTML) e a formatação (CSS); 
*
*
*
Motivação para o CSS
<font face="Verdana" size="2">Teste</font>
<b>Olá</b> 
Qual é o problema do código acima?
*
*
*
Motivação para o CSS
Imagine que seja necessário alterar a fonte em TODAS as páginas. 
*
*
*
*
*
Folha de estilo = Regras CSS
Coleção de regras;
No exemplo abaixo, temos 2 regras;
*
*
*
Exemplo de Regra CSS
Alterar todos os <h1> para a cor azul:
*
*
*
*
Regra = Seletor + Declaração
<style type="text/css">
h1 {
 color:blue;
}
</style>
*
*
*
Declaração = Propriedade + Valor de Propriedade 
<style type="text/css">
h1 {
 color:blue;
}
</style>
*
*
*
Regra = Seletor + Propriedade + Valor de Propriedade 
<style type="text/css">
h1 {
 color:blue;
}
</style>
*
*
Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer
*
*
*
*
(colam o HTML com o CSS!)
*
*
Os seletores mais simples
Seletor elemento:
Aplicam a regra em todas os elementos da página;
Seletor id (#) :
Aplicam a regra em um elemento com id específico;
Não pode repetir na página!
Seletor classe (.):
Aplicam a regra nos elementos pertencentes a uma classe;
Atributo class do HTML.
*
*
*
*
Seletor elemento
*
*
*
*
Seletor id (#)
*
*
*
*
Seletor classe (.)
*
*
*
*
*
Leitura sugerida!
http://www.maujor.com/tutorialcss1/css1tut.shtml
http://www.w3schools.com/css/default.asp
http://reference.sitepoint.com/css
*
*
*
Material referente ao assunto da aula
Tutorial sobre regras CSS:
http://maujor.com/tutorial/sintaxetut.php
Recomendação W3C do CSS 1.0:
http://www.maujor.com/tutorialcss1/css1tut.shtml
*
*
Material referente ao assunto da aula
Capítulo do Livro CSS – Guia de Bolso:
http://altabooks.tempsite.ws/capitulos_amostra/00_cssbolso.pdf
Tabela com resumo de todos os seletores do CSS e sua compatibilidade:
http://kimblim.dk/css-tests/selectors/
*
*
*
Imagem original em: http://www.alistapart.com/articles/understandingprogressiveenhancement
Tag <style>: container principal das regras CSS.
Regras para alteração da formatação da página.
Chocolate do MMs.
Origem das fotos:
http://www.flickr.com/photos/jeffbelmonte/16913518/
*
*
<style type="text/css">
h1 {
color:blue;
}
h2 {
color: red;
}
</style>
*
*
<style type="text/css">
h1 {
color:blue;
}
</style>
*
*
Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer
*
*
Origem e licença da foto: http://www.flickr.com/photos/akeg/3457457546/
*
*