胡博君讲解CSS中注释失效的原因

在Dreamweaver自动生成的网页中,head中的样式表往往是这样的形式:

<style type="text/css">

<!--

......

-->

</style>

在样式表的开头和结尾会自动添加一套html注释标记:<!--和-->。如果以为这个跟html的注释标记是一样,用这个写注释,会导致样式表定义失效。

当<!--后面加上字之后,下面的内容就全被忽略了,直到</style>结束。

这是一个很容易被忽视的低级错误。原因很简单,CSS的注释语法是:

/ * ...... * /

而不是:

<!--

......

-->

后者是正儿八经的html语法。两者不是一回事儿。

那么,为什么自动生成的style中要有这么一对html的注释标记呢?

这是为了兼容老版本的浏览器。老的浏览器不支持style,所以遇到style时,会把style样式单的内容显示在页面上。但是老版本的浏览器认识html的注释标记,所以加上标记

后,这部分内容就会被当作注释忽略掉,样式单也就不会在页面上显示了。

而支持style的浏览器,则会忽视<!--标记,从而正常使用样式单。大概这也是为啥样式表中的注释要换成标记的原因之一吧。

总结:如果你用<!--    -->这个注释在css样式中会导致错误的发生,这个时候请换成/**/这种注释方式。

欢迎大家收看我的在线Java全套免费教学超清视频:

http://v.youku.com/v_show/id_XODQ1NjU0NDc2.html   这是其中的一个视频连接,大家可以拖动到优酷视频下方,订阅我的账号,因为以后我会有更多视频免费提供

百度搜索:输入Fcs_D调的码农 ,或者输入"胡博君"就能看到我的很多视频

或者加我的微信号:fcsboy     我可以及时通过微信通知你们

QQ学习群:237053693

时间: 2024-10-10 11:59:14

胡博君讲解CSS中注释失效的原因的相关文章

胡博君收集JS中的响应事件

onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown IE4.N4 按下鼠标时触发此事件 onmouseup IE4.N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3.N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4.N4 鼠标移动时触发此事件 onmouseout IE4.N3 当鼠标离开某对象范围时触发此事件 onkeypress IE4.N4 当键盘上的某个键被

胡博君解Java中简单工厂模式

为什么要用简单工厂模式: 我们都知道程序是分开的,客户端中有程序,服务器端有程序,一般来说我们写的main方法中的程序都是在客户端电脑中的,按照我们学习的时候喜欢的写法: //一般来说这个程序都是在客户电脑中,俗称调用者 public  class  Text{ public static void main(String[] args) { Person  p  =  new  Person(); p.getInfo(); } } //一般这个程序都在服务器中,俗称被调用者,而且是可以修改的

胡博君谈CSS3中的边框的各种效果

以下是css3定义圆角: #main{ margin:20px; border:1px solid #E1E1E1; -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; padding:20px; } 以下是html中对样式的引用: <div id="main"> </div> 以下是css3定义边框阴影: 实例 向 div 元素添加方框阴影: div { box-shadow:

胡博君浅谈HTML5中的响应式布局

通过媒体查询的设置,我们可以根据屏幕宽度.屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格.具体的使用方法有以下两种: 1.通过link标签: <link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" /> 2.CSS中直接设置: @media

css中margin-top或者margin-bottom失效

css中margin-top是设置容器的外间距了距离了,div嵌套后,margin-top或者margin-bottom失效了,在网上打到下面的方法可以解决. 设计页面的时候遇到一个神奇的问题,下面是html的代码 <body>   <div class="homeNav">      <div class="homeCategory  ">      </div>       </div></bod

[ css 补充 vertical-align ] css中补充的vertical-align属性讲解

一.关于今天,本文,及其他 今天是个特殊的日子,因为今天是汶川地震两周年的日子,我很悲鸣:今天又是国际护士节,看到微博上护士照横流,我很欣慰. 一段放松的YY后,进入正题.上个月21号,有位同行留言想让我讲讲vertical-align属性,我其实对vertical-align属性也是略知皮毛,要说岂敢谈“讲解”,就说说我对vertical-align属性的一些理解吧,纯属个人见解,若有不准确之处还望见谅.还有,vertical-align属性牵扯到的知识实在是太多了,不是一篇文章就可以讲清楚的

[ css 矩阵 Matrix 属性 ] css中transform的Matrix(矩阵)属性讲解及实例演示的区别

一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵)”的时候,难免会心生畏惧(即使你已经学过),正常心理.实际上,这玩意确实有点复杂. 然而,这却是屌丝逆袭的一个好机会. CSS同行间:你是不是有这样的感觉:哎呀呀,每天就是对着设计图切页面,貌似技术没有得到实质性地提升啊,或者觉得日后高度有限! 我们应该都知道二八法则(巴莱多定律),即任何一组东西中

CSS中position属性三大定位方式讲解

Relative Relative的元素相对于它原本的位置来做定位,但是它的位置仍然存在,即使它作了偏移,它周围的元素也不会占领的它的位置.所以,Relative属性的盒子会覆盖其他的盒子,而不是推开其他盒子. 如果一个元素是相对定位(甚至它还做了偏移),它周围的元素在排版时参考的依然是那个元素原本的位置(指在没有偏移时的位置). 如果同时声明top和bottom的值,那么top值的优先级更高.如果同时声明left和right的值,那么优先级取决于网页的语言(例如,英语法语德语西班牙语).比如,

胡博君简单总结JS中的分享到代码

var shareData = { sTitle: "Let's go! ", sDesc: "我的牙都酸倒啦", sContent: "你还等什么!!!", sImgurl: "", sLink: "", sCallback: "http://mp.weixin.qq.com/s?__biz=MjM5NDE0MTEyNg==&mid=201488063&idx=1&sn=