Utilisation de l'indentation de texte en CSS-tutoriel CSS-php.cn

Table des matières

多段落首行缩进示例

Maison

interface Web

tutoriel CSS

Utilisation de l'indentation de texte en CSS

Feb 20, 2024 am 09:02 AM

css

Utilisation de lindentation de texte en CSS

L'utilisation de text-indent en CSS nécessite des exemples de code spécifiques

CSS est un langage de feuille de style utilisé pour définir le style et la disposition des éléments dans les documents HTML. Parmi eux, text-indent est une propriété en CSS, utilisée pour définir l'indentation de la première ligne du bloc de texte. Cet article présentera l'utilisation de l'attribut text-indent et fournira quelques exemples de code spécifiques.

1. Utilisation de base de l'attribut text-indent
L'attribut text-indent est utilisé pour définir l'indentation de la première ligne d'un bloc de texte et peut être utilisé pour les paragraphes, les listes, les titres et d'autres éléments. Il s'agit d'une valeur entière non négative en pixels, pourcentages ou ems. Une valeur positive indique une indentation à droite, une valeur négative indique une indentation à gauche. La syntaxe de base est la suivante :

selector {
  text-indent: value;
}

Copier après la connexion

Parmi eux, selector est le sélecteur de l'élément à styliser, et value est la valeur en retrait de la première ligne.

2. Indentation de première ligne basée sur les unités de pixels
Pour définir l'indentation de première ligne en unités de pixels pour un bloc de texte, vous pouvez directement spécifier une valeur positive ou négative. Par exemple, pour définir le retrait de la première ligne d'un paragraphe à 30 pixels, vous pouvez utiliser le code suivant :

p {
  text-indent: 30px;
}

Copier après la connexion

De cette façon, la première ligne de tous les éléments du paragraphe (

) sera en retrait de 30 pixels. À droite.

3. Indentation de première ligne basée sur l'unité de pourcentage
L'attribut text-indent prend également en charge l'utilisation du pourcentage comme unité. Dans ce cas, la valeur de l'indentation de la première ligne sera calculée par rapport à la largeur de l'élément parent. Par exemple, pour définir l'indentation de la première ligne d'un paragraphe à 50% de la largeur de l'élément parent, vous pouvez utiliser le code suivant :

p {
  text-indent: 50%;
}

Copier après la connexion

De cette façon, la première ligne de tout paragraphe (

) les éléments seront indentés vers la droite de la largeur de l'élément parent de 50 %.

4. Indentation de première ligne basée sur l'unité em
L'attribut text-indent prend également en charge l'utilisation de em comme unité. L'unité em est un multiple de la taille de la police de l'élément. Par exemple, pour définir l'indentation de la première ligne d'un paragraphe à 2 fois la taille de la police, vous pouvez utiliser le code suivant :

p {
  text-indent: 2em;
}

Copier après la connexion

De cette façon, la première ligne de tous les éléments du paragraphe (

) sera indenté 2 fois la taille de la police à la bonne taille.

5. L'effet de l'indentation de la première ligne de plusieurs paragraphes

<!DOCTYPE html>
<html>
<head>
<style>
p.indent {
  text-indent: 30px;
}
</style>
</head>
<body>

<h2 id="多段落首行缩进示例">多段落首行缩进示例</h2>

<p class="indent">这是一个缩进的段落。</p>
<p class="indent">这是另一个缩进的段落。</p>
<p>这是一个没有缩进的段落。</p>

</body>
</html>

Copier après la connexion

Dans le code ci-dessus, en définissant le nom de la classe .indent, puis en appliquant cette classe à l'élément de paragraphe qui nécessite que la première ligne soit indentée, vous pouvez obtenir plusieurs paragraphes avec de bons effets Retrait de la première ligne.

6. Résumé
text-indent est l'attribut en CSS utilisé pour définir l'indentation de la première ligne d'un bloc de texte. Il peut être défini en unités telles que les pixels, les pourcentages et les ems. Ce qui précède est l'utilisation de base de l'attribut text-indent et quelques exemples de code spécifiques. J'espère que cela vous sera utile.

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn