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