Upload
others
View
7
Download
0
Embed Size (px)
Citation preview
1Unidade 02 – CSS
Programação para Internet 2
CSSCascading Style Sheets
(Folhas de Estilo em Cascata)
Instituto Federal de Educação, Ciência e Tecnologia do Triângulo Mineiro
Prof. Edwar Saliba Júnior
2Unidade 02 – CSS
Programação para Internet 2
Parte I
CSS Basic
3Unidade 02 – CSS
Programação para Internet 2
CSS• Determina como elementos HTML serão
exibidos;• Foi criado no HTML 4.0 para resolver
alguns problemas da época;• Pode poupar bastante trabalho quando
se usa folhas de estilo externas;• Folhas de estilo externas são
armazenadas em arquivos.css.
4Unidade 02 – CSS
Programação para Internet 2
Exemplo
5Unidade 02 – CSS
Programação para Internet 2
Exemplo 2• Site sem aplicação de CSS:
6Unidade 02 – CSS
Programação para Internet 2
Aplicando a Folha de Estilo 01• Código
7Unidade 02 – CSS
Programação para Internet 2
Resultado 01
8Unidade 02 – CSS
Programação para Internet 2
Aplicando a Folha de Estilo 02• Código
9Unidade 02 – CSS
Programação para Internet 2
Resultado 02
10Unidade 02 – CSS
Programação para Internet 2
Aplicando a Folha de Estilo 03• Código
11Unidade 02 – CSS
Programação para Internet 2
Resultado 03
12Unidade 02 – CSS
Programação para Internet 2
Sintaxe• Uma regra CSS é constituída de duas partes:
– um seletor e– uma ou mais declarações.
13Unidade 02 – CSS
Programação para Internet 2
Exemplo 03
14Unidade 02 – CSS
Programação para Internet 2
Seletor “id”• Um estilo pode ser aplicado a um único
elemento em um documento por meio da identificação do mesmo;
• Dê um nome para o atributo “id” do elemento HTML (e. g. id=”para1”);
• No CSS será criado como: #para1
15Unidade 02 – CSS
Programação para Internet 2
Seletor “class”• Um estilo pode ser aplicado a uma determinada classe de
elementos em um documento;
• Dê um nome para o atributo “class” do(s) elemento(s) HTML (e. g. class=”center”);
• No CSS será criado como: .center
16Unidade 02 – CSS
Programação para Internet 2
Três Maneiras de Usar CSS
• Folha de Estilo Externa;
• Folha de Estilo Interna e
• Estilo em Linha.
17Unidade 02 – CSS
Programação para Internet 2
Folha de Estilo Externa• Pode ser criada em qualquer editor de texto;
• O arquivo deve ser salvo com a extensão “.css”;
• O arquivo não deve conter elementos HTML;
• Deve ser relacionado a página por meio da TAG link no cabeçalho da página (exemplo abaixo);
• Excelente para aplicação de um determinado estilo para diversas páginas.
Exemplo decomo deveser o link.
Exemplo decomo deve
ser o arquivo.
18Unidade 02 – CSS
Programação para Internet 2
Folha de Estilo Interna• Deve ser usada preferencialmente quando uma
única página tiver um estilo diferenciado das demais;
• O estilo deve ser definido na seção <head> da página por meio da TAG <style>.
19Unidade 02 – CSS
Programação para Internet 2
Estilo em Linha• Ao se usar estilo em linha, perde-se
muito das vantagens proporcionadas pelo CSS, pois, mistura-se conteúdo com formatação. Use este método com moderação!
• Para usar estilo em linha, basta fazer uso do atributo style da TAG em questão.
20Unidade 02 – CSS
Programação para Internet 2
Múltiplas Folhas de Estilo• Algumas propriedades podem ser configuradas em mais de uma folha
de estilo. Neste caso, o browser respeitará a que for mais específica.
21Unidade 02 – CSS
Programação para Internet 2
Parte II
CSS Styling
22Unidade 02 – CSS
Programação para Internet 2
Background
• Usada para definir os efeitos de fundo de tela de um elemento.
23Unidade 02 – CSS
Programação para Internet 2
background-color
Mais informações sobre os tipos de cores usados no CSS acesse este link.
24Unidade 02 – CSS
Programação para Internet 2
background-image
25Unidade 02 – CSS
Programação para Internet 2
background-image
26Unidade 02 – CSS
Programação para Internet 2
Background-image Repetidamente
• Por padrão as imagens se repetem horizontal e verticalmente;
• Algumas somente horizontalmente outras apenas verticalmete.
Comando para quea imagem se repitasomente no eixo X
(horizontal).
27Unidade 02 – CSS
Programação para Internet 2
Background-image Repetidamente
28Unidade 02 – CSS
Programação para Internet 2
Background-imageConfigurando Posição e Não-repetição
29Unidade 02 – CSS
Programação para Internet 2
Background-imageConfigurando Posição e Não-repetição
30Unidade 02 – CSS
Programação para Internet 2
backgroundTodas as Propriedades Num Único Comando
• É possível de ser feito, porém há algumas mudanças: – a propriedade é tratada apenas com “background”,
– os valores devem seguir a seguinte ordem:• background-color,
• background-image,
• background-repeat,
• background-attachment e
• background-position.
31Unidade 02 – CSS
Programação para Internet 2
Exemplo 04
32Unidade 02 – CSS
Programação para Internet 2
Resultado 04
33Unidade 02 – CSS
Programação para Internet 2
Todas as Propriedades CSS do Background
34Unidade 02 – CSS
Programação para Internet 2
Formatação de Texto
35Unidade 02 – CSS
Programação para Internet 2
Color• A propriedade color é usada para configurar a cor de um
texto;
• A cor padrão de uma página é definida no seletor body;
• Pode-se usar, da mesma forma que para o background, os diversos tipos de formatos de cores ao backgroud aplicáveis. Sendo que os mais utilizados são:– valor hexadecimal (e. g. #00FF00),– valor RGB (e. g. “rgb(255,0,0)”) e– o nome da cor (e. g. “red”).
36Unidade 02 – CSS
Programação para Internet 2
text-align
37Unidade 02 – CSS
Programação para Internet 2
text-decoration
38Unidade 02 – CSS
Programação para Internet 2
text-decoration
O título 4 fica piscando.Porém isto não aconte-ce nos navegadores:IE, Chrome e Safari.
39Unidade 02 – CSS
Programação para Internet 2
text-transform
40Unidade 02 – CSS
Programação para Internet 2
text-indent
Em outras palavras, definea distância entre a margem esquerda e o início do pa-
rágrafo.
41Unidade 02 – CSS
Programação para Internet 2
Fonte• As propriedades CSS das fontes definem:
– família,
– cor,
– tamanho e
– estilo do texto.
42Unidade 02 – CSS
Programação para Internet 2
Família da Fonte
43Unidade 02 – CSS
Programação para Internet 2
font-style
44Unidade 02 – CSS
Programação para Internet 2
font-size
45Unidade 02 – CSS
Programação para Internet 2
font-size
46Unidade 02 – CSS
Programação para Internet 2
font-size
47Unidade 02 – CSS
Programação para Internet 2
font-size
48Unidade 02 – CSS
Programação para Internet 2
Links
49Unidade 02 – CSS
Programação para Internet 2
Links
50Unidade 02 – CSS
Programação para Internet 2
Links
51Unidade 02 – CSS
Programação para Internet 2
Links
52Unidade 02 – CSS
Programação para Internet 2
Lista
53Unidade 02 – CSS
Programação para Internet 2
Lista
54Unidade 02 – CSS
Programação para Internet 2
Lista(Imagem como Marcador)
55Unidade 02 – CSS
Programação para Internet 2
Lista(Imagem como Marcador)
56Unidade 02 – CSS
Programação para Internet 2
Lista – Shorthand Property
57Unidade 02 – CSS
Programação para Internet 2
Lista - Propriedades
58Unidade 02 – CSS
Programação para Internet 2
Tabela
59Unidade 02 – CSS
Programação para Internet 2
Tabela – Borda Dupla
60Unidade 02 – CSS
Programação para Internet 2
Tabela – Borda Simples
61Unidade 02 – CSS
Programação para Internet 2
Tabela – Borda Simples
62Unidade 02 – CSS
Programação para Internet 2
Tabela – Largura e Altura
63Unidade 02 – CSS
Programação para Internet 2
Tabela – Largura e Altura
64Unidade 02 – CSS
Programação para Internet 2
Tabela – Alinhamento de Texto Horizontal
65Unidade 02 – CSS
Programação para Internet 2
Tabela – Alinhamento de Texto Horizontal
66Unidade 02 – CSS
Programação para Internet 2
Tabela – Alinhamento de Texto Vertical
67Unidade 02 – CSS
Programação para Internet 2
Tabela – Espaço entre Borda e Conteúdo
68Unidade 02 – CSS
Programação para Internet 2
Tabela - Cor
69Unidade 02 – CSS
Programação para Internet 2
Parte III
CSS Box Model
70Unidade 02 – CSS
Programação para Internet 2
Box Model
• O conceito de CSS box model pode ser entendido como uma estrutura que empacota elementos HTML;
• Esta estrutura permite que você coloque uma borda e espaço também, em volta dos elementos HTML;
• Vejamos uma figura representativa da box model no próximo slide.
71Unidade 02 – CSS
Programação para Internet 2
Box Model
72Unidade 02 – CSS
Programação para Internet 2
Box Model – Largura e Altura
73Unidade 02 – CSS
Programação para Internet 2
Box Model – Exemplo
74Unidade 02 – CSS
Programação para Internet 2
Borda
75Unidade 02 – CSS
Programação para Internet 2
border-style
76Unidade 02 – CSS
Programação para Internet 2
Borda - Exemplo
77Unidade 02 – CSS
Programação para Internet 2
Borda - Largura
78Unidade 02 – CSS
Programação para Internet 2
Borda – Largura - Exemplo
79Unidade 02 – CSS
Programação para Internet 2
Borda - Cor
80Unidade 02 – CSS
Programação para Internet 2
Borda – Cor - Exemplo
81Unidade 02 – CSS
Programação para Internet 2
Borda – Lados Individuais
82Unidade 02 – CSS
Programação para Internet 2
Borda – Lados Individuais
83Unidade 02 – CSS
Programação para Internet 2
Borda – Shorthand Property
84Unidade 02 – CSS
Programação para Internet 2
Borda – Todas as Propriedades
Para detalharcada proprie-dade, acesse o link: http://www.w3schools.com/css/css_border.asp
85Unidade 02 – CSS
Programação para Internet 2
Outline
• É uma linha desenhada por fora da borda. Tem o intuito de destacar o elemento envolvido;
• Possui propriedades para destacar:– estilo,– cor e – largura.
86Unidade 02 – CSS
Programação para Internet 2
Outline
87Unidade 02 – CSS
Programação para Internet 2
Outline - Propriedades
88Unidade 02 – CSS
Programação para Internet 2
Margens• Define o espaço ao redor dos elementos.
89Unidade 02 – CSS
Programação para Internet 2
Margens – Lados Individuais
90Unidade 02 – CSS
Programação para Internet 2
Margens – Shortland Property
91Unidade 02 – CSS
Programação para Internet 2
Margens – Todas as Propriedades
92Unidade 02 – CSS
Programação para Internet 2
Padding• É uma área limpa que existe entre a
borda e o elemento. Esta área é afetada diretamente pela cor do fundo de tela (background color) do elemento.
93Unidade 02 – CSS
Programação para Internet 2
Padding – Lados Individuais
94Unidade 02 – CSS
Programação para Internet 2
Padding – Shortland Property
95Unidade 02 – CSS
Programação para Internet 2
Parte IV
CSS Advanced
96Unidade 02 – CSS
Programação para Internet 2
Agrupando Seletores
97Unidade 02 – CSS
Programação para Internet 2
Aninhando Seletores
98Unidade 02 – CSS
Programação para Internet 2
Aninhamento de Seletores - Exemplo
99Unidade 02 – CSS
Programação para Internet 2
Dimensão• Propriedade que permite o controle de altura e largura de
um elemento HTML.
100Unidade 02 – CSS
Programação para Internet 2
Dimensão - Exemplo
101Unidade 02 – CSS
Programação para Internet 2
Exibição e Visibilidade• A propriedade display especifica se e como
um elemento será mostrado;• A propriedade visibility especifica se um
elemento deve estar visível ou escondido.
102Unidade 02 – CSS
Programação para Internet 2
Exibição e Visibilidade - Exemplo
103Unidade 02 – CSS
Programação para Internet 2
Elementos de Bloco e de Linha
104Unidade 02 – CSS
Programação para Internet 2
Mudando a Forma de Exibição dos Elementos
105Unidade 02 – CSS
Programação para Internet 2
Mudando a Forma de Exibição dos Elementos - Exemplo
106Unidade 02 – CSS
Programação para Internet 2
Mudando a Forma de Exibição dos Elementos – Mesmo Exemplo sem CSS
107Unidade 02 – CSS
Programação para Internet 2
Posicionamento• Decide qual elemento virá na frente e
qual será sobreposto.
108Unidade 02 – CSS
Programação para Internet 2
Método 01 de Posicionamento: Estático
109Unidade 02 – CSS
Programação para Internet 2
Método 02 de Posicionamento: Fixado
110Unidade 02 – CSS
Programação para Internet 2
Método 02 de Posicionamento: Fixado - Exemplo
Após rolar a telapara baixo, o tex-to fixado continuano mesmo local.
111Unidade 02 – CSS
Programação para Internet 2
Método 03 de Posicionamento: Relativo
112Unidade 02 – CSS
Programação para Internet 2
Método 03 de Posicionamento: Relativo - Exemplo
113Unidade 02 – CSS
Programação para Internet 2
Método 03 de Posicionamento: Relativo – Exemplo 2
114Unidade 02 – CSS
Programação para Internet 2
Método 04 de Posicionamento: Absoluto
115Unidade 02 – CSS
Programação para Internet 2
Método 04 de Posicionamento: Absoluto - Exemplo
116Unidade 02 – CSS
Programação para Internet 2
Sobrepondo Elementos
117Unidade 02 – CSS
Programação para Internet 2
Sobrepondo Elementos - Exemploz-index: -1;
z-index: 0;
118Unidade 02 – CSS
Programação para Internet 2
Posicionamento - Propriedades
119Unidade 02 – CSS
Programação para Internet 2
Posicionamento - Propriedades
120Unidade 02 – CSS
Programação para Internet 2
Flutuar
121Unidade 02 – CSS
Programação para Internet 2
Flutuar - Exemplo
122Unidade 02 – CSS
Programação para Internet 2
Flutuar Elementos Lado a Lado
123Unidade 02 – CSS
Programação para Internet 2
Flutuar Elementos Lado a Lado - Exemplo
124Unidade 02 – CSS
Programação para Internet 2
Desabilitando o Flutuar
125Unidade 02 – CSS
Programação para Internet 2
Desabilitando o Flutuar -
Exemplo
126Unidade 02 – CSS
Programação para Internet 2
Flutuar - Propriedades
127Unidade 02 – CSS
Programação para Internet 2
Alinhamento
128Unidade 02 – CSS
Programação para Internet 2
Usando Margens para Centralizar Elementos
129Unidade 02 – CSS
Programação para Internet 2
Usando Margens para Centralizar Elementos - Exemplo
130Unidade 02 – CSS
Programação para Internet 2
Alinhamento à Esquerda e à DireitaUsando a Propriedade position
131Unidade 02 – CSS
Programação para Internet 2
Alinhamento à Esquerda e à DireitaUsando a Propriedade position - Exemplo
132Unidade 02 – CSS
Programação para Internet 2
Questão de Compatibilidade
133Unidade 02 – CSS
Programação para Internet 2
Questão de Compatibilidade - Exemplo
134Unidade 02 – CSS
Programação para Internet 2
Alinhamento à Esquerda e à DireitaUsando a Propriedade float
135Unidade 02 – CSS
Programação para Internet 2
Alinhamento à Esquerda e à DireitaUsando a Propriedade float - Exemplo
136Unidade 02 – CSS
Programação para Internet 2
Questão de Compatibilidade
137Unidade 02 – CSS
Programação para Internet 2
Questão de Compatibilidade - Exemplo
138Unidade 02 – CSS
Programação para Internet 2
Pseudoclasses• Usada para adicionar efeitos especiais a
alguns seletores.
139Unidade 02 – CSS
Programação para Internet 2
Âncora e Pseudoclasses
140Unidade 02 – CSS
Programação para Internet 2
Âncora e Pseudoclasses - Exemplo
141Unidade 02 – CSS
Programação para Internet 2
Classes e Pseudoclasses
pseudoclasse
classe
142Unidade 02 – CSS
Programação para Internet 2
Classes e PseudoclassesFormatar Primeiro Elemento <p>
143Unidade 02 – CSS
Programação para Internet 2
Classes e PseudoclassesFormatar Primeiro Elemento <p>
Exemplo
144Unidade 02 – CSS
Programação para Internet 2
Classes e PseudoclassesFormatar Primeiro Subelemento
<i>
145Unidade 02 – CSS
Programação para Internet 2
Classes e PseudoclassesFormatar Primeiro Subelemento <i>
Exemplo
146Unidade 02 – CSS
Programação para Internet 2
Classes e PseudoclassesFormatar Todos Subelementos <i>
147Unidade 02 – CSS
Programação para Internet 2
Classes e PseudoclassesFormatar Todos Subelementos <i>
Exemplo
148Unidade 02 – CSS
Programação para Internet 2
Pseudoclasse :lang
149Unidade 02 – CSS
Programação para Internet 2
Pseudoclasse :lang - Exemplo
150Unidade 02 – CSS
Programação para Internet 2
Pseudoclasses / Elementos
151Unidade 02 – CSS
Programação para Internet 2
Pseudoelementos• São usados para adicionar efeitos especiais a
alguns seletores.
152Unidade 02 – CSS
Programação para Internet 2
Pseudoelemento de Primeira Linha
153Unidade 02 – CSS
Programação para Internet 2
Pseudoelemento de Primeira Linha Exemplo
154Unidade 02 – CSS
Programação para Internet 2
Pseudoelemento - Primeira Letra
155Unidade 02 – CSS
Programação para Internet 2
Pseudoelemento - Primeira LetraExemplo
156Unidade 02 – CSS
Programação para Internet 2
Classes e Pseudoelementos
157Unidade 02 – CSS
Programação para Internet 2
Múltiplos Pseudoelementos
158Unidade 02 – CSS
Programação para Internet 2
Múltiplos PseudoelementosExemplo
159Unidade 02 – CSS
Programação para Internet 2
Pseudoelemento :before
160Unidade 02 – CSS
Programação para Internet 2
Pseudoelemento :beforeExemplo
161Unidade 02 – CSS
Programação para Internet 2
Pseudoelemento :after
162Unidade 02 – CSS
Programação para Internet 2
Pseudoelemento :afterExemplo
163Unidade 02 – CSS
Programação para Internet 2
Pseudoclasses / elementos
164Unidade 02 – CSS
Programação para Internet 2
Barra de Navegação
165Unidade 02 – CSS
Programação para Internet 2
Barra de NavegaçãoExemplo 1
166Unidade 02 – CSS
Programação para Internet 2
Barra de Navegação Sem Bullets
167Unidade 02 – CSS
Programação para Internet 2
Barra de Navegação Sem BulletsExemplo
168Unidade 02 – CSS
Programação para Internet 2
Barra de Navegação Vertical
169Unidade 02 – CSS
Programação para Internet 2
Barra de Navegação VerticalExemplo
170Unidade 02 – CSS
Programação para Internet 2
Barra de Navegação VerticalExemplo 2
171Unidade 02 – CSS
Programação para Internet 2
Barra de Navegação Horizontal
172Unidade 02 – CSS
Programação para Internet 2
Barra de Navegação HorizontalExemplo
173Unidade 02 – CSS
Programação para Internet 2
Barra de Navegação HorizontalExemplo 2
174Unidade 02 – CSS
Programação para Internet 2
Lista Flutuante
175Unidade 02 – CSS
Programação para Internet 2
Lista FlutuanteExemplo
176Unidade 02 – CSS
Programação para Internet 2
Lista FlutuanteExemplo 2
177Unidade 02 – CSS
Programação para Internet 2
Galeria de Imagens
• Código-fonte da Galeria de Imagens
178Unidade 02 – CSS
Programação para Internet 2
Imagem: Opaca / Transparente
179Unidade 02 – CSS
Programação para Internet 2
Imagem: Opaca / TransparenteExemplo 1.1
180Unidade 02 – CSS
Programação para Internet 2
Imagem: Opaca / TransparenteExemplo 1.2
181Unidade 02 – CSS
Programação para Internet 2
Image Sprite
182Unidade 02 – CSS
Programação para Internet 2
183Unidade 02 – CSS
Programação para Internet 2
Image Sprites - Create a Navigation ListExemplo
184Unidade 02 – CSS
Programação para Internet 2
Image Sprites – Hover Effect
185Unidade 02 – CSS
Programação para Internet 2
Image Sprites – Hover EffectExemplo
186Unidade 02 – CSS
Programação para Internet 2
Tipos de Mídias
187Unidade 02 – CSS
Programação para Internet 2
Tipos de Mídias
188Unidade 02 – CSS
Programação para Internet 2
Outros Tipos de Mídia
189Unidade 02 – CSS
Programação para Internet 2
Seletores de Atributo
190Unidade 02 – CSS
Programação para Internet 2
Seletores de AtributoExemplo
191Unidade 02 – CSS
Programação para Internet 2
Seletores de Atributos e Valores
192Unidade 02 – CSS
Programação para Internet 2
Seletores de Atributos e ValoresExemplo
193Unidade 02 – CSS
Programação para Internet 2
Seletores de Atributo e ValorMúltiplos Valores
194Unidade 02 – CSS
Programação para Internet 2
Seletores de Atributo e ValorMúltiplos Valores
195Unidade 02 – CSS
Programação para Internet 2
“Estilando” Formulários
196Unidade 02 – CSS
Programação para Internet 2
“Estilando” FormuláriosExemplo
197Unidade 02 – CSS
Programação para Internet 2
Unidades de Medida
198Unidade 02 – CSS
Programação para Internet 2
Bibliografia• W3Schools. CSS Tutorial. Disponível
em: <http://www.w3schools.com/css/default.asp> Acesso em: 06 jan. 2013.