玩命牛的成长记录-文档样式分离

3456次阅读

文档样式分离

CSS全称叫做层叠样式表，是专门用来描述样式的语言，其实我们可以直接把style的东西写在一个新的文件中，叫做style.css，然后通过link去引用。看一个简单的例子：

test.html：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>文档样式分离</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div>我没有样式</div>
  <div class="mydiv">我引用了style.css中的样式</div>
</body>

check the result

style.css：

.mydiv {
  background-color : pink;
  color : blue;
}

在这个例子中，我们的test.html中并没有mydiv这个类样式，而在style.css中却有mydiv的定义，我们通过<link href="style.css" rel="stylesheet" />来引用style.css文件。

其实css是很强大的，我们来做一个二级菜单看看：

test.html：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>文档样式分离</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <ul class="menuBanner">
    <li class="menuItem">
      <div class="mainMenu">成功</div>
      <ul class="subMenu">
        <li class="subMenuItem"><a href="#">坚持</a></li>
        <li class="subMenuItem"><a href="#">努力</a></li>
        <li class="subMenuItem"><a href="#">永不放弃</a></li>
      </ul>
    </li>
    <li class="menuItem">
      <div class="mainMenu">荣誉</div>
      <ul class="subMenu">
        <li class="subMenuItem"><a href="#">成就感</a></li>
      </ul>
    </li>
    <li class="menuItem">
      <div class="mainMenu">做人</div>
      <ul class="subMenu">
        <li class="subMenuItem"><a href="#">善良</a></li>
        <li class="subMenuItem"><a href="#">真诚</a></li>
        <li class="subMenuItem"><a href="#">勇敢</a></li>
        <li class="subMenuItem"><a href="#">谦和</a></li>
      </ul>
    </li>
    <li class="menuItem">
      <div class="mainMenu">爱情</div>
      <ul class="subMenu">
        <li class="subMenuItem"><a href="#">包容</a></li>
        <li class="subMenuItem"><a href="#">换位思考</a></li>
        <li class="subMenuItem"><a href="#">经营</a></li>
        <li class="subMenuItem"><a href="#">表白</a></li>
      </ul>
    </li>
    <li class="menuItem">
      <div class="mainMenu">朋友</div>
      <ul class="subMenu">
        <li class="subMenuItem"><a href="#">共患难</a></li>
      </ul>
    </li>
  </ul>
</body>

check the result

style.css：

* {
  margin : 0px;
  padding : 0px;
}
.menuBanner {
  width : 100%;
  height : 50px;
  background-color : pink;
}
.menuItem {
  list-style-type : none;
  float : left;
  width : 20%;
  height : 100%;
}
.mainMenu {
  font-size : 25px;
  line-height : 50px;
  text-align : center;
  width : 90%;
  margin : 0px auto;
  background-color : red;
  cursor : pointer;
}
.subMenu {
  display : none;
}
.menuItem:hover .subMenu {
  width : 90%;
  margin : 0px auto;
  display : block;
}
.subMenuItem {
  height : 50px;
  background : black;
  border-bottom : 1px solid white;
  text-align : center;
  list-style-type : none;
}
.subMenuItem a {
  color : white;
  font-size : 25px;
  line-height : 50px;
  text-decoration : none;
}

二级菜单用css完全可以实现，不需要js帮助。而且文档和样式分离后，html只有40多行，css也是40多行，并且分工明确，管理起来也很方便，实在是非常好的一种解决方案。

文档样式分离是一种非常重要的技术，实际做网站几乎全部都是采用这种方式，所以一定要掌握哦！

如果您觉得此教程不错，想支持一下，您可以通过支付宝扫码给我们一点赞助

，不要超过100元哦！

评论请先登录