前言
网页制作过程中，难免需要用到 CSS 以及 JS。一般情况下我们为了便于代码维护都会将 CSS、JS 分别写在不同的文件中以实现结构、样式、行为的分离，但是对于一些特殊情况，我们可能需要直接在元素中内嵌样式，或者直接在文档中内嵌脚本，这里就简单整理一下 CSS 与 JS 的几种引入方式，做个简单的对比，方便理解。
元素内嵌
1
2
| <div style='color:red;'>mldxe's blog</div> // 元素内嵌 CSS
<button onclick="alert('mldxe's blog')">按钮名称</button> // 元素内嵌 JS |
<div style='color:red;'>mldxe's blog</div> // 元素内嵌 CSS
<button onclick="alert('mldxe's blog')">按钮名称</button> // 元素内嵌 JS
文档内嵌
1
2
3
4
5
6
7
8
9
10
11
| // 文档内嵌 CSS
<style>
.mycss {
color: red;
}
</style>
// 文档内嵌 JS
<script type=”text/javascript”>
alert('mldxe's blog');
</script> |
// 文档内嵌 CSS
<style>
.mycss {
color: red;
}
</style>
// 文档内嵌 JS
<script type=”text/javascript”>
alert('mldxe's blog');
</script>
外部引用
1
2
| <link rel='stylesheet' href='css/mycss.css' /> //外部引用 CSS
<script type=”text/javascript” src=”js/bxtk.min.js”></script> //外部引用 JS |
<link rel='stylesheet' href='css/mycss.css' /> //外部引用 CSS
<script type=”text/javascript” src=”js/bxtk.min.js”></script> //外部引用 JS
文件中引入
1
2
3
4
5
6
7
8
| / CSS 文件中引入其他 CSS
@import “myothercss.css”
.mycss {
color:red;
}
// JS 文件中引入其他 JS
document.write(“<script language=javascript src=‘/js/myotherjs.js’></script>”); |
/ CSS 文件中引入其他 CSS
@import “myothercss.css”
.mycss {
color:red;
}
// JS 文件中引入其他 JS
document.write(“<script language=javascript src=‘/js/myotherjs.js’></script>”);