Comment définir l'indentation de la deuxième ligne d'un paragraphe en utilisant CSS ?-tutoriel CSS-php.cn

Comment définir l'indentation de la deuxième ligne d'un paragraphe en utilisant CSS ?

WBOY

Libérer： 2023-08-26 21:53:15

avant

1469 Les gens l'ont consulté

Comment définir lindentation de la deuxième ligne dun paragraphe en utilisant CSS ?

HTML est utilisé pour créer la structure des pages Web. De plus, CSS est utilisé pour concevoir l’apparence visuelle de ces pages. En CSS, l'indentation est l'un des aspects importants du formatage du texte sur une page Web. Il permet aux développeurs de créer des effets visuels au début des paragraphes. L'indentation peut être utilisée pour rendre le texte plus facile à lire et créer une impression de structure dans un document.

Indentation en CSS

CSS est un outil puissant qui permet aux développeurs de contrôler la présentation visuelle des éléments HTML sur une page Web. Nous pouvons styliser le texte en utilisant CSS et modifier sa police, sa taille, sa couleur et même son indentation.

En CSS, l'indentation est utilisée pour créer une séparation visuelle entre les éléments. Il crée une séparation visuelle entre les éléments en ajoutant un espace ou un remplissage sur le côté gauche ou droit des éléments.

Grammaire

css selector {
   text-indent: value;
}

Copier après la connexion

Utilisez la propriété Text-Indent pour indenter la première ligne

CSS permet aux développeurs de mettre en retrait la première ligne d'un paragraphe à l'aide de la propriété text-indent. Cette propriété a été définie sur 0, ce qui signifie qu'il n'y a pas d'indentation sur cette propriété. Par exemple, si nous voulions mettre en retrait tous les paragraphes d'une page Web de 25 pixels, nous pourrions utiliser le code suivant -

p {
   text-indent: 25px;
}

Copier après la connexion

Exemple 1

Voici un exemple de définition d'un retrait de 25 pixels pour tous les paragraphes d'une page Web.

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {
         text-align: center;
      }
      p {
         text-indent: 35px;
      }
   </style>
</head>
<body>
   <h2>This is an example of a text-indent property</h2>
   <p>This is the first indented paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
   <p>This is a second indented paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
   <p>This is the nth indented paragraph, Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>

Copier après la connexion

Comment mettre en retrait la deuxième ligne d'un paragraphe ?

L'attribut "text-indent" est utilisé pour mettre en retrait la première ligne d'un paragraphe. Pour mettre en retrait la deuxième ligne d’un paragraphe, nous devons d’abord supprimer l’indentation de la première ligne. Pour ce faire, nous pouvons déplacer la première ligne vers la gauche en utilisant une valeur négative de "text-indent", et après cela, nous déplaçons la deuxième ligne vers la droite en utilisant une valeur positive de "padding-left". Par exemple -

p {
   text-indent: -20px;
   padding-left: 20px;
}

Copier après la connexion

Dans le code ci-dessus, nous indentons la première ligne du paragraphe de -20px, ce qui la déplace de -20px vers la gauche, et la deuxième ligne de 20px, ce qui la déplace vers la droite.

Regardons quelques exemples d'indentation de la deuxième ligne d'un paragraphe à l'aide de CSS.

Exemple 2

Ceci est un exemple de définition de l'indentation de la deuxième ligne d'un paragraphe à l'aide d'éléments CSS

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {
         text-align: center;
      }
      p {
         text-indent: -30px;
         padding-left: 30px;
      }
   </style>
</head>
<body>
   <h2>Indent Second Line of Paragraph</h2>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>

Copier après la connexion

Exemple 3

Voici un exemple d'utilisation de sélecteurs de classe CSS pour définir le retrait de la deuxième ligne d'un paragraphe.

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {
         text-align: center;
      }
      .indent-p {
         text-indent: -4em;
         padding-left: 4em;
      }
   </style>
</head>
<body>
   <h2>Indent Second Line of Paragraph using CSS class selector</h2>
   <p class="indent-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>

Copier après la connexion

Conclusion

Nous discutons ici de l'indentation de la deuxième ligne d'un paragraphe. C'est un moyen simple d'améliorer la lisibilité et l'apparence de vos pages Web. En utilisant l'attribut « text-indent », nous pouvons créer un aspect unique et visuellement attrayant qui fait ressortir le contenu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!