示例01：文本色彩
色彩属性被用来设置文字的色彩。
色彩是通过CSS最常常的指定：
● 十六进制值 - 如: ＃FF0000
● 一个RGB值 - 如: RGB(255,0,0)
● 色彩的名称 - 如: red
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>body {color:red;}h1 {color:#00ff00;}p.ex {color:rgb(0,0,255);}</style></head><body><h1>这是题目 1</h1><p>这是一个一般的段落。请留神,本文是红色的。页面中定义默认的文本色彩选择器。</p><p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p></body></html>示例02：text-align文本对齐
文本排列属性是用来设置文本的程度对齐形式。文本可居中或对齐到左或右,两端对齐。当text-align设置为"justify"，每一行被开展为宽度相等，左，右外边距是对齐（如杂志和报纸）。
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title> <style> .box { background-color: red; font-size: 40px; color: whitesmoke; /*居中*/ text-align: center; } </style></head><body><div class="box">须要居中显示</div></body></html>示例03：text-decoration文本润饰
text-decoration 属性用来设置或删除文本的装璜。从设计的角度看 text-decoration属性次要是用来删除链接的下划线。
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title></head><body><!--a标签默认有下划线--><a href="#">百度一下</a><!--p能够通过css款式增加下划线--><p style="text-decoration: underline">百度一下2</p><!--能够在两头增加一条线--><p style="text-decoration: line-through">不要了</p><!--上划线--><p style="text-decoration: overline">顶部有一条线</p></body></html>示例04：text-transform文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title></head><body><!--首字母大写--><p style="text-transform: capitalize">hello world</p><!--全副大小--><p style="text-transform: uppercase">hello world</p><!--全副小写--><p style="text-transform: lowercase">hello world</p><!--勾销成果--><p style="text-transform: none">Hello world</p></body></html>示例05：text-indent文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title></head><body><!--首行缩进两个字符--><p style="text-indent: 2em">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p></body></html>示例06：font-family字体系列
font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不反对第一种字体，他将尝试下一种字体。多个字体系列是用一个逗号分隔指明：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title> <style> .box { font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", "\5B8B\4F53", sans-serif; } </style></head><body><!--根本的用法--><p class="font-family: Arial, Helvetica, sans-serif;">这一段的字体是 Arial.</p><!--比拟惯例的字体--><p class="box">这一段的字体是 Arial.</p></body></html>示例07：font-style字体款式
次要是用于指定斜体文字的字体款式属性。这个属性有三个值：
● normal - 失常显示文本
● italic - 以斜体字显示的文字
● oblique - 文字向一边歪斜（和斜体十分相似，但不太反对）
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title></head><body><p style="font-style: normal">这是段落</p><!--斜体，更罕用--><p style="font-style: italic">这是段落</p><!--歪斜--><p style="font-style: oblique">这是段落</p></body></html>示例08：font-size字体大小
font-size能够设置文字的大小，反对的单位有px像素，百分比，em等。
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title></head><body><!--默认是16px--><p>你好世界</p><!--设置字体大小px--><p style="font-size: 22px">你好世界</p><!--设置字体大小em--><p style="font-size: 2em">你好世界</p><!--设置字体大小百分比--><p style="font-size: 300%">你好世界</p></body></html>示例09：text-align图片居中
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title> <style> .box { background-color: red; font-size: 40px; color: whitesmoke; /*居中*/ text-align: center; } img { width: 100px; } </style></head><body><div class="box"> <img src="test.jpg" alt="测试"></div></body></html>示例10：text-align让div居中
text-align居中只针对行内元素失效，而div是块级元素。如果要让div被text-align居中，须要将div转换为行内块元素。
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title> <style> .box { background-color: red; font-size: 40px; color: whitesmoke; /*居中*/ text-align: center; } .test { width: 100px; height: 100px; background-color: goldenrod; display: inline-block; } img { width: 100px; } </style></head><body><div class="box"> <div class="test"></div></div></body></html>示例11：letter-spacing字间距
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title></head><body><p>你好世界</p><!--设置文字之间的间隔--><p style="letter-spacing: 5px">你好世界</p><p style="letter-spacing: 15px">你好世界</p><p style="letter-spacing: 25px">你好世界</p></body></html>示例12：font-weight字体粗细
font-wight能够设置字体的粗细，值是100-700的整百数，也能够bold示意加粗和normal示意一般。
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title> <style> .box { font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", "\5B8B\4F53", sans-serif; } </style></head><body><p style="font-weight: bold">这是段落</p><p style="font-weight: normal">这是段落</p><p style="font-weight: 100">这是段落</p><p style="font-weight: 400">这是段落</p><p style="font-weight: 700">这是段落</p></body></html>示例13：line-height行高
line-hight能够设置一行文本占据的高度。
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title></head><body><p style="border:1px solid #ccc;line-height: 16px"> 这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p><!--行高变大--><p style="border:1px solid #ccc;line-height: 26px"> 这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p><!--行高更大--><p style="border:1px solid #ccc;line-height: 36px"> 这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p></body></html>示例14：line-height让文字垂直居中
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title> <style> .box { background-color: cadetblue; /*行高和高度雷同，文字就会垂直居中*/ height: 100px; line-height: 100px; } </style></head><body><div class="box">这个文字须要垂直居中</div></body></html>本文由mdnice多平台公布