Estruturas de estilização de página CSS

Estilização CSS:

Ferramentas que moldam o conteúdo da página

• 
  Width: largura } auto/ initial



• heigt: altura } min/ max




• inherit: mantém a medida já definida




• margin: top/ left/ right/ bottom




• padding: espaço do conteúdo interno com o externo




• box sizing: retorna o elemento aos tamanhos pré-definidos

Cores no CSS

• 
  RGB: Valores entre 0 e 255 para definir os tons de vermelho, verde e azul, separados por virgula. Exemplo:
  

#rgb{

   color: rgb(250, 30, 70);

}

O valor 250 representa o red,30 representa o green, e 70 o blue, que no caso resultaria em algo parecido como:

• 
  HSL (hue, saturation, lightness): definindo a cor através na sua matiz (0 vermelho, 120 verde, 240 azul), saturação (0% tom de cinza, 100% cor total), luminosidade (0% preto, 100% branco) - Existe também o HSLA, que conta com o fator alpha (0 a 1) para medir o nível de transparência. Exemplo:
  

#hsl{

  color: hsla(120, 100%, 50%, 1.0);

}

Essa programação resultaria em uma cor completamente verde, mas pode buscar outros tons utilizando o circulo cromático HSL.

Fundos

• 
  background-color: cor sólida do fundo


• 
  background-image: referenciar imagem no fundo


• 
  linear-gradient: degrade linear


• 
  radial-gradient: degrade circular


• 
  repeating: repetir efeito

background-size: define o tamanho do fundo do elemento, acompanhada das configurações:

• 
  auto: ajuste automático


• 
  cover: cobrir todo o espaço do elemento


• 
  contain: redimensionar o conteúdo para que apareça a imagem completa/ sem cortes


• 
  valor: Definir o tamanho da imagem dentro do elemento

Repetição background-repeat: define o eixo a qual a imagem se repete:

• 
  repeat: máximo de repetições possíveis


• 
  repeat-x: só repete no eixo x (horizontal)


• 
  repeat-y: só repete no eixo y (vertical)


• 
  space: se repete em ambos os eixos sem ser cortada com espaços


• 
  round: se repete em todas as direções sem ser cortada, apenas redimensionada


• 
  no-repeat: sem repetições

Background-position: Posicionamento das imagens de fundo

center, left, right, x%,y%

background-attachment: Como a imagem vai se comportar de acordo com a janela do navegar

• 
  fixed: não sai do lugar


• 
  scroll: ela está fixada a um objeto


• 
  local: "rola" junto ao conteúdo

background-origin: Define a área de posicionamento da imagem

• 
  padding-box: canto de origem junto ao padding


• 
  border-box: a imagem começa junto a área externa da borda


• 
  content-box: inferior ao padding, alinhada ao conteúdo do elemento

background-flip: Define se a cor do elemento cobre ou não as bordas

• 
  padding-box: alinhada ao padding


• 
  border-box: alinhada a borda


• 
  content-box: preenche a área do conteúdo


• 
  clip-text: fundo no texto (a cor tem que ser transparente)

background-bland-mode: efeitos no fundo dos elementos

Bordas

• 
  border-width: tamanho que o contorno terá


• 
  border-style: tipo do contorno


• 
  border-color: cor do contorno


• 
  border-radius: Arredonda borda

border-image

• 
  source: definir o caminho da imagem


• 
  widht: largura da imagem da borda


• 
  repeat: controlar se a imagem repete ou não


• 
  outset: distancia da borda sobre o elemento


• 
  slice: dividir em regiões

Conteúdo (imagem ou vídeo)

object-fit : Como o conteúdo de um elemento se comporta na caixa estabelecida

• 
  fill: preencher todo o espeço e distorcer


• 
  contain: não fica distorcida, mas vai se encaixar nas medidas estabelecidas


• 
  cover: preencher todo o espaço sem distorcer


• 
  none: ignora as medidas do objeto pai e usa suas medidas originais


• 
  scale-down: menor configuração de imagem sem distorcer

object-position: Centralizar a imagem

• eixo x e eixo y


• 
  left, right, center, top, bottom