1454次阅读
文档样式分离

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元哦!
评论请先登录