css3中text屬性的使用示例-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站與策劃設(shè)計(jì),廣水網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:廣水等地區(qū)。廣水做網(wǎng)站價(jià)格咨詢:028-86922220

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

1、color

作用：指定文本的顏色

說明：該屬性在塊、行內(nèi)、行內(nèi)塊的樣式表中都可以使用，改變被控制元素內(nèi)部所有文本的顏色

示例：

<!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

作用：指定元素文本的水平對(duì)齊方式

說明：只在塊級(jí)元素中使用生效，直接用在內(nèi)聯(lián)元素上不生效。如果使用該屬性，在塊元素中包含的文本、內(nèi)聯(lián)元素將會(huì)對(duì)齊，其內(nèi)的塊元素默認(rèn)不設(shè)置此屬性的話也會(huì)對(duì)齊，是因?yàn)樽訅K元素繼承父塊元素的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:

作用：增加或減少字符間的空白（字符間距）

說明：負(fù)值過大時(shí)，字體會(huì)產(chǎn)生擠壓，但不會(huì)重疊

示例：

<!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:

作用：設(shè)置文本的行高

說明：不允許使用負(fù)值

示例：

<!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

作用：規(guī)定添加到文本的修飾，下劃線、上劃線、刪除線等

說明：該屬性有以下三種簡(jiǎn)寫 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>

感謝各位的閱讀！關(guān)于css3中text屬性的使用示例就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

文章標(biāo)題：css3中text屬性的使用示例-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://jinyejixie.com/article4/jjdie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、商城網(wǎng)站、品牌網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、網(wǎng)站內(nèi)鏈、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

css3中text屬性的使用示例-創(chuàng)新互聯(lián)