CSS: Unidades de medida linear

CSS: Unidades de medida linear

1.      Unidades CSS para medidas lineares
As unidades de medida de comprimento CSS, referem-se a medidas na horizontal e 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).
Algumas propriedades CSS permitem que sejam declarados valores negativos para unidades de medida. A adoção de valores negativos pode complicar a formatação do elemento e devem ser usados com cautela.
Existem dois tipos de unidade de medida de comprimento CSS. Unidade relativa e Absoluta.
1.1.    Unidade relativa
·         em
·         ex
·         px - pixel
·         % - percentagem
As unidades relativas são referenciadas a outras unidades como a seguir:
1.2.    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 outra medida. Folhas de estilo em cascata que usam unidades de comprimento relativas são mais apropriadas para ajustes.
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 é 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”.
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; }

Regra CSS: seletor {propriedade: valor;}
1.3.    Entendendo as unidades de medida CSS
Abaixo a definição e análise com exemplo de cada uma das unidades de medida CSS.
1.3.1.   A unidade de medida - pixel.
A unidade de medida pixel, é relativa a resolução do dispositivo de exibição (A tela do monitor). Normalmente o mínimo de resolução em uma tela é de 1024 x 768.
EX: font-size: 12px
1.3.2.  A unidade de medida – em.
A unidade de medida em refere-se ao tamanho da fonte (letra) do seletor onde for declarada. Quando em for declarada para a propriedade font-size refere-se ao tamanho da fonte. Quando em for declarada para o elemento raiz do documento (<html> em documentos html por exemplo) referencia-se ao valor inicial (default) do tamanho de fonte (letra).
                EX: h1 { line-height: 1.2em } line-height de <h1> será 20% maior do que o tamanho atual das letras de <h1>.
1.3.3.  A unidade de medida – percentagem, %
Valores em porcentagem são relativos a 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).
EX:
p { font-size: 10px }
p { line-height: 120% }/*120% de'font-size'=12px*/