w3c系列CSS之路(二):错误解析和基本数据类型

有时候当你发现你写的样式代码并没有如期执行时,很可能是你打错字了。但是其他元素的样式并没有失效,这跟其他语言还是有区别的,比如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-increment 属性
用法: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

时间: 2024-08-17 01:29:55

w3c系列CSS之路(二):错误解析和基本数据类型的相关文章

w3c系列CSS之路(五):详解visual formatting model

本文是对w3c系列CSS之路(四)种的VFM的完善和补充,官方原文:http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html 1 containing block containing block(包含框)上节有提到,这里给出更详细的介绍.一个盒子的位置和大小通常都跟包含它的矩形框有关,这个矩形框就是这个盒子的包含框.标准给出了一个元素的containing block的定义: 首先,根元素的居住的包含框叫做initial containi

nginx文件类型错误解析漏洞

今天早上看到QQ群里有人发了个消息说nginx 服务器与PHP组合有0day漏洞! 正准备部署这个软件,漏洞就来了 具体的方式转载一下吧! 第一次转载文章 链接地址   :http://www.80sec.com/nginx-securit.html nginx文件类型错误解析漏洞 Write by admin in 未分类 at 2010-05-20 18:24:55 漏 洞介绍:nginx是一款高性能的web服务器,使用非常广泛,其不仅经常被用作反向代理,也可以非常好的支持PHP的运行.80

我的VSTO之路(二):VSTO程序基本知识

原文:我的VSTO之路(二):VSTO程序基本知识 开始之前,首先我介绍一下我的开发环境:VS2010 + Office 2010,是基于.Net framework 4.0和VSTO 4.0.以下的范例代码都基于这个,如果你使用的是VS2008,那么问题也不大,基本可以移植过去.需要注意的是.Net framework 4.0中增加了dynamic类型和可选参数,而这两点新的特性在VSTO 4.0中被广泛使用,新特性的详细内容我就不介绍了,(其实介绍的地方很多,Google一下就可以了),移植

jQuery原理系列-css选择器的简单实现_jquery

jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做移动端开发的,使用jQuery的必要性大大降低. 用js代码实现css选择器,必然是用正则表达式来识别字符串了,当然浏览器提供的原生api 效率更高,以下代码只做原理性展示,并未优先性能, 例如 1)查找id显然是用document.

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(15)-用户登录详细错误和权限数据库模型设计

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(15)-用户登录详细错误和权限数据库模型设计     ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装    (5):前台Jquery easyUI实现    (6):EF上下文实例管理    (7):DBSession的封装   (8):DBSession线程内唯一     (9)

Windows平台 ORA-12560 错误解析

                                                                       Windows平台 ORA-12560 错误解析   ORA-12560: TNS: 协议适配器错误的问题,造成ORA-12560: TNS: 协议适配器错误的问题的原因有三个:   1.监听服务没有起起来. 解决步骤:windows平台个一如下操作:开始---程序---管理工具---服务,打开服务面板,启动oraclehome92TNSlistener服

ORA-01103错误解析

ORA-01103错误解析 作者:吴伟龙 Name: PrudenceWoo QQ:286507175msn:happy-wuweilong@hotmail.com   1.环境介绍:    这是一测试库,我将参数文件,控制文件,数据文件全部删除之后,做数据恢复,但是 我把控制文件和参数文件都恢复回来了,可数据库却怎么也打不开,报ORA-01103: database name 'WWL' in control file is not 'DUMMY'错误   我的数据库名称是:WWL   2.执

Microsoft JET Database Engine 错误 标准表达式中数据类型不匹配。

问题描述 Microsoft JET Database Engine 错误 标准表达式中数据类型不匹配. <% Dim XMID,pages2,xyz XMID = request("XMID") pages = request("pages") pages2 = request("pages2") xyz= request("xyz") Dim Rs2 Set Rs2 = oConn.Execute("SEL

jquery解析json-怎么解析,原来数据类型为List&amp;amp;lt;Map&amp;amp;lt;Object,Object&amp;amp;gt;&amp;amp;gt;类型的json数据?

问题描述 怎么解析,原来数据类型为List<Map<Object,Object>>类型的json数据? 我的后台代码: public void getDemandFrom(){ List> list = demandService.getDemandFrom(); //将数据装换成json Struts2Utils.renderJson(JsonUtil.object2json(list)); } 我的前台代码: function request(){ $.get("