fearnliu / fuzzy-enigma Goto Github PK
View Code? Open in Web Editor NEWblog backup, blog article based on issues
License: MIT License
blog backup, blog article based on issues
License: MIT License
W3C的CSS2.2规范针对CSS属性定义的约定如下图所示
一个CSS的属性值通常由以下一种或多种类型的组件值构成:
auto
,inherit
,unset
等)<
和>
包裹着,例如规范中的<length>
和<percentage>
等<'border-width'>
<border-width>
在这些定义中出现的其他单词必须是字面量形式的关键字,不带引号('
),斜杠(/
),逗号(,
)等。
以上几中类型的组件值可能按照以下组合构成属性值:
|
)分隔的组件值,有且只有操作符某一侧的值必须出现||
)分隔的组件值,它们其中一个或多个可以任何顺序出现&&
)分隔的组件值,它们所有必须出现,可以任何顺序出现[ ]
)包裹的组件值,主要用于划分分组以上几种操作符的优先级由强到弱依次如下:
并列排布 强于 && 强于 || 强于 |
例如:
a b | c || d && e f
等价于
[ a b ] | [ c || [ d && [ e f ] ]
另外,每个类型值,关键字或者分组后面可以跟随以下修饰符:
*
,表示其之前的类型、单词或者分组可以出现0次或者多次+
,表示其之前的类型、单词或者分组可以出现1次或者多次?
,表示其之前的类型、单词或者分组可以出现0次或者1次{A, B}
,表示其之前的类型、单词或者分组至少出现A次,至多出现B次。指明属性的初始值。
列出属性适用的元素。所有元素都被认为具有所有属性,但是某些属性对某些类型的元素没有渲染效果。
指明属性的值是否可以从祖先元素继承。
指明如何解释属性的百分比,前提是百分比对于属性值是合法的。如果此处为N/A
,则表示属性不接受百分比值。
指明属性可以应用的媒体组。
描述属性的计算值。
有些属性是简写属性,就是多个简单属性放在一起的速记写法,也可以理解为综合了多个简单属性的复合属性。
例如,font
属性就是font-style
,font-varinat
,font-weight
,font-size
,line-height
,font-family
多个属性的简写属性。
值得注意的是,当省略了简写属性中某些对应位置上的值时,那么对应的简单属性就会被分配到其属性的Initial Value
关键字具有标识符的形式,关键字不得放在双引号之内。
在CSS中,标识符可以-
或_
开头。以-
或·_
开头的关键字和属性名称保留用于特定供应商的扩展。此类供应商扩展具有以下形式之一:
-
+ 供应商标识符 + -
+ 有意义的名字_
+ 供应商标识符 + -
+ 有意义的名字初始短划线或下划线会保证不被任何当前或未来的CSS Level用于属性或者关键字。因此,典型的CSS实现可能无法识别这些属性,并可能根据处理解析错误的规则忽略它们。然而,由于最初的短划线或下划线语法是语法的一部分,所以CSS2.2实现者应该始终能够使用符合CSS的解析器,而不管它们是否支持任何供应商特定扩展。
CSS开发者应该尽量避免使用供应商特定扩展。
以下规则始终成立:
所有CSS语法在ASCII范围内都是不区分大小写的(即[a-z]和[A-Z]是等价的),除了不受CSS控制的部分。例如,HTML的id
和class
属性名称,URI的语法。
CSS中,标识符(包括元素名称,类和选择器中的ID)只能包含字符[a-zA-Z0-9]和 ISO 10646字符U+0080
及以上,加上连字符和下划线;它们不能以数字、两个连字符(--
)或数字后跟着连字符开头。标识符也可以包含转义字符和ISO 10646字符作为数字代码。
CSS2.2中,反斜线(\
)字符可以表示三种类型的字符转义之一。在CSS注释中,反斜线代表自身,如果反斜线紧接在样式表的末尾,它也代表它自身。
首先,在一个字符内部,一个反斜杠后跟新行被忽略。在字符串外部,一个反斜杠后跟一个新行表示它自身。
其次,它取消了特殊CSS字符的含义。
一个CSS样式表由一系列语句组成。有两种语句:at-rules
和规则集。语句之间可能会有空白字符。
At-rules 以一个at关键字开始,@
字符后跟一个标识符(例如@import
和@page
)。
一个 at-rule 包含一切直到下一个分号或下一个块,无论哪一个先出现。
实现CSS2.2的UA必须忽略出现在块内或者跟在除@charset
或@import
规则以外的任何非忽略语句的后面的任何@import
规则。
一个块以左花括号({
)开始,以配对右花括号(}
)结束。其之间可以是任何token,但圆括号(( )),方括号([ ])和花括号({ })必须总是成对出现,可以嵌套。
单引号和双引号也必须在匹配对中出现,并且它们之间的字符被解析为一个字符串。
CSS2.2标准中介绍了一个支持CSS的UA(用户代理,通常是浏览器,下文相同,不再赘述)如何工作的概念模型,虽然具体实现是由UA自己决定,但这个概念模型对于我们学习前端基础知识还是很有帮助的
此模型中,UA通过以下步骤处理源代码:
格式化结构
。通常,格式化结构与文档树非常相似,但也可能有很大不同,特别是当作者使用伪元素和生成内容(content
)时。首先,格式化结构不必是“树形”的——结构的性质取决于实现。其次,格式化结构也许比文档树包含更多或更少信息。例如,如果文档树中某个元素的display
属性值为none
,则该元素在格式化结构中不会生成任何内容。另一方面,列表元素在格式化结构中也许生成更多信息:列表元素的内容和列表元素的样式信息(例如,列表项头部的图片)。对于所有媒体而言,术语画布
描述了”用于渲染格式化结构的空间“。画布对于空间的每个维度是无限的,但是渲染通常发生在画布的有限区域内,由UA根据目标媒体建立。例如,UA在屏幕上渲染通常会施加最小宽度并且基于视口尺寸选择初始宽度。UA渲染到页面时通常施加宽度和高度限制。听觉用户也许对音频空间施加限制,但不及时。
CSS2.2选择器和属性允许样式表引用文档或UA的以下部分:
content
)的某些部分(CSS伪元素)A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.