Laboratório de Informática Introdução à Linguagem CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula.

Apresentação em tema: "Laboratório de Informática Introdução à Linguagem CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula."— Transcrição da apresentação:

1 Laboratório de Informática Introdução à Linguagem CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula

2 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.

3 Recomendo fortemente! CSS – Guia de Bolso; Editora AltaBooks; 2008; Download de um capítulo. Download de um capítulo 3

4 4

5 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 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 7 Motivação para o CSS Teste Olá Qual é o problema do código acima?

8 8 Motivação para o CSS Imagine que seja necessário alterar a fonte em TODAS as páginas.

9 9

10 Folha de estilo = Regras CSS Coleção de regras; No exemplo abaixo, temos 2 regras; 10

11 Exemplo de Regra CSS Alterar todos os para a cor azul: 11 13/1/2014

12 Regra = Seletor + Declaração h1 { color:blue; } 12

13 Declaração = Propriedade + Valor de Propriedade h1 { color:blue; } 13

14 Regra = Seletor + Propriedade + Valor de Propriedade h1 { color:blue; } 14

15 15 Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer

16 16 13/1/2014 (colam o HTML com o CSS!)

17 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. 17 13/1/2014

18 Seletor elemento 18 13/1/2014

19 Seletor id (#) 19 13/1/2014

20 Seletor classe (.) 20 13/1/2014

21 21 Próxima aula Introdução ao JavaScript;

22 22 Leitura sugerida! http://www.maujor.com/tutorialcss1/css1tut.s html http://www.maujor.com/tutorialcss1/css1tut.s html http://www.w3schools.com/css/default.asp http://reference.sitepoint.com/css

23 23 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/css1tu t.shtml http://www.maujor.com/tutorialcss1/css1tu t.shtml

24 Material referente ao assunto da aula Capítulo do Livro CSS – Guia de Bolso: http://altabooks.tempsite.ws/capitulos_amo stra/00_cssbolso.pdf http://altabooks.tempsite.ws/capitulos_amo stra/00_cssbolso.pdf Tabela com resumo de todos os seletores do CSS e sua compatibilidade: http://kimblim.dk/css-tests/selectors/ 24

25 Material referente ao assunto da aula CSS – Guia de Bolso; Editora AltaBooks; 2008; Download de um capítulo. Download de um capítulo 25