introdução ao css
TRANSCRIPT
![Page 1: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/1.jpg)
Introdução a CSS
Willian Massami [email protected]
1
Agradecimentos a prof. Dra. Renata Pontin de Mattos Fortes
Wednesday, December 5, 12
![Page 2: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/2.jpg)
2
Sumário
• Histórico
• Definição
• Por que usar CSS?
• Vantagens
• Sintaxe básica
• Como inserir uma folha de estilo
• Agrupando elementos
• Algumas propriedades
Wednesday, December 5, 12
![Page 3: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/3.jpg)
3
Histórico
• A especificação CSS-1 foi criada pela Microsoft (1996)
• A W3C aprovou, formalizou e recomendou a especificação
• 1998 surge o CSS-2, como extensão da CSS-1 e resolvendo algumas de suas limitações
• CSS-3 está atualmente como release
• http://www.css3.info/
Wednesday, December 5, 12
![Page 4: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/4.jpg)
4
Definição
• CSS - Cascading Style Sheets
• Styles descrevem como os documentos devem ser apresentados
• Styles são normalmente armazenados em Style Sheets
• Múltiplas definições de estilo vão cascatear em um
Wednesday, December 5, 12
![Page 5: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/5.jpg)
5
Por que usar CSS?• HTML não tem um conjunto infinito de tags
• HTML, por si só, não tem informações relacionada à apresentação
• Um Browser (navegador) não tem idéia do que está representado em um documento HTML
• A informação em um documento HTML pode não estar na forma em que se deseja apresentá-la;
• Portanto, deve existir algo que, em adição ao documento HTML, forneça informações sobre a maneira que o mesmo deve ser apresentado ou processado;
• Solução: CSS.
Wednesday, December 5, 12
![Page 6: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/6.jpg)
6
Vantagens
• Separa o conteúdo da apresentação
• Portanto, os autores de conteúdo não precisam se preocupar com a apresentação
• Reuso de dados: o mesmo conteúdo pode ser visualizado de formas diferentes em vários contextos
• Estilo customizado às preferências do usuário (acessibilidade): tamanho de impressão, cor, layout simplificado para “leitores” auditivos
• Uma única folha de estilo pode definir e manter a consistência de uma coleção de documentos, por exemplo: caso um usuário queira alterar a cor de fundo de um site basta atualizar código fonte
Wednesday, December 5, 12
![Page 7: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/7.jpg)
7
Sintaxe básica
seletor {propriedade: valor}
body {color:black}
p {font-family:"sans serif"}
p {text-align:center;color:red}
h1,h2,h3,h4,h5,h6 {color:green}
Wednesday, December 5, 12
![Page 8: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/8.jpg)
8
Sintaxe básica
Comentários em CSS
/* isto é um comentário e não será interpretado pelo navegador... */
body {color:black}
Wednesday, December 5, 12
![Page 9: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/9.jpg)
9
Sintaxe básicaExemplo 1
Wednesday, December 5, 12
![Page 10: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/10.jpg)
10
Sintaxe básicaExemplo 2
Wednesday, December 5, 12
![Page 11: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/11.jpg)
11
Sintaxe básicaExemplo 2
Wednesday, December 5, 12
![Page 12: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/12.jpg)
12
Como inserir uma folha de estilo
• Existem três formas de inserção de folhas de estilo:
• Folhas de estilo externas (External Style Sheet)
• Folhas de estilo internas (Internal Style Sheet)
• Folhas de estilo inline
Wednesday, December 5, 12
![Page 13: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/13.jpg)
13
Como inserir uma folha de estilo
Folhas de estilo externas
Wednesday, December 5, 12
![Page 14: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/14.jpg)
14
Como inserir uma folha de estilo
• Ideal para aplicar em várias páginas
• Cada página deve linkar à página de estilo usando a tag <link>
• A tag <link> deve vir no cabeçalho do arquivo .html
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
Folhas de estilo externas
Wednesday, December 5, 12
![Page 15: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/15.jpg)
15
Como inserir uma folha de estilo
• Para que a página default.html carregue as regras de CSS definidas no arquivo style.css, utiliza-se a seguinte referência:
Folhas de estilo externas
Wednesday, December 5, 12
![Page 16: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/16.jpg)
16
Como inserir uma folha de estilo
Folhas de estilo externas
Wednesday, December 5, 12
![Page 17: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/17.jpg)
17
Como inserir uma folha de estilo
• Outras formas de realizar a declaração de folhas de estilo externas
<head><style type="text/css">@import url("estilo.css");</style></head> <head>
<style type="text/css"> @import "dojo/dojo/resources/dojo.css";</style> </head>
Folhas de estilo externas
Wednesday, December 5, 12
![Page 18: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/18.jpg)
18
Como inserir uma folha de estilo
Folhas de estilo internas
Wednesday, December 5, 12
![Page 19: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/19.jpg)
19
Como inserir uma folha de estilo
• Utilizado quando um documento tem um estilo único
<head> <style type="text/css"> hr {color:sienna} p {margin-left:20px} body {background-image:url("images/back40.gif")} </style></head>
Folhas de estilo internas
Wednesday, December 5, 12
![Page 20: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/20.jpg)
20
Como inserir uma folha de estilo
Folhas de estilo internas
Wednesday, December 5, 12
![Page 21: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/21.jpg)
21
Como inserir uma folha de estilo
Folhas de estilo internas
Folhas de estilo interna para
sobrescrever a externa
Wednesday, December 5, 12
![Page 22: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/22.jpg)
22
Como inserir uma folha de estilo
Folhas de estilo inline
Wednesday, December 5, 12
![Page 23: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/23.jpg)
23
Como inserir uma folha de estilo
Folhas de estilo inline
• Usado quando um estilo deve ser aplicado num único elemento;
• Mistura o conteúdo com a apresentação;
• O estilo é definido dentro do elemento:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Wednesday, December 5, 12
![Page 24: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/24.jpg)
24
Como inserir uma folha de estilo
• Se diferentes estilos forem definidos para um mesmo elemento, utilizando o mesmo SELETOR, prevalece o de maior prioridade → Cascading
• Ordem crescente de prioridade (Cascading Order):
1. Definição do navegador (Browser)
2. Folhas de estilo externas
3. Folhas de estilo internas
4. Estilos inline
Wednesday, December 5, 12
![Page 25: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/25.jpg)
25
Como inserir uma folha de estilo
Folhas de estilo externas
Folhas de estilo internas
Folhas de estilo inline
<h3 style=“font-size:13pt”> ...</h3>
Wednesday, December 5, 12
![Page 26: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/26.jpg)
26
Como inserir uma folha de estilo
• Como resultado do cascateamento dos estilos:
color:red; →Declaração Externatext-align:right; →Declaração Internafont-size:30pt →Declaração Inlineoutras configurações →Browser
Wednesday, December 5, 12
![Page 27: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/27.jpg)
27
Agrupando elementos• Usando classes
• Temos duas listas de links para diferentes tipos de uvas usadas na produção de vinho branco e de vinho tinto
Wednesday, December 5, 12
![Page 28: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/28.jpg)
28
Agrupando elementos
• Queremos que os links para vinho branco sejam na cor amarela, para vinho tinto na cor vermelha e os demais links na página permaneçam na cor azul.
Wednesday, December 5, 12
![Page 29: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/29.jpg)
29
Agrupando elementos• Agora podemos definir propriedades específicas para links
pertencentes as classes whitewine e redwine, respectivamente.
Wednesday, December 5, 12
![Page 30: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/30.jpg)
30
Agrupando elementos• Usando ID
Wednesday, December 5, 12
![Page 31: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/31.jpg)
31
Agrupando elementos• Usando ID
Wednesday, December 5, 12
![Page 32: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/32.jpg)
32
Agrupando elementos
• Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id;
• O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no seu documento.
Wednesday, December 5, 12
![Page 33: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/33.jpg)
33
Agrupando elementos• Exemplo utilizando o elemento <span>
Wednesday, December 5, 12
![Page 34: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/34.jpg)
34
Agrupando elementos
• Obs: é claro que você pode usar id para estilizar o elemento <span>; contudo deverá usar uma única id para cada um os três elementos <span>.
• Enquanto <span> é usado dentro de um elemento no nível de bloco, <div> é usado para agrupar um ou mais elementos no nível de bloco.
Wednesday, December 5, 12
![Page 35: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/35.jpg)
35
Agrupando elementos• Exemplo utilizando o elemento <div>
Wednesday, December 5, 12
![Page 36: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/36.jpg)
36
Agrupando elementos• Exemplo utilizando o elemento <div>
Wednesday, December 5, 12
![Page 37: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/37.jpg)
37
Algumas propriedades• background-color
Wednesday, December 5, 12
![Page 38: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/38.jpg)
38
Algumas propriedades• background-image
Wednesday, December 5, 12
![Page 39: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/39.jpg)
39
Algumas propriedades• background-image mais dicas
http://maujor.com/tutorial/backtut.php
Wednesday, December 5, 12
![Page 40: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/40.jpg)
40
Algumas propriedades
• background-image mais dicas
• background-repeat
• background-attachment
• background position
http://maujor.com/tutorial/backtut.php
Wednesday, December 5, 12
![Page 41: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/41.jpg)
41
Algumas propriedades• line-height
Wednesday, December 5, 12
![Page 42: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/42.jpg)
42
Algumas propriedades• text-transform
Wednesday, December 5, 12
![Page 43: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/43.jpg)
43
Algumas propriedades• text-decoration
Wednesday, December 5, 12
![Page 44: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/44.jpg)
44
Algumas propriedades• font-style
Wednesday, December 5, 12
![Page 45: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/45.jpg)
45
Onde procurar ajuda
• www.w3schools.com
• www.pt-br.html.net/tutorials/css/
• www.maujor.com/tutorial/
• www.csszengarden.com/
Wednesday, December 5, 12
![Page 46: Introdução ao CSS](https://reader034.vdocuments.net/reader034/viewer/2022052412/5596ef521a28ab23778b4676/html5/thumbnails/46.jpg)
46
Exercício• Fazer uma página web que apresente o seguinte conteúdo:
Wednesday, December 5, 12