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

本文涉及的产品
云解析DNS,个人版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介:

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






相关文章
|
2月前
|
存储 C# 容器
C变量数据类型深度解析:打造高效代码的基石
C变量数据类型深度解析:打造高效代码的基石
24 1
|
2月前
|
自然语言处理 前端开发 API
解析CSS文件
【5月更文挑战第23天】解析CSS文件。在Python中,可以使用一些第三方库来帮助解析CSS文件,例如`cssutils`。
34 2
|
2月前
|
存储 安全 Go
掌握Go语言:Go语言类型转换,无缝处理数据类型、接口和自定义类型的转换细节解析(29)
掌握Go语言:Go语言类型转换,无缝处理数据类型、接口和自定义类型的转换细节解析(29)
|
19天前
|
前端开发 开发者
深入解析CSS样式表的优先级
深入解析CSS样式表的优先级
19 1
|
19天前
|
前端开发 开发者
CSS文本样式全面解析:从基础到进阶
CSS文本样式全面解析:从基础到进阶
16 0
|
2月前
|
前端开发 JavaScript Java
Java与CSS:解析在Web开发中的协同作用
Java与CSS:解析在Web开发中的协同作用
|
2月前
|
存储 安全 Java
Java语言中的数据类型深度解析
Java语言中的数据类型深度解析
|
2月前
|
安全 程序员 编译器
C语言中的枚举数据类型深入解析
C语言中的枚举数据类型深入解析
43 2
|
2月前
|
存储 C语言
深入解析C语言的动态数据类型单项链表技术
深入解析C语言的动态数据类型单项链表技术
28 0
|
2月前
|
存储 数据库连接 PHP
【PHP开发专栏】深入解析PHP数据类型与运算符
【4月更文挑战第30天】本文深入探讨了PHP的编程基础——数据类型和运算符。PHP支持整型、浮点型、字符串、布尔型、数组、对象、资源等数据类型。运算符包括算术、字符串、赋值、比较、逻辑、位、错误控制及范围运算符。通过示例展示了如何计算圆面积、判断素数和求斐波那契数列,以帮助读者更好地理解和应用这些概念。

推荐镜像

更多