有时候当你发现你写的样式代码并没有如期执行时,很可能是你打错字了。但是其他元素的样式并没有失效,这跟其他语言还是有区别的,比如C,语法出错编译就会报错,更别说执行了。CSS对于语法错误有它自己的解析机制,下面我们就来探讨一下。
1.错误处理
要想解析语法错误,首先得明白语法,一些基本的用法这里就不说了,说些关键点:
1.注意关键字的使用。不要在关键字外加引号。比如:color:"red";是不对的。
2.支持厂商对关键字的扩展。比如_height在非IE浏览器下是非法无效的,但在IE6下却是有效的。利用这个特性衍生出了 css hack。
3.对于html,CSS是大小写不敏感的。但是对于XML却相反。
4.@规则:@+标识符(比如@import)。CSS 2.1 user agents must ignore any '@import' rule that occurs inside a block or after any non-ignored statement other than an @charset or an @import rule.
举个例子:
@import "subs.css"; h1 { color: blue } @import "list.css";CSS会忽略第二个@import。上面这段代码等效于:
@import "subs.css"; h1 { color: blue }有种情况例外,就是在import后面加了media type类型指定样式媒体目标。比如:
@import "subs.css"; @import "print-main.css" print;/*此段有效*/ @media print { body { font-size: 10pt } } h1 {color: blue }css对于错误的处理态度就是无视之,下面看看都有哪些情况。
1.1未知属性和非法值
忽略未知属性和非法值,如果你写了mheight:100px;;这样的代码,CSS会直接忽略它,因为mheight是未知属性。同样,height:100kg;也会被无视,因为100kg是非法值。但是,之前说了CSS支持厂商对关键字的扩展,所以某些属性对一般浏览器是未知的,但对于特定浏览器却是正确的,比如IE6的*height。
1.2畸形的声明
浏览器解析声明时会检测其()、{}、“”[]等匹配规则,遇到错误浏览器必须进行处理,但是怎么处理标准并没有说。比如p{color}会被无视。
1.3@+不可用的标识符
@import没错,@important就不对了。1.4样式表的意外结尾
标准规定浏览器必须关闭需要成对出现的结构。比如:
@media screen { p:before { content: 'Hello
需要被解析成:
@media screen { p:before { content: 'Hello'; } }但是,很多浏览器并没有按标准来修复它。
1.5意外的字符串结尾
如果字符串结尾没有引号关闭它,浏览器必须要关闭它并忽略此段非法声明。
p { color: green; font-family: 'Courier New Times color: red; color: green; }需要被解析成:
p { color: green; color: green; }但是,很多浏览器并未按标准来修复它。
说了这么多,其实我只想说一句:非法的都忽略!所以不用担心写错一个字而让浏览器崩溃。至于标准所说的错误解析规则很多浏览器并没有实现这一点,我觉得也不重要,因为你就不应该犯这种低级错误!
2.基本数据类型
这节跟上节基本没啥关系啊,标准放在了同一章,这里就一起讲吧....
2.1整数和实数
就是数值嘛~,整数,小数,负数都支持啦~
2.2长度值
长度值的格式:数值+单位。如果数值为0,单位可有可无。
单位又分为相对单位和绝对单位,相对单位有:
em:em长度等效于作用在该节点"font-size"上的值。比如:
div{ font-size:10px; height:2em;/*这里等价于20px*/ }ex:ex长度相对于一个小写字母x的高度。通常被用在内容不包含"x"的元素上,这.....,不知道为什么会有这么奇葩的相对单位,反正没怎么见过。
绝对单位比较多:
in:英寸,等效于2.54cm;
cm:厘米,等效于10mm;
mm:毫米;
pt:点,等效于1/72 in;
pc:皮卡,等效于1/6 in;
px:像素,等效于0.75pt;
绝对单位都可以相对转换,用起来也比较简单,由于开发都是基于screen的,所以只用到了px.
2.3百分值
数值+%,怎么用大家都知道的。
2.4 URL和URI
URL统一资源定位符和URI统一资源标识符,这也算是基本单位.....二者的关系就不多说了。
2.5 Counters
这个属性之前没用过也没见过,脑补一下:
counters计数器可以对标签自动排序,通过counter-reset属性和counter-increment属性结合来实现。
counter-reset 属性
用法:counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
说明:利用这个属性,计数器可以设置或重置为任何值,可以是正值或负值。如果没有提供 number,则默认为 0。
注释:如果使用display: none,则无法重置计数器。如果使用visibility: hidden,则可以重置计数器。
用法:counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
说明:利用这个属性,计数器可以设置或重置为任何值,可以是正值或负值。如果没有提供 number,则默认为 0。
注释:如果使用display: none,则无法重置计数器。如果使用visibility: hidden,则可以重置计数器。
counter-increment 属性
用法:counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
说明:利用这个属性,计数器可以递增(或递减)某个值,这可以是正值或负值。如果没有提供 number 值,则默认为 1。
注释:如果使用了display: none,则无法增加计数。如使用visibility: hidden,则可增加计数。
用法:counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
说明:利用这个属性,计数器可以递增(或递减)某个值,这可以是正值或负值。如果没有提供 number 值,则默认为 1。
注释:如果使用了display: none,则无法增加计数。如使用visibility: hidden,则可增加计数。
我们来看个例子加深理解:
<body> <h1></h1> <h2></h2> <h2></h2> <h1></h1> <h2></h2> </body>
body { counter-reset:num_h1; background:#aaa; } h1 { counter-reset:num_h2; background:#f0f; } h1:before { content:"类别 " counter(num_h1) ; counter-increment:num_h1; } h2:before { counter-increment:num_h2; content:counter(num_h1) "." counter(num_h2) ; }
结果如下:
2.6 颜色值
颜色值的表示方法有以下几种:
em { color: #f00 } /* #rgb */ em { color: #ff0000 } /* #rrggbb */ em { color: rgb(255,0,0) } em { color: rgb(100%, 0%, 0%) }CSS内置了一些颜色关键字,平时测试的时候可以用,做产品实际用的很少。
2.7字符串
字符串被包含在单引号或双引号之间,这点跟JS一样。
3.总结
看w3c还是收货不少的,最后附上本节官方链接:
http://www.w3.org/TR/CSS2/syndata.html