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

少羽.
少羽.
少羽.
3604
文章
92
评论
2019年1月7日22:10:17网站引入 JS/CSS 的几种方式已关闭评论 4.3K 739字阅读2分27秒

网页制作过程中,难免需要用到 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 ,否则会报错。

少羽.
  • 本文由 发表于 2019年1月7日22:10:17
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
网站右键菜单显示优化【纯代码】 探索之路

网站右键菜单显示优化【纯代码】

网上有很多修改右键菜单的教程,看了下很多教程代码要么有很多莫名其妙的部分,要么无法使用,想来是由于转载以及随意删减代码导致的。看了下这个功能觉得还不错,遂将其集成到了自己网站上。同时为了避免自己调试网...
响应式设计为什么要求缩略图比例尺寸相同 探索之路

响应式设计为什么要求缩略图比例尺寸相同

摘要响应式主题模板目前大行其道,最大的好处就是一套模板能够兼容多个终端,而无需为不同的终端做特定的主题模板,个人认为这是未来移动互联网浏览最佳解决方案,而不是将网站转化成APP,没人喜欢在自己的手机上...
多图讲解熊掌号到底有什么用 技术园

多图讲解熊掌号到底有什么用

熊掌号已经推出有将近一年了,现在依旧偶尔有网友问熊掌号到底能做什么的问题,网上也有很多大神给出了比较专业的回答,但是个人感觉这种专业的回答并不能给新手小白一个直观的感受,特截图几幅来简单说一下熊掌号对...
禁用 WordPress 5.5 图片延迟加载功能 WordPress

禁用 WordPress 5.5 图片延迟加载功能

WordPress 5.5除了不断优化修改区块编辑器之外,还增加了几个新功能,其中的图片延迟加载功能,经本人测试,除了在火狐下有效果,在Chromium内核的浏览器中无效,难道是开发人员也和我一样只用...
广告也精彩