CSS Cascading Style Sheets (Folhas de Estilo em Cascata)

Transcrição

1 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

2 Parte I CSS Basic 2

3 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

4 Exemplo 4

5 Exemplo 2 Site sem aplicação de CSS: 5

6 Aplicando a Folha de Estilo 01 Código 6

7 Resultado 01 7

9 Resultado 02 9

11 Resultado 03 11

12 Sintaxe Uma regra CSS é constituída de duas partes: um seletor e uma ou mais declarações. 12

13 Exemplo 03 13

14 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

15 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

16 Três Maneiras de Usar CSS Folha de Estilo Externa; Folha de Estilo Interna e Estilo em Linha. 16

17 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

18 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

19 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

20 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

21 Parte II CSS Styling 21

22 Background Usada para definir os efeitos de fundo de tela de um elemento. 22

23 background-color Mais informações sobre os tipos de cores usados no CSS acesse este link. 23

24 background-image 24

25 background-image 25

26 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

27 Background-image Repetidamente 27

28 Background-image Configurando Posição e Não-repetição 28

29 Background-image Configurando Posição e Não-repetição 29

30 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

31 Exemplo 04 31

32 Resultado 04 32

33 Todas as Propriedades CSS do Background 33

34 Formatação de Texto 34

35 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

36 text-align 36

37 text-decoration 37

38 text-decoration O título 4 fica piscando. Porém isto não acontece nos navegadores: IE, Chrome e Safari. 38

39 text-transform 39

40 text-indent Em outras palavras, define a distância entre a margem esquerda e o início do parágrafo. 40

41 Fonte As propriedades CSS das fontes definem: família, cor, tamanho e estilo do texto. 41

42 Família da Fonte 42

43 font-style 43

44 font-size 44

45 font-size 45

46 font-size 46

47 font-size 47

48 Links 48

49 Links 49

50 Links 50

51 Links 51

52 Lista 52

53 Lista 53

54 Lista (Imagem como Marcador) 54

55 Lista (Imagem como Marcador) 55

56 Lista Shorthand Property 56

57 Lista - Propriedades 57

58 Tabela 58

59 Tabela Borda Dupla 59

60 Tabela Borda Simples 60

61 Tabela Borda Simples 61

62 Tabela Largura e Altura 62

63 Tabela Largura e Altura 63

64 Tabela Alinhamento de Texto Horizontal 64

65 Tabela Alinhamento de Texto Horizontal 65

66 Tabela Alinhamento de Texto Vertical 66

67 Tabela Espaço entre Borda e Conteúdo 67

68 Tabela - Cor 68

69 Parte III CSS Box Model 69

70 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

71 Box Model 71

72 Box Model Largura e Altura 72

73 Box Model Exemplo 73

74 Borda 74

75 border-style 75

76 Borda - Exemplo 76

77 Borda - Largura 77

78 Borda Largura - Exemplo 78

79 Borda - Cor 79

80 Borda Cor - Exemplo 80

81 Borda Lados Individuais 81

82 Borda Lados Individuais 82

83 Borda Shorthand Property 83

84 Borda Todas as Propriedades Para detalhar cada propriedade, acesse o link: schools.com/c ss/css_border.asp 84

85 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

86 Outline 86

87 Outline - Propriedades 87

88 Margens Define o espaço ao redor dos elementos. 88

89 Margens Lados Individuais 89

90 Margens Shortland Property 90

91 Margens Todas as Propriedades 91

92 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

93 Padding Lados Individuais 93

94 Padding Shortland Property 94

95 Parte IV CSS Advanced 95

96 Agrupando Seletores 96

97 Aninhando Seletores 97

98 Aninhamento de Seletores - Exemplo 98

99 Dimensão Propriedade que permite o controle de altura e largura de um elemento HTML. 99

100 Dimensão - Exemplo 100

101 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

102 Exibição e Visibilidade - Exemplo 102

103 Elementos de Bloco e de Linha 103

104 Mudando a Forma de Exibição dos Elementos 104

105 Mudando a Forma de Exibição dos Elementos - Exemplo 105

106 Mudando a Forma de Exibição dos Elementos Mesmo Exemplo sem CSS 106

107 Posicionamento Decide qual elemento virá na frente e qual será sobreposto. 107

108 Método 01 de Posicionamento: Estático 108

109 Método 02 de Posicionamento: Fixado 109

110 Método 02 de Posicionamento: Fixado - Exemplo Após rolar a tela para baixo, o texto fixado continua no mesmo local. 110

111 Método 03 de Posicionamento: Relativo 111

112 Método 03 de Posicionamento: Relativo - Exemplo 112

113 Método 03 de Posicionamento: Relativo Exemplo 2 113

114 Método 04 de Posicionamento: Absoluto 114

115 Método 04 de Posicionamento: Absoluto - Exemplo 115

116 Sobrepondo Elementos 116

117 Sobrepondo Elementos - Exemplo z-index: -1; z-index: 0; 117

118 Posicionamento - Propriedades 118

119 Posicionamento - Propriedades 119

120 Flutuar 120

121 Flutuar - Exemplo 121

122 Flutuar Elementos Lado a Lado 122

123 Flutuar Elementos Lado a Lado - Exemplo 123

124 Desabilitando o Flutuar 124

125 Desabilitando o Flutuar Exemplo 125

126 Flutuar - Propriedades 126

127 Alinhamento 127

128 Usando Margens para Centralizar Elementos 128

129 Usando Margens para Centralizar Elementos - Exemplo 129

130 Alinhamento à Esquerda e à Direita Usando a Propriedade position 130

131 Alinhamento à Esquerda e à Direita Usando a Propriedade position - Exemplo 131

132 Questão de Compatibilidade 132

133 Questão de Compatibilidade - Exemplo 133

134 Alinhamento à Esquerda e à Direita Usando a Propriedade float 134

135 Alinhamento à Esquerda e à Direita Usando a Propriedade float - Exemplo 135

136 Questão de Compatibilidade 136

137 Questão de Compatibilidade - Exemplo 137

138 Pseudoclasses Usada para adicionar efeitos especiais a alguns seletores. 138

139 Âncora e Pseudoclasses 139

140 Âncora e Pseudoclasses - Exemplo 140

141 Classes e Pseudoclasses pseudoclasse classe 141

142 Classes e Pseudoclasses Formatar Primeiro Elemento 142

143 Classes e Pseudoclasses Formatar Primeiro Elemento Exemplo 143

144 Classes e Pseudoclasses Formatar Primeiro Subelemento 144

145 Classes e Pseudoclasses Formatar Primeiro Subelemento Exemplo 145

146 Classes e Pseudoclasses Formatar Todos Subelementos 146

147 Classes e Pseudoclasses Formatar Todos Subelementos Exemplo 147

148 Pseudoclasse :lang 148

149 Pseudoclasse :lang - Exemplo 149

150 Pseudoclasses / Elementos 150

151 Pseudoelementos São usados para adicionar efeitos especiais a alguns seletores. 151

152 Pseudoelemento de Primeira Linha 152

153 Pseudoelemento de Primeira Linha Exemplo 153

154 Pseudoelemento - Primeira Letra 154

155 Pseudoelemento - Primeira Letra Exemplo 155

156 Classes e Pseudoelementos 156

157 Múltiplos Pseudoelementos 157

158 Múltiplos Pseudoelementos Exemplo 158

159 Pseudoelemento :before 159

160 Pseudoelemento :before Exemplo 160

161 Pseudoelemento :after 161

162 Pseudoelemento :after Exemplo 162

163 Pseudoclasses / elementos 163

164 Barra de Navegação 164

165 Barra de Navegação Exemplo 1 165

166 Barra de Navegação Sem Bullets 166

167 Barra de Navegação Sem Bullets Exemplo 167

168 Barra de Navegação Vertical 168

169 Barra de Navegação Vertical Exemplo 169

170 Barra de Navegação Vertical Exemplo 2 170

171 Barra de Navegação Horizontal 171

172 Barra de Navegação Horizontal Exemplo 172

173 Barra de Navegação Horizontal Exemplo 2 173

174 Lista Flutuante 174

175 Lista Flutuante Exemplo 175

176 Lista Flutuante Exemplo 2 176

177 Galeria de Imagens Código-fonte da Galeria de Imagens 177

178 Imagem: Opaca / Transparente 178

179 Imagem: Opaca / Transparente Exemplo

180 Imagem: Opaca / Transparente Exemplo

181 Image Sprite 181

182 182

183 Image Sprites - Create a Navigation List Exemplo 183

184 Image Sprites Hover Effect 184

185 Image Sprites Hover Effect Exemplo 185

186 Tipos de Mídias 186

187 Tipos de Mídias 187

188 Outros Tipos de Mídia 188

189 Seletores de Atributo 189

190 Seletores de Atributo Exemplo 190

191 Seletores de Atributos e Valores 191

192 Seletores de Atributos e Valores Exemplo 192

193 Seletores de Atributo e Valor Múltiplos Valores 193

194 Seletores de Atributo e Valor Múltiplos Valores 194

195 Estilando Formulários 195

196 Estilando Formulários Exemplo 196

197 Unidades de Medida 197

198 Bibliografia W3Schools. CSS Tutorial. Disponível em: < asp> Acesso em: 06 jan