Lors de la rédaction d'un article ou d'un document, nous avons souvent besoin de certains caractères pour être dans des cas spécifiques. Sur une page web, l'élément HTML dont le texte demande à être transformé est appliqué avec la propriété CSS ' transformation de texte ”. Cette propriété permet également de gagner du temps de telle manière qu'après avoir ajouté tous les caractères, leur casse peut être transformée en une seule fois.

Cet article vous apprendra comment modifier la casse du texte avec CSS. Alors, commençons !

Comment mettre du texte en majuscules et minuscules à l'aide de CSS ?

En CSS, le ' transformation de texte ” propriété contrôle la capitalisation du texte. Il est également utilisé pour convertir du texte en majuscules ou en minuscules.

Valeurs de propriété text-transform

Les valeurs possibles de la propriété CSS text-transform sont répertoriées ci-dessous :

• • ' majuscule ” : cette valeur met en majuscule tous les caractères du texte de l'élément.
  • ' minuscule ” : Cette valeur change le texte de l'élément en minuscules.
  • ' capitaliser ” : Cette valeur modifie la première lettre de chaque mot en majuscule.
  • ' rien ” : Cette valeur restreint le texte de l'élément pour modification.
  • ' initial ” : cette valeur définit la valeur par défaut.
  • ' tu hérites ” : cette valeur définit sa valeur à partir de son élément parent.

Analysez l'exemple ci-dessous !

Exemple : Transformer du texte en majuscules et minuscules

Tout d'abord, ajoutez un élément div avec le nom de classe ' boîte ”. À l'intérieur du corps, ajoutez trois balises d'en-tête

,

et

, où le texte de l'en-tête

est entièrement en majuscules,

est en minuscules et la troisième est également en minuscules.

Ci-dessous le code HTML :

< div classe = 'boîte' >
< h1 > minuscules : BIENVENUE DANS LINUXHINT h1 >
< h2 > majuscule : bienvenue dans linuxhint h2 >
< h3 > majuscule : bienvenue dans linuxhint h3 >
div >

Boîte de style div

.boîte {
hauteur : 200px ;
largeur: 80 % ;
bordure : 4px solide #e4cfcf;
couleur de fond : bleu cadet ;
marge : 1px automatique ;
rembourrage : 10px ;
}

Le div créé dans le fichier HTML ci-dessus est maintenant stylé avec les propriétés CSS qui sont expliquées ci-dessous :

• • ' la taille ” est utilisé pour définir la hauteur de la div.
  • ' largeur ” est utilisé pour définir la largeur de la div.
  • ' frontière ” La propriété est utilisée pour appliquer la bordure autour de l'élément, qui a une largeur de 4 pixels, un type de ligne continue et une couleur #e4cfcf.
  • ' Couleur de l'arrière plan ” spécifie la couleur d'arrière-plan de l'élément.
  • ' marge ” La propriété ajuste l'espace de chaque côté de l'élément.
  • ' rembourrage ” est utilisée pour produire de l'espace autour du contenu de l'élément div ou à l'intérieur de la bordure de l'élément.

Les blocs de code ci-dessous indiquent que tous les éléments d'en-tête sont stylisés avec différentes valeurs des propriétés de transformation de texte. L'élément

est appliqué avec la propriété text-transform avec la valeur définie comme ' minuscule ” :

h1 {
transformation de texte : minuscule ;
}

L'élément

est appliqué avec la propriété text-transform avec la valeur définie comme ' majuscule ” :

h2 {
transformation de texte : majuscule ;
}

Pour l'élément

, la valeur de la propriété text-transform est définie sur ' capitaliser ” :

h3 {
transformation de texte : capitaliser ;
}

En fournissant le code mentionné ci-dessus, le texte du premier titre est entièrement transformé en lettres minuscules et le deuxième titre en majuscules. Alors que la première lettre de chaque mot est en majuscule dans le troisième titre :

Super! Nous avons appris avec succès à transformer le texte en majuscules, minuscules et tout en majuscules.

Conclusion

La propriété text-transform de CSS contrôle la capitalisation du texte et est utilisée pour modifier la casse du texte du document. Cette propriété s'applique à tous les éléments, où les valeurs de cette propriété peuvent être en majuscules, en minuscules, en majuscules ou aucune. Ce blog a expliqué la procédure de conversion de texte en majuscules et minuscules à l'aide de la propriété CSS text-transform.