LOGIN:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Terça-feira, 18/05/2004 - 01:00 - Por Mauricio Samy
Seções relacionadas:

Controlando as entrelinhas e os espaçamentos com CSS

Objetivo

Mostrar o uso de uma técnica CSS para determinar qual deverá ser a distância entre as linhas de um parágrafo, bem como aquela entre dois parágrafos adjacentes.

Ao final da leitura deste artigo você estará capacitado a personalizar as entrelinhas e entre parágrafos nos seus documentos Web, com uso das CSS.

A renderezição default

Observe abaixo um fragmento de código HTML de uma página web, para apresentação de 03 (três) parágrafos na tela de um monitor.

..............


Este é o primeiro parágrafo exemplo do tutorial escrito por Maurício Samy Silva desenvolvedor do site CSS para Web Design e que destina-se a demonstrar como você pode ter controle total sobre as entrelinhas e espaçamentos.


Este é o segundo parágrafo exemplo do tutorial. Você vai conhecer mais uma das inúmeras possibilidades das CSS. Com HTML você não consegue este efeito.


Este é o terceiro parágrafo exemplo do tutorial. Não só o espaçamento entre as linhas de um parágrafo é perfeitamente controlável, como também o espaçamento entre parágrafos.


..................

Os três parágrafos renderizados na tela de um monitor serão apresentados como mostrado na figura abaixo:

(Destaquei na figura os espaçamentos referidos neste artigo)

Entrelinhas figura_1

As propriedades CSS "line-height" e "margin"

As propriedades CSS que controlam os espaçamentos referidos sao:

line-height: determina o espaçamento entre as linhas dentro de um elemento HTML. Cada elemento HTML possui uma line-height default. No caso deste tutorial estamos tratando especificamente do elemento parágrafo.

margin: a propriedade margin, controla o espaçamento entre dois elementos HTML adjacentes. Cada elemento HTML possui uma margin default. As margens são definidas em quatro direções em volta do elemento: margem no topo, esquerda, abaixo, direita.

Nota: Os espaçamentos default são implementados pelo brownser e sofrem uma pequena variação, de acordo com o brownser utilizado para a visualização.

As regras CSS para espaçamentos

Se temos propriedades CSS que controlam aqueles espaçamentos, é imediato concluir que basta escrevermos regras CSS para alterá-los.

E as regras são bem simples:


-- >

Você já deve ter concluído que a aplicação da regra acima vai aumentar em 60% as entrelinhas e passar para 2.0em o espaçamento entre parágrafos.:

Na figura abaixo o resultado da aplicação das regras no parágrafo:

Entrelinhas figura_2

Compare com a figura anterior.

O controle é seu!

Uma regra CSS bem simples, possibilitando total controle sobre espaçamentos. Convém lembrar que qualquer medida CSS de comprimento válida poderá ser usada (px, %, em, pt, pc, cm, mm, etc...).

Mostrei neste artigo um AUMENTO dos espaçamentos. Se você deseja uma diminuição daqueles espaçamentos, a técnica é a mesma. Por exemplo: use 80% e 0.7em.

Use classes

Duas perguntas são imediatas:

1a. Pergunta: Mas, a aplicação da folha de estilo mostrada no artigo, quer incorporada quer importada, afetará TODOS os parágrafos na página.

Resposta: CORRETO! Se você deseja aplicar as regras CSS em alguns parágrafos da página, crie uma classe e aplique.

2a. Pergunta: Mas, mesmo que eu queira a aplicação da folha de estilo em toda a página, ganharei um espaçamento acima do primeiro parágrafo e abaixo do último, mas só queria ENTRE os parágrafos.

Resposta: CORRETO! Se você deseja aqueles espaçamentos diferenciados, crie uma classe com margem superior e inferior diferentes e aplique nos primeiro e último parágrafos.

Descruba a versatilidade das CSS
Projete conforme as Web Standards.

Todos os artigos de Mauricio Samy

2 comentários publicados

  • 1. É isso aí!

    Quarta-feira, 19/05/2004, por Eduardo

    É isso ai, Mauricio! Está cada vez mais facil criar folhas de estilos. Antigamente (Netscape anterior ao 6 e IE anterior aos 5.5 e 5.0) , era problematico mexer com folhas de estilo acessiveis a todos os navegadores ( os outros entao eram uma tristeza), agora parece que os "fabricantes" dos browsers estao seguindo mais a W3C. E continue com esses ótimos tutos. Ótimas pesquisas sobre CSS você anda fazendo! :D

    Responder comentário

  • 2. Muito legal!

    Quinta-feira, 11/05/2006, por Luís Humberto Teixeira Borba

    Olá, Maurício! Saberia me dizer se a propriedade "page-break-before" ou "page-break-after" é compatível com o browser firefox?

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Mauricio Samy é Engenheiro Civil formado pelo IME, ex-Professor de Geometria Descritiva e Matemática, autodidata em CSS e administrador do site www.maujor.com.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.