CSS格式化排版

文字排版-字体

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

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

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

body{font-family:"Microsoft Yahei";}
或
body{font-family:"微软雅黑";}
注意：第一种方法比第二种方法兼容性更好一些。

• 粗体font-weight:bold;

p span{font-weight:bold;}

在这里大家可以看到，如果想为文字设置粗体是有单独的css样式来实现的，再不用为了实现粗体样式而使用h1-h6或strong标签了。

• 斜体font-style:italic

p a{font-style:italic;}
<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

• 下划线text-decoration:underline;

p a{text-decoration:underline;}
<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

• 删除线text-decoration:line-through

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

如果想在网页上设置删除线怎么办，这个样式在电商网站上常会见到：

• 缩进text-indent:2em

p{text-indent:2em;}

2em的意思就是文字的2倍大小。

• 行间距（行高）line-height:1.5em

p{line-height:1.5em;}

• 中文字间距、字母间距
  如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现，如下面代码：

h1{
    letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>

注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。

单词间距设置：
英文可以使用 word-spacing 来实现。如下代码：

h1{
    word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>

• 对齐
  可以使用text-align样式代码，如下代码可实现文本居中显示。

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

同样可以设置居左：
text-align:left;
还可以设置居右：
text-align:right;