CSS Cascading 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 1
Parte I CSS Basic 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. 3
Exemplo 4
Exemplo 2 Site sem aplicação de CSS: 5
Aplicando a Folha de Estilo 01 Código 6
Resultado 01 7
Aplicando a Folha de Estilo 02 Código 8
Resultado 02 9
Aplicando a Folha de Estilo 03 Código 10
Resultado 03 11
Sintaxe Uma regra CSS é constituída de duas partes: um seletor e uma ou mais declarações. 12
Exemplo 03 13
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 14
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 15
Três Maneiras de Usar CSS Folha de Estilo Externa; Folha de Estilo Interna e Estilo em Linha. 16
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 de como deve ser o link. Exemplo de como deve ser o arquivo. 17
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>. 18
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. 19
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. 20
Parte II CSS Styling 21
Background Usada para definir os efeitos de fundo de tela de um elemento. 22
background-color Mais informações sobre os tipos de cores usados no CSS acesse este link. 23
background-image 24
background-image 25
Background-image Repetidamente Por padrão as imagens se repetem horizontal e verticalmente; Algumas somente horizontalmente outras apenas verticalmete. Comando para que a imagem se repita somente no eixo X (horizontal). 26
Background-image Repetidamente 27
Background-image Configurando Posição e Não-repetição 28
Background-image Configurando Posição e Não-repetição 29
background Todas 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. 30
Exemplo 04 31
Resultado 04 32
Todas as Propriedades CSS do Background 33
Formatação de Texto 34
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 ). 35
text-align 36
text-decoration 37
text-decoration O título 4 fica piscando. Porém isto não acontece nos navegadores: IE, Chrome e Safari. 38
text-transform 39
text-indent Em outras palavras, define a distância entre a margem esquerda e o início do parágrafo. 40
Fonte As propriedades CSS das fontes definem: família, cor, tamanho e estilo do texto. 41
Família da Fonte 42
font-style 43
font-size 44
font-size 45
font-size 46
font-size 47
Links 48
Links 49
Links 50
Links 51
Lista 52
Lista 53
Lista (Imagem como Marcador) 54
Lista (Imagem como Marcador) 55
Lista Shorthand Property 56
Lista - Propriedades 57
Tabela 58
Tabela Borda Dupla 59
Tabela Borda Simples 60
Tabela Borda Simples 61
Tabela Largura e Altura 62
Tabela Largura e Altura 63
Tabela Alinhamento de Texto Horizontal 64
Tabela Alinhamento de Texto Horizontal 65
Tabela Alinhamento de Texto Vertical 66
Tabela Espaço entre Borda e Conteúdo 67
Tabela - Cor 68
Parte III CSS Box Model 69
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. 70
Box Model 71
Box Model Largura e Altura 72
Box Model Exemplo 73
Borda 74
border-style 75
Borda - Exemplo 76
Borda - Largura 77
Borda Largura - Exemplo 78
Borda - Cor 79
Borda Cor - Exemplo 80
Borda Lados Individuais 81
Borda Lados Individuais 82
Borda Shorthand Property 83
Borda Todas as Propriedades Para detalhar cada propriedade, acesse o link: http://www.w3 schools.com/c ss/css_border.asp 84
Outline É uma linha desenhada por fora da borda. Tem o intuito de destacar o elemento envolvido; Possui propriedades para destacar: estilo, cor e largura. 85
Outline 86
Outline - Propriedades 87
Margens Define o espaço ao redor dos elementos. 88
Margens Lados Individuais 89
Margens Shortland Property 90
Margens Todas as Propriedades 91
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. 92
Padding Lados Individuais 93
Padding Shortland Property 94
Parte IV CSS Advanced 95
Agrupando Seletores 96
Aninhando Seletores 97
Aninhamento de Seletores - Exemplo 98
Dimensão Propriedade que permite o controle de altura e largura de um elemento HTML. 99
Dimensão - Exemplo 100
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. 101
Exibição e Visibilidade - Exemplo 102
Elementos de Bloco e de Linha 103
Mudando a Forma de Exibição dos Elementos 104
Mudando a Forma de Exibição dos Elementos - Exemplo 105
Mudando a Forma de Exibição dos Elementos Mesmo Exemplo sem CSS 106
Posicionamento Decide qual elemento virá na frente e qual será sobreposto. 107
Método 01 de Posicionamento: Estático 108
Método 02 de Posicionamento: Fixado 109
Método 02 de Posicionamento: Fixado - Exemplo Após rolar a tela para baixo, o texto fixado continua no mesmo local. 110
Método 03 de Posicionamento: Relativo 111
Método 03 de Posicionamento: Relativo - Exemplo 112
Método 03 de Posicionamento: Relativo Exemplo 2 113
Método 04 de Posicionamento: Absoluto 114
Método 04 de Posicionamento: Absoluto - Exemplo 115
Sobrepondo Elementos 116
Sobrepondo Elementos - Exemplo z-index: -1; z-index: 0; 117
Posicionamento - Propriedades 118
Posicionamento - Propriedades 119
Flutuar 120
Flutuar - Exemplo 121
Flutuar Elementos Lado a Lado 122
Flutuar Elementos Lado a Lado - Exemplo 123
Desabilitando o Flutuar 124
Desabilitando o Flutuar Exemplo 125
Flutuar - Propriedades 126
Alinhamento 127
Usando Margens para Centralizar Elementos 128
Usando Margens para Centralizar Elementos - Exemplo 129
Alinhamento à Esquerda e à Direita Usando a Propriedade position 130
Alinhamento à Esquerda e à Direita Usando a Propriedade position - Exemplo 131
Questão de Compatibilidade 132
Questão de Compatibilidade - Exemplo 133
Alinhamento à Esquerda e à Direita Usando a Propriedade float 134
Alinhamento à Esquerda e à Direita Usando a Propriedade float - Exemplo 135
Questão de Compatibilidade 136
Questão de Compatibilidade - Exemplo 137
Pseudoclasses Usada para adicionar efeitos especiais a alguns seletores. 138
Âncora e Pseudoclasses 139
Âncora e Pseudoclasses - Exemplo 140
Classes e Pseudoclasses pseudoclasse classe 141
Classes e Pseudoclasses Formatar Primeiro Elemento <p> 142
Classes e Pseudoclasses Formatar Primeiro Elemento <p> Exemplo 143
Classes e Pseudoclasses Formatar Primeiro Subelemento <i> 144
Classes e Pseudoclasses Formatar Primeiro Subelemento <i> Exemplo 145
Classes e Pseudoclasses Formatar Todos Subelementos <i> 146
Classes e Pseudoclasses Formatar Todos Subelementos <i> Exemplo 147
Pseudoclasse :lang 148
Pseudoclasse :lang - Exemplo 149
Pseudoclasses / Elementos 150
Pseudoelementos São usados para adicionar efeitos especiais a alguns seletores. 151
Pseudoelemento de Primeira Linha 152
Pseudoelemento de Primeira Linha Exemplo 153
Pseudoelemento - Primeira Letra 154
Pseudoelemento - Primeira Letra Exemplo 155
Classes e Pseudoelementos 156
Múltiplos Pseudoelementos 157
Múltiplos Pseudoelementos Exemplo 158
Pseudoelemento :before 159
Pseudoelemento :before Exemplo 160
Pseudoelemento :after 161
Pseudoelemento :after Exemplo 162
Pseudoclasses / elementos 163
Barra de Navegação 164
Barra de Navegação Exemplo 1 165
Barra de Navegação Sem Bullets 166
Barra de Navegação Sem Bullets Exemplo 167
Barra de Navegação Vertical 168
Barra de Navegação Vertical Exemplo 169
Barra de Navegação Vertical Exemplo 2 170
Barra de Navegação Horizontal 171
Barra de Navegação Horizontal Exemplo 172
Barra de Navegação Horizontal Exemplo 2 173
Lista Flutuante 174
Lista Flutuante Exemplo 175
Lista Flutuante Exemplo 2 176
Galeria de Imagens Código-fonte da Galeria de Imagens 177
Imagem: Opaca / Transparente 178
Imagem: Opaca / Transparente Exemplo 1.1 179
Imagem: Opaca / Transparente Exemplo 1.2 180
Image Sprite 181
182
Image Sprites - Create a Navigation List Exemplo 183
Image Sprites Hover Effect 184
Image Sprites Hover Effect Exemplo 185
Tipos de Mídias 186
Tipos de Mídias 187
Outros Tipos de Mídia 188
Seletores de Atributo 189
Seletores de Atributo Exemplo 190
Seletores de Atributos e Valores 191
Seletores de Atributos e Valores Exemplo 192
Seletores de Atributo e Valor Múltiplos Valores 193
Seletores de Atributo e Valor Múltiplos Valores 194
Estilando Formulários 195
Estilando Formulários Exemplo 196
Unidades de Medida 197
Bibliografia W3Schools. CSS Tutorial. Disponível em: <http://www.w3schools.com/css/default. asp> Acesso em: 06 jan. 2013. 198