Indent de texte CSS

L'arrêt est défini comme l'espace supplémentaire au début de la ligne. Dans CSS, l'indent texte est défini comme l'espace supplémentaire au début de la première ligne. Nous utilisons la propriété «Text-Indent» pour appliquer l'indentation sur la première ligne du paragraphe. Nous définissons sa valeur dans «PX», «EM» ou aussi dans «%». Nous avons également défini une valeur négative pour cette propriété de texte. Lorsque nous utilisons cette propriété «Text-Indent» de CSS, la première ligne du bloc ou du paragraphe créera un peu d'espace au début de la ligne. Il ne définira que de l'espace au début de la première ligne et n'affecte pas les autres lignes du paragraphe ou du bloc. Il ne crée pas d'espace sur les autres lignes, sauf pour la première ligne. Dans ce didacticiel, nous utiliserons cette propriété «Text-Indent» et définirons les valeurs négatives et positives pour l'indentation.

Exemple n ° 1: Pour utiliser cette propriété «Text-Indent» dans CSS, nous devons avoir S

Ome Block of Data ou Paragraphes. Pour cela, nous devons d'abord au fichier HTML. Dans ce tutoriel, le logiciel que nous utilisons est le code Visual Studio. YoCreate u peut utiliser n'importe quel éditeur de texte ou bloc-notes pour cela. Lorsque nous utilisons ce logiciel, nous devons choisir la langue dans laquelle nous allons écrire le code. Ici, nous sélectionnons «HTML» comme langue.

Après cela, nous allons commencer à coder dans ce fichier. Nous avons également mis «!"Et puis en appuyant sur« Entrée », nous obtenons les balises de base du HTML dont nous avons besoin dans tous les codes HTML. Dans le corps, nous allons créer des classes «div» avec des noms différents. À l'intérieur de chaque div, nous avons créé un paragraphe en utilisant le «

" étiqueter. Nous créons trois divs avec des noms différents comme «A», «B» et «C». À l'intérieur de ces divs, nous avons un paragraphe. Donc, de cette façon, nous avons créé trois paragraphes ici. Nous utiliserons ces trois paragraphes dans tous les exemples de ce tutoriel. Maintenant, nous irons dans le fichier CSS où nous utilisons la propriété «Texte-Indent» et appliquerons l'indentation à tous ces paragraphes. Nous avons également lié le fichier CSS avec ce fichier HTML dans la balise «tête» du code HTML.

Nous utilisons le nom «div» «A», puis utilisons la propriété «Text-Indent». Ainsi, cela créera une indentation sur la première ligne du paragraphe div «A». La première ligne de ce paragraphe crée un espace au début de la ligne de paragraphe. Nous utilisons les valeurs dans «px» dans ce code. Nous définissons la valeur «80px» pour le premier paragraphe Div. Ainsi, il créera un espace libre «80px» à la première ligne et gérera le texte en conséquence. Ensuite, nous allons mettre en place le deuxième paragraphe Div et utiliser «B» avec le «div». Ensuite, nous allons utiliser la valeur négative dans la propriété «Text-Indent». Pour le deuxième paragraphe, nous appliquons l'indentation négative pour définir le texte sur le côté gauche.

Après cela, nous allons utiliser le dernier paragraphe et également appliquer la propriété «Texte-Indent» pour cela. Nous définissons «30px» pour le troisième paragraphe du div. Ainsi, le texte de la première ligne du paragraphe se déplace vers «30px» vers le côté droit et crée un espace «30px» au début de la première ligne. Après avoir terminé ce code, enregistrez-le avec le «.Extension de fichier CSS »et également avec le nom que nous avons utilisé dans la balise de liaison de" HTML ". Ensuite, vérifiez la sortie.

Dans cette capture d'écran, vous pouvez voir que le premier paragraphe crée un peu d'espace au début de la première ligne uniquement. Ici, il crée un espace «80px» car nous avons utilisé «80px» comme valeur de la propriété «Text-Indent». Maintenant, regardez le deuxième paragraphe, certains textes disparaissent de l'écran lorsqu'il se déplace vers le côté gauche à cause de la propriété «Text-Indent». Il attire ce paragraphe «-70px» et cela s'applique uniquement à la première ligne du paragraphe. Ensuite, vient le dernier paragraphe où nous utilisons la valeur «30px» de cette propriété. Dans ce paragraphe, il crée un espace de «30px» dans la première ligne.

Exemple n ° 2:

Nous définissons la «Font-Family» de la cap. Nous avons mis sa «couleur» à «marron». Ensuite, nous avons la tête 2. Pour cette rubrique, nous utilisons «Times New Roman» comme «Font-Family» et «violet» comme «couleur» de la police. Maintenant, nous allons utiliser la propriété «Text-Align» pour tous les divs séparément. Tout d'abord, nous avons le «div.A ”et nous définissons les valeurs de propriété« Text-Indent »dans« EM ». Ici, «10EM» est défini pour le premier paragraphe Div et pour la deuxième div, nous utilisons une valeur négative comme «-5em». Et pour la dernière div, nous avons défini la valeur «Text-Indent» sur «2EM».

La première ligne du premier paragraphe est en retrait du «10em» au côté droit, ce qui signifie qu'il crée un espace «10EM» dans la première ligne du premier paragraphe. Ensuite, il applique une valeur négative au deuxième paragraphe et déplace la première ligne du deuxième paragraphe vers le côté gauche. Donc, un texte n'apparaît pas ici. Et à la première ligne du troisième paragraphe, nous utilisons l'indentation textuelle «2EM», donc il crée un espace ou une indentation «2EM» dans la première ligne.

Exemple # 3:

Nous allons styliser le titre ici, avec le «Font-Family» réglé sur «Algérien» et nous aligner sur le «Centre». Sa couleur est ajustée ici en «orange». Ensuite, il y a le titre 2, qui est réglé sur «Calibri» comme «Font-Family» et «Green» comme «Couleur de la police."Maintenant, nous utilisons la propriété" Text-Align "pour chaque div individuellement. Premièrement, nous avons «Div.A », et nous utilisons le pourcentage«% »pour définir les valeurs de propriété« Text-Indent ». Pour le premier paragraphe Div, nous utilisons une valeur positive de «20%» et pour la deuxième div, nous utilisons une valeur négative de «-10%». La valeur «Texte-Indent» pour la div finale a été définie sur «40%»

La première ligne du premier paragraphe applique une indentation «20%» qui implique qu'elle produit une indentation «20%» dans la première ligne du premier paragraphe. Le deuxième paragraphe est ensuite donné une valeur négative et la ligne initiale du deuxième paragraphe est déplacée vers le côté gauche empêchant un texte d'apparaître. La première ligne du deuxième paragraphe se déplace «10%» vers la gauche. Nous utilisons également l'indentation de texte «40%» sur la première ligne du troisième paragraphe qui se traduit par un espace ou une indentation «10%» sur la première ligne.

Exemple n ° 4:

Réglez la famille de police sur «Algérien» et «Centre» dans cette rubrique. Sa couleur est changée en «rouge» dans ce cas. Ensuite, nous avons également la tête 2, qui a «calibri» comme «Font-Family» et «bleu» comme «couleur» de la rubrique. Maintenant, nous utilisons l'attribut «Text-Align» pour chaque div séparément. Tout d'abord, nous utilisons le «div. A », et nous définissons les valeurs de propriété« Text-Indent »avec le pixel sur« 50px ». Pour le deuxième paragraphe, nous définissons la valeur de «l'indéont textuel» dans «EM» et également négatif. Nous utilisons «-3em» pour le deuxième paragraphe Div. Pour le dernier paragraphe Div, nous avons fixé la valeur en «%». Nous définissons «30%» pour le dernier paragraphe. Dans ce code, nous utilisons «PX», «EM» et aussi «%».

Dans le premier paragraphe, nous utilisons «50px» dans la capture d'écran. Il ajuste l'indentation «50px». Dans le deuxième paragraphe, nous définissons la valeur négative dans «EM» qui est «-3em». La première ligne est retrouvée sur le côté gauche. Pour le dernier paragraphe, nous définissons la valeur en «%» qui est «30%» et vous pouvez voir qu'il indente la première ligne du troisième paragraphe du côté droit.

Conclusion:

Nous avons créé ce didacticiel pour élaborer «l'indéont textuel» dans CSS. Ici, nous avons discuté de ce qui est le texte et de la façon de définir l'indentation dans CSS, et quelle propriété de CSS que nous avons utilisée pour induire le texte. Comme nous l'avons discuté dans ce tutoriel, la propriété «Text-Indent» est utilisée pour appliquer l'indentation à notre texte et nous avons utilisé des valeurs négatives et positives ici dans nos exemples. Cette propriété a entendu la première ligne du paragraphe uniquement.