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

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 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






相关文章
|
28天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
19天前
|
Dart 安全 编译器
Flutter结合鸿蒙next 中数据类型转换的高级用法:dynamic 类型与其他类型的转换解析
在 Flutter 开发中,`dynamic` 类型提供了灵活性,但也带来了类型安全性问题。本文深入探讨 `dynamic` 类型及其与其他类型的转换,介绍如何使用 `as` 关键字、`is` 操作符和 `whereType&lt;T&gt;()` 方法进行类型转换,并提供最佳实践,包括避免过度使用 `dynamic`、使用 Null Safety 和异常处理,帮助开发者提高代码的可读性和可维护性。
69 1
|
3月前
|
前端开发
背景滑动,动感加倍:CSS动画对角线效果全解析!
背景滑动,动感加倍:CSS动画对角线效果全解析!
|
3月前
|
存储 关系型数据库 MySQL
MySQL 中的 BLOB 数据类型深入解析
【8月更文挑战第31天】
433 0
|
3月前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
55 0
|
3月前
|
前端开发 JavaScript 开发者
【前端革新力】React与CSS-in-JS完美邂逅:从styled-components到emotion,全面解析样式管理新趋势的实战应用与优势剖析!
【8月更文挑战第31天】CSS-in-JS 作为一种新兴的样式管理方式,近年来在前端社区受到广泛关注。它将样式嵌入 JavaScript,实现了样式与逻辑的高度耦合,提升了开发效率并解决了全局样式污染等问题。本文通过具体代码示例,探讨 CSS-in-JS 在 React 开发中的应用,并分享实践心得。首先介绍了 CSS-in-JS 的基本概念,然后详细展示了如何使用 styled-components 和 emotion 这两个流行库创建样式化组件。
154 0
|
4月前
|
消息中间件 JSON NoSQL
Redis深度解析:核心数据类型之hash、list、set
Redis深度解析:核心数据类型之hash、list、set
|
3月前
|
存储 缓存 NoSQL
Redis深度解析:部署模式、数据类型、存储模型与实战问题解决
Redis深度解析:部署模式、数据类型、存储模型与实战问题解决
|
5月前
|
前端开发 开发者
深入解析CSS样式表的优先级
深入解析CSS样式表的优先级
|
4月前
|
缓存 NoSQL Redis
Redis深度解析:核心数据类型之string
Redis 数据类型包括String、Hash、List、Set和Sorted Set。对于String类型的主要操作, 此外,还有通用的Key操作。

推荐镜像

更多