Css pré-balise

Tout en travaillant dans le script HTML pour créer une page dynamique statique simple, nous pouvons rencontrer de nombreux paragraphes ou données texte avec des espaces et des pauses de ligne. Certaines étiquettes empêchent l'utilisation des espaces blancs supplémentaires et des pauses automatiques de ligne et prennent le contenu entier comme un. Bien qu'il soit possible que le contenu soit séparé par des lignes en raison d'une raison de créer des pages plus attrayantes. Pour empêcher les étiquettes HTML pour éliminer les espaces blancs et les pauses de ligne, nous avons la balise «PRE» qui peut être utilisée de nombreuses manières pour atteindre cet objectif. Dans cet article, nous discuterons de toutes ces façons possibles d'utiliser la balise «PRE» à des fins particulières.

Exemple 01:

Commençons par le premier exemple de notre article. Nous devons démarrer cet exemple de code HTML avec l'utilisation de la balise de base «HTML». La balise de tête continue avec l'utilisation d'une balise de titre, i.e. «CSS pré». Pour comprendre pleinement le script HTML, nous devons d'abord examiner la section corporelle de notre page Web. Le cap de la taille 1 est initialisé dans le corps. Après cela, un élément «div» est retiré pour créer une nouvelle section et y ajouter d'autres éléments. Cette section Div contient une rubrique de la taille 2. Après la rubrique, une étiquette de portée est utilisée pour créer une nouvelle portée dans la section «div». Cette portée contient de longues données de texte.

Après toutes ces phrases, l'étiquette de span est suivie de près par la fermeture de la balise «div». Le corps de notre page HTML est terminé. Après cela, nous devons jeter un œil au style CSS de ce code HTML dans la balise de style. L'élément de portée est utilisé pour le styliser en conséquence. L'attribut «blanc-espace» est utilisé avec la valeur «pré». L'attribut de valeur «pré» est utilisé ici pour préserver tous les espaces et les ruptures de ligne que l'élément «Span» contient. Après cela, la famille des polices est définie sur Monospace, et la propriété d'affichage attribue la valeur «bloc». La taille de la police est définie à 20 pixels avec la couleur marron. Alors que la couleur d'arrière-plan est réglée sur «Bisque». Il existe d'autres familles de polices utilisées dans le style à utiliser par cette période. L'étiquette de tête est complète et nous pouvons exécuter notre code avec le code vs.

La sortie de cette page HTML dans le navigateur Chrome est donnée dans l'image suivante. Vous pouvez voir que la page a créé une nouvelle section et ajouté un élément de portée. L'élément de portée contient certaines lignes en tant que contenu tandis que la ligne se casse et que les espaces sont tous conservés en raison de l'utilisation de l'attribut «pré» comme valeur pour la propriété «espace blanc» de CSS.

Exemple 02:

Dans l'exemple précédent, nous avons examiné l'utilisation de l'attribut «pré» comme valeur de la propriété de l'espace blanc. Maintenant, nous l'utilisons comme une balise dans le fichier html. Nous commençons cet exemple avec le même format HTML, tête et étiquette corporelle. Dans l'étiquette corporelle de cet exemple de code, nous utilisons le titre simple de la taille 1 suivi de la balise «PRE» contenant un très grand contenu texte. Ce contenu contient des ruptures de ligne et des espaces entre les mots.

Après cela, nous utilisons un autre titre de la taille 1 pour indiquer que la pré-élément contient la largeur et la hauteur fixe. L'élément «Div» est utilisé ici pour créer une nouvelle section après le titre. La balise de style est utilisée dans la balise d'ouverture «div» pour styliser la section «div» à une largeur de 300 pixels, un débordement sur l'auto, une hauteur de 200 pixels et une couleur d'arrière-plan en vert clair. Cette section «div» contient une balise «pré» pour afficher un ensemble de lignes d'une manière très différente au lieu d'utiliser certaines lignes de texte comme contenu. Ce contenu de balise «pré» est affiché dans l'image suivante. La tag pré-tag et la balise «div» sont fermées ici.

Après cela, nous fermons les balises «corps» et «html» car ce code ne contient pas plus de style que les bases que nous avons déjà fournies en ligne. Ce code est prêt à être exécuté dans le code Visual Studio à l'aide de l'option «Exécuter».

La sortie de ce code HTML est illustrée ci-dessous dans l'image suivante. Il montre clairement l'utilisation du pré-étiquette standard sur les lignes simples de textes contenant les espaces. Les pauses affichent le texte du contenu tel qu'il est sans un seul changement de caractère. De plus, l'utilisation de la largeur et de la hauteur fixe de la section «div» n'empêche pas la balise «pré» d'afficher ses données telles qu'elle est. Après l'en-tête 2, l'arrière-plan vert avec Scrollbar montre les mêmes données de style qui sont spécifiées avec la balise «PRE».

Exemple 03:

Ayons notre dernier exemple de cet article contenant un pré-tag dedans. Le code HTML commence par le même format - tag html et la balise de tête suivant la balise «Title» pour donner à une page HTML un nouveau nom. Ensuite, l'utilisation d'une étiquette corporelle pour ajouter des éléments à afficher sur l'écran du navigateur. Après avoir utilisé l'étiquette de tête, nous utilisons le cap de la taille 1 dans le corps d'une page HTML. La balise de figure est utilisée avant l'utilisation de la balise «pré». Le pré-tag est stylé avec l'arrière-plan marron, la couleur du texte blanc, une largeur de 600 pixels, un rembourrage de 10 pixels et une taille de police de 16 pixels via le style en ligne.

Nous ajoutons le signe moins que plus que la page HTML en utilisant les caractères de mots clés comme LT, GT et la forme d'une vache créée par certains caractères spéciaux avec certains textes. Le pré-tag est maintenant terminé et nous avons initialisé la balise «Figcaption» pour légendre la forme que nous avons formée dans le pré-tag. L'ID pour la balise FigCaption est spécifié comme «caption de vache» et il contient 2 lignes de données avec certains espaces et des pauses de ligne. La balise de figure, la balise corporelle et les balises HTML sont fermées après cela. Nous utilisons ce code dans le code vs pour l'exécuter.

La sortie montre que l'en-tête est séparé de la section «div» distincte. Cette section Div contient une forme de vache avec un fond brun et la légende donnée à la fin de cette figure en forme d'image. Les espaces sont retirés de la légende.

Conclusion

Cet article concerne l'utilisation des étiquettes pré-les étiquettes dans le code HTML de plusieurs manières pour permettre aux ruptures de ligne et aux espaces pour quelque raison que ce soit. Nous avons essayé quelques exemples pour démontrer son utilisation dans la manière la plus simple et la meilleure façon possible. Nous avons essayé d'utiliser le mot-clé «pré» comme valeur d'attribut de la propriété d'espace blanc dans l'un de nos exemples. Dans le reste des exemples, nous l'avons essayé comme une balise distincte pour démontrer qu'il fonctionne plus clairement et efficacement.