CSS Site do Maujor

Tutoriais CSS, Web Standards, Tableless, Acessibilidade, HTML, XHTML,
Padrões Web, por Maurício Samy Silva

:: As medidas CSS de comprimento
::

Introdução
Unidades de medida de comprimento
CSS

As unidades de medida de comprimento CSS referem-se a medidas na
horizontal ou na vertical (e em sentido mais amplo, em qualquer direção).

O formato para declarar o valor de uma unidade de medida CSS é
um número com ou sem ponto decimal imediatamente precedido do
sinal '+' (mais) ou do sinal '-' (menos), sendo o sinal '+' (mais) o valor
"default" e imediatamente seguido por uma unidade
identificadora (medida CSS válida - p.ex., px, em, deg, etc...). A
unidade identificadora é opcional quando se declara um valor '0' (zero).

Algumas das propriedades CSS permitem que sejam declarados
valores negativos para unidades de medida. A adoção de valores negativos podem
complicar a formatação do elemento e devem ser usados com cautela. Se valores
negativos não forem suportados pela aplicação de usuário, eles serão convertidos
para o valor mais próximo suportado (e isso pode tornar-se desastroso para um
layout).

Unidades de medida de comprimento CSS válidas

São dois os tipos de unidade de medida de comprimento CSS:

UNIDADE RELATIVA

em

ex

px - pixel

% - percentagem

as unidades relativas são referenciadas a outras unidades como veremos a
seguir.

UNIDADE ABSOLUTA

pt - point :1/72 in;

pc - pica :12 points ou 1/6 in;

mm - milímetro :1/10 cm;

cm - centímetro :1/100 m;

in - polegada :2,54 cm;

Unidade relativa- é aquela tomada em relação a uma outra
medida. Folhas de Estilo em Cascata que usam unidades de comprimento relativas
são mais apropriadas para ajustes de uso em diferentes tipos de mídia. (p. ex.,
de uma tela de monitor para uma impressora laser).

O valor é tomado em relação:

em: ...ao tamanho da fonte ('font-size') herdada;

ex: ...a altura da letra x (xis) da fonte herdada;

px: ...ao dispositivo (midia) de exibição;

%: ... a uma medida previamente definida.

Unidade absoluta - é aquela que não esta referenciada a
qualquer outra unidade e nem é herdada. São unidades de medida de comprimento
definidas nos sistemas de medidas pela física e em fim são os conhecidos
"centímetros, polegadas etc...). São indicadas para serem usadas quando as
mídias de exibição são perfeitamente conhecidas.

Abaixo exemplos ilustrativos do uso destas medidas de comprimento
CSS:

div { margin: 1.5em; }
h4 { margin: 2ex; }
p { font-size: 14px; }
.classe { padding: 90%; }
hr { width: 14pt; }
h1 { margin: 1pc; }
h2 { font-size: 4mm; }
p.classe { padding: 0.3cm; }
h5.classe { padding: 0.5in; }

Nota: Relembro que uma regra CSS tem a seguinte
sintaxe

seletor {propriedade: valor;}

Entendendo as unidades de medida CSS

Vamos a seguir definir e analisar cada uma das unidades de medida
CSS e apresentar exemplos práticos.

A unidade de medida - pixel

A unidade de medida de comprimento pixel é relativa a resolução do
dispositivo de exibição (p.ex: a tela de um monitor).

Sem entrar em maiores considerações teóricas a mais simplista definição de
pixel que encontrei é esta:

Pixel é o menor elemento em um dispositivo de exibição, ao qual é possivel
atribuir-se uma cor.

Considere um dispositivo de exibição construido com uma densidade de 90 dpi
(dpi = dots per inch = pontos por polegada). Por definição, a referência
padrão para pixel é igual a um ponto no citado dispositivo. Daí pode-se
concluir que 1 pixel naquele dispositivo de exibição é igual a
1/90 inch = 0,28 mm.

Para uma densidade de 300 dpi 1 pixel é igual a 1/300 inch = 0,085mm

Assim, pixel é uma medida relativa a resolução do dispositivo de exibição.

A unidade de medida - em

A unidade de medida de comprimento em referencia-se ao
tamanho da fonte (letra) do seletor onde for declarada. Quando em
for declarada para a propriedade font-size referencia-se
ao tamanho da fonte (letra) do elemento pai. Quando em for
declarada para o elemento raiz do documento (p. ex: <html> em
documentos html) referencia-se ao valor inicial (default) do tamanho de fonte
(letra).

Os exemplos abaixo esclarecem as definições:
h1 { line-height: 1.2em
}

line-height de <h1> será 20% maior do que o tamanho das
letras de <h1>
h1 { font-size: 1.2em }

font-size de <h1> será 20% maior do que o tamanho das
letras herdado por <h1> p.ex.: se h1 estiver contido numa div
com font-size=10px então font-size de h1 = 12px

A unidade de medida - ex

A unidade de medida de comprimento ex é igual a altura da
letra x(xis) minúscula).

A unidade de medida - percentagem, %

Valores em percentagem são relativos a um outro valor anterior declarado.
Este valor anterior há que estar bem definido e em geral esta definição está em
uma determinada propriedade do mesmo elemento, na propriedade do elemento "pai"
(por exemplo: uma medida CSS de comprimento) ou mesmo no contexto
geral da formatação (por exemplo: a largura do bloco de conteúdo).
p {
font-size: 10px }
p { line-height: 120% }/*120% de'font-size'=12px*/

Eu e meu netinho.

Mauricio Samy Silva [maujorcss[arroba]maujor.com]

Copacabana - Rio de Janeiro, RJ - Brasil

Última modificação: 2006/08/30 09:25:31 GMT

Criado em: 2004-04-08
Atualizado em: 2005-03-09

Translation

Livros do Maujor

O jurássico

Visite o Blog do Maujor

Busca

Digite os termos da sua pesquisa

Web    www.maujor.com

Enviar formulário de pesquisa

Navegação
Pular navegação

Destaques

FAQ - CSS

QUIZ -
CSS

Editor
CSS do DWMX 2004

Aprenda CSS
desde o início

Fundamentos CSS

Introdução às
CSS

Sintaxe
CSS

Tipos de CSS

A propriedade CSS font

A propriedade CSS text

A propriedade CSS
margin

Propriedades das
bordas

A propriedade CSS
padding

A propriedade CSS
background

A propriedade CSS list

Pseudo-elements

Entrelinhas

Medidas
CSS

Regras CSS para
cores

Abreviando declarações
CSS

CSS
em ação

Font
interativo

Text
interativo

Border
interativo

Background
interativo

Seletores
CSS2.1

Efeitos CSS gerais

Sombras e linhas em
textos

Estilos em
cabeçalhos 1

Estilos em
cabeçalhos 2

Sombras em textos

Sombras em boxes

Botões

Barra de rolagem
do IE colorida

Zoom em imagem

Filtro alpha
com CSS

Botões flash com
CSS

Mapa de imagem com
CSS

Molduras com
CSS

Técnicas
CSS para substituir imagens

Box com cantos
arredondados

Galeria de fotos com
CSS

Transparência com
CSS

Efeitos em links

Regras gerais para
links

Efeitos com
caracteres

Fundamentos gerais

Diferentes mesma página

Estilizar link em
célula

Efeitos em tabelas

Cores alternadas nas
linhas

Bordas e células com
CSS

Personalizar
bordas de tabelas

Menus

Portas corrediças com
CSS

Técnicas gerais

Três exemplos

Menu com rollover de
imagem

Menu com ToolTip

Estilizar um menu de
salto

Barra de navegação

Tool tip em barra de
navegação

Menu de navegação

Menu mapa de imagem

Menu drop down

Menu drop down - Parte
2

Menu fotolog

Barra de navegação tipo
botão

Formulários

Formulários acessíveis

Formulários geral

Formulários de
contato

CSS3

Devo aprender CSS3?

Sombras em
textos com CSS3

Seletores
CSS 3

Módulo
Template Layout das CSS3

Módulo
Boxes Flexíveis das CSS3

http://maujor.com/tutorial/[email-masked]

Módulo para cores
das CSS3

Biblioteca
Modernizr para HTML5 e CSS3

Borda com
imagem

Artigos

Funcionalidades no Opera

Div Mania

Folhas
CSS alternativas

BoxModelHack

A especificidade e o
efeito cascata

Importando
fontes

Dicas para
desenvolver CSS

Mais dicas para
Folhas de Estilo

As CSS e as tabelas

Servir XHTML
como XML

Seletores CSS 2.1

Substituição
de imagem

CSS:
Guerra da Especificidade

Comentários
condicionais

Raciocinando
com DIVs

O conceito
hasLayout do IE

O IE7 e os Hacks
CSS

Tutorial
RSS

XHTML para
dispositivos móveis

Adeus tag
EMBED

Esconder CSS de
IEs antigos

10
itens para a próxima versão do IE

Estilizando abreviaturas e acrônimos

A
propriedade CSS display

Tabelas quebrando layout

O
que são Web Standards

Oito dicas
para servir (X)HTML

Padding em elementos inline

Leitores de tela e display:none

Hacks
CSS

Alinhar imagens em textos

Estrutura de cabeçalhos

CSS
Sprites

Dicas

HTML em desuso

Centralizar uma página na
tela

Dica(tooltip) com
CSS

Scroll em célula de
tabela

Fundo degradê na
página

Posicionamento

O Box Model

Elemento no meio da
tela

Absoluto e relativo

Layout CSS

Layout CSS 3
colunas

Vários templates

3 colunas - qualquer
ordem

2 colunas com faux
column

Layout CSS
passo a passo

Posicionar o
rodapé embaixo da janela

Imagens com CSS

Desenhando com
CSS

Relógio digital

Bandeira Britânica

Baralho com
CSS

Normas W3C

Zonas
horárias

XForms 1.0 -
FAQ

Eventos XML para autores HTML

XML Base

xml:id Versã0 1.0

Recomendação
CSS 1 do W3C

Recomendação XHTML 1 do
W3C

Técnicas
CSS para acessibilidade

Tipos de mídia para XHTML

Tutoriais W3C

Figuras com
legendas

Cantos
arredondados e sombras

Menu fixo na
tela

Layout sem
tabelas

Início com
HTML + CSS

Sombras

Fontes

Artigos W3C

Help
validador (X)HTML do W3C

Meu site é
standard! E o seu?

Mudando para Web
Standards

Site válido -
passo a passo

Dicas de
qualidade

FAQ -
HTML e XHTML

Formato para
data-hora

Documentos
W3C traduzidos

Tradução Cap2 livro
CSS

Ampersands, PHP Sessions e HTML válido

Internacional

Charset no cabeçalho HTTP

Códigos de controle

Links com <select>

Codificação de caracteres em arquivo CSS

Servindo XHTML 1.0

Configurar idioma no browser

Codificar idiomas

Quem usa Unicode?

Web
Standards

FAQ - Web
Standards

CheckList-Web
Standards

Tutorial
XHTML

Acessibilidade

Técnicas
CSS para acessibilidade

Dez
testes de acessibilidade

Acessibilidade nas
CSS2

Introdução à
acessibilidade

Checklist de
acessibilidade

WCAG - Uma Visão
Geral

Navegação pelo
WCAG 1.0

Slide Show WCAG

Componentes de
acessibilidade

Inacessibilidade de
captcha

Tabelas
acessíveis

Personalizando
preferências

Analisador de
contraste de cores

Barra de
ferramentas

Funções da barra de
ferramentas

Desenvolvendo AJAX acessível

Selos de
conformidade

Planejando
acessibilidade à Web

Formulários
acessíveis à prova de spam

Uso
do JAWS para avaliar acessibilidade

WCAG Samurai

CSS
Slide Show

O que é CSS Slide
Show?

Show #1
- CSS uma visão geral

Dreamweaver

Tabela com
cantos arredondados

Construir uma barra de
navegação com DW e CSS

Editor
CSS do DWMX
2004

Fireworks

Créditos -
Credits

(Contato) com o
Maujor

Pular navegação

Meus links

Desenvolvimento

» Criar Web

»
ComunidadeWEB

Hot Links

» Cadastro em site de busca

» Drogas? Tô Fora !

Parceiros

Botões

Links

» Política de anúncios no
site

Feeds

Visitantes e PR

Visitantes hoje: 1.865
Visitantes desde 14/11/09: 262.285

Site criado em agosto de 2003 por Maurício Samy Silva — Copyright ©
2003-2010. Todos os direitos reservados.
Design por Arthur Henrique

[CSS]

[XHTML]

[WAI]

[RSS]