Medidas CSS

Nesta página você verá como funcionam as unidades de medida e valores no CSS. Exemplo: Tipos numéricos, Unidades comuns Distância absoluta/relativa entre os elementos, Porcentagens, entre outros.

Valores e Unidades de Medidas

Como vimos no decorrer até aqui, sabemos que cada propriedade possui valores, que descrevemos como "property: value". Entender unidades e valores do CSS leva tempo e estudo, então calma pois pode passar o tempo e você descobrir algo que nunca nem tinha ouvido falar em CSS.
Precisamos entender como utilziar os valores possíveis dentro de cada propriedade.

Na Prática

Como podemos conhecer e estudar esses valores e como podemos usar a documentação do MDN para aprender mais.
Sempre que virmos <color> e <lenght> estaremos falando de valores (values) ou tipos de dados (data types).
Acesse o Site MDN

Tipos Numéricos e Unidades Comuns

Tipos Numéricos

<integer>

Número inteiro como: 18 ou -54

<number>

Número decimal como: 3.14, 84 ou 0.218

<dimension>

É um <number> com uma unidade junto: 60deg (60°), 7s (7 segundos), 10px (10 pixels)

<percentagem>

Fração de um número: 15% , 50% , 99% ... Sempre precisamos ter uma referência para colocar a porcentagem

Unidades Comuns

<lenght>

Valor de distância: px, em, vw

<angle>

Ângulo: deg, rad, turn (giro)

<time>

Tempo: s, ms

<resolution>

Resoluções para dispositivos: dpi (responsividade)

Distâncias Absolutas e Relativas

Distâncias Absolutas: <lenght>

São fixas e não se altera o valor delas.

Unidade	Nome	Equivalência
cm	Centímetros	1cm = 96px/2.54
in	Inches (polegadas)	1in = 2.54cm = 96px
px	Pixels	1px = 1/96th de 1in

OBS.: O mais comum e utilizado é o px. Não é recomendado o uso de cm

Distâncias Relativas

São relativas a algum outro valor, logo, esse valor pdoe ser o elemento pai/root, ou o tamanho da tela.
Um ponto positivo é que tem uma maior adaptação aos tipos de tela.

Unidade	Relativo a
em	Tamando da font do pai
rem	Tamando da font da raiz (root/html)
vw	1% de viewport width
vh	1% da viewport height

OBS.: Viewport é toda a tela, width é a largura, height é a altura.

Na Prática

<style>
div {
     font-size: 16px;
}
p {
     font-size: 2em;
}
</style>

<body>
   <div>
      <p>Parágrafo</p>
   </div>
</body>

Resultado

Parágrafo

Ou seja, multiplicamos o valor da <div> por 2.

Porcentagem

É tratado da mesma maneira que as distâncias <lenght>, sempre será relativo a um valor.

Posições

Representa um conjunto de coordenadas 2D como:

- top, right, bottom, left, center.

OBS.: Usado para alguns tipos de propriedades, cuidado para não confundir com a propriedade position

Funções

Causam um reaproveitamento de código.
Exemplos de funções:
rgb( )
hsl( )
url( )
calc( )
- Recebe um nome como os citados, abre e fecha parentesis e dentro deles colocamos os valores.

Strings e Identificadores

São outros tipos de valores que podemos ter dentro do CSS, sendo:
Strings: Texto envolto em aspas
Identificadores: red, black, gold