css3中text屬性的使用示例-創新互聯

這篇文章給大家分享的是有關css3中text屬性的使用示例的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

創新互聯是一家專注于成都網站設計、成都做網站與策劃設計,廣水網站建設哪家好?創新互聯做網站,專注于網站建設10年,網設計領域的專業建站公司;建站業務涵蓋:廣水等地區。廣水做網站價格咨詢:028-86922220

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

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've come to our nation'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屬性的使用示例就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

文章標題：css3中text屬性的使用示例-創新互聯
網站路徑：http://www.js-pz168.com/article4/jjdie.html

成都網站建設公司_創新互聯，為您提供企業網站制作、商城網站、品牌網站建設、標簽優化、網站內鏈、網站策劃

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

久久99久久人婷婷精品综合_超碰aⅴ人人做人人爽欧美_亚洲电影第三页_日韩欧美一中文字暮专区_波多野结衣的一区二区三区_婷婷在线播放_人人视频精品_国产精品日韩精品欧美精品_亚洲免费黄色_欧美性猛交xxxxxxxx

css3中text屬性的使用示例-創新互聯