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?

Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras


Considerando todas as adaptações de jogos de videogame para o cinema, a mais bem sucedida foi Lara Croft: Tomb Raider, lançado em 2001 e que faturou 274 milhões de dólares. Ele foi dirigido por Simon West e estrelado pela bela Angelina Jolie.


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.


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 primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.


O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.