Estilização CSS:
Ferramentas que moldam o conteúdo da página
-
Width
: largura } auto/ initial heigt
: altura } min/ maxinherit
: mantém a medida já definidamargin
: top/ left/ right/ bottompadding
: espaço do conteúdo interno com o externobox 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
Top comments (0)