在慕课上学习的，HTML和CSS基础学习笔记7

10、CSS格式化排版

10-1 文字排版---字体

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

如，为网页中的文字设置字体为宋体。

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

用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。

现在一般网页喜欢设置“微软雅黑”

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

10-2 字号、颜色

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

设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：

10-3 粗体

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

粗体如下

p span{font-weight:bold;}

10-4 斜体

p a{font-style:italic;}

<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

10-5 下划线

p a{text-decoration:underline;}

<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

10-6 删除线

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

10-7 段落排版---缩进

中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：

p{text-indent:2em;}
<p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>

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

10-8 行间距（行高-line-height）

实现设置段落行间距为1.5倍。

p{line-height:1.5em;}
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

10-9 中文字间距，字母间距

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

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

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

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

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

10-10 对齐

为块状元素中的文本、图片设置居中样式，可以使用text-align样式代码，如下代码可实现文本居中显示

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

居左：

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

居右：

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