首頁 > 文章 > web前端 > css3中text屬性有哪些

css3中text屬性有哪些

王林原創: 2020-11-23 11:53:034151瀏覽

css3中text屬性有：1、顏色屬性color；2、文字對齊屬性【text-align】；3、字元間距屬性【letter-spacing】；4.文字行高屬性【line-height 】；5、文字修飾屬性【text-decoration】。

css3中text屬性有哪些

本教學操作環境：windows10系統、css3版，此方法適用於所有品牌電腦。

（學習影片分享：css影片教學）

css3中text屬性有：

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

作用：規定添加到文字的修飾，底線、上劃線、刪除線等

說明：此屬性有以下三種簡寫 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>

css3中text屬性有哪些

相關文章