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?
Mega Man
A primeira versão do clássico Mega Man, para Nintendo 8 bits, tem seu recorde de pontos estabelecido em 03/11/2006, por David Archey, que cravou 2.396.700 pontos, terminando o jogo.
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.
Nintendo Wii
Nos primeiros oito dias após o lançamento do console Nintendo Wii foram vendidas 600 mil unidades. Isso equivale a quase um por segundo e estes incríveis números são referentes às vendas apenas nos EUA!
Cuidados com o notebook
Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais aqui.
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.
Playstation
O Playstation só nasceu porque uma parceria entre Sony e Nintendo, para desenvolver uma unidade de CD para o Super Nintendo, fracassou. Clique aqui e saiba mais.