Unidades de medidas CSS

Introdução

As unidades de medidas CSS são classificadas em dois grupos conforme mostrados a seguir:

Unidades de medidas de distância <length>

Medidas relativas
Para fontes: unidades em, ex, ch, rem
Porcentagem da viewport: unidades vw, vh, vmin, vmax
A especificação do W3C classifica tecnicamente a porcentagem (%) como tipo de dado e não unidade de medida.
Medidas absolutas
Unidades cm, mm, q, in, pt, pc, px

Unidades de medidas para outras quantidades

Outras quantidades
Ângulos: unidades: deg, grad, rad, turn
Duração: unidades s, ms
Frequência: unidades Hz, kHz
Resolução: unidades dpi, dpcm, dppx

Unidades de medidas de distância <length>

As unidades de medida de distância definem medidas na horizontal, na vertical ou em qualquer direção.

A sintaxe para se declarar o valor de uma unidade de medida de distância é composta por um número inteiro ou decimal imediatamente precedido do sinal '+' (mais) ou do sinal '-' (menos) — o sinal '+' (mais) é o padrão — imediatamente seguido por uma unidade de medida CSS válida (por exemplo: px, em, deg, s, dpi, vw, etc).

A unidade de medida é opcional quando se declara o valor '0' (zero).

Algumas das propriedades CSS permitem que sejam declarados valores negativos para unidades de medida.

Medidas de distância relativas

São medidas calculadas em relação a uma outra unidade de medida. Usar unidades de medidas relativas é mais apropriado para se obter ajustes em diferentes tipos de mídia. (por exemplo: ajustar de uma tela de monitor para uma impressora laser).

O valor é tomado em relação:

O valor é igual a:

Medidas de distância absolutas

São medidas que não estão referenciadas a qualquer outra unidade. São as unidades de medida de comprimento definidas nos sistemas de medidas pela física, tais como, centímetro, polegada, etc... e a unidade pixel para o ângulo visual. São indicadas para serem usadas quando as mídias de exibição são perfeitamente conhecidas.

Unidades de medidas para outras quantidades

Outras quantidades
Ângulos: unidades: deg, grad, rad, turn
Duração: unidades s, ms
Frequência: unidades Hz, kHz
Resolução: unidades dpi, dpcm, dppx
Unidades para ângulos
Unidades de duração
Unidades para frequência
Unidades para resolução

Observe a seguir exemplos de declaração usando medidas CSS.

CSS
div { margin: 1.5em; } 
h4 { margin: 2ex; } 
p { font-size: 14px; }
.classe { padding: 90%; }
hr { width: 14pt; } 
h1 { margin: 1pc; } 
h2 { font-size: 4mm; }
p.classe { padding: 0.3cm; }
h5.classe { padding: 0.5in; }
@media ( min-resolution: 2dppx ) { ... }
background-image: linear-gradient( 45deg, white, black );
div { width: 50vw; }

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.