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

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. 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 Teste Olá 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 para a cor azul: 11 13/1/2014

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

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

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

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

16 13/1/2014 (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 /1/2014

Seletor elemento 18 13/1/2014

Seletor id (#) 19 13/1/2014

Seletor classe (.) 20 13/1/2014

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

22 Leitura sugerida! html html

23 Material referente ao assunto da aula Tutorial sobre regras CSS: Recomendação W3C do CSS 1.0: t.shtml t.shtml

Material referente ao assunto da aula Capítulo do Livro CSS – Guia de Bolso: stra/00_cssbolso.pdf stra/00_cssbolso.pdf Tabela com resumo de todos os seletores do CSS e sua compatibilidade: 24

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