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      可选。阴影的颜色。

 */

运行结果：

巴特西

三、CSS样式——文本

CSS文本

最新文章

热门文章