1、CSS字体和文本样式
1、文字有很多属性，包括颜色，字体大小，字体，加粗等。文本有行高，对齐方式，文本修饰。
2、字体样式
字体：font-family
字体大小：font-size
文字颜色：font-color
文字粗细：font-weight
文字样式：font-style其实在html语言中，可以使用<font>标签对文字进行样式的设置：（但是这种方式已经不被推荐使用了）
<h1><font face="宋体" color="red" size="17px">CSS字体样式</font></h1>现在都使用的是CSS样式对字体进行设置：
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
h1{font-family:"Times New Roman";}
p{font-family:"微软雅黑" ,"黑体","宋体",sans-serif;}
/*先去找微软雅黑，找不到再去找黑体，以此类推，如果都没有找到，就使用浏览器的默认字体*/
/*通常会在常用字体后面添加字体集*/
</style>
</head>
<body>
<h1>字体样式</h1>
<p>关于CSS的最新版本</p>
</body>
</html>
如果在行内样式设置字体属性，那么字体就要使用单引号，因为行样式本来就是用双引号包裹的。
<h1 style="font-family:'宋体';"><h1>字体样式总结：
3、字体大小
1、文字大小的px。受显示器分辨率的影响，所以在手机上我们一般不设置为px。
2、font-size设置为larger表示相对父元素的文字大小变大，设置为smaller是表示相对于父元素的文字变小。、
3、同时设置em或者百分号表示是父元素的倍数关系：比如下面的p标签是50px，span是2em，即相对父元素是两倍，即100px，而下面的p标签由于有class，权值比标签选择器大，那么它的是150%，相对于父元素div是1.5倍，但是div没有设置字体大小属性，默认为16px，所以这时的p标签的字体大小为24px。
<style type="text/css">
p{font-size:50px;}
.em{font-size:2em;}
.percent{font-size:150%;}
#fontSize{font-size:20px;}
</style>
<body>
<div id="fontSize">
<p>文字大小<span class="em">相对值em</span></p>
<p class="percent">文字大小<span>相对值%</span></p>
</div>
</body>4、子元素继承父元素的计算值。比如第二个p标签，是父元素的150%，那么计算值就是30px，则span标签继承了p标签的这个属性值，也为30px。
4、字体颜色
1、颜色可以是：颜色名，十六进制，RGB。
2、RGB表示方法是red，green，blue的百分比来计算的，rgb（XX,XX,XX）,其中XX可以是数字，范围是0-255，也可以时间百分比，范围是0%-100%。
3、颜色有很多，我们可以百度web安全色来到这个网页上去查询：http://www.bootcss.com/p/websafecolors/
5、字体加粗和倾斜和字体变形
1、通过HTML标签可以使用,<b>和<stong>标签来是字体加粗
2、通过CSS样式，可以设置字体加粗：
font—size:normal (400)| bold(700) | bolder | lighter |100-9003、通过HTML标签可以使用<em>或者<i>标签来是字体倾斜。
4、在CSS中通过font-style可以设置文字的样式：通常倾斜都是用的italic
font-style:normal | italic | oblique 5，通过font-variant来设置英文的大小写
font-variant:normal | small-caps(小型大写字母)6、文本对齐方式
1、可以通过行内样式，通过<p style="text-align:left"><p>或者<p align="left"></p>的html标签样式来设置对齐。
2、通过CSS样式来设置文本对齐方式：
text-align:left | right | center | justify(适合)3、text-align这个属性只适用于块级元素，比如给<img>或者<span>标签添加这个属性就没有用，需要在外部套一个块级元素div，给div设置这个属性，那么整体的对齐方式就有效果了。
4、居中还有一种写法是下面这种，上面边距为0，左右自动
p{width:50%;margin:0 auto;}7、vertical-align
1、首先要注意的这个属性只能用于行内元素，不能用于块级元素。它是用来设置元素内容的垂直方式。
2、这个属性的值有很多：
vertical：baseline | sub（下标） | super（上标） |top |text-top| middle | bottom |text-bottom| 长度| 百分比3、其他值是和基线有关的：另外长度是上下浮动的距离，例如：
<p><span style="vertical-align:15px;"></span><!--向上移动15px-->
<p><span style="vertical-align:-15px;"></span><!--向下移动15px-->
<p><span style="vertical-align:100%;"></span><!--相对于基线向上移动了100%-->
<p><span style="vertical-align:-100%;"></span><!--相对于基线向下移动了100%-->
4、垂直居中：分为单行垂直居中和多行垂直居中。
（1）单行垂直水平居中的思路：行高与高度一致，text-align为center
<head>
<style type="text/css">
.warp{
height:400px;
width:100px;
line-height:400px; /*行高与高度一致*/
text-align:center; /*块级元素水平居中*/
}
</style>
</head>
<body>
<div class="warp">
<p>welcome to see demo</p>
<div>
</body>（2）多行垂直水平居中可以转化为单元格的形式，水平方式依旧是text-align为center
<head>
<style type="text/css">
.warp{
height:400px;
width:100px;
display:table; /*父级块级元素设置成table*/
}
.content{
display:table-cell;/* 子元素设置为table-cell*/
text-align:center; /* 水平居中 */
}
</style>
</head>
<body>
<div class="warp">
<div class="content">
......
</div>
</div>
</body>8、line-height
1、在CSS中，使用line-height来设置文本的行高，可以是长度值，也可以是百分比：
line-height:长度值| 百分比2、line-height的长度值设置：注意的是，假如line-height和font-size同时进行设置，我们的字体大小如果比行高还大，那么行与行就会发生重叠，下面代码所示：
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
.text3{font-size:30px;text-indent:2em;line-height:25px}
</style>
</head>
<body>
<div class="content">
<p class="text3">关于CSS的最新版本,关于CSS的最新版本,关于CSS的最新版本,关于CSS的最新版本,关于CSS的最新版本,关于CSS的最新版本,关于CSS的最新版本,</p>
</div>
</body>
</html>
3、line-height的百分比设置：使用em和%设置行高，行高的高度和字体就有关系了：这样的话我们行高就是字体的1.3倍，就不会发生字体超过行高发生重叠的事情了。不同的浏览器有不同默认的行高，一般是120%。
.text3{font-size:16px;text-indent:2em;line-height:1.3em}4、line-height属性是可以继承的。给父级元素设置行高，子元素也会继承行高属性的设置。但是注意的是：子元素会继承父元素的行高计算值，不是百分比：比如说下面这段代码：div的计算值为16*1.3，但是p的字体是30px，大于继承父级元素的行高，所以会发生行与行文字发生重叠的现象。
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
.content{font-size:16px;line-height:1.3em;}
.text3{font-size:30px;text-indent:2em;}
</style>
</head>
<body>
<div class="content">
<p class="text3">关于CSS的最新版本,关于CSS的最新版本,关于CSS的最新版本,关于CSS的最新版本,关于CSS的最新版本,关于CSS的最新版本,关于CSS的最新版本,</p>
</div>
</body>
</html>
9、其他CSS文本样式属性
word-spacing:设置元素内单词之间的间距：长度px | 百分比em,相对于字母
letter-spacing 设置元素内字母之间的间距：长度px | 百分比em,相对于字母
text-transform 设置元素内文本的大小写 capitalize(首字母大写) | uppercase(大写) | lowercase(小写) | none(没有效果)
text-decoration 设置元素内文本的装饰 underline(下划线) | overline(上划线) |line-through(贯穿线，删除线) |blink(闪烁) | none