:: As medidas CSS de comprimento ::

Introdução

Unidades de medida de comprimento CSS

As unidades de medida de comprimento CSS referem-se a medidas na horizontal ou na vertical (e em sentido mais amplo, em qualquer direção).

O formato para declarar o valor de uma unidade de medida CSS é um número com ou sem ponto decimal imediatamente precedido do sinal '+' (mais) ou do sinal '-' (menos), sendo o sinal '+' (mais) o valor "default" e imediatamente seguido por uma unidade identificadora (medida CSS válida - p.ex., px, em, deg, etc...). A unidade identificadora é opcional quando se declara um valor '0' (zero).

Algumas das propriedades CSS permitem que sejam declarados valores negativos para unidades de medida. A adoção de valores negativos podem complicar a formatação do elemento e devem ser usados com cautela. Se valores negativos não forem suportados pela aplicação de usuário, eles serão convertidos para o valor mais próximo suportado (e isso pode tornar-se desastroso para um layout).

Unidades de medida de comprimento CSS válidas

São dois os tipos de unidade de medida de comprimento CSS:

UNIDADE RELATIVA

  • em
  • ex
  • px - pixel
  • % - percentagem

as unidades relativas são referenciadas a outras unidades como veremos a seguir.

UNIDADE ABSOLUTA

  • pt - point :1/72 in;
  • pc - pica :12 points ou 1/6 in;
  • mm - milímetro :1/10 cm;
  • cm - centímetro :1/100 m;
  • in - polegada :2,54 cm;

Unidade relativa- é aquela tomada em relação a uma outra medida. Folhas de Estilo em Cascata que usam unidades de comprimento relativas são mais apropriadas para ajustes de uso em diferentes tipos de mídia. (p. ex., de uma tela de monitor para uma impressora laser).

O valor é tomado em relação:

  • em: ...ao tamanho da fonte ('font-size') herdada;
  • ex: ...a altura da letra x (xis) da fonte herdada;
  • px: ...ao dispositivo (midia) de exibição;
  • %: ... a uma medida previamente definida.

Unidade absoluta - é aquela que não esta referenciada a qualquer outra unidade e nem é herdada. São unidades de medida de comprimento definidas nos sistemas de medidas pela física e em fim são os conhecidos "centímetros, polegadas etc...). São indicadas para serem usadas quando as mídias de exibição são perfeitamente conhecidas.

Abaixo exemplos ilustrativos do uso destas medidas de comprimento 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; }

Nota: Relembro que uma regra CSS tem a seguinte sintaxe

seletor {propriedade: valor;}

Entendendo as unidades de medida CSS

Vamos a seguir definir e analisar cada uma das unidades de medida CSS e apresentar exemplos práticos.

A unidade de medida - pixel

A unidade de medida de comprimento pixel é relativa a resolução do dispositivo de exibição (p.ex: a tela de um monitor).

Sem entrar em maiores considerações teóricas a mais simplista definição de pixel que encontrei é esta:

Pixel é o menor elemento em um dispositivo de exibição, ao qual é possivel atribuir-se uma cor.

Considere um dispositivo de exibição construido com uma densidade de 90 dpi (dpi = dots per inch = pontos por polegada). Por definição, a referência padrão para pixel é igual a um ponto no citado dispositivo. Daí pode-se concluir que 1 pixel naquele dispositivo de exibição é igual a 1/90 inch = 0,28 mm.

Para uma densidade de 300 dpi 1 pixel é igual a 1/300 inch = 0,085mm

Assim, pixel é uma medida relativa a resolução do dispositivo de exibição.

A unidade de medida - em

A unidade de medida de comprimento em referencia-se ao tamanho da fonte (letra) do seletor onde for declarada. Quando em for declarada para a propriedade font-size referencia-se ao tamanho da fonte (letra) do elemento pai. Quando em for declarada para o elemento raiz do documento (p. ex: <html> em documentos html) referencia-se ao valor inicial (default) do tamanho de fonte (letra).

Os exemplos abaixo esclarecem as definições:

h1 { line-height: 1.2em }

line-height de <h1> será 20% maior do que o tamanho das letras de <h1>

h1 { font-size: 1.2em }

font-size de <h1> será 20% maior do que o tamanho das letras herdado por <h1> p.ex.: se h1 estiver contido numa div com font-size=10px então font-size de h1 = 12px

A unidade de medida - ex

A unidade de medida de comprimento ex é igual a altura da letra x(xis) minúscula).

A unidade de medida - percentagem, %

Valores em percentagem são relativos a um outro valor anterior declarado. Este valor anterior há que estar bem definido e em geral esta definição está em uma determinada propriedade do mesmo elemento, na propriedade do elemento "pai" (por exemplo: uma medida CSS de comprimento) ou mesmo no contexto geral da formatação (por exemplo: a largura do bloco de conteúdo).

p { font-size: 10px }
p { line-height: 120% }/*120% de'font-size'=12px*/

Meu nome é Maurício Samy Silva e eu sou conhecido na Web como Maujor.

Mantenho o Site do Maujor hospedado em: maujor.com e meu e-mail de contato é maujorcss[ARROBA]maujor [PT]com.

Minha residência é em:

Copacabana - Rio de Janeiro,, RJ - - Brasil

Criado em: 2004-04-08