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;
}
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 id="This-is-an-example-of-a-text-indent-property">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>
Méthode 2 : Utiliser l'attribut padding-left
L'attributpadding-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;
}
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 id="This-is-an-example-of-a-padding-left-property">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>
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!
Quelle est la spécificité de @rules, comme @keyframes et @media?Apr 18, 2025 am 11:34 AMJ'ai eu cette question l'autre jour. Ma première pensée est: une question étrange! La spécificité concerne les sélecteurs, et les rubriques ne sont pas des sélecteurs, donc ... non pertinents?
Pouvez-vous nist @media et @Support Queries?Apr 18, 2025 am 11:32 AMOui, vous le pouvez, et cela n'a pas vraiment d'importance dans quel ordre. Un préprocesseur CSS n'est pas requis. Il fonctionne dans CSS ordinaire.
Buste de cache de gorgée rapideApr 18, 2025 am 11:23 AMVous devriez à coup sûr définir des en-têtes de cache éloignés sur vos actifs comme CSS et JavaScript (et des images et polices et quoi que ce soit d'autre). Cela dit au navigateur
À la recherche d'une pile qui surveille la qualité et la complexité de CSSApr 18, 2025 am 11:22 AMDe nombreux développeurs écrivent sur la façon de maintenir une base de code CSS, mais peu d'entre eux écrivent sur la façon dont ils mesurent la qualité de cette base de code. Bien sûr, nous avons
Le datalist est destiné à suggérer des valeurs sans appliquer de valeursApr 18, 2025 am 11:08 AMAvez-vous déjà eu un formulaire qui devait accepter un petit texte arbitraire? Comme un nom ou autre chose. C'est exactement à quoi sert. Il y a beaucoup de
Conférence avant à ZurichApr 18, 2025 am 11:03 AMJe suis tellement excité de me diriger vers Zurich, en Suisse pour la conférence de Front (j'adore ce nom et URL!). Je n'ai jamais été en Suisse auparavant, donc je suis excité
Construire une application sans serveur complète avec des travailleurs CloudFlareApr 18, 2025 am 10:58 AML'un de mes développements préférés dans le développement de logiciels a été l'avènement de Serverless. En tant que développeur qui a tendance à s'enliser dans les détails
Création de routes dynamiques dans une application NuxtApr 18, 2025 am 10:53 AMDans cet article, nous utiliserons une démo de magasin de commerce électronique que j'ai construit et déployé sur Netlify pour montrer comment nous pouvons faire des itinéraires dynamiques pour les données entrantes. C'est assez
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
Listes Sec
SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.
PhpStorm version Mac
Le dernier (2018.2.1) outil de développement intégré PHP professionnel
Télécharger la version Mac de l'éditeur Atom
L'éditeur open source le plus populaire
ZendStudio 13.5.1 Mac
Puissant environnement de développement intégré PHP
