浅谈js和css内联外联注意事项


Posted in Javascript onJune 30, 2016

简单说这两个问题其实是同一个问题,但是网上找了好久也找不到方法,外联的js和css文件里不能有任何HTML的标记注释,一旦有,浏览器就疯了!一去掉就好了!!!

问题:起因是网上看到一个css的表格样式,觉得挺好看,就打算放在自己的Asp.Net程序里,开始的时候我放在aspx文件里,显示正常

浅谈js和css内联外联注意事项

然后我就打算把css和js放在独立的文件里,这时候浏览器就疯掉了,显示的效果跟原先内联的时候完全不同,就好像压根没有看到我的css样式表一样,但是有部分样式又被执行了,有部分样式又被忽略了,比如表头的thead就被执行的好好的,但是表格的边框被强制成了2px;被一个小问题困扰真不爽!

浅谈js和css内联外联注意事项

解决:解决方法其实非常简单,把js和css文件里的所有HTML标记<>、注释<!-- -->,全部去掉,然后就ok了!

分析:昨天晚上查了相关资料里提到“浏览器在没有找到相关的样式表的时候,会用调用它内部的css渲染参数来工作”,

浅谈js和css内联外联注意事项

上图摘自大漠著:《图解CSS3:核心技术与案例实战》,这本书也是目前为数不多的css3的书,虽然看的是电子版,但是考虑会买一本!

用浏览器自带的开发人员工具一看,果然如此,它不能解释的时候,就私自调用了浏览器自带的渲染参数,下图中-webkit-开头的那两段,把表格的边框设为了2px;

浅谈js和css内联外联注意事项

看了一下自己的JS文件,把这一对HTML标记去掉<script type="text/javascript"></script>就ok了,里面的<!-- -->注释标记可以保留;

再看了一下自己的css文件,里面有<!-- CSS goes in the document HEAD or added to your external stylesheet -->,css样式文件里连HTML的注释也不能有,否则就会出现css被部分解释的奇怪现象,一去掉也就好了,真是太憋屈了,原来自己的错误居然就是这个小小的注释引起的。

那么css文件怎么写注释呢? 用c的注释方法就可以了/* 注释 */

以上这篇浅谈js和css内联外联注意事项就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
详解vue 组件
Jun 11 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 #Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 #Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 #Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 #Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 #Javascript
浅谈JS中json数据的处理
Jun 30 #Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 #Javascript
You might like
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
10款最好的Python开发编辑器
2019/07/03 Python
Python求凸包及多边形面积教程
2020/04/12 Python
python代码如何注释
2020/06/01 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
2013年高中生自我评价
2013/10/23 职场文书
英语自荐信范文
2013/12/11 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
周年庆典答谢词
2015/01/20 职场文书
岳麓书院导游词
2015/02/03 职场文书