css3中text属性的使用示例

发布时间：2020-11-23 15:46:44 作者：小新
来源：亿速云阅读：160

这篇文章给大家分享的是有关css3中text属性的使用示例的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

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属性的使用示例

相关阅读