今天小编跟大家讲解下有关CSS的文本格式化样式总汇 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS的文本格式化样式总汇 的相关资料，希望小伙伴们看了有所帮助。
长度单位
像素 px百分比 %em- 像素是我们在网页中使用的最多的一个单位，* 一个像素就相当于我们屏幕中的一个小点，* 我们的屏幕实际上就是由这些像素点构成的* 但是这些像素点，是不能直接看见。* - 不同显示器一个像素的大小也不相同，* 显示效果越好越清晰，像素就越小，反之像素越大。
- 也可以将单位设置为一个百分比的形式，* 这样浏览器将会根据其父元素的样式来计算该值* - 使用百分比的好处是，当父元素的属性值发生变化时，* 子元素也会按照比例发生改变* - 在我们创建一个自适应的页面时，经常使用百分比作为单位
- em和百分比类似，它是相对于当前元素的字体大小来计算的* - 1em = 1font-size* - 使用em时，当字体大小发生改变时，em也会随之改变* - 当设置字体相关的样式时，经常会使用em
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 300px; height: 300px; background-color: red; } .box1{ font-size: 20px; width: 2em; height: 50%; background-color: yellow; } </style> </head> <body> <div class="box"> <div class="box1"></div> </div> </body></html>颜色
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 100px; height: 100px; background-color: #084098; } </style> </head> <body> <div class="box1"></div> </body></html>上面的代码如果懒得看的话，想知道颜色的RGB值直接用QQ自带的截图工具就能点两下就知道了。或者用更高级的screen color picker。
文本的大小以及颜色
colorfont-sizefont-family设置字体颜色,使用color来设置文字的颜色设置文字的大小,浏览器中一般默认的文字大小都是16pxfont-size设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度，并不是字体的大小一般情况下文字都要比这个格要小一些，也有时会比格大，根据字体的不同，显示效果也不能
通过font-family可以指定文字的字体* 当采用某种字体时，如果浏览器支持则使用该字体，* 如果字体不支持，则使用默认字体
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .p1{ color: red; font-size: 30px; font-family: arial , 微软雅黑 </style> </head> <body> <p class="p1"> 我是一个p标签，ABCDEFGabcdefg </p> </body></html>文字的字体
衬线字体非衬线字体等宽字体草书字体fantasyserifsans-serifmonospacecursive虚幻字体<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ font-family: arial , 微软雅黑 , 华文彩云 , serif; } </style> </head> <body> <p style="font-size: 50px; font-family: serif;">衬线字体：我是一段文字，ABCDEFGabcdefg</p> <p style="font-size: 50px; font-family: sans-serif;">非衬线字体：我是一段文字，ABCDEFGabcdefg</p> <p style="font-size: 50px; font-family: monospace;">等宽字体：我是一段文字，IHABCDEFGabcdefg</p> <p style="font-size: 50px; font-family: cursive;">草书字体：我是一段文字，ABCDEFGabcdefg</p> <p style="font-size: 50px; font-family: fantasy;">虚幻字体：我是一段文字，ABCDEFGabcdefg</p> </body></html>文字的字体样式
font-stylefont-weightfont-variant设置文字的斜体
- 可选值：* normal，默认值，文字正常显示* italic 文字会以斜体显示* oblique 文字会以倾斜的效果显示* - 大部分浏览器都不会对倾斜和斜体做区分，* 也就是说我们设置italic和oblique它们的效果往往是一样的* - 一般我们只会使用italic
设置文本的加粗效果
可选值：* normal，默认值，文字正常显示* bold，文字加粗显示** 该样式也可以指定100-900之间的9个值，* 但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果* 也就是200有可能比100粗，300有可能比200粗，但是也可能是一样的
设置小型大写字母
可选值：* normal，默认值，文字正常显示* small-caps 文本以小型大写字母显示** 小型大写字母：* 将所有的字母都以大写形式显示，但是小写字母的大写，* 要比大写字母的大小小一些。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .p1{ color: red; font-size: 30px; font-family:"微软雅黑"; font-style: italic; font-weight: bold; font-variant: small-caps ; } .p2{ font-size: 50px; font-family: 华文彩云; font-style: italic; font-weight: bold; font-variant: small-caps; } .p3{ font: small-caps bold italic 60px"微软雅黑"; } </style> </head> <body> <p class="p3">我是一段文字，ABCDEFGabcdefg</p> <p class="p1">我是一段文字，ABCDEFGabcdefg</p> <p class="p2">我是一段文字，ABCDEFGabcdefg</p> </body></html>推荐使用p3的写法。
行间距
在css并没有为我们提供一个直接设置行间距的方式，* 我们只能通过设置行高来间接的设置行间距，行高越大行间距越大* 使用line-height来设置行高* 网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示
行间距 = 行高 - 字体大小
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .p1{ font-size: 20px; line-height: 2; } .p2{ font: 30px/50px"微软雅黑"; line-height: 50px; } .box{ width: 200px; height: 200px; background-color: #bfa; line-height: 200px; } </style> </head> <body> <p class="p2"> 在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地?着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。 </p> <div class="box"> <a href="">我是一个超链接</a> </div> <p class="p1"> 在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地?着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。。 </p> </body></html>文本的样式
text-transformtext-decorationtext-decorationword-spacing和letter-spacingtext-aligntext-indent设置文本的大小写
可选值：* none 默认值，该怎么显示就怎么显示，不做任何处理* capitalize 单词的首字母大写，通过空格来识别单词* uppercase 所有的字母都大写* lowercase 所有的字母都小写
设置文本的修饰
可选值：* none：默认值，不添加任何修饰，正常显示* underline 为文本添加下划线* overline 为文本添加上划线* line-through 为文本添加删除线
去除下划线
超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline如果需要去除超链接的下划线则需要将该样式设置为none
letter-spacing可以指定字符间距（字母和字母之间的距离）
word-spacing可以设置单词之间的距离（单词和单词之间的距离）
设置文本的对齐方式
可选值：* left 默认值，文本靠左对齐* right ， 文本靠右对齐* center ， 文本居中对齐* justify ， 两端对齐* - 通过调整文本之间的空格的大小，来达到一个两端对齐的目的
设置首行缩进
当给它指定一个正值时，会自动向右侧缩进指定的像素* 如果为它指定一个负值，则会向左移动指定的像素,* 通过这种方式可以将一些不想显示的文字隐藏起来* 这个值一般都会使用em作为单位
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .p1 { text-transform: lowercase; } .p2 { text-decoration: line-through; } a { text-decoration: none; } .p3 { etter-spacing: 10px; word-spacing: 120px; } .p4{ text-align: justify ; } .p5{ font-size: 20px; text-indent: -99999px; } </style> </head> <body><p class="p5">粉房旁边的那小偏房里，还住着一家赶车的，那家喜欢跳大神，常常就打起鼓来，喝喝咧咧唱起来了。鼓声往往打到半夜才止，那说仙道鬼的，大神和二神的一对一答。苍凉，幽渺，真不知今世何世。</p><p class="p4">粉房旁边的那小偏房里，还住着一家赶车的，那家喜欢跳大神，常常就打起鼓来，喝喝咧咧唱起来了。鼓声往往打到半夜才止，那说仙道鬼的，大神和二神的一对一答。苍凉，幽渺，真不知今世何世。</p><p class="p3">粉房旁边的那小偏房里，还住着一家赶车的，那家喜欢跳大神，常常就打起鼓来，喝喝咧咧唱起来了。鼓声往往打到半夜才止，那说仙道鬼的，大神和二神的一对一答。苍凉，幽渺，真不知今世何世。</p><a href="">我是超链接</a><p class="p2">Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p><p class="p1">Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets? </p> </body></html>来源：爱蒂网
