View
52
Download
4
Category
Preview:
DESCRIPTION
Citation preview
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> …
O QUE CSS FAZ E COMO TRABALHA
4
Lembra no nosso primeira página de HTML
Que era apenas um texto
O QUE CSS FAZ E COMO TRABALHA
5
Vamos inserir um CSS simples
O QUE CSS FAZ E COMO TRABALHA
6
Vamos inserir um CSS simples
Na tag <head>
O QUE CSS FAZ E COMO TRABALHA
7
Vamos inserir um CSS simples
Incluir uma tag <link>
O QUE CSS FAZ E COMO TRABALHA
8
Vamos inserir um CSS simples
Nome do arquivo CSS
associado
O QUE CSS FAZ E COMO TRABALHA
9
Vamos inserir um CSS simples
Tipo do arquivo
“text/css”
O QUE CSS FAZ E COMO TRABALHA
10
Vamos inserir um CSS simples
Especifica o tipo de
relacionamento entre a
pagina e o arquivo
ligado ... No caso de
CSS sempre stylesheet
O QUE CSS FAZ E COMO TRABALHA
11
Um CSS simples
O QUE CSS FAZ E COMO TRABALHA
12
Um CSS simples
Este é o SELETOR ele
fiz a quem a definição
aplica ... Neste caso as
tags html <p>
O QUE CSS FAZ E COMO TRABALHA
13
Um CSS simples
Esta é a DECLARAÇÃO de estilo, neste
caso estou colocando:
Borda sólida de 1 pixel e vermelha em <p>
O QUE CSS FAZ E COMO TRABALHA
14
Um CSS simples
O QUE CSS FAZ E COMO TRABALHA
15
Um CSS simples
Note que todas as tags <p> ficaram com
uma borda vermelha (como estivessem em
caixas)
O QUE CSS FAZ E COMO TRABALHA
16
Colocando uma borda verde do título maior e
azul nos menores
O QUE CSS FAZ E COMO TRABALHA
17
Colocando uma borda verde do título maior e
azul nos menores
Tamanho 2px, tracejada e verde
O QUE CSS FAZ E COMO TRABALHA
18
Colocando uma borda verde do título maior e
azul nos menores
Tamanho 3px, pontilhada e azul
O QUE CSS FAZ E COMO TRABALHA
19
Um CSS simples
O QUE CSS FAZ E COMO TRABALHA
20
Um CSS simples
Estilo do <h1>
O QUE CSS FAZ E COMO TRABALHA
21
Um CSS simples
Estilo do <h2>
Estilo do <h2>
O QUE CSS FAZ E COMO TRABALHA
22
O CSS pode ir no próprio arquivo HTML
O QUE CSS FAZ E COMO TRABALHA
23
O CSS pode ir no próprio arquivo HTML
Para todo o corpo
da página
O QUE CSS FAZ E COMO TRABALHA
24
O CSS pode ir no próprio arquivo HTML
Vai usar fonte da
família airal
O QUE CSS FAZ E COMO TRABALHA
25
O CSS pode ir no próprio arquivo HTML
O fundo vai ser da
cor que tem:
r = 185
g = 179
b = 175
O QUE CSS FAZ E COMO TRABALHA
26
O CSS pode ir no próprio arquivo HTML
Para h1 ... usar cor
branca
O QUE CSS FAZ E COMO TRABALHA
27
O CSS pode ir no próprio arquivo HTML
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;}
REGRAS DE SELETORES HTML
29
Tipos de seletores
Seletor Universal
REGRAS DE SELETORES HTML
30
Tipos de seletores
Seletor Universal
REGRAS DE SELETORES HTML
31
Tipos de seletores
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;}
REGRAS DE SELETORES HTML
32
Tipos de seletores
Seletor de Tipo
REGRAS DE SELETORES HTML
33
Tipos de seletores
Seletor de Tipo
REGRAS DE SELETORES HTML
34
Tipos de seletores
Seletor de Tipo
REGRAS DE SELETORES HTML
35
Tipos de seletores
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;}
REGRAS DE SELETORES HTML
36
Tipos de seletores
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;}
Para todas as tags
html com o atributo
class=“page”
REGRAS DE SELETORES HTML
37
Tipos de seletores
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;}
Para todas as tags
html do tipo <p> com
o atributo
class=“page”
REGRAS DE SELETORES HTML
38
Tipos de seletores
Seletor de Classe
REGRAS DE SELETORES HTML
39
Tipos de seletores
Seletor de Classe
REGRAS DE SELETORES HTML
40
Tipos de seletores
Seletor de Classe
REGRAS DE SELETORES HTML
41
Tipos de seletores
Seletor de ID
#identificadorcunico{}
Aplica ao elemento html com um determinado ID que
deve ser único
Ex:
p#Intro {font-size: 100%;}
REGRAS DE SELETORES HTML
42
Tipos de seletores
Seletor de ID
REGRAS DE SELETORES HTML
43
Tipos de seletores
Seletor de ID
REGRAS DE SELETORES HTML
44
Tipos de seletores
Seletor de ID
REGRAS DE SELETORES HTML
45
Tipos de seletores
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;}
REGRAS DE SELETORES HTML
46
Tipos de seletores
Seletor de filho
REGRAS DE SELETORES HTML
47
Tipos de seletores
Seletor de filho
REGRAS DE SELETORES HTML
48
Tipos de seletores
Seletor de filho
REGRAS DE SELETORES HTML
49
Tipos de seletores
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;}
REGRAS DE SELETORES HTML
50
Tipos de seletores
Seletor de descendente
REGRAS DE SELETORES HTML
51
Tipos de seletores
Seletor de descendente
REGRAS DE SELETORES HTML
52
Tipos de seletores
Seletor de descendente
REGRAS DE SELETORES HTML
53
Tipos de seletores
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;}
REGRAS DE SELETORES HTML
54
Tipos de seletores
Seletor de próximo adjacente/irmão
REGRAS DE SELETORES HTML
55
Tipos de seletores
Seletor de próximo adjacente/irmão
REGRAS DE SELETORES HTML
56
Tipos de seletores
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;}
REGRAS DE SELETORES HTML
57
Tipos de seletores
Seletor de adjacente/irmão (anterior e próximo)
REGRAS DE SELETORES HTML
58
Tipos de seletores
Seletor de adjacente/irmão (anterior e próximo)
PRIORIDADES E HERANÇA
59
Quanto temos duas regras iguais
Vale a última
Exemplo:
i {color: green;}
i {color: red;}
PRIORIDADES E HERANÇA
60
Quanto temos duas regras iguais
Vale a última
Exemplo:
i {color: green;}
i {color: red;}
Fica valendo o verde
PRIORIDADES E HERANÇA
61
Quanto temos duas regras iguais
PRIORIDADES E HERANÇA
62
Quanto temos duas regras iguais
PRIORIDADES E HERANÇA
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%;}
PRIORIDADES E HERANÇA
64
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%;}
Vale esta pois
especifica um único
elemento
PRIORIDADES E HERANÇA
65
Quando tem duas regras sobre o mesmo
elemento
O de baixo é mais específico que
o de cima ... pois é aplicado a
um subconjunto
PRIORIDADES E HERANÇA
66
Quando tem duas regras sobre o mesmo
elemento
O de baixo é mais específico que
o de cima ... pois é aplicado a
um subconjunto
PRIORIDADES E HERANÇA
67
Quando tem duas regras sobre o mesmo
elemento
PRIORIDADES E HERANÇA
68
Quando tem duas regras sobre o mesmo
elemento
PRIORIDADES E HERANÇA
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;}
PRIORIDADES E HERANÇA
70
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;}
Todas tags terão estas
propriedades a menos que as
sobreescreva
PRIORIDADES E HERANÇA
71
Os elementos mais internos “herdam a
propriedade do mais externo”
PRIORIDADES E HERANÇA
72
Os elementos mais internos “herdam a
propriedade do mais externo”
PRIORIDADES E HERANÇA
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
Recommended