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.
Você Sabia?
Nintendo Entertainment System
O console Nintendo Entertainment System (NES), da Nintendo, detém o recorde de videogame mais clonado em todo o mundo. Já foram catalogados mais de 300 aparelhos diferentes capazes de reproduzir seus jogos! Saiba mais sobre ele aqui.
Space Invaders
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.
Máquina de Pascal
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.
Asteroids
O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.
Final Fantasy X
O jogo Final Fantasy X para o Sony Playstation 2 vendeu, apenas no dia do seu lançamento, 1.455.732 cópias, estabelecendo um recorde de vendagem para as primeiras 24 horas de um game. Méritos da SquareSoft, que desenvolveu um excelente produto!
Inteligência artificial
O primeiro jogo a fazer uso de uma Inteligência Artificial foi o Mouse in the Maze, criado em 1955, na União Soviética. Você pode saber mais sobre ele clicando aqui.