Une feuille de style en cascade (CSS) joue un rôle vital dans l'amélioration du contenu créé par HTML pour former une page Web. L'une des propriétés couramment utilisées et de base est d'ajouter un espace vierge ou une nouvelle ligne entre les deux, avant ou après le contenu HTML. En utilisant uniquement le HTML, le
est responsable de la création de pauses dans le contenu, mais le CSS a des moyens de coiffer l'effet sur les éléments du corps. Dans cet article, nous verrons comment, en utilisant CSS, nous pouvons ajouter une nouvelle ligne dans le code HTML.

Exemple 1:
Pour implémenter le phénomène d'une pause de ligne, nous utilisons un exemple simple pour développer le concept. Un programme simple démontre d'abord les textes HTML sans espacement, et à quoi il ressemble d'utiliser le texte dans le paragraphe ou une étiquette de span sans utiliser les espaces vides. Vient d'abord la section corporelle du HTML. Un en-tête

est ajouté à la section. Ensuite, en utilisant deux balises de portée, nous utilisons le texte simple. Une étiquette Span fonctionne comme le

étiquette de paragraphe. Fermez le corps HTML. Cette balise ne contient pas le CSS ou toute autre balise de contenu. Seules deux lignes sont déclarées pour obtenir la sortie souhaitée.

Enregistrez le code du fichier texte avec une extension HTML et exécutez-la dans le navigateur.

Vous verrez que les deux phrases sans pause de ligne sont affichées bien qu'elles soient écrites sur des lignes séparées. Mais cela n'a pas d'importance car chaque ligne de portée est affichée sur les mêmes lignes.

Exemple 2:
Il existe une propriété CSS qui est appliquée au contenu HTML pour y ajouter les pauses. C'est le caractère de retour du chariot (\ a). Il est subdivisé en deux éléments qui sont des pseudo-éléments «avant» et «:: After» qui sont mentionnés à l'intérieur des classes de CSS.

C'est l'effet qui est appliqué dans les deux éléments ou en utilisant l'un d'eux. Au début, nous allons utiliser un élément après le texte. Voyons voir comment ça fonctionne.

Dans la section Body, le même contenu est utilisé comme ruban, puis deux étiquettes de portée sont appliquées. Cette fois, un identifiant pour le CSS est mentionné à l'intérieur de la balise de portée. Cet identifiant applique tous les effets déclarés à l'intérieur de la partie tête du corps HTML. Maintenant, fermez le corps. Dans la section Head, utilisez les balises de style pour fabriquer le CSS interne. À l'intérieur des balises, utilisez l'ID qui est appliqué et suivez le type de retour de retour de la voiture «:: After». À l'intérieur de cette description d'ID, nous utilisons la propriété de contenu qui n'est que le caractère «\ a». Il ne provoque que une nouvelle ligne au texte existant. En utilisant cela, les deux phrases sont affichées sur des lignes séparées. Une autre propriété écrite dans la description est le «White Space». Cet espace blanc est toujours pris dans un pré-type.

# content1 :: après
Contenu: "\ a";
Espace blanc: pré;

Cet ID de style affecte le contenu de la portée de telle manière que deux phrases ne sont pas affichées sur la même ligne. L'élément «After» provoque une rupture d'une ligne entre deux phrases. Comme le déclare son nom, la pause est après la première ligne.

Enregistrez le code et exécutez-le dans le navigateur pour voir la page Web résultante créée.

Vous verrez que de cette manière, nous avons créé une nouvelle ligne en utilisant une propriété CSS.

Exemple 3:
Dans cet exemple, nous utiliserons les deux éléments du caractère de retour du chariot. Laissez la section du corps HTML être dans la façon dont elle était dans l'exemple précédent, mais avec un seul changement en ajoutant un ID de contenu2 à l'intérieur de la balise de la deuxième aire. Cela provoque des effets sur les deux étiquettes de portée. Il n'y a que des changements dans les balises de style de la section Tête. L'ID de contenu1 est le même ayant l'élément «après» à l'intérieur.

Mais l'ID de contenu2 a l'élément «avant» du personnage avec.

# content2 :: avant
Contenu: "\ a";
Espace blanc: pré;

Comme le montre la description du style, l'élément avant est appliqué à la deuxième période. Sur la première période, nous avons appliqué l'ID Conent1. En raison de l'ID de contenu1, l'espace est créé après la première période. Mais en raison de l'identifiant de contenu2 avec l'élément «avant», la deuxième portée a une nouvelle ligne avant la deuxième phrase. Cela est dû à l'élément «avant» déclaré dans l'ID de contenu2.

Lors de l'exécution, vous verrez qu'il y a un écart d'une ligne vierge entre deux phrases. L'effet «après» est appliqué par le premier ID Conten1, tandis que l'effet «avant» est appliqué par l'ID contenu2 collectivement.

Exemple 4:
Un autre exemple de nouvelle ligne CSS est déclaré ici qui implique l'utilisation d'une propriété CSS dans laquelle l'effet d'espace blanc reçoit une valeur de la pré-ligne. Cette valeur de pré-ligne crée un écart avant le contenu HTML auquel il est appliqué. Maintenant, considérons l'exemple suivant:

Dans la section corporelle du HTML, deux titres,

et

, sont donnés. Après ces titres, un paragraphe est déclaré avec chaque mot dans une ligne distincte.

Maintenant, dans la tête, après avoir donné le titre à la page, un CSS interne est appliqué pour avoir une balise de style. À l'intérieur de la balise de style, nous utilisons une balise de paragraphe pour appliquer la couleur de la police au texte avec la propriété de l'espace blanc.

P
Couleur orange;
Espace blanc: pré-ligne;

Ce code «pré-ligne» provoque une ligne vierge avant le début du paragraphe.

Lors de l'exécution, vous verrez que l'espace est créé avant le début du paragraphe.

Exemple 5:
Cet exemple est très différent des exemples précédents car nous utiliserons non seulement une nouvelle ligne vierge ici, mais ajouterons également le nouveau texte aux nouvelles lignes générées avant. Dans la section du corps, deux titres sont créés -

et

. Après cela, une balise de paragraphe est utilisée pour créer le texte à deux paragraphes.

À l'intérieur de la section Head, nous utilisons un paragraphe à des fins de style.

P :: avant
La couleur rouge;
Contenu: "Linuxhint \ a"
"Article sur la pause en ligne";
Bloc de visualisation;
Espace blanc: pré

Cet effet comprend la couleur de la police et le contenu que nous souhaitons ajouter à chaque paragraphe après l'ajout de la ligne vide. La propriété d'espace blanc reçoit une valeur «pré» pour ajouter un espace vide avant le paragraphe.

Enregistrez le code et exécutez le fichier. Vous verrez qu'avant chaque paragraphe, une ligne vierge est ajoutée et après cela, le contenu est ajouté après l'espace vide.

Conclusion

La nouvelle ligne CSS est une description de la création d'une nouvelle ligne en utilisant certaines fonctionnalités de CSS qui sont déclarées avec n'importe quelle fonctionnalité HTML. Grâce aux effets CSS, une nouvelle ligne peut être ajoutée avant, après, ou entre le contenu HTML. Nous avons mis en œuvre les différents exemples pour développer brièvement le concept. Au début, un exemple de paragraphe HTML sans espace est utilisé. Ensuite, en utilisant le même code, nous avons ajouté une propriété CSS du caractère. Un «caractère de retour en voiture» est utilisé pour ajouter de nouvelles lignes entre le contenu que nous déclarons dans le corps HTML. Ce personnage peut être ajouté directement ou avec le nouveau contenu à ajouter.