山地人

课15.[理论].排版相关的样式

山地人
山地人
2021-05-13

项目下载地址:前往GitHub

课15.[理论].排版相关的样式——大纲

排版文字

属性名属性说明
字体font-family: serif;你可以指定多个字体,浏览器会按先后顺序优先使用最前面的。
字号font-size: 14px;这里的单位px是像素,你可以更换其他单位入rem,em
颜色color: blueviolet;
粗细font-weight: bold;thin|normal|bold|bolder|100~900
斜体font-style:italic;
上划线text-decoration:overline;
删除线text-decoration:line-through;
下划线text-decoration:underline;

排版段落

首行缩进2字符

在网页排版中,每一段的文字,首行缩进两个字符,究竟应该怎么做?

p {
text-indent:2em;
}

上面这段CSS样式,对段落p标签,应用了text-indent属性,这个属性是用来指定一段文本的首行文本缩进的,这里我们把它的值设定为2em。整个规则翻译一下,就是对p标签中的文字,把其中的第一行的文本缩进2em(2个字符)。正好达到了我们需要的,首行缩进两个字符的要求。

试着调整2em的值为1em或者4em,看看浏览器里会发生什么变化?

文字的行间距

Word里调整文字的行间距,有专门的面板,其实在CSS中要对文字进行行间距调整更加容易。

p {
line-height: 2em;
}

利用line-height属性,你可以轻松指定文字的行间距,比如上面的例子,指定文字行间距是2倍于当前文字。

当然,你也可以使用固定值来指定,比如行间距定位24像素。

p {
line-height: 24px;
}

试着编辑器中line-height后面的值,然后按ctrl+s保存,看看浏览器中会发生什么变化?

小技巧:对于单行文字,你要在一个固定高度的区域内做垂直居中,可以直接把文字的行高,设置为这个区域的固定高度。就能达到,单行文字在这个区域内的垂直居中效果。

文字的字间距

上面我们设置的文字的行间距,我们可以对文字的字间距进行设置

p {
letter-spacing: 5px;
}

letter-spacing设定字母或者中国汉字的字与字之间的间距,比如上面例子中的5像素的字间距。

尝试改变编辑器中letter-spacing后面的值,然后按ctrl+s保存,看看浏览器中会发生什么变化?

当然对于英文字母,我们还可以设定单词与单词的间距

p {
word-spacing: 5px;
}

尝试将编辑器中word-spacing后面的值改成一个较大的值,比如10px,然后按ctrl+s保存,看看浏览器中会发生什么变化?

文字对齐

p {
text-align: left;
}

只需要设置text-align属性为 left|middle|right,就可以实现文字的水平居左,居中和居右对齐了。

尝试一下三种不同的值,都会带来什么样的变化?

课堂小结

本节课,我们重点学习了排版中:

  • 文字的相关属性

  • 段落中文字的相关属性

  • 首行缩进

  • 行间距

  • 字间距

  • 文字对齐

课后练习

学习了这么多CSS的排版知识,那么这次留给你的小练习是:

利用所学的排版知识,排版一份你觉得还不错的HTML小报。

学完本篇互动教程,如果你觉得体验不错,可以把网页链接发送给你的小伙伴,让他/她也来感受一下。当然,你也可以继续看看网站上其他的的互动教程,希望`idev365`能够给你带来收获。

学习教程的过程中碰到了问题,或者对idev365有什么改进意见和想法,欢迎加入idev365微信内测群,和山地人交流你的想法。