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 personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornar essa limitação tecnológica.


A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.


O filme Mortal Kombat, inspirado no jogo de mesmo nome, faturou 23 milhões de dólares apenas no fim de semana de estreia nos EUA. Ainda sobre este título de sucesso, outra cifra que impressiona é o faturamento ao longo do primeiro ano: 1 bilhão de dólares no mundo todo.


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.


Em 1949 a revista Popular Mechanics fez uma previsão para o futuro, dizendo: "Um dia os computadores pesarão menos do que 1,5 tonelada". E pensar que temos smartphones capazes de realizar milhões de vezes mais operações do que os computadores daquela época.


A IBM detém o recorde de patentes em um único ano, atingindo a marca de 4186 registros no ano de 2008. Clique aqui e saiba mais sobre esta gigante do mundo da tecnologia.