css3のテキスト属性とは何ですか？-CSSチュートリアル-php.cn

css3のテキスト属性とは何ですか？

王林

リリース： 2020-11-30 10:52:30

オリジナル

4269 人が閲覧しました

css3 のテキスト属性には、1. カラー属性、2. テキスト配置属性 [text-align]、3. 文字間隔属性 [letter-spacing]、4. テキスト行の高さ属性 [line-height] が含まれます。 ] ]; 5. テキスト変更属性 [text-decoration]。

css3のテキスト属性とは何ですか？

このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

(学習ビデオ共有: css ビデオチュートリアル)

css3 のテキスト属性は次のとおりです:

1、color

機能: テキストの色を指定します

#説明: この属性は、ブロック、インライン、およびインラインブロックスタイルシートで使用して、制御要素内のすべてのテキストの色を変更できます

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3之text属性</title>
    
    <style type="text/css">
        #coDiv {
            color: #00c6ff;
        }
        #coP {
            color: #2b542c;
        }
        #coSpan {
            color: palevioletred;
        }
        #coStrong {
            color: blueviolet;
        }
        #colIn {
            color: deeppink;
        }
    </style>
</head>
<body>
    <div id="coDiv">
        <p id="coP">
            我是一名前端爱好者1
        </p>
        我是一名前端爱好者2
    </div>

    <span id="coSpan">
        我是一名前端爱好者3
        <strong id="coStrong">我是一名前端爱好者4</strong>
    </span>

    <input type="text" id="colIn" />
</body>
</html>

ログイン後にコピー

2、text-align

機能: 要素テキストの水平方向の配置を指定します

説明: ブロックレベルの要素で使用される場合にのみ有効です。直接使用すると、リンクされた要素には影響しません。この属性を使用すると、ブロック要素に含まれるテキスト要素とインライン要素が整列されます。この属性がデフォルトで設定されていない場合は、子ブロック要素が text-align 属性を継承するため、その中のブロック要素も整列されます。親ブロック要素。

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>CSS3之font属性</title>
    
    <style type="text/css">
        div {
           border: 1px solid;
           width: 1200px;
           height: 150px;
        }
       
        #showdiv1 {
           text-align: left;
        }
        
        #showdiv2 {
            text-align: center;
        }
        
        #showdiv3 {
            text-align: right;
        }

        #showdiv4 {
           text-align: justify;
        }
    </style>
</head>
<body>
    <div id="showdiv1">
        大家好
    </div>

    <div id="showdiv2">
        大家好
    </div>

    <div id="showdiv3">
        大家好
    </div>

    <div id="showdiv4">
        In a sense we&#39;ve come to our nation&#39;s capital to cash a check. When the architects of our republic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked "insufficient funds."
    </div>
</body>
</html>

ログイン後にコピー

3、letter-spacing:

関数: 文字間のスペース (文字間隔) を増減します

手順 : 負の値が大きすぎる場合、フォントは押し出されますが重なりません。

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3之text属性</title>
    
    <style type="text/css">
        #lsSpan1 {
            letter-spacing: normal;
        }

        #lsSpan2 {
            letter-spacing: 10px;
        }

        #lsSpan3 {
            letter-spacing: -4px;
        }
    </style>
</head>
<body>
    <span id="lsSpan1">Hello World</span><br>
    <span id="lsSpan2">Hello World</span><br>
    <span id="lsSpan3">Hello World</span><br>
</body>
</html>

ログイン後にコピー

4、line-height:

関数: テキストの行の高さの設定

説明: 負の値は許可されません

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3之text属性</title>
    
    <style type="text/css">
        #lsSpan1 {
            line-height: 16px;
            border: 1px solid;
        }

        #lsSpan2 {
            line-height: 2em;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <p id="lsSpan1">Hello World</p><br>
    <p id="lsSpan2">Hello World</p><br>
</body>
</html>

ログイン後にコピー

5, text-decoration

機能: テキストを変更するために、下線、上線、取り消し線などを追加することを指定します。

説明: この属性には、次の 3 つの略語があります: text-decoration-line、text-decoration-color、 text-decoration-style

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3之text属性</title>
    
    <style type="text/css">
        #lsSpan1 {
            text-decoration: none;
            text-decoration-line: overline;
        }

        #lsSpan2 {
            text-decoration: underline;
            text-decoration-color: pink;
        }
        
        #lsSpan3 {
            text-decoration: overline;
            text-decoration-style: wavy;
        }
        
        #lsSpan4 {
            text-decoration: line-through;
        }

        #lsSpan5 {
            text-decoration: overline wavy palevioletred;
        }
    </style>
</head>
<body>
    <a id="lsSpan1">这是超链接</a><br>
    <p id="lsSpan2">Hello World</p><br>
    <p id="lsSpan3">Hello World</p><br>
    <p id="lsSpan4">Hello World</p><br>
    <p id="lsSpan5">Hello World</p><br>
</body>
</html>

ログイン後にコピー