浅谈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对checkbox操作 (循环获取)
May 20 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
AngularJS语法详解
Jan 23 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
JSONP基础知识详解
Mar 19 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
PHP 函数语法介绍一
2009/06/14 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
php实现微信模板消息推送
2018/03/30 PHP
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
js+audio实现音乐播放器
2020/09/13 Javascript
[01:08:44]NB vs VP 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python生成日历实例解析
2014/08/21 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
python圣诞树编写实例详解
2020/02/13 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
加热夹克:RAVEAN
2018/10/19 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
《广玉兰》教学反思
2014/04/14 职场文书
减负增效提质方案
2014/05/23 职场文书
大学生入党自荐书
2015/03/05 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
导游词之西安骊山
2019/12/03 职场文书
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB