Bom Designer de Web costuma ser uma boa tipografia. Uma vez que grande parte do conteúdo de uma página da web é apresentado como texto, ser capaz de definir o estilo desse texto para ser atraente e eficaz é uma habilidade importante para um web designer. Infelizmente, não temos o mesmo nível de controle tipográfico online que temos na mídia impressa. Isso significa que nem sempre podemos definir o estilo de um texto de maneira confiável em um site da mesma forma que faríamos em uma peça impressa.
Um estilo de parágrafo comum que você vê frequentemente na impressão (e que podemos recriar online) é onde a primeira linha desse parágrafo é recuada espaço de tabulação. Isso permite que os leitores vejam onde um parágrafo começa e outro termina.
Você não vê esse estilo visual tanto em páginas da web porque os navegadores, por padrão, exibem parágrafos com espaço embaixo deles como uma forma de mostrar onde um termina e outro começa, mas se você quiser estilizar uma página para ter isso inspirado na impressão
estilo de indentação nos parágrafos, você pode fazer isso com o text-indent propriedade de estilo.A sintaxe desta propriedade é simples. Aqui está como você adicionaria um recuo de texto a todos os parágrafos em um documento.
p {
recuo de texto: 2em;
}
Personalizando os recuos
Uma maneira de especificar exatamente os parágrafos a recuar, é adicionar uma classe aos parágrafos que deseja recuar, mas isso requer que você edite cada parágrafo para adicionar uma classe a ele. Isso é ineficiente e não segue Codificação HTML Melhores Práticas.
Em vez disso, você deve levar em consideração ao recuar parágrafos. Você recua parágrafos que seguem diretamente outro parágrafo. Para fazer isso, você pode usar o seletor de irmão adjacente. Com este seletor, você está selecionando cada parágrafo que é imediatamente precedido por outro parágrafo.
p + p {
recuo de texto: 2em;
}
Como você está recuando a primeira linha, também deve se certificar de que seus parágrafos não tenham nenhum espaço extra entre eles (que é o padrão do navegador). Estilisticamente, você deve ter espaço entre os parágrafos ou indente a primeira linha, mas não ambas.
p {
margem inferior: 0;
acolchoamento inferior: 0;
}
p + p {
margem superior: 0;
acolchoamento superior: 0;
}
Recuos negativos
Você também pode usar o text-indent, junto com um valor negativo, para fazer com que o início de uma linha vá para a esquerda em oposição à direita como um recuo normal. Você pode fazer isso se uma linha começar com uma aspa para que o caractere de aspas apareça no ligeira margem à esquerda do parágrafo e as próprias letras ainda formam uma bela esquerda alinhamento.
Digamos, por exemplo, que você tenha um parágrafo que é descendente de um blockquote e deseja que ele seja indentado negativamente. Você pode escrever este CSS:
blockquote p {
texto-indent: -.5em;
}
Isso faria com que o início do parágrafo, que presumivelmente inclui o caractere de citação de abertura, fosse ligeiramente movido para a esquerda para criar uma pontuação deslocada.
Em relação às margens e enchimento
Muitas vezes, em web design, você usa valores de margem ou preenchimento para mover elementos e criar espaço em branco. Essas propriedades não funcionarão para obter o efeito de parágrafo recuado, no entanto. Se você aplicar qualquer um desses valores ao parágrafo, todo o texto desse parágrafo, incluindo todas as linhas, será espaçado em vez de apenas a primeira linha.