Comment mettre en retrait du texte en HTML en utilisant CSS ?-tutoriel CSS-php.cn

Comment mettre en retrait du texte en HTML en utilisant CSS ?

王林

Libérer： 2023-09-11 15:57:03

avant

1544 Les gens l'ont consulté

如何使用 CSS 缩进 HTML 中的文本？

HTML, Hypertext Markup Language, est utilisé pour créer la structure des pages Web. De plus, CSS est un langage de feuille de style utilisé pour styliser l'apparence visuelle de ces pages.

L'indentation est l'un des aspects importants du formatage du texte sur les pages Web, car elle permet la création d'un décalage visuel au début d'un paragraphe. ou un bloc de texte. 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 ou Cascading Style Sheets est un outil puissant qui nous permet de contrôler la présentation visuelle des éléments HTML sur une page Web. En utilisant CSS, nous pouvons styliser le texte, modifier sa police, sa taille, sa couleur et même son indentation.

En CSS, l'indentation crée une séparation visuelle entre les éléments en ajoutant un espace ou un remplissage à gauche ou à droite de l'élément. Il contribue à améliorer la lisibilité et la structure des pages Web en créant des séparations claires entre les différentes sections ou blocs de contenu.

Il existe plusieurs façons de mettre en retrait du texte en HTML à l'aide de CSS. Ici, nous discuterons de deux méthodes courantes.

Méthode 1 : Utiliser l'attribut text-indent
Méthode 2 : Utiliser l'attribut padding-left

Méthode 1 : utiliser l'attribut text-indent

L'attribut text-indent est utilisé pour créer un espace horizontal au début de la première ligne de texte dans un élément. Il est souvent utilisé pour créer des paragraphes en retrait ou pour séparer des blocs de texte du contenu environnant. La valeur de text-indent peut être spécifiée en pixels, en em ou en pourcentage de la largeur de l'élément conteneur.

Grammaire

Voici la syntaxe pour mettre en retrait du texte en HTML en utilisant CSS -

css selector {
   text-indent: value;
}

Copier après la connexion

Exemple

Voici un exemple d'utilisation de l'attribut text-indent pour indenter du texte en HTML. Dans cet exemple, nous indentons la première ligne du paragraphe sélectionné de 2em.

<!DOCTYPE html>
<html>
<head>
   <style>
      h3 {
         text-align: center;
      }
      .indented-p {
         text-indent: 2em;
      }
   </style>
</head>
   <body>
      <h3>This is an example of a text-indent property.</h3>
      <p class="indented-p">This is an 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 simple 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>
   </body>
</html>

Copier après la connexion

Méthode 2 : Utiliser l'attribut padding-left

L'attribut

padding-left est utilisé pour créer un espace entre le bord gauche d'un élément et son contenu. Il est souvent utilisé pour créer des blocs de texte en retrait, tels que des listes à puces ou des guillemets en bloc. La valeur de padding-left peut être spécifiée en pixels, en em ou en pourcentage de la largeur de l'élément conteneur.

Grammaire

css selector {
   padding-left: value;
}

Copier après la connexion

Exemple

Voici un exemple d'utilisation de l'attribut padding-left pour indenter du texte en HTML. Dans cet exemple, la propriété padding-left sera utilisée pour ajouter 40 pixels d'espace sur le côté gauche du paragraphe.

<!DOCTYPE html>
<html>
<head>
   <style>
      h3 {
         text-align: center;
      }
      .indented-p {
         padding-left: 40px;
      }
   </style>
</head>
   <body>
      <h3>This is an example of a padding-left property.</h3>
      <p class="indented-p">This is an 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 simple 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>
   </body>
</html>

Copier après la connexion

Conclusion

L'indentation est un aspect important du formatage du texte dans le développement Web. Avec CSS, nous pouvons facilement indenter du texte en HTML en utilisant les propriétés text-indent ou padding-left. Les deux méthodes sont efficaces et peuvent être utilisées en fonction des besoins spécifiques du site Internet.

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!