第八讲：向美丽前进-向页面添加更多的内容（下）

发布时间： 2016年1月15日最后更正时间：2020年6月17日

本篇文章自发布已超过8年，
请自行评估文章价值。

继续上一讲，首先做一个知识点补充。就是margin的用法。
在本节课示例中可以看到有个写法是margin:0 auto;
这种写法的目的是，令使用该声明的元素相对于父容器(上一级容器)水平居中。
示例中，.content元素的父容器是body。
即，.content是相对于body水平居中的。
为什么margin:0 auto就会水平居中呢？

我们好好分析值的排列方法就可以看出，该元素上下外边距为0，左右外边距为自动。
既然设为自动，浏览器为了公平起见，会为左右两侧设置相同的外边距。
如果，该元素的宽度为100%，即水平方向铺满，那么左右两侧的外边距为0。
如果，该元素宽度为300px，父容器宽度为400px，那么设置margin:0 auto之后，左右两侧的外边距虽然设置的auto，但浏览器会各分配50px。
所以，margin:0 auto是用的最多的，使自身相对于父容器进行水平居中的方法。总之左右auto就可以居中。
最简单的写法：居中只要margin:auto就可以了。

下面我们继续学习示例中剩余css属性。
示例链接：
https://10.1pxeye.com/docs/lucy.html
然后右键查看源代码。
或看下面的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>美丽的页面</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #F4F4F4;
	padding: 50px;
	font-family: "Microsoft Yahei", "微软雅黑", sans-serif;
	font-size: 14px;
	line-height: 1.8;
}
.content {
	max-width: 800px;
	margin: 0 auto;
	background-color: #FFFFFF;
	padding: 30px;
}
h1 {
	font-size: 36px;
	text-align: center;
	margin-bottom: 20px;
	line-height: 1.4;
}
.content>p {
	text-indent: 2em;
}
.lyrics {
	margin-top: 30px;
	border-top: 1px dotted #000000;
	padding-top: 20px;
}
.lyrics h2 {
	font-size: 24px
}
.lyrics p {
	padding-left: 2em;
	margin: 20px 0;
}
</style>
</head>

<body>
<div class="content">
  <h1>Lucy in the sky with diamonds </h1>
  <p>《Lucy in the Sky with Diamonds》一歌由John Lennon创作（署名为Lennon-McCartney）,收录于英国摇滚乐队The Beatles1967年专辑《Sgt. Pepper is Lonely Hearts Club Band》，这张专辑成为20世纪60年代最高销量专辑，并且至今也是包括英国和印度在内许多国家的最高销量录音室专辑。Lennon的儿子Julian在幼儿园画的一张名为“Lucy — in the sky with diamonds”的画是歌曲的灵感，歌曲发行后不久，人们便推测到歌曲标题的每一个大写字母正好可以拼成LSD。虽然Lennon对此否认，BBC仍然禁止播放这首歌。</p>
  <div class="lyrics">
    <h2>歌词</h2>
    <p>Picture yourself in a boat on a river, With tangerine trees and marmalade skies<br>
      Somebody calls you, you answer quite slowly, A girl with kaleidoscope eyes.<br>
      Cellophane flowers of yellow and green,Towering over your head.<br>
      Look for the girl with the sun in her eyes, And she is gone.<br>
      Lucy in the sky with diamonds<br>
      Lucy in the sky with diamonds<br>
      Lucy in the sky with diamonds<br>
      Ah... Ah... </p>
  </div>
</div>
</body>
</html>

background-color:属性

单纯地设置背景颜色。其实直接用background属性也能设置颜色。但是background属性的用法较多。以后再细讲。|

font-family属性：

用来定义网页字体。
字体可以写一个，也可以写多个。如果浏览器不支持第一个字体，则会尝试下一个。
使用某种特定的字体,完全取决于用户机器上该字体是否可用。
比如：设定字体为“微软雅黑”，而用户电脑中没有微软雅黑，那么浏览器会尝试下一个字体。直到用户系统有的那个字体。
如果哪个都没有，那么浏览器会使用设备字体。中文系统默认是“宋体”。

设值方法：
设值的时候，如果是英文字体，而且字体名称没有空格，那么直接写字体名称就可以。
如果有空格，则需要将字体名称放在半角引号里。如下：
font-family:"Times New Roman",Georgia

中文字体中，只要不是一个字，都需要放进半角引号里。如下：
font-family:"微软雅黑","宋体"

当然，中文字体也有英文写法。
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
楷体 KaiTi

假设，设置字体为微软雅黑和宋体，推荐写法是：
font-family:"微软雅黑","Microsoft YaHei","宋体",SimSun
SimSun相当于一个英文词。所以不需要加引号。
Windows XP之后的英文系统中都有微软雅黑字体。但是英文系统中的字体名称为”Microsoft YaHei”。而不是“微软雅黑”。
所以为了页面能在英文系统下正常显示，我们都会将目标字体的中文名称和英文名称都写到font-family里。

line-height属性：

该属性用来定义行高。行高中包括文字高度。
比如，设置字体为12px。如果行高是12px那么理论上两行文字之间的距离是0px。
由于字体设计的原因，当某个字体字号设置成12px的时候，实际占位不一定是12px。有的时候会有一两个px的误差。
我们的示例当中body的行高为1.8。感觉是给body设置行高。但行高是仅限文字的，body不存在行高的。所以body里的行高是全局文字的行高。
而1.8的含义是，该行高等于同一级声明当中字号的1.8倍。即14px*1.8=25.2px
目前设置行高的单位或数值很多。具体用法我们会在之后的学习当中讲到。常用的为有像素、倍数、百分比、em。

max-width属性：

该属性用来定义最大宽度。
设置了最大宽度的容器受到左右两侧挤压时宽度会变小。主要是用于响应式网站或流体式布局设计。至于宽度的具体使用方法，会在之后的课程中很快就会与大家见面。

text-align属性：

用来设置行内元素（比如：文本）的对齐方式。
左对齐：text-align:left
居中对齐：text-align:center（加一个补充说明的话，该声明是使行内元素（比如：文本）进行水平居中的方法。跟margin:0 auto，使自身相对于父容器水平居中是不一样的。）
右对齐：text-align:right
如果不设置对齐方式的话，默认是左对齐。

下面有两个不是很常用的值：
justify-用来两端对齐。但由于兼容性问题，很少使用。
inherit-规定元素从父元素继承属性的值。其实用这个值的属性不少。就是继承的意思。假如line-height:inherit是继承父级元素的行高。总的来说inherit用的也不是很多。css里很多属性，默认都是继承的。

text-indent属性：

定义首行缩进，值可以是px，也可以是em。
示例中我们用了em。em是相对于同级字号的单位。
比如同级字号为12px，那么1em就是12px。如果字号是16px，那么2em就是32px。
由于中文的首行缩进是2个汉字的位置。所以一般会设置为2em。

border属性：

用来定义边框。边框跟外边距，内边距一样也分上下左右。以上边距（border-top）为例。
表达式为：
border-top:[边框宽度] [边框样式] [边框颜色];
举例：
border-top: 1px dotted #000000;
意思是上边框宽度为1px，虚线，颜色为黑色。
其中边框样式常用的就两种，一种是实线（solid），一种格式虚线（dotted）。

还有更多边框样式。但是浏览器兼容性问题，用的不是很多。我这里就不讲了，有兴趣的可以上网查查。
当然，按css规则，下边框就是border-bottom，左边框border-left，右边框border-right啦。

border跟外边距，内边距一样也有简写。
例如：
border:1px solid #789456
意思是：元素四边的边框宽度为1px，样式为实线。颜色为：#789456。

更多border的内容，可以上网查查。由于里面的内容很多，而又不是很常用，所以这里就不推荐链接让大家看了。
遇到边框问题的时候再学习也不迟。

评论区

发表新的留言

您可以留言提出您的疑问或建议。
您的留言得到回复时，会通过您填写的邮箱提醒您。