Maison > Article > interface Web > Comment changer la casse du texte dans un paragraphe en utilisant CSS ?
Comment changer la casse du texte dans un paragraphe en utilisant CSS ?
- 王林avant
- 2023-08-26 21:01:04699parcourir
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;
}
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>
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!