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:

• RGBA: Muito semelhante ao RGB, mas se adiciona o fator transparência que varia entre 0 e 1;
• HEX: Hexadecimal definidas entre 0 e 9, e A até F, onde F é o valor mais alto, seguindo um padrão parecido do rgb. Exemplo:

00FF00 -> Verde
FF0000 -> Vermelho
0000FF -> Azul

#hex{
  color: #03BB76;
}

Resultaria em algo 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