CSS Recunt Second Line

Uma folha de estilo em cascata é um código de estilo que é adicionado às tags html para aprimorar o trabalho e a aparência do conteúdo HTML. Entre muitos efeitos do CSS, uma das propriedades fundamentais de estilo do conteúdo é aplicar uma folha de estilo ao texto, incluindo cor de texto, família, tamanho e localização. Uma das propriedades de texto do CSS será explicada neste artigo. Esta é uma propriedade de recuo. Recuo significa o deslocamento do texto de um certo ponto para um lugar específico.

Propriedade do Recado de texto

Ao visualizar alguns sites educacionais, você deve ter visto esses parágrafos ou caixas de texto que começam com a primeira linha a uma distância de um parágrafo inteiro, tornando -o mais proeminente e atraente. Isso é feito fazendo a primeira linha do texto recuada. Não apenas a primeira linha, mas também podemos recuar a segunda linha, mantendo a primeira linha intacta. Esta propriedade de texto é tomada em pixel ou porcentagens. A sintaxe para o recuo do texto é:

Indente de texto: valor;

Esta propriedade pode ser aplicada em qualquer conteúdo HTML. No entanto, agora aplicaremos esta propriedade no texto. HTML e CSS são os idiomas de backbone para o desenvolvimento do front-end e o design de uma página da web. HTML contém duas seções básicas: seções de cabeça e corpo. Ambas as partes são descritas com as tags:

.. .

Todos os conteúdos HTML são descritos nas seções do corpo. A seção principal contém o título da página da web e o CSS se for CSS interno. As tags HTML básicas usadas neste artigo serão explicadas no horário de implementação. Falando sobre a declaração CSS, usamos CSS interno entre três tipos de CSS. As propriedades do CSS são declaradas dentro da etiqueta de estilo, que é declarada na etiqueta da cabeça.

Existem várias abordagens para recuar a segunda linha do parágrafo HTML. Alguns dos métodos simples são explicados abaixo.

Exemplo 1

Primeiro, usamos um exemplo para aplicar a propriedade CSS do recuo em um texto de parágrafo de HTML. Como mostra o nome do artigo, precisamos recuar a segunda linha do texto. Neste exemplo, aplicamos a propriedade de recuo para que a primeira linha do parágrafo permaneça a mesma no ponto em que era antes. No entanto, o parágrafo da segunda linha será recuado. Vamos começar com o código de exemplo. Primeiro, considere a seção do corpo, onde uma tag simples de parágrafo é usada para aplicar o recuo.

Um cabeçalho simples é declarado, que não aplicaremos nenhum efeito. A tag de parágrafo é declarada dentro da div. É um recipiente que mantém o conteúdo HTML em um ponto específico. Da mesma forma, aqui vamos declarar uma div. Uma aula também é declarada aqui.

No CSS, o design é feito através dos IDs ou das classes. Todos os efeitos que queremos aplicar estão escritos dentro da declaração de classe no corpo CSS. Na parte da cabeça, precisamos mencionar o nome no ponto em que queremos aplicar esses efeitos.

Feche todas as tags e o corpo HTML também. Depois que o conteúdo HTML for declarado, um único parágrafo e um título serão exibidos quando você executar a página no site. Usaremos o seguinte código CSS para aplicar efeitos sobre isso.

Em direção à etiqueta de estilo, uma div para a classe é explicada com os recursos que queremos aplicar a este contêiner. O indento de texto de -36px é usado, o que significa que a primeira linha não será recuada. No entanto, a primeira linha é movida para a esquerda em comparação com as linhas de parágrafos restantes. Isso é feito declarando o tampo esquerdo da div 36px. Ambos os valores são definidos em unidades de pixel.

div.a
Indente de texto: -36px;
Potding-Left: 36px;

A propriedade de preenchimento é para o conteúdo interno, que o externo controla. Esta é a distância entre o limite do texto e o limite do contêiner Div. Agora, salve o código com a extensão HTML e execute a página da web no navegador.

Você verá um cabeçalho simples. Um parágrafo tem a primeira linha intacta, mas a segunda e todas as outras linhas são deslocadas para a direita. A propriedade indentada por texto do CSS faz isso.

Exemplo 2

A propriedade indentada de texto será aplicada ao título neste exemplo. Um cabeçalho simples é declarado. Depois disso, usamos a tag de parágrafo para adicionar texto a ele. O ID no contêiner Div será aplicado a toda a div, precisamente da mesma maneira. Os efeitos descritos na classe foram aplicados.

Dentro da seção da cabeça, uma etiqueta de estilo conterá os recursos de identificação. A div tem uma margem e a largura a ser aplicada. O ID é declarado com um sinal de hash com ele.

Para aplicar efeitos no parágrafo especificamente, precisamos mencionar "P" com o ID. A borda acima do parágrafo é dada com cor e tamanho. O efeito de topo de preenchimento é aplicado. Esta é a distância entre o parágrafo e o título. As duas características da esquerda são o tamanho do texto e o peso do parágrafo. Isso ficará sem o recurso recuado do texto. O cabeçalho é aplicado com a propriedade indentada por texto de -26 pixels e preenchendo a direção da esquerda com o mesmo valor com um sinal positivo.

#container H2
Indente de texto: -26px;
Preenchimento-esquerda: 26px;

Salve o código e execute o arquivo para examinar a saída.

Na execução, você verá que o título é exibido para que a segunda linha do cabeçalho seja recuada na direção esquerda. No entanto, a primeira linha permanece a mesma.

Observação: Para fazer a segunda linha do texto no parágrafo ou na direção recuada, precisamos aceitar o valor do texto indentado em uma direção negativa. Ao mesmo tempo, o preenchimento do texto deve ser feito na direção esquerda com o valor positivo. O usuário deve confirmar que ambos os valores devem ser os mesmos. Nos dois exemplos, aplicamos o mesmo conceito.

Conclusão

A propriedade CSS Recent para a segunda linha é uma característica essencial do conteúdo de texto que é aplicado aos parágrafos e títulos para discriminar este texto de outros, tornando o texto atraente para o usuário. Os valores de recuo podem ser tomados em pixels e porcentagens também. Esta propriedade é aplicada à primeira e segunda linhas do parágrafo. O índice de texto do recurso de segunda linha do CSS é realizado com o valor com um sinal negativo e o mesmo valor para o preenchimento com um sinal positivo. A direção do preenchimento deve ser tomada como esquerda. Utilizamos dois exemplos para elaborar este conceito indentado de texto que será suficiente para aprimorar seu conhecimento sobre as propriedades do texto.