Indentation CSS

"CSS LE TELLEMENT est la propriété de CSS utilisée dans le bloc DIV ou n'importe quel conteneur pour montrer l'indentation de la première ligne du texte. Lorsque le retrait CSS n'est mentionné avec aucune ligne, alors par défaut, c'est pour la première ligne du texte. Il prend aussi les valeurs avec des signes positifs et négatifs.

Cette propriété d'empreinte peut être appliquée à n'importe quel contenu HTML, mais dans cet article, nous avons utilisé du texte pour mettre le texte dans la première ligne du paragraphe."

Travailler sur la propriété textuelle de CSS

Il est utilisé pour montrer le nombre d'espaces vides qui font la distinction entre les paragraphes à partir de la gauche ou des marges droites du contenu extérieur qui est principalement div. La propriété d'indentation de CSS facilite la lecture et la compréhensible du texte pour que les programmes soient compréhensibles en gardant le texte à une longueur spécifiée. Cela donne un effet accrocheur pour le texte pour l'utilisateur.

La syntaxe de base utilisée pour la propriété Text-Indent est:

Texte-indent: longueur;

Exemple 1

Dans cet exemple, nous créerons une page Web en utilisant uniquement du contenu de texte HTML sous forme de titres ou de paragraphes. Alors d'abord, à l'intérieur de la section du corps, utilisez le cap

Tag pour introduire un titre. Après une pause
, Encore une fois, une rubrique est utilisée. La balise de rupture crée une ligne vierge et saute vers la ligne suivante pour créer un nouveau contenu. Après avoir déclaré les titres, un div est créé. Un div est un conteneur HTML important car il s'agit d'un conteneur qui maintient le contenu HTML à l'endroit spécifié. Quels que soient les éléments que nous utilisons à l'intérieur du div sont nécessaires avec une taille spécifique pour conserver tous les éléments de cette taille respectivement. Dans ce cas, nous avons mentionné le nom de la classe, qui sera déclaré dans la section tête du code HTML. Toutes les propriétés de style CSS sont écrites à l'intérieur de la classe mentionnée qui sera appliquée à la div et au contenu à l'intérieur.

À l'intérieur du div, nous utiliserons simplement le texte. Un contenu texte simple peut être utilisé avec ou sans les balises de paragraphe.

Une fois la balise Div fermée, un nom de cap est à nouveau utilisé dans

. Un div sera à nouveau déclaré avec le nouveau nom de classe qui contiendra le CSS pour cette classe séparément. Fermez également toutes les balises et le corps HTML. Considérons maintenant les étiquettes CSS déclarées dans la partie tête, ce qui en fait un CSS interne. Dans le CSS, deux classes sont déclarées séparément; La première classe contient un lien de texte de 50px avec une largeur de div d'une longueur de 650px, cela maintiendra le texte dans cette longueur de la div, et la première ligne du texte sera affectée par cette valeur de fixe.

.MyText
Texte-indent: 50px;

De même, pour la deuxième classe déclarée pour la deuxième div, un indice de texte appliqué au texte est en valeur négative. Une longueur de largeur similaire est également appliquée à la div.

Enregistrez maintenant le code avec l'extension HTML pour l'ouvrir à la fois en tant que code HTML dans l'éditeur et en tant que page Web dans le navigateur.

Vous verrez que la première div ayant l'intendant de texte de 50px a la première ligne du texte qui a déplacé l'intention de 50px à partir du point de départ de gauche. Alors que la deuxième div a 10em, le texte se déplacera vers le côté gauche en retrait par la valeur spécifiée, ce qui fait cacher les mots de la première ligne.

Exemple 2

L'unité utilisée pour le retrait n'est pas toujours en pixels; il peut également être utilisé en pourcentages. Dans cet exemple, le code corporel HTML est presque le même; Le nom d'en-tête est différent car ils spécifient les nouvelles valeurs en pourcentage. Les deux mêmes classes pour le CSS seront également utilisées dans le code.

En se déplaçant vers la partie tête de la tête CSS, la balise de style a la classe pour contenir un tir de 20% de valeur et de largeur, comme nous l'avons donné dans le premier exemple.

.MyText
Texte-indent: 20%;

De même, MyText1 de deuxième classe est déclaré appliquer un style au deuxième div, cela aura la même largeur, mais le retrait du texte est de 40%. Cette augmentation de l'indentation de texte entraînera le déplacement de la première ligne du texte dans la bonne direction avec un changement.

Vous pouvez voir que lorsque nous exécutons le fichier HTML sur le navigateur, une page Web sera formée avec deux paragraphes de texte. Le premier commence près de la gauche, tandis que le deuxième paragraphe commence du centre de la div.

Exemple 3

Le troisième et le dernier exemple concerne l'intemple de texte suspendu. Dans cet exemple, la première phrase est déplacée dans une direction arrière, tandis que le reste du paragraphe est toujours dans sa position; Le déplacement est principalement en valeur négative dans ce cas, pour déplacer la première section de texte dans une direction de gauche. Compte tenu du corps HTML, il y a un seul cap et une div contenant le texte. Le conteneur Div a une classe pour coiffer le texte à l'intérieur en utilisant CSS interne.

< div class = mytext >

À l'intérieur de la balise de style dans la tête HTML, la classe déclarée dans la balise Div est déclarée avec des spécifications. Il a un indedent de texte de -28px. Cela signifie que la première ligne commencera par une indentation d'une 28e valeur négative, déplaçant le texte vers le côté gauche. Comme la valeur de texte-indent négative fait que le texte se déplace vers le côté négatif, nous l'avons expliqué dans le premier exemple, mais contrairement à cet exemple, où la partie mobile de la première ligne n'était pas visible, ici, toute la première phrase est apparue à l'intérieur le div.

.MyText
Texte-indent: -28px;
Padding-gauche: 28px;

Contrairement à l'indéont de texte, comme il est pris dans une valeur négative, la valeur du padding-gauche est prise en positif car l'ensemble du paragraphe s'adaptera à l'intérieur de cette taille de div; Cela rendra le texte de la première ligne plus proéminent vers la direction gauche.

Le reste du code corporel HTML est le même, ayant une rubrique et une div avec une classe.

Après avoir enregistré le code, exécutez-le sur le navigateur. Vous verrez que la première rangée du texte est vers la direction de gauche, et le reste du paragraphe de la deuxième ligne est vers la droite.

Conclusion

L'article explique le fonctionnement et l'utilisation de la propriété CSS du texte du texte dans les pages Web. Chaque fois que nous sommes prêts à décrire quoi que ce soit via un texte sur le site Web, qu'il s'agisse du site Web ou de toute autre information, nous utilisons cette propriété d'outre pour déplacer le texte de première ligne dans un peu de droite ou de gauche. Dans cet article, nous avons utilisé différents exemples qui expliquent le fonctionnement de cette propriété de retrait dans la propriété texte d'une page Web, formée en utilisant HTML et CSS ensemble.