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