10.aula 5 - CSS - Aplicando Regras CSS

1
Disciplina: Desenvolvimento Web I
CSS: Aplicando regras
Prof. Eder Pansani

E-mail: epansani@gmail.com
28 de agosto de 2017 http://ederpansani.com.br
2
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.
Prof. Eder Pansani

3
Introdução
A linguagem CSS é responsável por definir
todo o "visual" de uma página HTML.
Prof. Eder Pansani

4
Introdução
A sintaxe de uma regra CSS consiste na
propriedade seguida de seu valor,
separados pelo sinal de “ : ” (dois-pontos).
Prof. Eder Pansani

5
Introdução
Prof. Eder Pansani

6
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.
Prof. Eder Pansani

7
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.
Prof. Eder Pansani
8
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.
Prof. Eder Pansani

9
Aplicando CSS ao HTML

●
Via atributo
●
Via elemento style (interno)
●
Via elemento style (arquivo externo)
Prof. Eder Pansani

10

Via atributo
Podemos aplicar propriedades CSS
através do atributo style presente em
diversos elementos HTML.
Prof. Eder Pansani

11

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.
Prof. Eder Pansani

12

Via atributo
Prof. Eder Pansani

13
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.
Prof. Eder Pansani
14
Praticando!
Sua página deverá estar assim:
Prof. Eder Pansani

15
Praticando!
Agora vamos aplicar algumas regras
CSS via atributo em cada um destes
DIVs
Prof. Eder Pansani

16
Praticando!
O estilo que usaremos é o background-
color, que serve para mudar a cor do plano
de fundo de um elemento HTML.
Prof. Eder Pansani

17
Praticando!
Em cada DIV coloque o seguinte:
Prof. Eder Pansani

18
Praticando!
Sendo que os dois primeiros DIVs
serão vermelhos, os dois seguintes
verdes e dois últimos azuis.
Prof. Eder Pansani

19
Praticando!
O resultado deverá ser este:
Prof. Eder Pansani

20

Esta forma que fizemos é por atributo
style. Agora vamos ver como pode-se
aplicar as regras CSS utilizando um
elemento (TAG) STYLE interna;
Prof. Eder Pansani

21

Também é possível aplicar propriedades
CSS através do elemento (TAG) style. Esta
tag deverá ser declarada dentro do
cabeçalho (HEAD)
Prof. Eder Pansani

22
Praticando!
Prof. Eder Pansani

23
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.
Prof. Eder Pansani

24
Praticando!
Assim:
Prof. Eder Pansani

25
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.
Prof. Eder Pansani

26
Praticando!
Qual o seletor mais adequado para alterar
TODOS OS DIVS?
Prof. Eder Pansani

27
Praticando!
O seletor de elemento.
No caso DIV:
Prof. Eder Pansani

28
Praticando!
Vamos então utilizar espaçamentos
internos (padding), externo (margin) e uma
borda (border)
Prof. Eder Pansani

29
Praticando!
Agora coloque as propriedades:
Prof. Eder Pansani

30
Praticando!
Neste exemplo há comentários explicando
o que faz cada propriedade CSS:
Prof. Eder Pansani

31
Praticando!
O resultado esperado..
Prof. Eder Pansani

32

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.
Prof. Eder Pansani

33

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.
Prof. Eder Pansani

34

Mas qual a vantagem de ter um arquivo
para os estilos??
Prof. Eder Pansani

35

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.
Prof. Eder Pansani

36
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.
Prof. Eder Pansani

37
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.
Prof. Eder Pansani

38
Praticando!
É importante observar que ambos os
arquivos, HTML e CSS devem estar
juntos, no mesmo diretório para que tudo
funcione.
Prof. Eder Pansani

39
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.
Prof. Eder Pansani

40
Praticando!
Para definir um seletor para a página toda
utilizaremos o “body”:
Prof. Eder Pansani

41
Praticando!
E agora as propriedades:
Prof. Eder Pansani

42
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.
Prof. Eder Pansani

43
Praticando!
Veja:
Prof. Eder Pansani

44
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.
Prof. Eder Pansani

45
Praticando!
Para isso voltaremos ao arquivo HTML e
colocaremo DENTRO DO HEAD o “link”
para a página de estilos (css).
Prof. Eder Pansani

46
Praticando!
Veja:
Prof. Eder Pansani

47
Praticando!
Usaremos a tag LINK, que serve para
referenciar um arquivo de estilos CSS.
Esta é uma void tag.
Prof. Eder Pansani

48
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.
Prof. Eder Pansani

49
Praticando!
Agora sim está tudo pronto!
Prof. Eder Pansani

50
Praticando!
O resultado deverá ser este:
Prof. Eder Pansani

51
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.
Prof. Eder Pansani

52
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.
Prof. Eder Pansani

53
Praticando!
Agora para praticar mais um pouco crie
outra página HTML (e outra CSS) e faça a
seguinte página:
Prof. Eder Pansani

54
Praticando!
Exemplo 2:
Prof. Eder Pansani

55
Dúvidas?
Perguntas?
Prof. Eder Pansani


10.aula 5 - CSS - Aplicando Regras CSS

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

10.aula 5 - CSS - Aplicando Regras CSS

Hochgeladen von

Copyright:

Verfügbare Formate

1

Disciplina: Desenvolvimento Web I

CSS: Aplicando regras

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

O objetivo desta aula é abordar as formas

Prof. Eder Pansani

Sendo que cada pode ser usado para

Prof. Eder Pansani

Aplicando CSS ao HTML

Prof. Eder Pansani

Aplicando CSS ao HTML

Prof. Eder Pansani

Aplicando CSS ao HTML

Prof. Eder Pansani

Aplicando CSS ao HTML

Prof. Eder Pansani

1)Crie uma página HTML

4)depois crie 6 DIVs com um texto

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Aplicando CSS ao HTML

Prof. Eder Pansani

Aplicando CSS ao HTML

Prof. Eder Pansani

Prof. Eder Pansani

Você deverá apenas criar essa tag STYLE

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Aplicando CSS ao HTML

Agora iremos ver como criar os estilos

Prof. Eder Pansani

Aplicando CSS ao HTML

Agora teremos dois arquivos diferentes

Prof. Eder Pansani

Aplicando CSS ao HTML

Prof. Eder Pansani

Aplicando CSS ao HTML

Prof. Eder Pansani

Crie um novo arquivo, com o nome

Prof. Eder Pansani

A forma de escrever o código CSS é

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani

Prof. Eder Pansani