Bruno C. de Paula
Laboratório de Informática
Introdução à Linguagem CSS
1º Semestre 2010 > PUCPR > BSI
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.
4
Separação
entre camadas
 HTML:
Conteúdo;
Dados e estrutura;
 CSS:
Apresentação;
Formatação, layout, cores, fontes,
posicionamento.
 JavaScript:
Comportamentos;
Programação.
5
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
10
Folha de estilo = Regras CSS
 Coleção
de regras;
 No exemplo abaixo, temos 2 regras;
11
Exemplo de Regra CSS
 Alterar
05/11/2015
todos os <h1> para a cor azul:
12
Regra = Seletor + Declaração
<style type="text/css">
h1 {
color:blue;
}
</style>
Declaração = Propriedade + Valor de
Propriedade
13
<style type="text/css">
h1 {
color:blue;
}
</style>
Regra = Seletor + Propriedade +
Valor de Propriedade
<style type="text/css">
h1 {
color:blue;
}
</style>
14
Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer
15
16
(colam o HTML com o CSS!)
05/11/2015
05/11/2015
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
05/11/2015
Seletor elemento
18
05/11/2015
Seletor id (#)
19
05/11/2015
Seletor classe (.)
20
21
Próxima aula
 Introdução
ao JavaScript;
22
Leitura sugerida!
 http://www.maujor.com/tutorialcss1/css1tut.s
html
 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.php
 Recomendação W3C do CSS 1.0:
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_am
ostra/00_cssbolso.pdf
 Tabela com resumo de todos os seletores do
CSS e sua compatibilidade:
http://kimblim.dk/css-tests/selectors/
25
Material referente ao assunto da aula
 CSS
– Guia de Bolso;
Editora AltaBooks;
2008;
Download de um
capítulo.