4. text-indent文本缩进
text-indent文本缩进属性是用来指定文本的第一行的缩进。
p {text-indent:50px;}5. letter-spacing 设置字符间距
增加或减少字符之间的空间。
<style> h1 { letter-spacing:2px;} h2 { letter-spacing:-3px;}</style>
6. line-height设置行高
指定在一个段落中行之间的空间。
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640, user-scalable=no"> <title>项目</title> <style> p.small { line-height: 70%; }
p.big { line-height: 200%; }</style> </head>
<body> <p> This is a paragraph with a standard line-height.<br> This is a paragraph with a standard line-height.<br> The default line height in most browsers is about 110% to 120%.<br> </p>
<p class="small"> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> </p>
<p class="big"> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> </p>
</body>
</html>
7. word-spacing 设置字间距
增加一个段落中的单词之间的空白空间。
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640, user-scalable=no"> <title>项目</title> <style type="text/css"> p { word-spacing: 30px; }</style> </head>
<body>
<p> This is some text. This is some text. </p>
</body>
</html>
8. vertical-align 设置元垂直居中
设置文本的垂直对齐图像。
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640, user-scalable=no"> <title>项目</title> <style> img{ width: 200px; height: 100px; } img.top { vertical-align: text-top;
}
img.bottom { vertical-align: text-bottom;
}</style> </head>
<body> <p>An <img src="img/logo.png" /> image with a default alignment.</p> <p>An <img class="top" src="img/logo.png" /> image with a text-top alignment.</p> <p>An <img class="bottom" src="img/logo.png" /> image with a text-bottom alignment.</p> </body>
</html>
9. text-shadow 设置文本阴影
设置文本阴影。
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640, user-scalable=no"> <title>项目</title> <style> h1{ text-shadow: 2px 2px #FF0000; }</style> </head>
<body> <h1>Text-shadow effect</h1> </body>
</html>
三、总结
本文主要介绍了CSS文本样式实际应用中应该如何去操作,通过讲解文本中对应的属性去改变文本的表现形式。使用丰富的效果图的展示,能够更直观的看到运行的效果,能够更好的理解。使用Html语言,代码结构更佳的清晰,能够帮助你更好的学习。