Baixe o app para aproveitar ainda mais
Prévia do material em texto
* * * Laboratório de Informática Introdução à Linguagem CSS TECNOLOGIAS WEB * * * Resumo da aula Vamos aprender o que é a linguagem CSS e aonde ela se insere no Desenvolvimento Web; Entender qual é o problema em aplicar utilizar HTML para formatação; Saber como reconhecer um CSS quando vê-lo! Trabalharemos a fundo com o CSS durante o ano. * * * Recomendo fortemente! CSS – Guia de Bolso; Editora AltaBooks; 2008; Download de um capítulo. * * * * * * * * * 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: * 12/08/19 * * * 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 * * * * 12/08/19 (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. * 12/08/19 * * * Seletor elemento * 12/08/19 * * * Seletor id (#) * 12/08/19 * * * Seletor classe (.) * 12/08/19 * * * * Próxima aula Introdução ao JavaScript; * * * * 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/ * * * * Material referente ao assunto da aula CSS – Guia de Bolso; Editora AltaBooks; 2008; Download de um capítulo. * 12/08/19 * 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/ 12/08/19 * <style type="text/css"> h1 { color:blue; } h2 { color: red; } </style> 12/08/19 * <style type="text/css"> h1 { color:blue; } </style> 12/08/19 * Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer 12/08/19 * Origem e licença da foto: http://www.flickr.com/photos/akeg/3457457546/ 12/08/19 *
Compartilhar