Minicursos - CSS

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



Algumas notícias

O que acontece com o cérebro no exato momento em que morremos

O que passa em nossa cabeça no momento da morte? Não se sabe exatamente e, embora os cientistas tenham alguma resposta, a resposta continua sendo um grande mistério. Além de difícil solução, tentar respondê-la pode criar implicações éticas. No entanto, uma equipe de cientistas da Universidade...

Ler Notícia Completa

Operada e devolvida ao útero, menina que nasceu duas vezes hoje 'acorda sorrindo toda manhã'

Um bebê pode nascer duas vezes? Não é o caso da absoluta maioria das crianças, mas foi assim para a pequena Lynlee Boemer. Em outubro de 2015, sua mãe, Margaret Boemer, descobriu que estava grávida de gêmeos. Ela sofreu um aborto espontâneo, mas um dos bebês sobreviveu. Com dez semanas de ges...

Ler Notícia Completa

Médicos dizem estar perto de chegar a exame de sangue para todos os tipos de câncer

Cientistas dizem que estão mais perto de criar um exame de sangue universal, capaz de identificar todos os tipos de câncer. Estudo conduzido com 1.005 pacientes por uma equipe da Universidade Johns Hopkins, dos Estados Unidos, testou um método que detecta oito tipos de proteínas e 16 mutações ge...

Ler Notícia Completa

Formato JPEG está com os dias contados

Há quantos anos você ouve falar em arquivos JPG? O formato já era utilizado nos primórdios da web comercial nos anos 1990, vivendo há mais de 20 anos como o principal método de compressão de imagens do público. No que depender de Google, Mozilla e outras empresas, isso pode mudar dentro de algum...

Ler Notícia Completa
Você gostará destes vídeos: