样式表的导入与链接的区别

96 阅读 0 评论 64 点赞

我是靠谱客的博主花痴香烟，最近开发中收集的这篇文章主要介绍样式表的导入与链接的区别，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

 
 <html>
<head>
<title>css样式</title>
<!--链接样式-->
<!--
1.网页加载前加载样式
2.link是标签属于html语言的范畴
3.可以通过javaScript控制link标签改变样式,达到换肤效果
-->
<link id="face" rel="stylesheet" type="text/css" href="css/content.css">
<script language="javaScript">
  //换肤函数 
   function switchFace(){
      var faceNode;
      faceNode=document.getElementById("face");
      faceNode.href="css/contentFace.css";
      }
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="banner">
    <tr><td><img src="images/banner1_left.jpg" border="0"></td></tr>
</table>
<table cellpadding="0" cellspacing="0" class="links">
    <tr><td><a href="#">首页导读</a><a href="#">在线用户</a><a href="#">查询网友</a><a href="#">在线好友</a><a href="#">好友名单</a><a href="#">查看讯息</a><a href="#">发送讯息</a></td></tr>
</table>
<input type="button" value="====换肤====" name="interface" onClick="switchFace()"/>
</body>
</html>
 

 
 <html>
<head>
<title>css样式</title>
<!--导入样式-->
<!--
1.网页加载后加载样式
2. @import属于css语言的范畴，所以不能换肤。
-->
<style type="text/css">
        @import url(css/content.css);
</style>
</head>
<body>
<!--
<table cellpadding="0" cellspacing="0" class="banner">
    <tr><td><img src="images/banner1_left.jpg" border="0"></td></tr>
</table>
-->
<table cellpadding="0" cellspacing="0" class="links">
    <tr><td><a href="#">首页导读</a><a href="#">在线用户</a><a href="#">查询网友</a><a href="#">在线好友</a><a href="#">好友名单</a><a href="#">查看讯息</a><a href="#">发送讯息</a></td></tr>
</table>
</body>
</html>
 