浅谈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 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
vue完美实现el-table列宽自适应
May 08 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
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
Smarty模板语法详解
2019/07/20 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
JS常用正则表达式总结
2013/11/12 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
Python中使用中文的方法
2011/02/19 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
python_mask_array的用法
2020/02/18 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
python爬虫---requests库的用法详解
2020/09/28 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
全国文明单位申报材料
2014/05/31 职场文书
药剂专业求职信
2014/06/20 职场文书
学期个人工作总结
2015/02/13 职场文书
推广普通话的宣传语
2015/07/13 职场文书
优质服务标语口号
2015/12/26 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python
Vue+Flask实现图片传输功能
2022/04/01 Vue.js
排查MySQL生产环境索引没有效果
2022/04/11 MySQL