Comment afficher les éléments de paragraphe en ligne en utilisant CSS ?-tutoriel CSS-php.cn

Comment afficher les éléments de paragraphe en ligne en utilisant CSS ?

WBOY

Libérer： 2023-09-06 16:41:04

avant

1312 Les gens l'ont consulté

如何使用 CSS 将段落元素显示为内联？

CSS possède des styles internes et des styles en ligne qui peuvent être utilisés pour afficher des éléments de paragraphe en ligne. CSS est un langage utilisé pour styliser le texte HTML et XML. La modification des propriétés d'affichage des éléments HTML est une tâche CSS typique. Les propriétés d'affichage d'un élément indiquent comment il doit être rendu, comme block, inline ou inline-block. Lors de l'affichage d'un élément de paragraphe en ligne, vous devez modifier la propriété d'affichage de sa valeur de bloc par défaut à en ligne.

Ici, nous allons apprendre à développer du code CSS qui affiche les éléments de paragraphe en ligne.

Grammaire

<p style="display : inline">..write the paragraph...</p>

Copier après la connexion

Les paragraphes en HTML sont représentés par des balises p. Les propriétés d'affichage définissent la façon dont le contenu circule.

Un élément configuré pour afficher « en ligne » apparaîtra sous la forme d'une boîte en ligne, ce qui signifie qu'il s'écoulera dans une ligne de texte.

En revanche, un élément « block » remplira toute la largeur de son conteneur parent et ajoutera une nouvelle ligne de contenu en dessous de tout contenu existant.

Les titres, les paragraphes et les éléments div sont des exemples d'éléments de niveau bloc, tandis que les liens, les éléments span et les images sont des exemples d'éléments en ligne.

Attributs utilisés

Les propriétés suivantes utilisées dans l'exemple sont -

Color - Définissez la couleur du texte.
background-color - Définissez le texte comme étant fin ou épais.
display - L'attribut display spécifie le comportement d'affichage.

Exemple

Dans cet exemple, nous commencerons à utiliser l'élément paragraphe pour configurer quelques lignes de texte. Pour afficher un élément de paragraphe en ligne, il utilise la propriété display pour définir la valeur en ligne via CSS en ligne. Stylisez ensuite certains éléments, tels que le corps, p, pour attirer l'interaction de l'utilisateur sur la page Web.

<!DOCTYPE html>
<html>
<title>Display paragraph elements as inline using CSS</title>
<head>
</head>
<body style="background-color: powderblue;">
   <center>
      <h1>Rich Dad and Poor Dad</h1>
   </center>
   <p style="background-color:#a89032; color: white; font-style: italic; display: inline;">Rich
      Dad Poor Dad, by Robert Kiyosaki, was initially published in 1997 and immediately became a must-read
      for anybody interested in investment, money, or the global economy. The book has been translated into
      dozens of languages and sold all over the world, becoming the best-selling personal finance book of all
      time. Rich Dad Poor Dad's overriding theme is how to use money as a tool for wealth growth. It debunks
      the idea that the wealthy are born wealthy, explains why your personal residence may not be an asset,
      defines the distinction between an asset and a liability, and much more.
   </p>
   <p style="font-weight: bold; text-align: right; display: inline; color: darkgreen;">@tutorialspoint.com</p>
</body>
</html>

Copier après la connexion

Conclusion

Dans le résultat ci-dessus, nous pouvons voir comment contrôler la disposition des styles de texte à l'aide de valeurs en ligne dans les propriétés d'affichage CSS. C'est une bonne idée de tester des variantes d'affichage des éléments de paragraphe en tant qu'éléments en ligne. Pour conserver la flexibilité du placement du texte, il est parfois approprié de modifier les propriétés affichées.

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!