Medidas CSS - Relativas e Absolutas
Vamos conhecer as principais medidas CSS, que se subdividem em relativas e absolutas.
Relativas:
- em - * presumimos ser o acrônimo de "equivalent measure"
- ex - éx
- px - pixel
- % - percentagem
As unidades de medida relativas são aquelas, como é de se supor, vinculadas a outras unidades de medida. A utilização de grandezas relativas permite melhor qualidade de ajuste no conjunto mas, por outro lado, requer uma maior habilidade na elaboração do código CSS.
Absolutas:
- pt - point
- 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;
As unidades absolutas, como o próprio nome indica, não estão vinculadas a qualquer outra grandeza e resumem-se às unidades definidas no sistema de medidas físicas. São ideais quando há homogeneidade ou singularidade nas mídias de exibição e, ainda, quando o desenvolvedor não está completamente familiarizado com as regras de relação de herança.
As relações default (padrão) entre medidas são as seguintes:
1em = 16pt
1in = 96px
1pt = 1/72in
1pt = 1.333px
1pt = 0.352mm
1px = 0.264mm
Quanto as medidas absolutas, exatamente por serem espelhadas no sistema de medidas físicas, dispensam maiores considerações sobre sua aplicação, utilização ou características.
Já as medidas relativas, além de menos comuns, guardam peculiaridades distintivas que devem ser examinadas. Vejamos, então, as características de cada uma destas medidas:
em: não encontramos a denominação para esta unidade de medida. Presumimos, contudo, tratar-se de um acrônimo de equivalent measure. Na verdade, tal hipótese para o nome relaciona-se com a característica desta unidade, que vem referenciada pelo tamanho da fonte do seletor onde for declarada. Quando houver um valor declarado para o elemento raiz de um documento web a referência se dará ao valor padrão (default) do tamanho da fonte. Veja o código-exemplo:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<title>Emprimeiro - Tutorial 9 - Exemplo 1</title>
<style type="text/css">
html {
font: 10px arial;
}
p.unidadeem{
font-size: 1.4em;
}
</style>
</head>
<body>
<p>Esta é a medida padrão "em"</p>
<p class="unidadeem">Esta é a medida padrão "em"</p>
</body>
</html>
O segundo parágrafo que referencia a classe "unidade em" recebe o valor de 1.4em. No exemplo, tal valor tomará como parâmetro aquele estabelecido na raiz para "font-size", de 10px. É correto afirmar, para facilitar a compreensão que, no exemplo dado, 1em é igual a 10px. Observe que o valor da unidade em será aquele estabelecido no seletor respectivo ou na raiz, como demonstrado.
Assim, podemos concluir que no primeiro parágrafo do exemplo o tamanho da fonte será de 10px e no segundo parágrafo, aquele cujo tamanho da fonte foi estabelecido em 1.4em, será de 14px: basta multiplicar o valor relativo "em" pelo valor referência (1.4 X 10 = 14)
Veja o exemplo da unidade de medida relativa "em".
ex: esta unidade de medida tem o nome da letra "xis " em inglês (se pronuncia "éx"), exatamente por estabelecer correspondência com a altura da letra "x" minúscula definida para um elemento respectivo ou como valor padrão para determinado documento web. Vejamos o código-exemplo:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<title>Emprimeiro - Tutorial 9 - Exemplo 1</title>
<style type="text/css">
html {
font: 10px arial;
}
p.unidadeex{
font-size: 1.4ex;
}
</style>
</head>
<body>
<p>Esta é a medida padrão "ex". Veja o tamanho da letra "x" em tamanho de fonte 10</p>
<p class="unidadeex">Esta é a medida padrão "ex". Veja o tamanho da letra "x" em tamanho de fonte equivalente a 1,6 vezes o tamanho de referência.</p>
</body>
</html>
O segundo parágrafo que referencia a classe "unidade ex" recebe o valor de 1.6ex. No exemplo, tal valor tomará como parâmetro aquele estabelecido na raiz para "font-size", de 10px. É correto afirmar, para facilitar a compreensão que, no exemplo dado, 1ex é igual a altura da letra "x" minúscula para o tamanho de fonte de 10px. Observe que o valor da unidade ex será aquele estabelecido no seletor respectivo ou na raiz, como demonstrado.
Veja o exemplo da unidade de medida relativa "ex".
px: unidade de medida denominada "píxel". Comecemos pela definição desta unidade de medida relativa: é a aglutinação de Picture e Element, ou seja, elemento de imagem, sendo Pix a abreviatura em inglês para Picture. É o menor elemento num dispositivo de exibição (como por exemplo um monitor), ao qual é possível atribuir-se uma cor. De uma forma mais simples, um pixel é o menor ponto que forma uma imagem digital, sendo que o conjunto de milhares de pixels formam a imagem inteira.
Cabe salientar que esta unidade de medida é relativizada em função do equipamento utilizado pelos respectivos usuários, razão pela qual é indicada no desenvolvimento de layouts com dimensão fixa - o que senão elimina, diminui sensivelmente, problemas de imprecisões e incorreções que geram problemas de acessibilidade.
Por fim, salientamos que a utilização das unidades de medida absolutas, por sua própria natureza, não remetem a qualquer observação ou recomendação para sua utilização, senão no tocante à recomendação de que sejam empregadas quando se conhece o tipo de mídia a que se destina o documento desenvolvido, da mesma forma que ressalvado para a unidade de medida relativa "píxel".
Publicado em: 30/09/2008 Última atualização: 10/03/2009