Comment convertir les minuscules anglaises en majuscules en CSS

青灯夜游
Libérer: 2022-04-25 18:35:47
original
3798 Les gens l'ont consulté

Méthode de conversion : 1. Ajoutez le style "text-transform: uppercase;" à l'élément anglais pour transformer toutes les lettres anglaises en majuscules. 2. Ajoutez le style "text-transform:capitalize;" à l'élément anglais pour modifier le style. la première lettre de chaque mot du texte anglais est en majuscule.

Comment convertir les minuscules anglaises en majuscules en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

css pour convertir les minuscules anglaises en majuscules

En CSS, vous pouvez utiliser l'attribut text-transform pour convertir les lettres anglaises minuscules (texte) en majuscules.

Il existe deux situations :

  • Toutes les lettres anglaises deviennent majuscules : utilisez le style "text-transform: uppercase;"text-transform: uppercase;”样式

  • 英文文本中每个单词的首字母变为大写:使用“text-transform: capitalize;

Le premier mot de chaque mot dans le texte anglais Lettres devenir majuscule : utilisez le style "text-transform: capitalize;"

Comment convertir les minuscules anglaises en majuscules en CSS Exemple d'implémentation :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            font-variant: small-caps;
            /*把段落设置为:小型大写字母字体(即文字的大小不变,只不过文字都变成了大小字母)*/
        }
        span[first] {
 
            text-transform: capitalize /*使每个单词的首字母变为大写。*/
                /* capitalize可以使每个单词的首字母变为大写 */
                /* uppercase 定义仅有大写字母 */
                /* lowercase 定义无大写字母,仅有小写字母 */
                /* inherit 规定应该从父元素继承 text-transform 属性的值。 */
        }
        span[second] {
            text-transform: uppercase /*把所有的字母都变成大写。*/
                /* capitalize可以使每个单词的首字母变为大写 */
                /* uppercase 定义仅有大写字母 */
                /* lowercase 定义无大写字母,仅有小写字母 */
                /* inherit 规定应该从父元素继承 text-transform 属性的值。 */
        }
    </style>
</head>
 
<body>
    <p>hello</p>
    <span first>heloodj sdKUv dIfvh</span>
    <hr>
    <span second>heloodj sDFuv difvh</span>
</body>
 
</html>
Copier après la connexion

Description : attribut text-transform

contrôle d'attribut text-transform Le cas du texte anglais. Valeurs d'attribut réglables : valeur description aucunPar défaut. Texte qui définit les normes avec des lettres minuscules et majuscules. capitalizeChaque mot du texte commence par une lettre majuscule. majusculesLes définitions sont uniquement des lettres majuscules. minusculesne définit aucune lettre majuscule, seulement des lettres minuscules.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS

, 🎜front-end web🎜)🎜

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal