html5学习记录08：认识css样式文字排版

文字排版--字体

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。

body{font-family:"宋体";}

这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
现在一般网页喜欢设置“微软雅黑”，如下代码：

body{font-family:"Microsoft Yahei";}

或

body{font-family:"微软雅黑";}

注意：第一种方法比第二种方法兼容性更好一些。

文字排版--字号、颜色

可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：

body{font-size:12px;color:#666}

文字排版--粗体

我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线

p span{font-weight:bold;}

取值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

• normal:正常,等同于 400
• bold:粗体,等同于 700
• bolder:更粗
• lighter:更细
• 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900:字体粗细的绝对值
• inherit:继承

文字排版--斜体

p a{font-style:italic;}

文字排版--下划线

p a{text-decoration:underline;}

文字排版--删除线

.oldPrice{text-decoration:line-through;}

字体单位：px与em

字体单位使用em能支持IE6下的字体缩放，在页面中按ctrl+滚轮，字体以px为单位的网站没有反应。

　　px是绝对单位，不支持IE的缩放。

　　em是相对单位，网页中的文字能放大和缩小。将行距(line-height)，和纵向高度的单位都用em。保证缩放时候的整体性。

　　任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明 Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

　　em有如下特点：

　　1. em的值并不是固定的;

　　2. em会继续父级元素的字体大小。

　　所以我们在写CSS的时候，需要注意：

　　1. body选择器中声明Font-size=62.5%;(Font-size=63%;用于ie6兼容)

　　2. 将你的原来的px数值除以10，然后换上em作为单位;

　　3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

段落排版--缩进

p{text-indent:2em;}

段落排版--行间距（行高）

p{line-height:1.5em;}

段落排版--中文字间距、字母间距

h1{
    letter-spacing:50px;
}

单词间距设置：

如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。如下代码：

h1{
    word-spacing:50px;
}

段落排版--对齐

h1{
    text-align:center;//left,right
}
<h1>了不起的盖茨比</h1>