HTML+CSS编写静态网站-24 调整页面文本

这节课。我们来将重新设置页面上的文本。

首先，设置字体重量为正常大小。因为标题元素默认是加粗的，然后我将设置行高为0.8 em：

h1{ font-family:'changa one', sans-serif;margin:15px 0;font-size:1.75em; font-weight:normal; line-height:0.8em; }

line-height属性用于确定每行文本之间的距离。在段落文本中这个属性更重要，而且效果更明显。但是这里我们也要调整一下。这里，我们再次使用em作为单位。

现在让我们为第二级标题添加样式。

这里font-size我们设置为是0.75 em。margin将为-5px，0，0;。然后font-weight是normal。

h2{ margin:-5px 0 0; font-size:0.75em; font-weight:normal;}

这里有一个属性和我们之前略有不同，就是边距属性。它设置了三个值，而不是像我们以前一直使用两个。在这里，第一个值用于设置顶部边距。第二个值，设置左右边距。第三个值设置底部边距。换句话说，此元素只有顶部才有边距。这里把顶部的边距设为负值，实际上会使元素周围的其他元素与这个元素更接近，而不是更远。当你想要元素更紧密在一起，特别是当你设计排版时，这是我们经常用到的技术。

接下来，来到CSS文件的顶部，我要再次选择body元素，之前，我们已经设置了body中的颜色，这里我想要把其他设置从我们的颜色分开。这样更容易阅读。因此，我们将在这里创建第二个body选择器。

这里，我们把字体设置为Open Sans。后面是Sans Serif。这样，网站上几乎所有一切字体都使用Open Sans，因为我们将它应用到body中。所以，除了我们的标题，其他字体应用于它。

/* ************************************** GENERAL************************************** */ body{ font-family:'Open Sans', sans-serif;} #wrapper{

接下来，我们还要对导航和页脚部分来应用样式。我们先复制COLORS这个多行注释来创建一个新的部分。把这个多行注释粘贴到COLORS的上面，把它改为NAVIGATION。

/* **************************************NAVGATION************************************** */ /* **************************************COLORS************************************** */

然后我要在这里选择我们的nav元素。实际上，我们已经有了一个nav选择器，但是，这一次，我们不选择颜色属性就可以了。其实你也可以把它们放在一起，我只是为了让代码更加明确。

我把text-align设为center。设置padding为10px和0。然后我要对顶部应用一些边距，margin:20px 0 0;。

/* ************************************** NAVGATION************************************** */ nav{ text-align:center; padding:10px 0; margin:20px 0 0;}

现在我要再次复制这个多行注释，在我们的导航之后，我将为footer创建一个新的多行注释：

nav{ text-align:center;padding:10px 0;margin:20px 0 0;} /* **************************************FOOTER************************************** */

我将选择我们的footer，这里，我们将字体大小设置为0.75 em。所以在我们的页脚中的字体将相对较小。我们将文本对齐设置为中心，接着。我们将顶部的填充设置为50像素，所以我们实际上在这里使用一个新的属性:填充顶部。这只是另一种方式来指定我们需要的顶部填充，然后最后，我们将颜色设置为非常浅灰色的颜色。

/* ************************************** FOOTER************************************** */ footer{ font-size:0.75em; text-align:center; padding-top:50px; color:#ccc;}