浅谈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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
javascript操作数组详解
Dec 17 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
微信小程序实现左滑删除效果
Nov 18 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
我的群发邮件程序
2006/10/09 PHP
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
python文件操作相关知识点总结整理
2016/02/22 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
python批量修改文件编码格式的方法
2018/05/31 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
Django model序列化为json的方法示例
2018/10/16 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
J2EE系统只能是基于web
2015/09/08 面试题
服务承诺书
2015/01/19 职场文书
干部考核工作总结2015
2015/07/24 职场文书
情况说明书格式及范文
2019/06/24 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS