浅谈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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
关于JavaScript的一些看法
May 27 Javascript
JavaScript Timer实现代码
Feb 17 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
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
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
php跨站攻击实例分析
2014/10/28 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
js读取cookie方法总结
2014/10/31 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
用js编写留言板
2020/03/17 Javascript
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
Python 的描述符 descriptor详解
2016/02/27 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
python实现图像识别功能
2018/01/29 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
澳大利亚相机之家:Camera House
2017/11/30 全球购物
运动会解说词100字
2014/01/31 职场文书
面试后的感谢信范文
2014/02/01 职场文书
乔迁之喜主持词
2014/03/27 职场文书
秋天的雨教学反思
2014/04/27 职场文书
数学系毕业生求职信
2014/05/29 职场文书
小学生学习保证书
2015/02/26 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python