1、
body{ color:aqua; /*可继承的颜色*/ text-align: center; /*文本对齐方式*/ }
2、缩进：
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link href="style2.css" type="text/css" rel="stylesheet"> </head> <body> <div> <h1>静夜思</h1> <p>床前明月光，</p> <p>床前明月光。</p> <p>床前明月光，</p> <p>床前明月光。</p> </div> </body> </html>
没有缩进的效果：
加上css样式：
h6{ text-indent: 2em;/*首行缩进2个像素*/ }
效果：
1 h6{ 2 text-indent: -2em;/*首行退2个像素*/ 3 padding-left: 2em 4 } 5 p{ 6 padding-left: 2em 7 }
效果：
3、大小写：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link href="style2.css" type="text/css" rel="stylesheet"> </head> <body> <p id="p1">this Is my web page</p> <p id="p2">this Is my Web page</p> <p id="p3">this Is my web page</p> </body> </html>
css：
1 #p1{ 2 text-transform: capitalize;/*每个单词的第一个字母变为大写*/ 3 } 4 #p2{ 5 text-transform: lowercase;/*所有变为小写*/ 6 } 7 #p3{ 8 text-transform: uppercase;/*所有变为大写*/ 9 }
效果：
4、设置阴影效果：
p{ text-shadow: 5px 5px 1px #FF0000;/*设置背景,参数分别为：距左 距上 清晰度 背景颜色*/ }
效果：
5、测试自动换行：
原来效果：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link href="style2.css" type="text/css" rel="stylesheet"> </head> <body> <p>测试阴影效果测试阴影效果测试阴影效果测试阴影效果测试阴影效果测试阴影效果测试阴影效果测试阴影效果</p> </body> </html>
加入css：
p{ 100px; text-wrap:normal;/*换行：正常,100px*/ }
效果：