网站引入 JS/CSS 的几种方式

avatar 2019年1月7日22:10:17 评论 1,047

网页制作过程中,难免需要用到 CSS 以及 JS。一般情况下我们为了便于代码维护都会将 CSS、JS 分别写在不同的文件中以实现结构、样式、行为的分离,但是对于一些特殊情况,我们可能需要直接在元素中内嵌样式,或者直接在文档中内嵌脚本,这里就简单整理一下 CSS 与 JS 的几种引入方式,做个简单的对比,方便理解。网站引入 JS/CSS 的几种方式

元素内嵌

<div style='color:red;'>路人博客——一款专注技术交流,关注网络安全的博客!<</div>    // 元素内嵌 CSS
<button onclick="alert('路人博客——一款专注技术交流,关注网络安全的博客!<')">按钮名称</button>    // 元素内嵌 JS

文档内嵌

// 文档内嵌 CSS
<style>
    .mycss {
        color: red;
    }
</style>

// 文档内嵌 JS
<script type=text/javascript”>
    alert('路人博客——一款专注技术交流,关注网络安全的博客!<');
</script>

外部引用

<link rel='stylesheet' href='css/mycss.css' />   //外部引用 CSS
<script type=”text/javascript src=”myjs.js”></script>    //外部引用 JS

CSS/JS 文件中引入

// CSS 文件中引入其他 CSS
@import myothercss.css
.mycss { 
    color:red;
}

// JS 文件中引入其他 JS
document.write(“<script language=javascript src=‘/js/myotherjs.js’></script>”);

注意:在 CSS 样式表中可以出现在 @import 语句之前的只有 @charset ,否则会报错。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
广告也精彩
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: