Conectar-se

Esqueci minha senha

Últimos assuntos
» O codigo para assistir futebol ao vivo
Sex Fev 27, 2015 11:39 pm por nicolasmendes

» Site só de Pulblicidade
Sab Ago 18, 2012 3:13 pm por streamjei

» Código para configurar botão de fechar!
Sab Ago 18, 2012 12:04 pm por Pika_mestre

» Novo Tipo de Portal
Qua Mar 21, 2012 10:21 am por OrigamiLouco

» (TUTORIAL) Como adicionar um livro de visitas para o seu site!!
Seg Mar 19, 2012 8:24 pm por Admin

» (TUTORIAL) Como criar um formulário de contato!!
Seg Mar 19, 2012 8:08 pm por Admin

» (TUTORIAL) Adicionar twitter!!
Seg Mar 19, 2012 7:45 pm por Admin

» Regras para postar os sites!!
Seg Mar 19, 2012 9:14 am por Admin

» Faça downloads mais rapidos e em links diretos não espere para baixar!
Seg Mar 19, 2012 8:55 am por Admin

Flux RSS


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 


Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Os membros mais ativos do mês

Mundo da Comédia

Sex Fev 24, 2012 2:27 pm por mundo-da-comedia

Quer rir um pouco?
Entao entre http://www.mundodacomedia.com
Onde vc encontra tirinhas piadas imagens e videos engraçadas e muito mais
Aproveitem

Comentários: 0

Conheça Cuba

Ter Jan 31, 2012 5:19 am por Arfisil

Venha conhecer Cuba Espero que gostem




aqui


http://www.box.com/s/zt8ssxzuvxfob7p3uqxb

Comentários: 0

Boas Vindas

Dom Jan 22, 2012 2:30 pm por OrigamiLouco

Olá,

Seja muito bem vindo(a) ao nosso fórum, Aproveite e chame seus amigos , se eles estiverem com duvidas em relação a sites ou blogs , aqui é o lugar certo para ele(a), aqui ele(a) pode tirar a Duvida na mesma hora pois todas as duvidas são respondidas no mesmo dia!


Muito Obrigado Por sua atenção e até Breve!


Comentários: 0

Apresentações importantes

Sab Jan 21, 2012 3:25 pm por Buscaweb

Olá pessoal,

Sou o "Buscaweb", dono do website:http://buscaweb.k6.com.br e venho para ajuda-los!
Qualquer dúvida estarei aqui!
Lembro que devemos tomar cuidado com a lei anti-pirataria dos Estados Unidos da América e remover conteúdo copiado dos nossos sites.

Abraço a todos, Very Happy

Comentários: 0

Vila do Carregado

Sex Jan 20, 2012 8:41 am por Arfisil



Comentários: 1

Minha apresentação

Qua Jan 18, 2012 6:37 pm por Arfisil

Olá chamo-me Arlindo e venho fazer a minha apresentação espero divertir-me neste forum, e logo abaixo o video dos monumentos de Portugual,vejam:

Comentários: 1

Os membros mais ativos da semana

Social bookmarking

Social bookmarking digg  Social bookmarking delicious  Social bookmarking reddit  Social bookmarking stumbleupon  Social bookmarking slashdot  Social bookmarking yahoo  Social bookmarking google  Social bookmarking blogmarks  Social bookmarking live      

Conservar e compartilhar o endereço de Dicas para site ou Blog! em seu site de social bookmarking

Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

O recorde de usuários online foi de 12 em Sex Nov 09, 2018 11:36 pm
Janeiro 2019
DomSegTerQuaQuiSexSab
  12345
6789101112
13141516171819
20212223242526
2728293031  

Calendário Calendário

Parceiros
Fórum grátis


Entrelinhas-Propiedades-line-height

Ir em baixo

Entrelinhas-Propiedades-line-height

Mensagem  Admin em Ter Jan 17, 2012 6:49 am

As propriedades line-height e margin.

A propriedade CSS de dimensionamento line-height permite controlar o espaamento entre linhas e a propriedade CSS margin permite controlar o espaamento entre elementos HTML.

Observe a marcação HTML a seguir, para um trecho da página composto de dois parágrafos:
view source
print?
01.
02.<p>
03.1o. Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, olutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim.
04.Quisque nec felis.
05.</p>
06.
07.<p>
08.2o.Parágrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac acus. In tortor.
09.</p>

A marcação mostrada é renderizada pelo navegador conforme a seguir.

1o. Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

2o.Parágrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor.

Notar a distância entre as linhas em cada parágrafo, ou seja, as entrelinhas (não confunda com distância entre parágrafos).

Alterando o espaçamento entre linhas!


Na página contendo a marcação HTML mostrada vamos inserir uma regra CSS para line-height que é a propriedade CSS que controla as entrelinhas. Observe a seguir a marcação com o acréscimo da regra CSS definindo uma entrelinha igual a 200%.

Nota: A entrelinha padrão aplicada pelo navegador é 100%.

Você pode usar qualquer medida de comprimento, válida em CSS (px, cm, em, %, in, etc.) para o valor da propriedade line-height ou ainda um número (1, 2, 3, etc.).
view source
print?
01.<head>
02.<style type="text/css">
03.p {
04.line-height:200%;
05.}
06.</style>
07.</head>
08.<body>
09.<p>
10.1o. Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.
11.</p>
12.
13.<p>
14.2o.Parágrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor.
15.</p>
16.</body>

A marcação mostrada é renderizada pelo navegador conforme a seguir.

1o. Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

2o.Parágrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor.

A entrelinha, por padrão, aplicada pelos navegadores varia de 1 a 1.2. Ao definirmos line-height em 200%, dobramos a entrelinha.

Nota: Faça algumas experiências com o valor de line-height, usando inclusive valores abaixo de 100% e também outras medidas válidas (por exemplo: 12px, 2.3em, 3cm...etc...) e você vai constatar que tem o controle total das entrelinhas.

A herança para a propriedade line-height!


A herana para a propriedade line-height funciona de maneira diferente de acordo com a unidade que se usa para o valor da propriedade. Voc precisa conhecer com essa propriedade herdada, para no ser surpreendido com espaamentos entre linhas inesperados.

Os valores possveis para line-height so: normal, comprimento CSS, nmero e porcentagem. Para demonstrar como cada um desses valores herdado vamos usar a marcao e regras de estilo mostradas a seguir.
view source
print?
01.<head>
02.<style type="text/css">
03.body {
04.font-size:16px;
05.line-height:(valor) /* iremos definir diferentes valores */
06.}
07.p.um {font-size:12px;}
08.p.dois{font-size:16px;}
09.p.tres {font-size:28px;}
10.</style>
11.</head>
12.<body>
13.<p class="um">1o.Parágrafo.......</p>
14.<p class="dois">2o.Parágrafo.......</p>
15.<p class="tres">3o.Parágrafo.......</p>
16.</body>

Observe que a marcao mostrada cria uma pgina contendo trs pargrafos, filhos de body, com tamanhos de fonte iguais 12px, 16px e 28px respectivamente. Para o elemento-pai dos pargrafos (body) foi definido um tamanho de fonte igual a 16px e uma line-height a definir. Pelos prncipios da herana (Ver tutorial sobre herana CSS) o tamanho de fonte para os pargrafos no ser herdado porque foram definidos explicitamente tamanhos de fontes para eles. Mas, a propriedade line-height ser herdada, pois no foi declarada explicitamente para os pargrafos.

O mecanismo de herana para a propriedade line-height diferente para cada tipo de valor declarado. Vejamos a seguir cada um deles.

Herana para line-height em porcentagem.

Suponha que na marcao mostrada tenha sido declarado para o elemento body a propriedade line-height igual a 120%.

Pelos mecanismos normais de herana de se supor que cada um dos pargrafos herde line-height:120%; e como consequencia o espaamento entre linhas para cada um deles seja 1.2 vezes o tamanho da fonte declarada, ou seja:

1o. pargrafo: line height igual a 12px x 1.2 = 14.4px
2o. pargrafo: line height igual a 16px x 1.2 = 19,2px
3o. pargrafo: line height igual a 28px x 1.2 = 33,6px

Se assim fosse a herana determinaria que medida que cresce o tamanho de fonte cresce tambm line-height. Contudo, observe a seguir como so renderizados os trs pargrafos.

Veja nesta pgina como se d a renderizao dos trs pargrafos.

perfeitamente possvel visualizar que o espaamanto entrelinhas permanece rigorosamente igual para os trs pargrafos e isso causa o efeito de uma entrelinha muito grande para a fonte pequena (1o. pargrafo), muito pequena para a fonte grande (3o. pargrafo) e normal para a fonte de 16px (2o. pargrafo).

Isso aconteceu porque a herana para line-height foi o valor calculado e não o declarado. O mecanismo funciona da seguinte maneira:
1)- Calcula-se line-height para o elemento ancestral que passar a herana. No nosso exemplo o elemento body cuja line-height calculada 16 x 1.2 = 19,2px.
2-) Os elementos descendentes herdam a line-height calculada e no a declarada. No nosso exemplo 19,2px para todos os parágrafos.

Herana para line-height em medida CSS de comprimento.

Suponha que na marcao mostrada tenha sido declarado para o elemento body a propriedade line-height igual a 20px.

Nesse caso não há valor a calcular e a herança é pelo mecanismo normal, ou seja, todos os parágrafos herdam line-height:20px; e o resultado final da renderização é semelhante ao mostrado anteriormente.

Veja nesta pgina como se d a renderizao dos trs pargrafos.

Aqui tambm perfeitamente possvel visualizar que o espaamanto entrelinhas permanece rigorosamente igual para os trs pargrafos e isso causa o efeito de uma entrelinha muito grande para a fonte pequena (1o. pargrafo), muito pequena para a fonte grande (3o. pargrafo) e normal para a fonte de 16px (2o. pargrafo).

Herana para line-height com o valor normal.

Suponha que na marcao mostrada tenha sido declarado para o elemento body a propriedade line-height igual a normal.

O valor normal para line-height usa a folha de estilo nativa do navegador que para a maioria deles igual a 1.2 vezes o tamanho da fonte declarada.

Os elementos descendentes herdam o valor normal e o clculo feito como mostrado a seguir.

1o. pargrafo: line height igual a 12px x 1.2 = 14.4px
2o. pargrafo: line height igual a 16px x 1.2 = 19,2px
3o. pargrafo: line height igual a 28px x 1.2 = 33,6px

Veja nesta pgina como se d a renderizao dos trs pargrafos.

Nesse caso o espaamanto entrelinhas varia de acordo com o tamanho de fonte defido para o pargrafo. Essa a situao que queremos em nossa pgina, contudo limita a entre linha a 120%. Como definir uma entrelinha de 150%, por exemplo, escalvel de acordo com o tamanho da fonte? Declare line-height com valor numrico.

Herana para line-height com valor numerico.

Suponha que na marcao mostrada tenha sido declarado para o elemento body a propriedade line-height igual a 1.5.

Os elementos descendentes herdam o valor 1.5 e o clculo feito como mostrado a seguir.

1o. pargrafo: line height igual a 12px x 1.5 = 18px
2o. pargrafo: line height igual a 16px x 1.5 = 24px
3o. pargrafo: line height igual a 28px x 1.5 = 42px

Veja nesta pgina como se d a renderizao dos trs pargrafos.

Nesse caso o espaamanto entrelinhas varia de acordo com o tamanho de fonte defido para o pargrafo. Essa a situao ideal na qual temos o controle total sobre a entrelinha.

E o espamento (a distncia vertical) entre os pargrafos?

Aqui também o controle é todo seu via CSS.

E quem dita as regras para este espaçamento é a propriedade margin.

Vamos acresentar mais uma regra CSS na folha de estilo da página.

Se você não lembra da propriedade margin, leia este tutorial sobre margens.
view source
print?
01.<head>
02.<style type="text/css">
03.p {
04.line-height:200%;
05.margin: 40px 0; /* define margens superior e inferior de 40px e laterais 0 (zero)
06.}
07.</style>
08.
09.</head>
10.<body>
11.
12.<p>
13.1o. Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, olutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim.
14.Quisque nec felis.
15.</p>
16.
17.<p>
18.2o.Parágrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor.
19.</p>
20.</body>

A marcação mostrada é renderizada pelo navegador conforme a seguir.

1o. Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

2o.Parágrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor.

Notar que a entrelinha continua em 200% e agora o espaçamento entre parágrafos cresceu para 40 pixels, cumprindo a regra CSS, escrita.

Você deve ter notado que o espaçamento do 1o. parágrafo para a borda superior do quadro amarelo e também a do 2o. parágrafo para a borda inferior do quadro amarelo AUMENTARAM.

Sim, este aumento no espaçamento cumpriu o prescrito na nova regra, ou seja: 40 pixel de margem superior e 40 pixel de margem inferior nos parágrafos.

Mas lembre-se o controle é SEU e você pode, com regras CSS evitar este espaçamento.
Veja o nmero 1 do item a seguir.

Dicas adicionais


1-) Para evitar aquele espaçamento referido no item anterior crie e aplique uma classe para o parágrafo superior e declare margin-top: 0; (ou n pixels) para a classe criada. Faça o mesmo com o parágrafo inferior e declare margin-bottom: 0; (ou n pixels) para a classe criada.

Você pode também declarar: margin: 0 0 40px 0; e suprimir o espaçamento superior, ou ainda margin: 40px 0 0 0; e suprimir o espaçamento inferior. E, uma série de outras combinações que ficam a título de exercícios para você.

2-) Se você deseja aplicar regras CSS em alguns elementos do documento e não em todos (por exemplo: alguns parágrafos na página seguirão uma regra line-height outros não) crie classes e aplique aos elementos.
avatar
Admin
Admin

Mensagens : 81
Data de inscrição : 07/01/2012
Localização : Brasilia

http://juliasilva.no.comunidades.net

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum