Ir ao conteúdo
  • Cadastre-se
bruce alves

CSS Unidades relativas e absolutas em css

Recommended Posts

gente, embora não seja tão iniciante em html e css, ainda tenho um pouco de dificuldades com tags de alinhamento e tamanho, tipo assim, peguei um material que faz a seguinte citação:

 

Unidades relativas: é aquela tomada em relação à outra medida.

      Percentual:  % -  uma medida previamente definida.

Exemplo:

 

p { font-size: 10px }
p { line-height: 120% }/*120% de'font-size'=12px*/

 

      Palavras-chaves: X-large

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

Exemplo:

h1 { line-height: 1.2em }

line-height de <h1> será 20% maior do que o tamanho das letras de <h1>

 

Não entendi a primeira parte, como assim 120% do tamanho da fonte de 12 px. E se fosse 130%? da onde vem essa relação com o tamanho de 12 px? alguém pode me ajudar a compreender melhor?

Compartilhar este post


Link para o post
Compartilhar em outros sites

@bruce alves

Talvez este artigo responda a sua pergunta!

http://www.maujor.com/tutorial/propriedade-css-line-height.php

 

Basicamente o line-height é o espaçamento das linhas de texto.

 

Quando o valor de line-height é declarado com uso de um número inteiro ou decimal a entrelinha é igual ao número declarado multiplicado pelo valor de font-size.

 

Quando o valor de line-height é declarado com uso de uma medida CSS de comprimento a entrelinha é igual à medida declarada. 

 

Geralmente é usado esse atributo para alinhar no centro do elemento o texto.

Faça um teste:  http://jsfiddle.net/fn0rycb1/3/

 

Entre no link acima e altere os valores  para:
 

font-size: 20px;
line-height: 200%; 

Depois, para:

font-size: 30px;
line-height: 300%; 

E por aí vai...  Irá notar que a medida que aumenta o espaçamento a fonte também aumenta o tamanho acompanhando o ponto central.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 31/07/2018 às 05:39, DiF disse:

@bruce alves

Talvez este artigo responda a sua pergunta!

http://www.maujor.com/tutorial/propriedade-css-line-height.php

 

Basicamente o line-height é o espaçamento das linhas de texto.

 

Quando o valor de line-height é declarado com uso de um número inteiro ou decimal a entrelinha é igual ao número declarado multiplicado pelo valor de font-size.

 

Quando o valor de line-height é declarado com uso de uma medida CSS de comprimento a entrelinha é igual à medida declarada. 

 

Geralmente é usado esse atributo para alinhar no centro do elemento o texto.

Faça um teste:  http://jsfiddle.net/fn0rycb1/3/

 

Entre no link acima e altere os valores  para:
 


font-size: 20px;
line-height: 200%; 

Depois, para:


font-size: 30px;
line-height: 300%; 

E por aí vai...  Irá notar que a medida que aumenta o espaçamento a fonte também aumenta o tamanho acompanhando o ponto central.

 

@DiF cara valeu cara

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×