ch10 -- CSS 格式排版

CSS 格式排版

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

文字排版

字体

如下代码：

<!--为网页中的文字设置字体为宋体-->
body{font-family:"宋体";}

注意：不要设置不常用的字体，如果电脑上如果没有安装所设置的字体，就会显示浏览器默认的字体。设置的字体样式是否可以显示取决于用户电脑上是否安装了所设置的字体。

现在一般网页喜欢设置“微软雅黑”，如下代码：

body{font-family:"Microsoft Yahei";}
<!--或-->
body{font-family:"微软雅黑";}

注意：第一种方法比第二种方法兼容性更好一些。因为这种字体在用户本地一般都是默认安装的。

字号、颜色

如下代码：

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

粗体

使用 css 样式来改变文字的样式：粗体、斜体、下划线、删除线等等。

示例：

p span{font-weight:bold;}

为文字设置粗体是有单独的 css 样式来实现的，不用为了实现粗体样式而使用 h1-h6 或 strong 标签。

斜体

示例：

<!--实现文字以斜体样式显示-->
p a{font-style:italic;}

<p><a>斜体文本</a></p>

下划线

示例如下：

<!--为文字设置为下划线样式，可以强调文字-->
p a{text-decoration:underline;}
<p><a>下划线文本</a></p>

删除线

在网页上设置删除线：

p a{text-decoration:line-through;}

<p><a>删除线文本</a></p>

段落排版

缩进

缩进样式表示中文文字中的段前空出两个文字的空白。

示例如下：

p{text-indent:2em;}
<p>一段文本。</p>

注意：2em 的意思就是文字的 2 倍大小，为文本段设置 2 个空格缩进。

行间距（行高）
在段落排版中起重要作用的行间距（行高）属性（line-height）。

示例如下：

<!--实现设置段落行间距为1.5倍-->

p{line-height:1.5em;}
<p>一段文字。</p>

中文字间距、字母间距

中文字间隔、字母间隔设置：可以使用 letter-spacing 来实现在网页排版中设置文字间隔或者字母间隔。

示例如下：

h1{
    letter-spacing:50px;
}
<h1>一段文字。</h1>

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

单词间距设置：可以使用 word-spacing 来设置英文单词之间的间距。

示例如下：

h1{
    word-spacing:50px;
}
<h1>Hello,World!</h1>

对齐

可以使用 text-align 样式实现文本居中显示，为块状元素中的文本、图片设置居中样式（块状元素见后续章节）。

示例如下：

设置居中：

h1{
    text-align:center;
}
<h1>一段文字。</h1>

设置居左：

h1{
    text-align:left;
}
<h1>一段文字。</h1>

设置居右：

h1{
    text-align:right;
}
<h1>一段文字。</h1>