laboratório de informática introdução à linguagem css 1º semestre 2010 > pucpr > bsi...
TRANSCRIPT
Laboratório de InformáticaIntrodução à Linguagem CSS
1º Semestre 2010 > PUCPR > BSI
Bruno C. de PaulaBruno C. de Paula
Resumo da aulaVamos 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.
3
4
5
Separação entre camadas
HTML: Conteúdo;Dados e estrutura;
CSS: Apresentação;Formatação, layout, cores, fontes,
posicionamento. JavaScript:
Comportamentos;Programação.
6
CSS
Folhas de Estilo em Cascata;
Padrão de formatação;Permitem a separação entre a estrutura (HTML) e a formatação (CSS);
7
Motivação para o CSS
<font face="Verdana" size="2">Teste</font>
<b>Olá</b> Qual é o problema do código acima?
8
Motivação para o CSS
Imagine que seja necessário alterar a fonte em TODAS as páginas.
9
Folha de estilo = Regras CSS
Coleção de regras;No exemplo abaixo, temos 2 regras;
10
Exemplo de Regra CSS
Alterar todos os <h1> para a cor azul:
11
11/04/23
Regra = Seletor + Declaração
<style type="text/css">h1 { color:blue;}</style>
12
Declaração = Propriedade + Valor de Propriedade
<style type="text/css">h1 { color:blue;}</style>
13
Regra = Seletor + Propriedade + Valor de Propriedade <style type="text/css">h1 { color:blue;}</style>
14
15
Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer
16
11/04/23
(colam o HTML com o CSS!)
Os seletores mais simplesSeletor 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.
1711/04/23
Seletor elemento1811/04/23
Seletor id (#)1911/04/23
Seletor classe (.)2011/04/23
21
Próxima aula
Introdução ao JavaScript;
22
Leitura sugerida!
http://www.maujor.com/tutorialcss1/css1tut.shtml
http://www.w3schools.com/css/default.asp
http://reference.sitepoint.com/css
23
Material referente ao assunto da aula
Tutorial sobre regras CSS:http://maujor.com/tutorial/
sintaxetut.phpRecomendaçã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.pdfTabela com resumo de todos os
seletores do CSS e sua compatibilidade:http://kimblim.dk/css-tests/selectors/
24
Material referente ao assunto da aula
CSS – Guia de Bolso;Editora AltaBooks;2008;Download de um
capítulo.
25