L'ajout d'un code CSS en majuscules vous fait gagner du temps et des efforts pour transformer manuellement les textes en minuscules en majuscules. Cela peut sembler compliqué et trop avancé, mais tout ce que vous avez à faire est d'utiliser la transformation de texte CSS. Voici tout ce que vous devez savoir sur les majuscules CSS et la transformation de texte.
Qu'est-ce que la transformation de texte CSS ?
Vous utiliserez la propriété CSS text-transform si vous avez du texte dans un élément HTML et que vous souhaitez le mettre en majuscule. Essentiellement, text-transform en CSS vous donne la possibilité de convertir n'importe quel texte en :
- Minuscule
- Haut de casse
- Cas de titre
Quelle est la syntaxe de Text-Transform ?
En règle générale, vous devrez définir l'objet HTML où vit le texte que vous souhaitez transformer. Vous taperez alors des accolades. À l'intérieur de ces accolades se trouve l'endroit où vous placerez la propriété text-transform.
Par exemple, si nous devions mettre le texte en majuscule dans un paragraphe HTML, la syntaxe serait :
p{text-transform: capitalize; }
Comme vous pouvez le voir, le style comporte deux parties séparées par un deux-points complet. Le côté gauche représente la propriété, tandis que la partie droite est la valeur. Il est également intéressant de noter que vous devez terminer la ligne de code par un point-virgule.
En tant que propriété, text-transform accepte les valeurs suivantes.
- Aucun : cette propriété garantit que votre texte ne se transforme pas en majuscules. Vous pouvez l'utiliser pour conserver la casse d'origine de votre texte.
- Minuscule : transforme tous les caractères du texte en minuscules.
- Capitaliser : cette valeur transforme la première lettre de chaque mot de la sélection de texte ou des objets en majuscule.
- Majuscules : tous les caractères du texte seront en majuscules. Cela peut être particulièrement utile pour écrire des titres accrocheurs.
Utilisations de la propriété Text-Transform
- Text-transform vous permet de transformer dynamiquement du texte via la sélection d'objets HTML.
- Permet de mettre facilement les noms propres en majuscules. En utilisant text-transform, les noms d'utilisateur seront affichés comme un nom propre.
- Pour les articles de blog et les en-têtes. L'ajout de majuscules dans la transformation de texte peut garantir que les titres des articles de blog sont en casse de titre.
- Empêcher le changement de texte. Vous pouvez également passer la valeur none à la propriété text-transform pour empêcher la manipulation de votre texte.
- La ponctuation dans les phrases et les paragraphes, comme dans les articles de blog des sites d'actualités.
En savoir plus sur les valeurs de transformation de texte
En CSS, la syntaxe nécessite une propriété suivie d'une valeur. Vous devrez modifier la propriété et la valeur.
Par exemple, dans notre exemple de capitalisation, vous voyez que la propriété que nous devons modifier est la transformation de texte. En ce qui concerne cette propriété, nous indiquons que nous voulons que la transformation soit capitalisée. Pour comprendre cela, jetez un œil au code suivant.
p{text-transform: none; }
Essentiellement, les propriétés sont les caractéristiques accessibles de l'objet HTML que vous pouvez manipuler. Dans notre exemple, l'objet est p ou paragraphe. Puisque notre programme contient hypothétiquement du texte, nous voulons que ce texte reste intact reste inchangé en termes de transformation de texte.
Par conséquent, pour communiquer cela via le code, nous utilisons text-transform: none; Lorsque vous comparez le code de notre premier article, vous remarquerez que nous avons seulement remplacé capitalize par none.
Pour comprendre toutes les valeurs de transformation de texte, nous les diviserons en deux catégories générales : Mot-clé et Valeurs globales. Les valeurs globales incluent inherit, initial, revert et unset.
Valeurs des mots clés
Les valeurs des mots-clés de transformation de texte CSS incluent :
| Valeurs des mots clés | Explication | Remarques |
| Capitaliser | En règle générale, cette valeur convertit le premier caractère de chaque mot en majuscule. Les autres lettres ou caractères restent intacts et inchangés. | La capitalisation CSS n'affecte aucun signe de ponctuation. Ils sont ignorés et la première lettre est en majuscule. |
| Majuscule | Tous les caractères ou lettres d'une sélection particulière ou d'un objet HTML sont convertis en majuscules avec cette valeur de mot-clé. | Cependant, les marques et les signes de ponctuation restent inchangés et intacts. |
| Minuscule | Cette valeur de mot-clé est l'opposé de la majuscule du texte en CSS. | Convertit le texte sélectionné en minuscules, à l'exception des chiffres et des signes de ponctuation. |
| Aucun | Cette valeur empêche la casse des lettres d'être manipulée à la place d'autres valeurs de mots-clés. | Si vous définissez votre text-transform sur none, le cas reste intact malgré les modifications injectées. |
| Pleine largeur | Lorsque vous utilisez ce mot-clé comme valeur pour votre transformation de texte, l'écriture des caractères est forcée à l'intérieur d'un carré. Par conséquent, les caractères sont alignés. | Ce mot-clé est principalement utilisé dans les écritures latines et les idéogrammes. Un bon exemple est l'utilisation de cette valeur dans les scripts chinois et japonais. |
| Kana pleine grandeur | Cette valeur est essentielle pour compenser les problèmes de lisibilité rencontrés principalement sur ruby. | Il convertit les caractères kana de petite taille en caractères de taille normale. |
Exemple de CSS majuscule
<!DOCTYPE html><html><head><style>div.a { text-transform: uppercase;}</style></head><body><h1>CSS Upppercase</h1><h2>text-transform: uppercase;</h2><div class="a">Vestibulum sed felis ut erat facilisis vestibulum id non libero.</div></body></html>
Dans ce code simple, nous avons attribué une classe div à une phrase Lorem Ipsum. Notez que le code CSS inclut les phrases div identification au lieu de p. Il est ensuite suivi de la transformation de texte : majuscule ;.
Si vous convertissez cet exemple de code à l'aide d'un éditeur de texte CSS en ligne, le texte deviendra VESTIBULUM SED FELIS UT ERAT FACILISIS VESTIBULUM ID NON LIBERO.
Résumé CSS en majuscules
En un mot, text-transform vous offre la possibilité de changer la casse du texte sur votre page Web. Vous pouvez obtenir un CSS tout en majuscules en utilisant le mot-clé capitalize. De plus, text-transform capitalize convertit toutes les premières lettres de tous les mots en majuscules. Les autres valeurs que vous pouvez utiliser avec text-transform incluent none, lowercase, full-width et full-size-kana.
Ce message a été relu par Grammarly . Essayez-le – c'est GRATUIT !
Capitalize My Title est un outil de capitalisation de titre dynamique utilisé pour s'assurer que vos titres ou titres utilisent des règles de capitalisation appropriées selon divers guides de style, notamment APA, AP, MLA et Chicago. Il compte également vos mots et vérifie les problèmes de grammaire.
Comment créer une police majuscule en CSS
Pour faire en sorte qu'un bloc de texte soit entièrement en majuscules, utilisez text-transform: uppercase dans votre sélecteur CSS : text-transform: uppercase; La propriété text-transform accepte trois valeurs possibles : majuscule : définit chaque mot en majuscule dans un élément de texte.
Comment capitaliser les majuscules en CSS
Vous pouvez contrôler la façon dont le texte est mis en majuscule à l'aide des propriétés CSS.
La propriété CSS text-transform
- minuscule : met toutes les lettres du texte sélectionné en minuscules.
- majuscule : met toutes les lettres du texte sélectionné en majuscules ou TOUTES EN MAJUSCULES.
- capitaliser : met en majuscule la première lettre de chaque mot du texte sélectionné.
Plus d'articles…•
Qu'est-ce qu'une majuscule en CSS
p> <p class='capitalize'>Ce texte comprend un acronyme : CSS.</ p> .lowercase {text-transform : minuscule ; } .uppercase { text-transform : majuscule ; } .capitalize { text-transform : capitaliser ; } h { marge : 2,5 em 0 ; }
Le test peut-il être capitalisé en utilisant CSS
La propriété text-transform contrôle la capitalisation du texte.
Définition et utilisation.
| Valeur par défaut: | rien |
|---|---|
| Syntaxe JavaScript : | object.style.textTransform='majuscule' Essayez-le |