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.


HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique aqui.


Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.


A empresa Universal City Studios, detentora dos direitos autorais do King Kong, processou a Nintendo logo após o lançamento de Donkey Kong, pois segundo ela, o game violava os seus direitos. Ela venceu o processo e recebeu da Nintendo uma indenização de quase 2 milhões de dólares.


A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.


O título Space Invaders, lançado em 1980, fez tanto sucesso em todo o mundo que as pessoas compravam o console Atari apenas para poderem jogá-lo em casa. Saiba mais sobre este incrível título clicando aqui.


Instalar vários aplicativos com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.