HTML+CSS编写静态网站-21 在css中使用class

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

现在，我们来对导航链接做更多的事情。具体的说，我们想要突出显示当前选择的导航链接，这样，访问者就知道它将访问哪个页面。

所以我们进入我们的html，在这里。我们将添加一个称为class的属性。class和id类似，但是区别是你可以在一个页面上有多个元素共享一个class。但是， ID必须是唯一的，它不能在单个页面上重复。所以，让我们添加这个class，它的值为selected。这个值你可以随意的取名，但是确保在css文件中有对应的名称。

 
 
<nav>

<ul>

<li><a href = "index.html" class="selected">Vedio</a></li>
实际上，我们可以在这个特定的实例中使用一个id，但添加一个class将给我们更大的灵活性，以防万一有变化的情况，我们可以有多个选择。

接下来，我们需要在CSS中应用一些样式来匹配我们的selected。所以，来到css文件，我将在这里创建一个新规则： nav a，然后为它应用class。为了做到这一点，我们使用点。然后输入类selected，然后我们将在这里打开规则。

 
 
nav a.selected{

       

}
所以，基本上任何在nav中的a元素。只要应用了selected的class。就将获得这个样式。

所以，我们在这里应用一个新的颜色：

 
 
nav a.selected{

       color:#32673f;

}
这是深绿色，所以只要一个a元素有selected属性，它就会是这种深绿色的颜色。

现在，如果想要将这种深绿色应用到悬停状态，这时，我们需要把这个选择器分成两个选择器。并说nav a，然后应用a的悬停样式：hover。

 
 
nav a.selected, nav a:hover{

color:#32673f;

}
所以任何时候，我们用鼠标悬停在这个链接上，它会变成这深绿色。

让我们保存，刷新，看看它的样子。

正如你可以看到，vedio文本现在是一个更深的颜色，这是因为selected的class已经应用。而且，如果我将光标悬停在其他链接上，您会看到悬停状态激活并更改颜色。这就是hover的用处。

接下来，我们要做的是改变body元素的背景颜色和文本颜色。我们将背景设置为白色，将文本颜色设置为灰色。

所以，让我们切换回我们的CSS，滚到最下面，我要输入：

 
 
body{

       background-color:#fff;

}
然后我将文本颜色设置为#999。

 
 
body{

background-color:#fff;

       color:#999;

}
让我们继续保存，刷新。我们向下滚动到页脚，你可以看到现在现在的文本是浅灰色的稍后，我们会在几个地方再添加颜色。

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

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

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