CSS: Unidades de Medida

Queridos leitores, nesse artigo vamos estudar as unidades de medida utilizadas na criação de folhas de estilo (CSS) dos sites. Unidades de Medidas Absolutas: Essas são as unidades que não dependem de um valor de referência. Vejamos as 5 unidades absolutas:

Por | @jonathanlamimkt Programação

Queridos leitores, nesse artigo vamos estudar as unidades de medida utilizadas na criação de folhas de estilo (CSS) dos sites.

Unidades de Medidas Absolutas

Essas são as unidades que não dependem de um valor de referência. Vejamos as 5 unidades absolutas:

in - polegada
cm - centímetro
mm - milímetro
pt - ponto (1pt = 1/72inch)
pc - pica (1pc = 12pt)

As unidades mostradas acima só deverão ser utilizadas quando se sabe os detalhes das características físicas e das configurações da mídia onde o documento será utilizado. No caso de navegadores (browsers), fica inviável utilizar esse tipos de medidas, pois a resolução será definida conforme a resolução de tela e tamanho do monitor do usuário.

Das cinco medidas apresentadas acima, a utilizada com maior frequência é a pt (ponto), pois é a medida utilizada em mídia impressa, pois esta é uma medida herdada da tipografia.

Unidades de Medidas Relativas

São as unidades que se baseiam em um valor de referência definido anteriormente. Vejamos as 3 unidades relativas:

Unidade em


calculada com base em um tamanho de fonte definido no documento.

Exemplo:

Em um cabeçalho

...

com font-size igual a 50px e margin-left igual a 1em, margin-left será igual a 50px.

Calculando o tamanho de em:

0.5em x 20px = 10px (esse é o valor em pixels da medida 0.5em)

Obs.: Se não for definido um tamanho de fonte para um elemento, o tamanho que será tomado como base para o cálculo de em será o do ancestral mais próximo. Se não tiver sido definido um tamanho de fonte para um ancestral, o tamanho que será tomado como base será o 16px, que é o padrão.

Unidade ex

Essa unidade é igual à altura da letra "x" minúscula da fonte utilizada.

Grande parte dos navegadores não renderiza de forma correta essa unidade por causa das dificuldades que possuem em definir a altura de uma fonte. Sendo assim eles utilizam uma notação onde 1ex é igual a 0.5em.

Obs.: O uso dessa medida no desenvolvimento de sites não é comum.

Unidade px

A unidade de medida mais utilizada na criação de sites. Ela é calculada com base na resolução do dispositivo onde o documento é visualizado. O uso dessa unidade de medida proporciona ao desenvolvedor um maior controle sobre um layout, onde a precisão absoluta é necessária.

Porcentagens

Essa unidade tem seu cálculo feito com base em valor preexistente. O valor de referência é determinado pelo valor de uma das propriedades do elemento em questão ou até mesmo do valor de um elemento ancestral ou ainda de uma valor de contexto geral de formatação.

A forma como é escrita essa medida varia ente valores de 0 a 100 acompanhados do sinal de porcentagem (%).

Dica:

Quando uma medida for igual a 0 (zero), não existe a necessidade de especificar a unidade, use apenas 0.

Até o próximo artigo.

Mais sobre: css, internet, estilizacao
Share Tweet
DESTAQUESRecomendado
Mais compartilhados
Comentários