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

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015

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

首先，设置字体重量为正常大小。因为标题元素默认是加粗的，然后我将设置行高为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;

}
所以，让我们保存并刷新页面。如果我在这里调整浏览器窗口，它将截断我们的图像，我们将在后面的课程中解决这个问题。但现在，我们的手机网站已经初具雏形了。我们在这里有我们的footer。我们有header在顶部。这里还有一些间距的问题，还有很多对齐的问题，就像我说的图像还是太大了。这里有一些问题，但我们将会在后面的课程中解决所有的这些问题。

最后，在CSS中使用字体和属性排版的练习越多，你就会越熟练。重要的是，你要尽可能多地实践，因为良好的排版技能将帮助你在建立任何你想设计的网页。

更多精彩内容尽在视频中！

本文固定链接：http://www.oxox.work/web/html-css/adjust-text/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/adjust-text/