10.Aula 5 CSS Aplicando Regras CSS

Prévia do material em texto

28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
1
Disciplina: Desenvolvimento Web I
CSS: Aplicando regras
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
2
Disciplina: Desenvolvimento Web I
Introdução
Na última aula falamos sobre as formas de 
definir os estilos de uma página HTML. 
Para isso utilizamos CSS - Cascading 
Style Sheets ou em português folhas de 
estilo em cascata.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
3
Disciplina: Desenvolvimento Web I
Introdução
A linguagem CSS é responsável por definir 
todo o "visual" de uma página HTML.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
4
Disciplina: Desenvolvimento Web I
Introdução
A sintaxe de uma regra CSS consiste na 
propriedade seguida de seu valor, 
separados pelo sinal de “ : ” (dois-pontos).
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
5
Disciplina: Desenvolvimento Web I
Introdução
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
6
Disciplina: Desenvolvimento Web I
Introdução
O seletor determina para quais 
elementos a regra de formatação deve ser 
aplicada. 
O objetivo desta aula é abordar as formas 
de se utilizar CSS.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
7
Disciplina: Desenvolvimento Web I
Introdução
● Seletores de elemento
● Seletores de classe
● Seletores de ID
Sendo que cada pode ser usado para 
facilitar a melhor definição dos estilos de 
uma página.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
8
Disciplina: Desenvolvimento Web I
Introdução
Na aula de hoje veremos que existem três 
formas de se aplicar CSS aos elementos 
HTML. Cada uma delas tem sua função e 
utilidade.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
9
Disciplina: Desenvolvimento Web I
Aplicando CSS ao HTML
● Via atributo
● Via elemento style (interno)
● Via elemento style (arquivo externo)
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
10
Disciplina: Desenvolvimento Web I
Aplicando CSS ao HTML
Via atributo
Podemos aplicar propriedades CSS 
através do atributo style presente em 
diversos elementos HTML. 
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
11
Disciplina: Desenvolvimento Web I
Aplicando CSS ao HTML
Via atributo
Essa abordagem não é recomendada pois o 
acoplamento entre os elementos HTML e as 
propriedades CSS é muito alto dificultando 
a manutenção das páginas web.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
12
Disciplina: Desenvolvimento Web I
Aplicando CSS ao HTML
Via atributo
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
13
Disciplina: Desenvolvimento Web I
Praticando!
Vamos praticar um pouco..
1)Crie uma página HTML
2)Coloque um título
4)depois crie 6 DIVs com um texto 
qualquer.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
14
Disciplina: Desenvolvimento Web I
Praticando!
Sua página deverá estar assim:
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
15
Disciplina: Desenvolvimento Web I
Praticando!
Agora vamos aplicar algumas regras 
CSS via atributo em cada um destes 
DIVs
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
16
Disciplina: Desenvolvimento Web I
Praticando!
O estilo que usaremos é o background-
color, que serve para mudar a cor do plano 
de fundo de um elemento HTML.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
17
Disciplina: Desenvolvimento Web I
Praticando!
Em cada DIV coloque o seguinte:
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
18
Disciplina: Desenvolvimento Web I
Praticando!
Sendo que os dois primeiros DIVs 
serão vermelhos, os dois seguintes 
verdes e dois últimos azuis.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
19
Disciplina: Desenvolvimento Web I
Praticando!
O resultado deverá ser este:
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
20
Disciplina: Desenvolvimento Web I
Aplicando CSS ao HTML
Esta forma que fizemos é por atributo 
style. Agora vamos ver como pode-se 
aplicar as regras CSS utilizando um 
elemento (TAG) STYLE interna;
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
21
Disciplina: Desenvolvimento Web I
Aplicando CSS ao HTML
Via elemento style (interno)
Também é possível aplicar propriedades 
CSS através do elemento (TAG) style. Esta 
tag deverá ser declarada dentro do 
cabeçalho (HEAD)
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
22
Disciplina: Desenvolvimento Web I
Praticando!
Via elemento style (interno)
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
23
Disciplina: Desenvolvimento Web I
Praticando!
Essa declaração deverá ser no mesmo 
arquivo HTML que estamos trabalhando.
Você deverá apenas criar essa tag STYLE 
na mesma página, DENTRO DO HEAD.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
24
Disciplina: Desenvolvimento Web I
Praticando!
Assim:
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
25
Disciplina: Desenvolvimento Web I
Praticando!
Vamos então definir um novo seletor para 
alterar os estilos de todos os DIVs, 
adicionando espaçamento (interno e 
externo) entre eles e também algumas 
bordas.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
26
Disciplina: Desenvolvimento Web I
Praticando!
Qual o seletor mais adequado para alterar 
TODOS OS DIVS?
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
27
Disciplina: Desenvolvimento Web I
Praticando!
O seletor de elemento. 
No caso DIV:
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
28
Disciplina: Desenvolvimento Web I
Praticando!
Vamos então utilizar espaçamentos 
internos (padding), externo (margin) e uma 
borda (border)
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
29
Disciplina: Desenvolvimento Web I
Praticando!
Agora coloque as propriedades:
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
30
Disciplina: Desenvolvimento Web I
Praticando!
Neste exemplo há comentários explicando 
o que faz cada propriedade CSS:
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
31
Disciplina: Desenvolvimento Web I
Praticando!
O resultado esperado..28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
32
Disciplina: Desenvolvimento Web I
Aplicando CSS ao HTML
Esta última abordagem utiliza uma TAG 
STYLE interna, definindo os estilos em 
um mesmo arquivo. 
Agora iremos ver como criar os estilos 
em um novo arquivo.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
33
Disciplina: Desenvolvimento Web I
Aplicando CSS ao HTML
Na abordagem que utiliza um arquivo 
externo iremos criar um arquivo do tipo 
css.
Agora teremos dois arquivos diferentes 
para fazer uma única página.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
34
Disciplina: Desenvolvimento Web I
Aplicando CSS ao HTML
Mas qual a vantagem de ter um arquivo 
para os estilos??
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
35
Disciplina: Desenvolvimento Web I
Aplicando CSS ao HTML
Uma folha de estilo externa, tem muitas 
vantagens:
● Ajuda a evitar código repetido
● Facilita a manutenção
● Permite fazer mudança no site inteiro 
alterando apenas um arquivo.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
36
Disciplina: Desenvolvimento Web I
Praticando!
Vamos então criar nosso arquivo de folha 
de estilos em cascata (CSS).
Crie um novo arquivo, com o nome 
“estilos.css”, a extensão é importante 
agora.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
37
Disciplina: Desenvolvimento Web I
Praticando!
Dentro deste arquivo vamos definir as 
regras CSS utilizando seletores.
A forma de escrever o código CSS é 
exatamente a mesma das formas de 
atributo e tag STYLE interna.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
38
Disciplina: Desenvolvimento Web I
Praticando!
É importante observar que ambos os 
arquivos, HTML e CSS devem estar 
juntos, no mesmo diretório para que tudo 
funcione.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
39
Disciplina: Desenvolvimento Web I
Praticando!
Para concluir nosso exemplo vamos definir 
uma regra para a página toda, alterando 
o tamanho da letra e o posicionamento de 
todo o conteúdo por meio de margens 
internas.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
40
Disciplina: Desenvolvimento Web I
Praticando!
Para definir um seletor para a página toda 
utilizaremos o “body”:
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
41
Disciplina: Desenvolvimento Web I
Praticando!
E agora as propriedades:
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
42
Disciplina: Desenvolvimento Web I
Praticando!
Para que vocês se habituem o que faz 
cada propriedade segue a mesma 
declaração com comentários explicando a 
função de cada propriedade CSS.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
43
Disciplina: Desenvolvimento Web I
Praticando!
Veja:
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
44
Disciplina: Desenvolvimento Web I
Praticando!
Quando utilizamos esta forma de aplicação 
de estilos utilizando um arquivo CSS 
externo é preciso “ligar”, “apontar” o 
arquivo de estilos dentro do arquivo 
HTML.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
45
Disciplina: Desenvolvimento Web I
Praticando!
Para isso voltaremos ao arquivo HTML e 
colocaremo DENTRO DO HEAD o “link” 
para a página de estilos (css).
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
46
Disciplina: Desenvolvimento Web I
Praticando!
Veja:
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
47
Disciplina: Desenvolvimento Web I
Praticando!
Usaremos a tag LINK, que serve para 
referenciar um arquivo de estilos CSS. 
Esta é uma void tag.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
48
Disciplina: Desenvolvimento Web I
Praticando!
Ela possui dois atributos principais, o rel 
deve receber o valor stylesheet (folha de 
estilos) e o href o caminho e nome do 
arquivo css.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
49
Disciplina: Desenvolvimento Web I
Praticando!
Agora sim está tudo pronto!
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
50
Disciplina: Desenvolvimento Web I
Praticando!
O resultado deverá ser este:
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
51
Disciplina: Desenvolvimento Web I
Praticando!
Este exemplo que acabamos de criar utiliza 
as três formas de se aplicar CSS aos 
elementos HTML, por atributo, por 
elemento style interno e também externo.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
52
Disciplina: Desenvolvimento Web I
Praticando!
Na prática isso não é feito, escolhe-se uma 
abordagem e a segue por todo o projeto, 
sendo fortemente recomendado que seja 
por folha de estilos externa.
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
53
Disciplina: Desenvolvimento Web I
Praticando!
Agora para praticar mais um pouco crie 
outra página HTML (e outra CSS) e faça a 
seguinte página:
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
54
Disciplina: Desenvolvimento Web I
Praticando!
Exemplo 2:
28 de agosto de 2017
Prof. Eder Pansani
E-mail: epansani@gmail.com
http://ederpansani.com.br
55
Disciplina: Desenvolvimento Web I
Dúvidas?
Perguntas?
	Slide 1
	Slide 2
	Slide 3
	Slide 4
	Slide 5
	Slide 6
	Slide 7
	Slide 8
	Slide 9
	Slide 10
	Slide 11
	Slide 12
	Slide 13
	Slide 14
	Slide 15
	Slide 16
	Slide 17
	Slide 18
	Slide 19
	Slide 20
	Slide 21
	Slide 22
	Slide 23
	Slide 24
	Slide 25
	Slide 26
	Slide 27
	Slide 28
	Slide 29
	Slide 30
	Slide 31
	Slide 32
	Slide 33
	Slide 34
	Slide 35
	Slide 36
	Slide 37
	Slide 38
	Slide 39
	Slide 40
	Slide 41
	Slide 42
	Slide 43
	Slide 44
	Slide 45
	Slide 46
	Slide 47
	Slide 48
	Slide 49
	Slide 50
	Slide 51
	Slide 52
	Slide 53
	Slide 54
	Slide 55