Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções...
Transcript of Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções...
1
Noções Básicas de CSS
Profa. Flávia Pereira de Carvalho
Fontes: Adobe Dreamweaver CS4 – Websites Interativos – Processor AlfamídiaCSS Cookbook – Christopher Schmitt
2
Noções Básicas de CSS
Introdução
2
3
Noções Básicas de CSS
4
Benefícios em utilizar CSS
3
5
6
Noções Básicas de CSS
Introdução
4
7
Noções Básicas de CSS
8
Noções Básicas de CSS
Sintaxe do CSS
5
9
Noções Básicas de CSS
10
Noções Básicas de CSS
6
11
Noções Básicas de CSS
12
Noções Básicas de CSS
7
13
Noções Básicas de CSS
14
Noções Básicas de CSS
Aplicação de Regras CSS a uma página web
8
15
Noções Básicas de CSS
Aplicação de Regras CSS a uma página web
16
9
17
Noções Básicas de CSS
18
Noções Básicas de CSS
10
19
Noções Básicas de CSS
20
Noções Básicas de CSS
Compreensão das Propriedades CSS
11
21
Noções Básicas de CSS
22
Noções Básicas de CSS
12
23
Noções Básicas de CSS
Associação de estilos a uma página web
24
Noções Básicas de CSS
13
25
Noções Básicas de CSS
26
Noções Básicas de CSS
14
27
Noções Básicas de CSS
28
Os 3 tipos de folhas de estilo são:
15
29
Os 3 tipos de folhas de estilo são:
30
Os 3 tipos de folhas de estilo são:
16
31
Noções Básicas de CSS
Quando usar estilos inline
32
Noções Básicas de CSS
Quando usar folhas de estilo internas
17
33
Noções Básicas de CSS
Ordem de seleção dentro das CSS
34
Noções Básicas de CSS
Ordem de seleção dentro das CSS
18
35
Ordem de seleção dentro das CSS
36
Ordem de seleção dentro das CSS
19
37
Ordem de seleção dentro das CSS
38
Noções Básicas de CSS
Comentários dentro das folhas de estilo
20
39
Alterar o formato de uma lista
40
Alterar o formato de uma lista
21
41
Formas de Utilização dos Seletores
Um seletor pode ser o nome de uma tag HTML, um grupo de tags, uma classe ou um ID:
42
Aplicando estilos a uma Tag Primeiro devemos definir à qual tag queremos aplicar os estilos. Neste
exemplo alteraremos o estilo das tags <FONT>:
22
43
Definindo Estilos para umGrupo de Tags
Semelhante ao primeiro, sendo que o seletor seráuma lista de tags, separadas por ( , ). No exemplo do próximo slide aplicaremos estilos as tags<FONT> e <P>:
44
23
45
Definindo uma Classe de Estilos
46
24
47
Aplicando Estilos a uma Palavraou a um Grupo de Palavras
Se tiver necessidade de aplicar estilo somente a uma palavra ou a um grupo pequeno de palavras dentro de um parágrafo, utiliza-se o comando <span>.
Sintaxe:
<span [class = “class_name”]> Texto </span>
Exemplo no próximo slide
48
25
49
Definindo um ID de Estilos
50
26
51
Principais Atributos com suas Descrições, Valores e Uso:
52
27
53
Abrir o seguintes site:
http://maujor.com/