css-文本属性

一、css文本属性

1.text-indent属性

（1）text-indent: 首行缩进

（2）例如：text-indent:30px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 文本属性</title>
    <style type="text/css">
        #a {
            text-indent: 30px;
        }
    </style>
</head>
<body>
    <p>正常显示一段话</p>
    <p id="a">这段话首行缩进显示</p>
</body>
</html>

2.text-align属性

（1）text-align: 文本的位置

（2）Left左对齐； center居中； right右对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 文本属性</title>
    <style type="text/css">
        #a {
            text-align: left;
        }
        #b{
            text-align: center;
        }
        #c{
            text-align: right;
        }
    </style>
</head>
<body>
    <p>正常显示一段话</p>
    <p id="a">这段话左对齐显示</p>
    <p id="b">这段话居中显示</p>
    <p id="c">这段话右对齐显示</p>
</body>
</html>

3.text-decoration属性

（1）text-decoration: 字体画线

（2）none无；underline下画线；line-through贯穿线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 文本属性</title>
    <style type="text/css">
        #a {
            text-decoration: none;
        }
        #b{
            text-decoration: underline;
        }
        #c{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <p id="a">这段话正常显示无下划线</p>
    <p id="b">这段话下划线显示</p>
    <p id="c">这段话贯穿线显示</p>
</body>
</html>

4.text-shadow属性

（1）text-shadow: 文本的文字是否有阴影及模糊效果

（2）取值：横向、纵向、偏移量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 文本属性</title>
    <style type="text/css">
        #a {
            text-shadow: 2px 2px 2px red;
        }
        #b{
            text-shadow: 5px 5px 5px blue;
        }
        #c{
            text-shadow: 10px 10px 10px green;
        }
    </style>
</head>
<body>
    <p id="a">这段话正常阴影偏移小</p>
    <p id="b">这段话正常阴影偏移多一点</p>
    <p id="c">这段话正常阴影偏移再多一点</p>
</body>
</html>

5.direction属性

（1）direction：文字流方向。有ltr 和 rtl两种

（2）例如：direction:ltr;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 文本属性</title>
    <style type="text/css">
        #a {
            direction: ltr;
        }
        #b{
            direction: rtl;
        }
    </style>
</head>
<body>
    <p>这段话正常显示</p>
    <p id="a">这段话看不出与正常的有啥区别</p>
    <p id="b">这段话也看不出与正常的有啥区别</p>
</body>
</html>

6.letter-spacing属性

letter-spacing: 文字或字母的间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 文本属性</title>
    <style type="text/css">
        #a {
            letter-spacing: 10px;
        }
        #b{
            letter-spacing: 30px;
        }
    </style>
</head>
<body>
    <p>这段话正常显示</p>
    <p id="a">这段话字（字母）有间隔显示</p>
    <p id="b">这段话字（字母）间隔大点显示</p>
</body>
</html>

7.word-spacing属性

word-spacing：单词间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 文本属性</title>
    <style type="text/css">
        #a {
            word-spacing: 10px;
        }
        #b{
            word-spacing: 30px;
        }
    </style>
</head>
<body>
    <p>good morning</p>
    <p id="a">good morning good afternoon</p>
    <p id="b">good morning good afternoon</p>
</body>
</html>

8.line-height：行高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 文本属性</title>
    <style type="text/css">
        #a {
            line-height: 50px;
        }
    </style>
</head>
<body>
    <p id="a">当我的笑灿烂像阳光 当我的梦做的够漂亮 这世界才为我鼓掌 只有你担心我受伤 全世界在等我飞更高
        你却心疼我小小翅膀 为我撑起 沿途休息的地方
    </p>
</body>
</html>

猜你喜欢