Banner propaganda da DevMedia - Cursos de desenvolvimento web

Unidades de medidas CSS

visualizações (desde 30/05/2016) Publicado em: 04/04/2004 — Atualizado em: ➠ 30/05/2016

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:

  • em: ...ao tamanho da fonte ('font-size') do elemento no qual a unidade é declarada;
  • ex: ...a altura da letra x (xis) da fonte herdada;
  • ch: ...a largura acrescida do espaçamanto em volta do número 0 (zero) da fonte do elemento no qual a unidade é declarada;
  • rem: ...ao tamanho da fonte ('font-size') do elemento raiz do documento.

O valor é igual a:

  • vw: 1% da largura da viewport;
  • vh: 1% da altura da viewport;
  • vmin: a menor medida entre vw e vh;
  • vmax: a maior medida entre vw e vh.
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.

  • cm - centímetro: 96px/2.54;
  • mm - milímetro: 1/10cm;
  • q - 1/4 do milímetro: 1/40cm;
  • in - polegada: 2,54cm = 96px;
  • pc - pica: 12 points ou 1/6in;
  • pt - point: 1/72in;
  • px - pixel: 1/96in;

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
  • deg - grau: um círculo tem 360deg;
  • grad - grado: um círculo tem 400grad;
  • rad - radiano: um círculo tem 2𝛑rad;
  • turn - volta: um círculo tem 1turn;
Unidades de duração
  • s - segundo: 1s;
  • ms - milissegundo: 1/1000s;
Unidades para frequência
  • Hz - Hertz: número de ocorrências por segundo;
  • kHz - KiloHertz: 1000Hz;
Unidades para resolução
  • dpi - dots per inch: pontos por polegada;
  • dpcm - dots per centimeter: pontos por centímetro;
  • dppx - dots per pixel: pontos por pixel;

Observe a seguir exemplos de declaração usando medidas 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®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo