Comment changer la casse du texte dans un paragraphe en utilisant CSS ?-tutoriel CSS-php.cn

Comment changer la casse du texte dans un paragraphe en utilisant CSS ?

王林

Libérer： 2023-08-26 21:01:04

avant

687 Les gens l'ont consulté

如何使用 CSS 更改段落中文本的大小写？

CSS (Cascading Style Sheets) est un outil puissant pour contrôler la mise en page et l'apparence du texte sur votre site Web. Dans cet article, nous apprendrons comment modifier la casse du texte dans un paragraphe en utilisant CSS.

Lorsqu'il s'agit de styliser du texte sur un site Web, l'une des options de style de base et courantes consiste à modifier la casse du texte, nous pouvons facilement le faire en utilisant la propriété text-transform en CSS. L'attribut text-transform peut prendre l'une des valeurs suivantes -

"Capital" mettra en majuscule la première lettre de chaque mot de l'élément sélectionné.
"Capital" convertira tout le texte de l'élément sélectionné en lettres majuscules.
"minuscule" convertira tout le texte de l'élément sélectionné en lettres minuscules.

Pour changer la casse du texte dans un paragraphe, nous devons d'abord sélectionner l'élément de paragraphe à l'aide d'un sélecteur CSS. Par exemple, pour changer la casse du texte d'un paragraphe en majuscule, nous utiliserions le CSS suivant -

p {
   text-transform: uppercase;
}

Copier après la connexion

Exemple

Voici un exemple d'utilisation de CSS pour modifier la casse du texte dans un paragraphe.

<html>
<head>
   <title>Change the cases of text in paragraphs using CSS</title>
   <style>
      body{
         text-align:center;
      }
      .capitalize{
         color: blue;
         text-transform: capitalize;
      }
      .uppercase{
         color: red;
         text-transform: uppercase;
      }
      .lowercase{
         color: green;
         text-transform: lowercase;
      }
   </style>
</head>
<body>
   <h2>Change the cases of text in paragraphs using CSS</h2>
   <p class="capitalize">capitalize the first letter of each word in the selected element</p>
   <p class="uppercase">Converted all the text in the selected element to uppercase letters</p>
   <p class="lowercase">CONVERTED ALL THE TEXT IN SELECTES ELEMENT TO LOWERCASE LETTERS</p>
</body>
</html>

Copier après la connexion

Conclusion

Pour changer la casse du texte dans un paragraphe, la propriété text-transform en CSS est un excellent moyen de changer la casse du texte dans un paragraphe.

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!