CSS Introdução

SISTEMAS PARA INTERNET I
AULA – 7
rbonacin@yahoo.com.br
rodrigo.bonacin@gmail.com
1

PLANO – AULA 7
 CSS - Cascading Style Sheets
 O que CSS faz
 Como CSS Trabalha
 Regras
 Propriedades e Valores
 Atividade Prática 6
2

O QUE CSS FAZ E COMO TRABALHA
3
 Uma maneira de compreender CSS
 Pense que todo elemento html tem uma “caixa”
invisível em volta
 O CSS coloca “estilos” e controla estas “caixas”
 Em HTML
 Existem elementos de blocos como
 <h1>-<h6>, <p> , <div> ..
 Existem elementos de linha
 <b>, <i>, <img>, <em>, <span> …

4
 Lembra no nosso primeira página de HTML
 Que era apenas um texto

5
 Vamos inserir um CSS simples

6
Na tag <head>

7
Incluir uma tag <link>

8
Nome do arquivo CSS
associado

9
Tipo do arquivo
“text/css”

10
Especifica o tipo de
relacionamento entre a
pagina e o arquivo
ligado ... No caso de
CSS sempre stylesheet

11
 Um CSS simples

12
 Um CSS simples
Este é o SELETOR ele
fiz a quem a definição
aplica ... Neste caso as
tags html <p>

13
 Um CSS simples
Esta é a DECLARAÇÃO de estilo, neste
caso estou colocando:
Borda sólida de 1 pixel e vermelha em <p>

14
 Um CSS simples

15
 Um CSS simples
Note que todas as tags <p> ficaram com
uma borda vermelha (como estivessem em
caixas)

16
 Colocando uma borda verde do título maior e
azul nos menores

17
azul nos menores
Tamanho 2px, tracejada e verde

18
azul nos menores
Tamanho 3px, pontilhada e azul

19
 Um CSS simples

20
 Um CSS simples
Estilo do <h1>

21
 Um CSS simples
Estilo do <h2>
Estilo do <h2>

22
 O CSS pode ir no próprio arquivo HTML

23
Para todo o corpo
da página

24
Vai usar fonte da
família airal

25
O fundo vai ser da
cor que tem:
r = 185
g = 179
b = 175

26
Para h1 ... usar cor
branca

27

REGRAS DE SELETORES HTML
28
 Tipos de seletores
 Seletor Universal
* {}
 Aplica a todos os elementos da página
 Ex:
* {font-family: Arial, Verdana, sans-serif;}

29

30

31
 Seletor de Tipo
h1 {}, h2 {}, p {}, i{}, b{} ...
 Aplica a um tipo de elemento/tag
 Ex:
h1 {font-family: "Courier New", monospace;}
i {color: green;}

32
 Seletor de Tipo

33
 Seletor de Tipo

34
 Seletor de Tipo

35
 Seletor de Classe
.nomedaclasse {}
nomedotipo.nomedaclasse {}
 Aplica a uma classe de acordo com o atribuit class=“” no
html
 Ex:
.page {border: 1px solid #665544;}
p.page {border: 2px solid #665544;}

36
.nomedaclasse {}
html
 Ex:
Para todas as tags
html com o atributo
class=“page”

37
.nomedaclasse {}
html
 Ex:
Para todas as tags
html do tipo <p> com
o atributo
class=“page”

38

39

40

41
 Seletor de ID
#identificadorcunico{}
 Aplica ao elemento html com um determinado ID que
deve ser único
 Ex:
p#Intro {font-size: 100%;}

42
Seletor de ID

43
Seletor de ID

44
Seletor de ID

45
 Seletor de filho
elemento1>elemento2{}
 Aplica somente as tags do tipo 2 que estão dentro
diretamente de tags do tipo 1
 Ex:
li>a {color: green;}

46

47

48

49
 Seletor de descendente
elemento1 elemento2{}
 Aplica somente as tags do tipo 2 que estão dentro
diretamente ou indiretamente de tags do tipo 1
 Ex:
li a {color: green;}

50

51

52

53
 Seletor de próximo adjacente/irmão
elemento1+elemento2{}
 Aplica somente as tags do tipo 2 que vem após as tags
do tipo 1 (e não todas)
 Ex:
h1+p {color: red;}

54

55

56
 Seletor de adjacente/irmão (anterior e próximo)
elemento1~elemento2{}
 Aplica somente as tags do tipo 2 que são “irmãs” das
tags do tipo 1
 Ex:
h1~p {color: red;}

57

58

PRIORIDADES E HERANÇA
59
 Quanto temos duas regras iguais
 Vale a última
 Exemplo:
i {color: green;}
i {color: red;}

60
 Vale a última
 Exemplo:
i {color: green;}
i {color: red;}
Fica valendo o verde

61

62

63
 Quando tem duas regras sobre o mesmo
elemento
 Vale a mais específica
 Da caixa mais interna
 Da que especifica um subconjunto ou um elemento em
particular
 Exemplo:
p {font-size: 80%;}
p#intro {font-size: 120%;}

64
elemento
 Vale a mais específica
 Da caixa mais interna
 Da que especifica um subconjunto ou um elemento em
particular
 Exemplo:
p {font-size: 80%;}
p#Intro {font-size: 120%;}
Vale esta pois
especifica um único
elemento

65
elemento
O de baixo é mais específico que
o de cima ... pois é aplicado a
um subconjunto

66
elemento
O de baixo é mais específico que
o de cima ... pois é aplicado a
um subconjunto

67
elemento

68
elemento

69
 Os elementos mais internos “herdam a
propriedade do mais externo”
 Ele pode sobrescrever ou manter o valor mais
externo
 Ex:
body {
font-family: Arial, Verdana, sans-serif;
color: #665544;
padding: 10px;}

70
 Ele pode sobrescrever ou manter o valor mais
externo
 Ex:
body {
font-family: Arial, Verdana, sans-serif;
color: #665544;
padding: 10px;}
Todas tags terão estas
propriedades a menos que as
sobreescreva

71

72

73
 “herdam a propriedade do mais externo”

ATIVIDADES PRÁTICAS EM SALA
EDP 6
 Fazer em até três pessoas
 De preferência duplas
 A média das práticas dará a nota o EDP
 Ou seja 25%
 A prática deve ser entregue durante a aula
74

ATIVIDADES PRÁTICAS EM SALA
EDP 6
75

CSS Introdução

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie CSS Introdução

Ähnlich wie CSS Introdução (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

CSS Introdução