Você pode alinhar parágrafos ou conteúdos de células de tabela de acordo com suas preferências usando as propriedades a seguir. Essas propriedades também podem ser aplicadas a todos os outros elementos que possuem altura ou largura definida ou calculada.
Recuo da primeira linha
Vamos começar com a propriedade text-indent. Ela define como a primeira linha de um parágrafo deve ser recuada. Também é possível recuar para a esquerda. Para isso, um valor negativo de text-indent deve ser usado. (Informações detalhadas sobre quando é útil utilizar um recuo extremo serão fornecidas depois). Um valor numérico é esperado.
Um exemplo:
.absatz { text-indent: 2em; }
No navegador, isso é exibido da seguinte forma:
Se um valor negativo for usado, haverá um recuo de texto na primeira linha.
.absatz {
text-indent: -2em;
}
E também aqui, naturalmente, um olhar sobre o resultado no navegador:
Portanto, algo assim também é possível. Ao definir recuos, certifique-se de que os conteúdos ainda possam ser lidos quando necessário. Na verdade, o text-indent pode se tornar interessante no contexto da otimização de mecanismos de pesquisa. Às vezes, prefere-se exibir imagens em vez de texto.
No entanto, se ainda deseja que o texto seja acessível para os mecanismos de pesquisa, você se depara inicialmente com um dilema. Esse dilema pode ser resolvido usando a propriedade text-indent. Pois essa propriedade permite, como já sabem, mover textos. Portanto, você pode fazer com que os textos desapareçam da visão dos visitantes.
Vantagem da variante text-indent: O texto a ser substituído por uma imagem continua inalterado no código-fonte.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Com esta sintaxe, é atribuída uma imagem de fundo ao elemento h1. (A propriedade background foi introduzida nesta série). Com text-indent: -99999px, o texto do título é movido 99999 pixels para a esquerda. Portanto, o texto não é mais visível. Agora, apenas a imagem é realmente exibida.
Se você desativar a folha de estilos, o texto será exibido normalmente.
Definir a altura da linha
Já mencionei a altura da linha em conexão com a propriedade font em geral. Agora, vamos nos aprofundar um pouco mais neste tópico. A definição da altura da linha em conjunto com o tamanho da fonte (font-size) é interessante.
A altura da linha pode ser definida pela propriedade line-height. Valores numéricos são permitidos. Valores percentuais também são possíveis. Eles se referem ao tamanho da fonte do elemento para o qual a altura da linha está sendo especificada. Antes de definir a altura da linha, observe o seguinte: Pode acontecer que um navegador/dispositivo dê prioridade à altura da linha em relação a outras propriedades e corte elementos se estiverem mais altos. Isso pode ser especialmente irritante com imagens. Portanto, teste os resultados antes de publicar a página online.
O exemplo a seguir mostra como usar line-height.
<p style="line-height:1.4em; font-size:1em;">Às vezes você cria um layout incrível, mas ainda faltam as fotos, e se você usar apenas molduras vazias, o layout parecerá bastante nu. Dá para fazer melhor:<br /> Neste treinamento em vídeo, mostro a vocês os melhores sites para obter rapidamente espaços reservados para imagens gratuitos. Você pode encontrar uma lista genial, por exemplo, <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">aqui</a>.</p> <p style="line-height:2em;font-size:1em;">Às vezes você cria um layout incrível, mas ainda faltam as fotos, e se você usar apenas molduras vazias, o layout parecerá bastante nu. Dá para fazer melhor:<br /> Neste treinamento em vídeo, mostro a vocês os melhores sites para obter rapidamente espaços reservados para imagens gratuitos. Você pode encontrar uma lista genial, por exemplo, <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">aqui</a>.</p> <p style="line-height:1em; font-size:1em;">Às vezes você cria um layout incrível, mas ainda faltam as fotos, e se você usar apenas molduras vazias, o layout parecerá bastante nu. Dá para fazer melhor:<br /> Neste treinamento em vídeo, mostro a vocês os melhores sites para obter rapidamente espaços reservados para imagens gratuitos. Você pode encontrar uma lista genial, por exemplo, <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">aqui</a>.</p>
Aqui foram definidos três parágrafos, aos quais foram atribuídas alturas de linha diferentes.
Como podem ver, a legibilidade de textos corridos pode ser fortemente influenciada pela altura da linha. Portanto, use line-height com cuidado.
Por fim, surge a questão de qual altura de linha se deve escolher. Normalmente, opta-se por alturas de linha entre 130 e 150 por cento.
p {
line-height: 150%;
}
No entanto, a boa legibilidade depende principalmente da largura de corrida da fonte. Aqui, a regra é: quanto mais longas forem as linhas de texto, maior deve ser a altura da linha. Portanto, teste sempre a página para garantir que a legibilidade seja realmente mantida.
Alinhamento horizontal do texto
A propriedade text-align define o alinhamento horizontal de parágrafos de texto e outros textos corridos ou elementos inline contidos em elementos de bloco. Os seguintes valores podem ser atribuídos a text-align:
• left – alinhamento à esquerda
• right – alinhamento à direita
• center – centralizado
• justify – justificado
Aqui está um exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>E este é o resultado no navegador:
Observe que o text-align não se aplica apenas ao conteúdo de texto. Na realidade, a propriedade se aplica a todos os elementos inline. Portanto, se uma imagem for inserida, a definição do text-align também se aplica a esse elemento.
Uma observação importante: text-align não deve afetar - pelo menos de acordo com a especificação oficial do CSS - elementos de bloco. (Embora haja navegadores que também o apliquem a elementos de bloco). Para alinhar elementos de bloco, nestes casos, use as propriedades de margin já apresentadas.
