1.color：
color属性用于定义文本的颜色，其取值方式有如下3种:预定义的颜色值，如red , green , blue等。
十六进制，如#FF0000 ,#FF6600 , #29D794等·实际工作中，十六进制是最常用的定义颜色的方式。
.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
p{
color: red;
}
</style>
</head><body>
<p >测试文本1</p>
</body>
</html>
效果：
2.letter-spacing:
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白
letter-spacing属性，其属性值可为不同单位的数值，允许使用负值，默认为normal ，常用单位px；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
p{
letter-spacing: 20px;
}
</style>
</head><body>
<p >测试文本1</p>
</body>
</html>
效果：
3.word-spacing：
word-spacing属性用于定义英文单词之间的间距，对中文字符无效。
word-spacing属性用于定义英文单词之间的间距，和letter-spacing 一样，其属性值可为不同单位的数值，允许使用负值，默认为normal 。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
p{
word-spacing: 20px;
}
</style>
</head><body>
<p >abc defg</p>
</body>
</html>
效果：
4.line-height:
line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。
i line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
p{
line-height: 50px
}
</style>
</head><body>
<p >测试文本1</p>
<p >测试文本2</p>
</body>
</html>
效果：
5.text-align ：
text-align属性用于设置文本内容水平对齐，相当于html中的 align对齐属性
其可用属性值如下:
left :左对齐(默认值)
right :右对齐
center :居中对齐
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.left{
text-align:left;/*设置文本右对齐*/
}
.center{
text-align:center;/*设置文本居中*/
}.right{
text-align:right;/*设置文本左对齐*/
}
</style>
</head><body>
<p class="left">左对齐测试文本1</p>
<p class="center">居中测试文本2</p>
<p class="right" >右对齐测试文本3</p>
</body>
</html>
效果：
6.text-transform：
属性用于控制英文字符的大小写。
其可用属性值如下:
none :不转换（默认值)。
capitalize :首字母大写。
uppercase:全部字符转换为大写。
lowercase :全部字符转换为小写。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.one{
text-transform:none;/*不转换*/
}
.two{
text-transform:capitalize;/*设置首字母大写*/
}.three{
text-transform:uppercase;/*设置全部大写*/
}
.four{
text-transform:lowercase;/*设置全部小写*/
}
</style>
</head><body>
<p class="one">abcdefg</p>
<p class="two">abccdefg</p>
<p class="three">abcdefg</p>
<p class="four">ABCCDEFG</p>
</body>
</html>
效果：
7.text-decoration
属性用于设置文本的下划线，上划线，删除线等装饰效果。
其可用属性值如下:
none :没有装饰(正常文本默认值)。
underline :下划线。
overline : 上划线。
line-through :删除线。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.one{
text-decoration: none/*没有修饰*/
}
.two{
text-decoration:underline/*设置下划线*/
}.three{
text-decoration:overline/*设置上划线*/
}
.four{
text-decoration:line-through/*设置删除线*/
}
</style>
</head><body>
<p class="one">测试文本1</p>
<p class="two">测试文本2</p>
<p class="three">测试文本3</p>
<p class="four">测试文本4</p>
</body>
</html>
效果：
8.text-indent
属性用于设置首行文本的缩进。
其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em 作为设置单位。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.one{
text-indent: 0em
}
.two{
text-indent: 2em;/*缩进2个字符单位*/
}
</style>
</head><body>
<p class="one">测试文本。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
<p class="two">测试文本。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
</body>
</html>
效果：
9.white-space
属性可设置空白符的处理方式。
其属性值如下:
normal:常规（默认值)，文本中的空格﹑空行无效，满行（到达区域边界）后自动换行
pre :预格式化，按文档的书写格式保留空格﹑空行原样显示。
nowrap:空格空行无效，强制文本不能换行，除非遇到换行标签<br />。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.one{
white-space: normal/*常规显示*/
}
.two{
white-space: pre/*保留空格﹑空行原样显示。*/
}
.three{
white-space: nowrap/*空格空行无效，强制文本不能换行*/
}
</style>
</head><body>
<p class="one">测试文本1。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
<p class="two">测试文本2。。。。。。。。 。。。。。。。。。。 。。。。。。。。。。
。。。。。。。。。。。。。。。</p>
<p class="three">测试文本3。。。。。。 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
。。。。。。。。</p>
</body>
</html>
效果：
10.text-shadow
属性可以为页面中的文本添加阴影效果。
h-shadow用于设置水平阴影的距离
v-shadow用于设置垂直阴影的距离,
blur用于设置模糊半径,
color 用于设置阴影颜色。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.one{
text-shadow: 20px 20px 20px blue;
}
</style>
</head><body>
<p class="one">测试文本1</p>
</body>
</html>
效果：
11. text-overflow
属性用于处理溢出的文本。
clip:修剪溢出文本，不显示省略标签“..."。
ellipsis:用省略标签“..."替代被修剪文本，省略标签插入的位置是最后一个字符。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.one{
text-overflow:clip
}
.two{
text-overflow: ellipsis
}
</style>
</head><body>
<em class="one">测试文本1。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</em>
<em class="two">测试文本2。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</em>
</body>
</html>
效果：