Estruturas de estilização de página CSS
Tags: css, beginners, frontend
Published: 2024-06-20 22:06:22

##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: 


![Imagem de tonalidade avermelhada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kx7ky5bvsz6w147ktkht.png)




- **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:


![Imagem de tonalidade esverdeada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36t2lvwnbgbsr3risuhh.png)


- **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.


![Circulo cromático](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4qjxwh4q2kiw5duqycm.png)

---

##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`