noções básicas de css - faccatfpereira/aula_css/slides_aula_css_2porfolha.pdf · noções...
TRANSCRIPT
![Page 1: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/1.jpg)
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
![Page 2: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/2.jpg)
2
3
Noções Básicas de CSS
4
Benefícios em utilizar CSS
![Page 3: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/3.jpg)
3
5
6
Noções Básicas de CSS
Introdução
![Page 4: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/4.jpg)
4
7
Noções Básicas de CSS
8
Noções Básicas de CSS
Sintaxe do CSS
![Page 5: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/5.jpg)
5
9
Noções Básicas de CSS
10
Noções Básicas de CSS
![Page 6: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/6.jpg)
6
11
Noções Básicas de CSS
12
Noções Básicas de CSS
![Page 7: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/7.jpg)
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
![Page 8: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/8.jpg)
8
15
Noções Básicas de CSS
Aplicação de Regras CSS a uma página web
16
![Page 9: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/9.jpg)
9
17
Noções Básicas de CSS
18
Noções Básicas de CSS
![Page 10: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/10.jpg)
10
19
Noções Básicas de CSS
20
Noções Básicas de CSS
Compreensão das Propriedades CSS
![Page 11: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/11.jpg)
11
21
Noções Básicas de CSS
22
Noções Básicas de CSS
![Page 12: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/12.jpg)
12
23
Noções Básicas de CSS
Associação de estilos a uma página web
24
Noções Básicas de CSS
![Page 13: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/13.jpg)
13
25
Noções Básicas de CSS
26
Noções Básicas de CSS
![Page 14: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/14.jpg)
14
27
Noções Básicas de CSS
28
Os 3 tipos de folhas de estilo são:
![Page 15: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/15.jpg)
15
29
Os 3 tipos de folhas de estilo são:
30
Os 3 tipos de folhas de estilo são:
![Page 16: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/16.jpg)
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
![Page 17: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/17.jpg)
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
![Page 18: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/18.jpg)
18
35
Ordem de seleção dentro das CSS
36
Ordem de seleção dentro das CSS
![Page 19: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/19.jpg)
19
37
Ordem de seleção dentro das CSS
38
Noções Básicas de CSS
Comentários dentro das folhas de estilo
![Page 20: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/20.jpg)
20
39
Alterar o formato de uma lista
40
Alterar o formato de uma lista
![Page 21: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/21.jpg)
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>:
![Page 22: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/22.jpg)
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
![Page 23: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/23.jpg)
23
45
Definindo uma Classe de Estilos
46
![Page 24: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/24.jpg)
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
![Page 25: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/25.jpg)
25
49
Definindo um ID de Estilos
50
![Page 26: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/26.jpg)
26
51
Principais Atributos com suas Descrições, Valores e Uso:
52
![Page 27: Noções Básicas de CSS - FACCATfpereira/aula_css/slides_aula_css_2porfolha.pdf · Noções Básicas de CSS 4 Benefícios em utilizar CSS. 3 5 6 ... Microsoft PowerPoint - slides_aula_css.ppt](https://reader034.vdocuments.pub/reader034/viewer/2022043017/5f3962c847ee3d34a02486d1/html5/thumbnails/27.jpg)
27
53
Abrir o seguintes site:
http://maujor.com/