コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

CSS の text-transform 属性を使用した文字列変換のコード

不言
リリース： 2018-08-06 16:58:08
オリジナル
2970 人が閲覧しました

この記事の内容は、CSS の text-transform 属性を使用した文字列変換に関するコードです。必要な方は参考にしていただければ幸いです。 

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>字符转换</title>
    <style>
        p.none {            
        text-transform: none;        
        <!-- 正常 -->
        }

        p.uppercase {
            text-transform: uppercase;        
            <!-- 转大写 -->
        }

        p.lowercase {
            text-transform: lowercase;        
            <!-- 转小写 -->
        }

        p.capitalize {
            text-transform: capitalize;        
            <!-- 只对首字母大写 -->
        }    
        </style>
        </head>
        <body>
        <p class="none">This is a some Text.This is a some Text.</p>
        <p class="uppercase">This is a some Text.</p>
        <p class="lowercase">This is a some Text.</p>
        <p class="capitalize">This is a some Text.</p>
        </body>
        </html>
ログイン後にコピー

おすすめ関連記事:

CSSでテーブルを使う2つの方法(例)

複数列レイアウトの概念とは？ CSSマルチカラムレイアウトの応用（サンプルコード）

以上がCSS の text-transform 属性を使用した文字列変換のコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
text-transform属性
ソース：php.cn
前の記事：CSS でテーブルを使用する 2 つの方法 (例) 次の記事：表示用のコード: 要素の垂直方向の中央揃えを実装する CSS の flex 属性
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
JSON ネスト配列プロパティ「project_id」と「project_name」を変更する方法 问题：[{"project_id":1,"project_name":"CDP","role":&q...
から 2024-04-06 15:39:51
0
1
466
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート