CSS Text Recent

O recuo é definido como o espaço extra no início da linha. No CSS, o indent de texto é definido como o espaço extra no início da primeira linha. Usamos a propriedade "Indente de texto" para aplicar o recuo na primeira linha do parágrafo. Definimos seu valor em "px", "em" ou também em "%". Também definimos um valor negativo para esta propriedade de texto de indent. Quando usamos essa propriedade "indental de texto" do CSS, a primeira linha do bloco ou parágrafo criará algum espaço no início da linha. Ele só definirá algum espaço no início da primeira linha e não afetará outras linhas do parágrafo ou bloqueio. Não cria espaço nas outras linhas, exceto pela primeira linha. Neste tutorial, usaremos esta propriedade "indental de texto" e definiremos os valores negativos e positivos para o indentamento.

Exemplo # 1: Para usar esta propriedade "indental de texto" no CSS, devemos ter s

Bloco de dados ou parágrafos. Para isso, temos o arquivo html primeiro. Neste tutorial, o software que estamos usando é o código do Visual Studio. Yocreate u pode utilizar qualquer editor de texto ou bloco de texto para isso. Quando estamos usando este software, temos que escolher o idioma em que vamos escrever o código. Aqui, estamos selecionando "html" como seu idioma.

Depois disso, vamos começar a codificar neste arquivo. Nós também colocamos “!”E então pressionando“ Enter ”, obtemos as tags básicas do HTML que precisamos em todos os códigos HTML. No corpo, vamos criar algumas classes "div" com nomes diferentes. Dentro de cada div, criamos um parágrafo usando o “

" marcação. Estamos criando três divs com nomes diferentes como "A", "B" e "C". Dentro dessas divs, temos um parágrafo. Então, dessa maneira, criamos três parágrafos aqui. Usaremos esses três parágrafos em todos os exemplos deste tutorial. Agora, iremos ao arquivo CSS, onde usamos a propriedade "Indente de texto" e aplicaremos o recuo a todos esses parágrafos. Também vinculamos o arquivo CSS com este arquivo HTML na tag "Head" do código HTML.

Estamos usando o nome "div" "A" e depois usamos a propriedade "Indental de texto". Então, ele criará um recuo na primeira linha do parágrafo da div “A”. A primeira linha deste parágrafo cria um espaço no início da linha de parágrafo. Estamos usando os valores em "PX" neste código. Definimos valor "80px" para o primeiro parágrafo da div. Portanto, ele criará espaço livre "80px" na primeira linha e gerenciar o texto de acordo. Então, vamos recuar o segundo parágrafo da div e usar "B" com o "div". Em seguida, vamos usar o valor negativo na propriedade "Indente de texto". Para o segundo parágrafo, aplicamos o recuo negativo para definir o texto no lado esquerdo.

Depois disso, vamos usar o último parágrafo e também aplicar a propriedade "indental de texto" para este. Definimos "30px" para o terceiro parágrafo da div. Então, o texto da primeira linha do parágrafo se move para "30px" para o lado direito e cria um espaço "30px" no início da primeira linha. Depois de concluir este código, salve -o com o “.Extensão de arquivo CSS ”e também com o nome que usamos na tag de link de“ html ”. Em seguida, verifique a saída.

Nesta captura de tela, você pode ver que o primeiro parágrafo cria algum espaço no início da primeira linha. Aqui, ele cria um espaço "80px", pois usamos "80px" como o valor da propriedade "Indentente de texto". Agora, olhe para o segundo parágrafo, alguns textos desaparecem da tela à medida que ela se move para o lado esquerdo por causa da propriedade "Indent". Ele recua este parágrafo "-70px" e isso se aplica à primeira linha do parágrafo. Então, vem o último parágrafo em que usamos o valor "30px" desta propriedade. Neste parágrafo, cria espaço de "30px" na primeira linha.

Exemplo # 2:

Definimos o título "Font-Family" para "argeliano" e também no alinhamento "do centro". Definimos sua "cor" para "marrom". Então, temos o caminho 2. Para este título, estamos usando "Times New Roman" como "Font-Family" e "Purple" como a "cor" da fonte. Agora, vamos usar a propriedade "Alinhamento de texto" para todos os divs separadamente. Primeiro, temos o “div.a "e estamos definindo os valores de propriedade" indentado por texto "em" Em ". Aqui, "10em" está definido para o primeiro parágrafo da div e para a segunda div, estamos usando um valor negativo como "-5em". E para a última div, definimos o valor "indentado de texto" para "2em".

A primeira linha do primeiro parágrafo é recuada "10em" no lado direito, o que significa que cria um espaço "10em" na primeira linha do primeiro parágrafo. Em seguida, aplica um valor negativo ao segundo parágrafo e move a primeira linha do segundo parágrafo para o lado esquerdo. Então, algum texto não aparece aqui. E na primeira linha do terceiro parágrafo, usamos o indentação de texto “2em”, por isso cria um espaço ou indentação “2em” na primeira linha.

Exemplo # 3:

Vamos estilizar o cabeçalho aqui, com a “família da fonte” definida para “argelino” e se alinhar ao “centro”. Sua cor é ajustada aqui para "laranja". Então, há o cabeçalho 2, que está definido como "calibri" como a "família da fonte" e "verde" como a "cor da fonte.”Agora, estamos usando a propriedade“ Alinhamento de texto ”para cada divide individualmente. Primeiro, temos “div.a "e estamos usando a porcentagem"%"para definir os valores de propriedade" indentado por texto ". Para o primeiro parágrafo da div, usamos um valor positivo de "20%" e, para a segunda div, usamos um valor negativo de "-10%". O valor "indentado por texto" para a div final foi definido como "40%"

A primeira linha do primeiro parágrafo aplica um recuo de "20%", o que implica que produz um recuo de "20%" na primeira linha do primeiro parágrafo. O segundo parágrafo recebe um valor negativo e a linha inicial do segundo parágrafo é movida para o lado esquerdo, impedindo que algum texto apareça. A primeira linha do segundo parágrafo se move "10%" para a esquerda. Também utilizamos indentação de texto "40%" na primeira linha do terceiro parágrafo, o que resulta em um espaço ou recuo de "10%" na primeira linha.

Exemplo # 4:

Defina a família de fontes como "argelino" e "centro" neste título. Sua cor é alterada para "vermelha" neste caso. Então também temos o Heading 2, que tem "calibri" como a "família da fonte" e "azul" como a "cor" do título. Agora, usamos o atributo "textilign" para cada divide separadamente. Primeiro, usamos o “div. a "e estamos definindo os valores de propriedade" indentado por texto "com o pixel como" 50px ". Para o segundo parágrafo, definimos o valor de "Indent Text-Indent" em "Em" e também negativo. Usamos "-3em" para o segundo parágrafo da divisão. Para o último parágrafo da div, definimos o valor em "%". Definimos "30%" para o último parágrafo. Neste código, usamos "px", "em" e também "%".

No primeiro parágrafo, usamos "50px" na captura de tela. Ajusta o indentação "50px". No segundo parágrafo, definimos o valor negativo em "Em", que é "-3em". A primeira linha é recuada no lado esquerdo. Para o último parágrafo, definimos o valor em "%", que é "30%" e você pode ver que ele recua a primeira linha do terceiro parágrafo no lado direito.

Conclusão:

Criamos este tutorial para elaborar o "Indent de texto" no CSS. Aqui, discutimos o que é indente de texto e como definir o indentação no CSS e qual propriedade do CSS usamos para recuar o texto. Como discutimos neste tutorial, a propriedade "indental de texto" é usada para aplicar o recuo em nosso texto e usamos valores negativos e positivos aqui em nossos exemplos. Esta propriedade recuou apenas a primeira linha do parágrafo.