CSS Recent

““O recuo CSS é propriedade do CSS usado no bloco Div ou em qualquer contêiner para mostrar o indentação da primeira linha do texto. Quando o recuo CSS não é mencionado com nenhuma linha, então por padrão, é para a primeira linha do texto. Leva os valores com sinais positivos e negativos também.

Esta propriedade do recuo pode ser aplicada a qualquer conteúdo HTML, mas neste artigo, usamos o texto para recuar o texto na primeira linha do parágrafo.”

Trabalhando na propriedade CSS Recent Text

É usado para mostrar o número de espaços em branco que discriminam entre os parágrafos que começam da esquerda ou das margens certas do conteúdo externo que é principalmente div. A propriedade de indentação do CSS facilita o texto para que os programas sejam lidos e compreensíveis, mantendo o texto em um comprimento especificado. Isso faz um efeito cativante para o texto para o usuário.

A sintaxe básica usada para a propriedade indentada por texto é:

Indente de texto: comprimento;

Exemplo 1

Neste exemplo, criaremos uma página da web usando apenas conteúdo de texto HTML na forma de títulos ou parágrafos. Então, primeiro, dentro da seção do corpo, use o título

tag para apresentar um título. Depois de um intervalo
, Novamente, um título é usado. A tag de quebra cria uma linha em branco e pula para a próxima linha para criar um novo conteúdo. Depois de declarar os títulos, uma div é criada. Uma div é um importante contêiner HTML, pois é um recipiente que mantém o conteúdo HTML no local especificado. Quaisquer que sejam os elementos que usamos dentro da div, são necessários com um tamanho específico para manter todos os elementos nesse tamanho, respectivamente. Nesse caso, mencionamos o nome da classe, que será declarado na seção principal do código HTML. Todas as propriedades do estilo CSS são escritas dentro da classe mencionada que será aplicada à div e ao conteúdo.

Dentro da div, simplesmente usaremos o texto. O conteúdo simples de texto pode ser usado com ou sem as tags de parágrafo.

Depois que a tag div está fechada, um nome de título é novamente usado em

. Uma div será declarada novamente com o novo nome de classe que conterá o CSS para esta classe separadamente. Feche todas as tags e o corpo HTML também. Agora considere as tags CSS declaradas na parte da cabeça, tornando -o um CSS interno. No CSS, duas classes são declaradas separadamente; A primeira classe contém um texto de recuo de 50px com uma largura de divisão de 650px, isso manterá o texto nesse comprimento da div, e a primeira linha do texto será afetada por esse valor de indent.

.MyText
Indente de texto: 50px;

Da mesma forma, para a segunda classe declarada para o Segundo Div, um texto aplicado ao texto está em valor negativo. Um comprimento de largura semelhante é aplicado ao div também.

Agora salve o código com a extensão HTML para abri -lo como um código HTML no editor e como uma página da web no navegador.

Você verá que o primeiro div, com o text-indent de 50px, tem a primeira linha do texto que moveu 50px de indução do ponto de partida esquerda. Enquanto a segunda div tem 10em, o texto se moverá em direção ao lado esquerdo recuado pelo valor especificado, fazendo as palavras da primeira linha ficarem ocultas.

Exemplo 2

A unidade usada para o recuo nem sempre está em pixels; Também pode ser usado em porcentagens. Neste exemplo, o código corporal HTML é quase o mesmo; Apenas o nome do título é diferente, pois eles especificam os novos valores em porcentagem. As mesmas duas classes para o CSS também serão usadas no código.

Movendo -se em direção à parte da cabeça do CSS, a etiqueta de estilo tem a classe para conter um recuo de 20 % de valor e largura, como demos no primeiro exemplo.

.MyText
Indente de texto: 20%;

Da mesma forma, a segunda classe MyText1 é declarada aplicar um estilo à segunda div, isso terá a mesma largura, mas o recuo do texto é de 40%. Esse aumento no indent de texto fará com que a primeira linha do texto se mova na direção certa com uma mudança.

Você pode ver que, quando executarmos o arquivo HTML no navegador, uma página da web será formada com dois parágrafos de texto. O primeiro começa perto da esquerda, enquanto o segundo parágrafo começa no centro da div.

Exemplo 3

O terceiro e o último exemplo é sobre o penduramento de texto. Neste exemplo, a primeira frase é movida em uma direção atrasada, enquanto o restante do parágrafo ainda está em sua posição; O deslocamento está principalmente em um valor negativo neste caso, para mover a primeira seção de texto na direção esquerda. Considerando o corpo HTML, há um único cabeçalho e uma div. O contêiner Div tem uma classe para estilizar o texto dentro dele usando CSS interno.

< div class = mytext >

Dentro da etiqueta de estilo na cabeça HTML, a classe declarada na tag DIV é declarada com especificações. Tem um indentro de texto de -28px. Isso significa que a primeira linha começará com um recuo de um 28º valor negativo, movendo o texto para o lado esquerdo. Como o valor negativo indentador de texto faz o texto se mover em direção ao lado negativo, explicamos no primeiro exemplo, mas diferentemente do exemplo, onde a parte em movimento da primeira linha não era visível, aqui, toda a primeira frase apareceu dentro o div.

.MyText
Indente de texto: -28px;
Preenchimento-esquerda: 28px;

Ao contrário do indentado de texto, como é tomado em um valor negativo, o valor do preenchimento-esquerda é considerado positivo porque todo o parágrafo se encaixará dentro desse tamanho de div; Isso tornará o texto da primeira linha mais proeminente na direção esquerda.

O restante do código corporal HTML é o mesmo, tendo um título e uma div com uma classe.

Depois de salvar o código, execute -o no navegador. Você verá que a primeira linha do texto está na direção esquerda, e o restante do parágrafo da segunda linha é para a direita.

Conclusão

O artigo explica o trabalho e o uso da propriedade CSS do REDENT do texto em páginas da web. Sempre que estamos dispostos a descrever qualquer coisa através de um texto no site, seja sobre o site ou qualquer outra informação, usamos esta propriedade de recuo para deslocar o texto da primeira linha em um pouco à direita ou à esquerda da direção. Neste artigo, usamos exemplos diferentes que explicam o funcionamento desta propriedade de recuo na propriedade de texto de uma página da web, formada usando HTML e CSS juntos.