接前天的总结，下部分主要整理下文本格式化的内容，包括单位、字体样式、文本样式。这些理解上没有什么难度，主要是多练记住就好了。

一.单位

1.长度单位

（1）px 像素：老朋友了，要记住的是：手机的一个像素点大概是电脑显示屏的1/4，所以适配到手机的字体要扩大四倍。

（2）%百分比：表示以相对于父元素大小来设置当前元素大小，优点在于当父元素尺寸发生改变时，子元素尺寸随之改变。在创建自适应页面时，经常使用百分比作为单位。

（3）em：em单位与百分比类似，但它是相对于当前元素字体大小来计算的：

1 em = 1 font-size

比如父元素设置了字体大小为20px，子元素设置1em，显示就为20px；2em则为2*20=40px；如果不设置字体大小直接使用em为单位，则相对于浏览器默认字体大小16px来显示。

除去字体大小，宽度和长度的设置同理，另外设置首行缩进时采用em单位就可以实现缩进n个字符的效果。

2.颜色单位

（1）rgb值

语法：标签{color:rgb(0,0,0)},每个数值范围是0-255，也可以用百分比表示，0-100%对应数值0-255

（2）十六进制

语法：标签名{color:#000000},使用三组两位数的十六进制数组表示一个颜色，也是对应rgb颜色，只不过换做十六进制表示。每组数范围为00-ff，对应0-255。一组数中数字/字母重复可以只写一个，比如#ff0000，可以简写为#f00.

二.字体样式

1.常用字体样式

font-style 设置字体倾斜

font-weight  设置字体粗细

font-variant 设置小型的大写字母

font-size 设置字体大小

font-family 设置字体

（1）font-style 设置字体倾斜，可选值有：

-normal  默认值，文字正常显示

-italic 文字会以斜体显示

-oblique 文字会以倾斜效果显示

大部分浏览器都不会对斜体和倾斜作区分，一般只会使用italic

（2）font-weight  设置字体粗细，可选值有：

-normal 默认设置，文字正常显示

-bold 文字加粗显示

也可以指定100-900之间的9个值，但是字体粗细是根据计算机现有的字体库中的版本，往往没有那么多版本，很多设置效果一样，因此一般不用

（3）font-variant 设置小型大写字母，即把小写字母变成大写字母，但是要比正常大写字母小，可选值：

-normal  默认值，文字正常显示

-small-caps 文本以小型的大写字母显示

（并不知道有什么用==）

设置后小写字母变大写，但size会小些

（4）font-size 设置字体大小，要注意的是设置的不是文字本身的大小，字体是在一个看不见的框中，设置的是框的大小，实际上字体会略小于设置的值；但根据字体不同，显示效果不一样。

（5）font-family  设置字体，直接写字体名称，且可以同时指定多个字体，用逗号隔开，例如：p{font-family:arila,微软雅黑；}。当采用多种字体时：

-浏览器会优先使用前面的字体，如果没有就再尝试下一个。如果字体名称中有空格，使用时最好加上引号，表示为一个字体；

-如果计算机字体库中都没有，则显示默认字体（采用一种字体时也一样）。

设置字体时也可以不指定某个具体的字体，可以设置为某一类字体，浏览器自行选择这一类中的一个字体，有五大类型：serif（衬线字体），sans-serif(非衬线字体)，monospace（等宽字体），cursive（草书字体），fantasy（虚幻字体）。浏览器不同显示效果不同。

2.简写格式

要指定多个样式时可以直接用font来设置，之间用空格隔开，比如：

选择器{font:italic small-caps bold 60px "微软雅黑"； }

-font里斜体、加粗、小大写字母没有顺序要求，可写可不写；

-font必须写大小和字体，且位置必须在最后两位，字体必须在最后。

三.文本样式

常用文本样式：

text-transform 设置字母大小写

text-decoration 设置文本划线的修饰

letter-spacing 和 word-spacing 分别设置子符间和单词间的间距

text-align 设置文本对齐

text-indent 设置首行缩进

line-height 设置行高

（1）text-transform 设置字母大小写，可选值有：

-none 默认，不做任何处理

-capitalize 单词首字母大写

-uppercase  所有字母都大写

-lowercase 所有字母都小写

（2）text-decoration 设置文本划线的修饰，可选值有：

-none 默认值，不做任何处理

-underline：下划线（超链接标签的默认值是underline，如果要去掉下划线，则要设置值为none）

-overline：上划线

-line-through:删除线

（3）letter-spacing 和 word-spacing 分别设置子符间和单词间的间距，后者设置的实质上是单词间空格的距离，对中文影响不大。

（4）text-align 设置文本对齐，可选值有：

-left 默认值

-right 文本靠右对齐

-center 文本居中

-justify 两端对齐

（5）text-indent 设置首行缩进，常使用em作为单位，2em表示缩进两个字符。当指定值是正数是向右缩进，为负值是向左缩进，有时需要隐藏些内容但又希望搜索引擎能够抓取的时候就会设置为负值。

（6）line-height 设置行高，在css中没有直接设置行间距的方式，只能通过设置行高间接的方式来设置行间距。

网页中的文字在看不见的一行行线中，且默认垂直居中于两行中，因此行间距：

行间距=行高-字体大小

指定line-height的值有三种值：

①直接设定一个大小，如：选择器{line-hight:n px;}，这样行间距就是n减去字体大小后的值；

②指定一个百分数，则会相对于字体大小去计算行高，这种方法不常用；

③直接写一个数值（表示多少倍行距）行高设置字体大小相应的倍数，如：选择器{line-hight:1.5;}，这就是指定了1.5倍行距的意思。

另外，因为文字是默认垂直居中于两行中的，所以当给单行的文本行高设置与父元素高度一致时，文本就会在父元素中垂直居中。

行高也可以通过简写来设置，同样写在font中，语法：

-font：字体大小/行高  “字体名称”；

比如：

font：20px/30px "微软雅黑"，就是指文字大小20px,行高30px,行间距10px，字体为微软雅黑。

要注意的是使用font本身默认有一个行高，如果不另外指定行高则会采用默认值，因此需要指定行高的话，就得写在font中，或者写在font后，写在font前的话就会被默认值给覆盖掉。

总结结束！接下来的是很容易搞混的内容了，加油～