Aula 3
Fundos
Para alterar a cor de fundo, vimos que usamos o background-color.
Mas podemos também aplicar uma imagem como fundo da página.
Vamos ver como:
background-image:url(“imagem.jgp”);
É possível associar as seguintes propriedades:
- background-repeat: repeat-x; – repete a imagem na horizontal
- background-repeat: repeat-y; – repete a imagem na vertical
- background-repeat: no-repeat; não repete a imagem
- background-attachment:
- fixed; – mantém imagem fixe quando deslizamos a página
- scroll; – imagem desliza quando navegamos a página
- background-size:
- auto; A imagem de fundo será exibida em seu tamanho original.
- cover; – será dimensionada para cobrir completamente o container, mantendo a proporção e cortando partes da imagem, se necessário
- contain; – será dimensionada para caber completamente dentro do container, mantendo a proporção e deixando espaço vazio se necessário.
Há muitas outas propriedades que vocês podem explorar, podem verificar em:
Fontes
Para alterar a fonte, deve-se usar a propriedade font-family.
Podem ser ainda aplicadas outras propriedades:
- font-style – para definir se letra em normal ou itálico
- font-weight – para definir se letra normal ou negrito
- font-size – permite alterar o tamanho da fonte
É possível também importar fontes, através do Google Fonts.
Como importar fontes do Google Fonts.
