CSS文本

概念：CSS文本属性可定义文本外观

　　　通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进

属性	描述
color	文本颜色
direction	文本方向
line-height	行高
letter-spacing	字符间距
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-transform	元素中的字母
unicode-bidi	设置文本方向
white-space	元素中空白的处理方式
word-spacing	字间距

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <p id="p_hello">hello CSS</p>
    <div>
        <h3>静夜思</h3>
        <p>窗前明月光，</p>
        <p>窗前明月光。</p>
        <p>窗前明月光，</p>
        <p>窗前明月光。</p>
    </div>

    <div>
        <p id="p_transform1">This Is A Test</p>
        <p id="p_transform2">this is a test</p>
        <p id="p_transform3">this is a test</p>
    </div>

    <div>
        <h1>test shadow!</h1>
        <p id="wrap">test wrap!test wrap!test wrap!test wrap!test wrap!test wrap!test wrap!test wrap!</p>
    </div>
</body>
</html>

/*style.css*/
#p_hello{
    color: brown;
    text-align: center;
}

h3{
    text-indent: 0.5em;
}

#p_transform1{
    text-transform:lowercase ;  /*全部小写*/
}
#p_transform2{
    text-transform: uppercase;  /*全部大写*/
}
#p_transform3{
    text-transform: capitalize;  /*首字母大写*/
}

h1{
    text-shadow: 5px 5px 5px #ff0000;
}

#wrap{
    width: 100px;
    text-wrap:normal ;
}
/*
 h-shadow   必需。水平阴影的位置。允许负值。
 v-shadow   必需。垂直阴影的位置。允许负值。
 blur       可选。模糊的距离。
 color      可选。阴影的颜色。
 */

运行结果：

posted on 2019-03-14 22:04 自闭少女阅读(148) 评论(0) 编辑收藏举报