Idiomas

Esta é uma tradução. Ela pode conter erros ou estar desatualizada em relação à versão original em inglês. Tradutor(a): Maurício "Maujor®" Samy Silva

Folhas de estilos CSS dicas & truques

Ver index para todas as dicas.

Parágrafos indentados

Torre Eiffel

Miniatura da torre Eiffel no Parque Mini-France

Observe algo bem simples: indentar a primeira linha de um parágrafo. Muitos consideram que a indentação facilita a leitura dos parágrafos de forma mais eficiente do que deixar uma linha em branco entre os parágrafos, especialmente quando se trata de longas linhas de texto. Isso possibilita também que se use linhas em branco para destacar pulos de linhas em locais mais importantes (locais que mereçam maior destaque)

O segredo é indentar apenas os parágrafos que se seguem a outro parágrafo. O primeiro parágrafo não precisa ser indentado, assim como, também não precisam ser indentados aqueles parágrafos após diagramas, títulos e outros conteúdos não relacionados ao texto propriamente dito. As regras CSS para obtenção desse efeito são bem simples conforme mostradas a seguir:

p {
  margin-bottom: 0 }
p + p {
  text-indent: 1.5em;
  margin-top: 0 }

Estas regras indentam a primeira linha de parágrafos que se seguem a um parágrafo. Elas também eliminam o espaçamento acima e abaixo dos parágrafos indentados. Porém na prática há exceções.

Em determinadas páginas, existem elementos P que são usados para marcar legenda de imagens (ver a página “Imagens & legendas” como exemplo). Ali nós centralizamos as legendas marcadas como parágrafos e eles não são indentados. Uma só regra CSS 'p.caption {text-indent: 0}' resolve. Consulte as regras CSS daquela página para constatar que foi usada essa regra CSS.

Assim, podemos usar vários espaços em branco entre os parágrafos para indicar quebras importantes no texto. Vamos criar três classes: stb (pequenas quebras temáticas), mtb (quebras temáticas médias) e ltb (grandes quebras temáticas). Atribuímos a classe stb a esse parágrafo para você constatar o efeito da pequena quebra temática.

p.stb { text-indent: 0; margin-top: 0.83em }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }
Bert Bos, Coordenador das atividades das CSS
Copyright © 1994–2017 W3C®

Criado em: 17 de janeiro de 2001;
Atualizado qui 09 nov 2017 04:40:59 UTC

Idiomas

Sobre traduções