Attribut text-transform CSS
- Page précédente text-shadow
- Page suivante text-underline-offset
Définition et utilisation
La propriété text-transform contrôle la casse des lettres du texte.
Explication
Cette propriété change la casse des lettres des éléments, indépendamment de la casse des lettres du texte source. Si la valeur est capitalize, certaines lettres doivent être en majuscules, mais il n'y a pas de définition claire de la manière de déterminer quelles lettres doivent être en majuscules, cela dépend de la manière dont l'utilisateur agent les reconnaît.
Voir également :
Tutoriel CSS :Texte CSS
Manuel de référence HTML DOM :Propriété textTransform
Exemple
Convertir le texte dans différents éléments :
h1 {text-transform:uppercase;} h2 {text-transform:capitalize;} p {text-transform:lowercase;}
Astuces et commentaires
Remarque :Différents utilisateurs peuvent utiliser des méthodes différentes pour déterminer où commence un mot et déterminer quels caractères doivent être en majuscules. Par exemple, le texte "w3-school" peut être affiché de deux manières : "W3-school" et "W3-School". Le CSS ne stipule pas quelle est la bonne méthode, donc les deux sont acceptables.
Syntaxe CSS
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
Valeur de l'attribut
Valeur | Description |
---|---|
none | Par défaut. Définit un texte standard avec des lettres minuscules et majuscules. |
capitalize | Chaque mot dans le texte est écrit en majuscules. |
uppercase | Définit que seules les lettres majuscules sont présentes. |
lowercase | Définit qu'il n'y a pas de lettres majuscules, uniquement des lettres minuscules. |
inherit | Définit que la valeur de l'attribut text-transform doit être héritée de l'élément parent. |
Détails techniques
Valeur par défaut : | none |
---|---|
Héritabilité : | yes |
Version : | CSS1 |
Syntaxe JavaScript : | object.style.textTransform="uppercase" |
Plus d'exemples
- Contrôle de la casse des lettres dans le texte
- Ce exemple montre comment contrôler la casse des lettres dans un texte.
Prise en charge du navigateur
Les numéros dans le tableau indiquent la version du navigateur la première à prendre en charge cette propriété.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
- Page précédente text-shadow
- Page suivante text-underline-offset