Unidades de Medida
Nós podemos utilizar várias unidades de medida em CSS, mas basicamente elas se dividem em dois grupos, as absolutas e as relativas. Vou falar bem resumidamente sobre eles.
Medidas absolutas
São aquelas existentes no mundo real, como centímetro, milímetro, polegada, etc. A CSS aceita todas elas, portanto vale lembrar que:
Polegada (in) = 2,54cm
Centímetro (cm) = 0,01m
Milímetro (mm) = 0,1cm
Ponto (pt) = 0,013in
Nos exemplos acima, as abreviações entre parênteses são a forma como a CSS os aceita, vejam os exemplos:
font-size:20cm;
font-size:20in;
font-size:20pt;
font-size:20mm;
Medidas relativas
São as associadas a alguma outra medida. Por exemplo:
em = refere-se ao tamanho herdado de seu elemento-pai. Parece confuso, mas vou tentar criar um cenário para demonstrar.
Imaginem a seguinte declaração:
body
{
font-size:10px;
}
Estamos determinando que todos os elementos da página tenham o tamanho de fonte definido em 10 pixels.
Então criamos a seguinte regra específica:
h1
{
font-size: 1.6em;
}
O tamanho da fonte de h1 será 60% maior do que seu elemento-pai, que no caso é body, com fonte de 10px, ou seja, a fonte de h1 terá 16px. Parece complicado, mas ajuda a padronizar as páginas. É importante ressaltar que se não houver um tamanho de fonte definido no elemento-pai, será adotado o tamanho de 16px como padrão.
ex = equivale ao tamanho da letra xis da fonte selecionada, o que, na prática, é sempre aproximadamente 8 pixels. Sua forma de utilização é idêntica ao exemplo acima.
h1
{
font-size: 1.6ex;
}
% = funciona exatamente como o em, ou seja, a partir de um valor definido por um elemento-pai, podemos definir uma porcentagem para o elemento-filho. Vejam como ficaria na prática:
body
{
font-size:12px;
}
h1
{
font-size: 50%;
}
Para esse exemplo a fonte de h1, que está herdando o tamanho 12px do elemento body, teria 6px de tamanho, já que a regra diz que ela terá 50% do tamanho do elemento-pai.
px = essa é a unidade mais utilizada. Ela dá uma enorme precisão sobre a montagem do layout, principalmente se as tabelas e as divs também tiverem seus tamanhos definidos em pixels. Caso você não tenha intimidade com uma div, não se preocupe, pois ao começar a criar suas páginas, fatalmente terá que fazer uso exaustivo dela e tudo ficará simples! Por ora pense que uma div é um bloco capaz de abrigar outros elementos, como textos e imagens.
Enfim, a unidade px está associada à resolução da tela utilizada pelo monitor. Atualmente a resolução de 1024(largura)x768(altura) já está em desuso graças aos monitores widescreen, que possuem resoluções maiores, o que, para quem quer criar sites, é sempre ótimo, pois quanto maior a resolução, mais espaço útil para se trabalhar. A sintaxe da unidade px é idêntica aos outros exemplos.
h1
{
font-size: 18px;
}
Eu aconselho que você adote uma medida como padrão e trabalhe sempre com ela, assim você começará a dimensionar rapidamente seus elementos, mas se precisar fazer manutenção em algum site e alguma conversão for necessária, abaixo está uma tabela que permite saber a equivalência das unidades:
Pontos |
Pixels |
Em |
% |
6pt |
8px |
0.5em |
50% |
7pt |
9px |
0.55em |
55% |
7.5pt |
10px |
0.625em |
62.5% |
8pt |
11px |
0.7em |
70% |
9pt |
12px |
0.75em |
75% |
10pt |
13px |
0.8em |
80% |
10.5pt |
14px |
0.875em |
87.5% |
11pt |
15px |
0.95em |
95% |
12pt |
16px |
1em |
100% |
13pt |
17px |
1.05em |
105% |
13.5pt |
18px |
1.125em |
112.5% |
14pt |
19px |
1.2em |
120% |
14.5pt |
20px |
1.25em |
125% |
15pt |
21px |
1.3em |
130% |
16pt |
22px |
1.4em |
140% |
17pt |
23px |
1.45em |
145% |
18pt |
24px |
1.5em |
150% |
20pt |
26px |
1.6em |
160% |
22pt |
29px |
1.8em |
180% |
24pt |
32px |
2em |
200% |
26pt |
35px |
2.2em |
220% |
27pt |
36px |
2.25em |
225% |
28pt |
37px |
2.3em |
230% |
29pt |
38px |
2.35em |
235% |
30pt |
40px |
2.45em |
245% |
Na sequência veremos as Propriedades de Texto