CSS: Unidades de medida linear
Autor: Kassio Romulo | Publicado: 2011-09-18T23:35:00-03:00

<!--[if !supportLists]-->1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!--[endif]-->Unidades CSS para medidas linearesAs 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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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.<!--[if !supportLists]-->1.1.&nbsp;&nbsp;&nbsp; <!--[endif]-->Unidade relativa  <!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!--[endif]-->em<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!--[endif]-->ex<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!--[endif]-->px - pixel<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!--[endif]-->% - percentagemAs unidades relativas são referenciadas a outras unidades como a seguir:<!--[if !supportLists]-->1.2.&nbsp;&nbsp;&nbsp; <!--[endif]-->Unidade absoluta  <!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!--[endif]-->pt - point :1/72 in;<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!--[endif]-->pc - pica :12 points ou 1/6 in;<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!--[endif]-->mm - milímetro :1/10 cm;<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!--[endif]-->cm - centímetro :1/100 m;<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!--[endif]-->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;}<!--[if !supportLists]-->1.3.&nbsp;&nbsp;&nbsp; <!--[endif]-->Entendendo as unidades de medida CSSAbaixo a definição e análise com exemplo de cada uma das unidades de medida CSS.<!--[if !supportLists]-->1.3.1. <!--[endif]-->&nbsp;&nbsp;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<!--[if !supportLists]-->1.3.2. <!--[endif]-->&nbsp;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 (&lt;html&gt; em documentos html por exemplo) referencia-se ao valor inicial (default) do tamanho de fonte (letra).&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; EX: h1 { line-height: 1.2em } line-height de&nbsp;&lt;h1&gt;&nbsp;será 20% maior do que o tamanho atual das letras de&nbsp;&lt;h1&gt;.<!--[if !supportLists]-->1.3.3. <!--[endif]-->&nbsp;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*/