Baixe o app para aproveitar ainda mais
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/ * *
Compartilhar