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?
Muitos aplicativos
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.
Mortal Kombat - O Filme
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.
ENIAC
O ENIAC, primeiro computador valvulado do mundo, possuía 17.000 válvulas, 500.000 pontos de solda, 30 toneladas de peso e ocupava uma área de 180 metros quadrados. Clique aqui e conheça mais sobre a história dos computadores.
Tetris
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.
Computadores de 1,5 tonelada
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.
Civilization
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.