整体组成
在CSS中,顶层元素被称为Rule,而CSS中的Rule又分为2类:CSSStyleRule和CSSAtKeywordRule。
CSSStyleRule是最基本的,即我们最常见的,由选择器+属性+值组成的部分,以下就是一个简单的示例:
#nav>li~li {
float: left;
margin-left: 7px;
padding-left: 7px;
border-left: 1px solid blue;
}
而CSSAtKeywordRule则是另一类,这个名词是我起的,事实上在w3c给出的JAVA API中,他被分成很多个类:
- CSSCharsetRule – 代表@charset。
- CSSFontFaceRule – 代表@font-face。
- CSSImportRule – 代表@import。
- CSSMediaRule – 代表@media。
- CSSPageRule – 代表@page。
- CSS3又加了一个CSSAtNamespaceRule,但是由于针对CSS3的w3c JAVA API还未完成,这里没有相关的页面,其代表的是@namespace。
一目了然,所谓CSSAtKeywordRule,就是以@起始的那一批关键字类型的规则,CSS3一共就规定了以上6个,不多不少。
除了CSSStyleRule和CSSAtKeywordRule以外的,所有不能正确解释的,统统被称为CSSUnknownRule,这个自然没有太大的意义,就不详细说明。
元素顺序
CSS对元素的顺序没有太大的要求,多数位置可以出现在任意位置,出现任意的次数,除了2个特例:
- @charset只能出现在文档头部,前面不能有任何字符。
- @import必须出现在@charset(如果有的话)之后,其他规则之前,当然可以有多个。
- @import不能出现在大括号之间(语法上称为block内部)。
因此一个CSS文档的顺序基本是这样的:
- @charset声明。
- @import引入其他样式。
- 其他规则任意次序任意次数依次叠放。
CSSAtKeywordRule
着重讲解一下几个CSSAtKeywordRule的定义:
嵌入字体,在CSS3被大肆宣传的今日,开发者应该蛮熟悉了,用src
指定地址,用font-family
指定名称,如:
@font-face {
font-family: "Title Only";
src: url(xxx.ttf) format("truetype");
}
具体可以看看这里,有很详细的介绍。
指定样式作用的媒体类型,如screen代表屏幕、projection代表投影仪等,需要注意的是@media是一个可嵌套规则的规则,即他本身就带有类似CSS文档的效果,内部可以定义其他的规则,因此以下代码是合理的:
@media projection {
/* 长得就像一份完整的CSS文档 */
body {
width: 960px;
background-color: #efefef;
}
}
根据标准,是给Paged Media使用的,在探寻过程中,发现基本可以认为是给打印机用的特定样式规则,其内部使用一些比较特殊的属性,以下是个简单的列表:
- size – 指定页面大小,或者A4、B5之类的预设大小,也可以是landscape或portrait指定打印方向。
- margin – 已经不是指元素的边距了,指定打印时的页边距。
- background、border、padding、color、font、text等都指打印时的效果。
CSSStyleRule
然后是重头戏CSSStyleRule,CSS中真正起作用的还不就是那些属性+值的样式么。一个CSSStyleRule的组成如下:
Selector { CSSStyleDeclaration* }
。
关于选择器即Selector,CSS3标准的相关章节中有详细的介绍,本文不考虑这方面的展开了。
CSSStyleDeclaration就是一个键值对,他的组成如下:
property : value;
需要注意的是分号不能省略,CSS可不像javascript一样有自动分号补全功能,事实上在CSS中不存在换行符的特殊处理,换行符会被当空格同等对待,所以下面这样的样式:
div {
background: red
padding: 3px;
}
会等同于:
div {
background: red padding: 3px;
}
而padding:
和3px
分别被认为是属性background
的值的一部分,根据CSS3的定义,分别对应background-image
和background-position
属性,形成非法的样式值。因此分号是CSS的同一个CSSStyleRule内多个并列样式间的唯一的分隔符,不可省略。唯独一个CSSStyleRule中的最后一个Declaration的分号可以省略,因为其后其父规则已经结束了。
值类型
CSS也是有数据类型的,大致有这么几类:
- 数字,即普通的数字,可以带负号,可以有小数。
- 长度,有3个相对单位,分别是em、ex和px;5个绝对单位,分别是in、cm、mm、pt、pc。
- 百分比,数字后跟一个百分号就行了。
- URL/URI,使用一个叫url的函数来定义,如url(http://www.google.com)。
- 计数器:大概有人用过,但用得不广泛,用来给ol标序号的时候用得比较多吧。
- 颜色:CSS2规定的颜色是RGB色,到了CSS3变成RGBA,颜色的表示形式有#rgb[a]、#rrggbb[aa]、rgb[a](r, g, b, [a])这么几种,注意#ff009不是一个合法的颜色,因为即不符合3|4位,也不符合2*(3|4)位。
- 角度,有3个单位,分别是deg、grad、rad。
- 时间,单位有ms和s。
- 频度,真没见用过,单位有Hz和kHz。
- 字符串,使用配对的双引号或单引号包含,内部的引号要转义,这是基本常识。CSS支持多行字符串,\后紧跟换行即可。不过要注意的是,CSS中的多行字符串里的换行符好像会被忽略掉,真正要用到换行符的时候,使用\A来代表一个换行符。
总结
以下是一般性的、以阅读为目的的总结,并不是对标准语法的描述:
CSS文档的组成:
CSSDocument :
CSSAtCharsetRule? +
CSSAtImportRule* +
[CSSStyleRule | CSSAtMediaRule | CSSAtPageRule]*
CSSStyleRule的组成:
CSSStyleRule :
Selector +
{ +
CSSDeclaration* +
}
CSSDeclaration的组成:
CSSDeclaration :
Property +
: +
Value +
;
CSSAtMediaRule的组成:
CSSAtMediaRule :
@media +
CSSMediaType+ +
{ +
[CSSStyleRule | CSSAtMediaRule | CSSAtPageRule]* +
}
相关推荐
CSS基础-介绍及语法,css入门必备资料
CSS简介,CSS层叠样式表基本语法,从基础入门
CSS.HTML.Javascript(语法) 看了几个上传的3合1,觉得不是很合适,推荐一下自己曾经用了好长一段时间的配置。
CSS语法入门,自己在站长网整理,很适合初学者
个人学习CSS过程中,积累的大量CSS基本语法知识,分享在此,喜欢就免费拿吧。
CSS命名规范 CSS基本语法 CSS入门基础
css资源有点少哈,实在不好意思,下载个东西太麻烦了
less css的入门知识,基本语法的讲解
css语法详解,从最基本的开始,一直到深入的应用,适合新手入门,也适合高手深入
CSS快速入门 超快速,用来快速查询语法的,按ctrl+F即可
入门教程 CSS属性.pdf 关于CSS的基础语法级简单示例
一、CSS语法规范 二、CSS选择器 (1)基础选择器 (i)标签选择器 (ii)类选择器 (iii)id选择器 (iv)通配符选择器 (2)复合选择器 (i)后代选择器 (ii)子代选择器 (iii)并集选择器 (iv)伪类选择器 三、...
Web-前端html+css从入门到精通 135. transition过渡基础语法.zip
Web-前端html+css从入门到精通 142. animation动画基础语法.zip
Web-前端html+css从入门到精通 145. animation动画扩展语法.zip
内含CSS语法表、JavaScript语法表、html语法表、html语言参考;适合初学者入门学习
本文档提供了CSS基本语法的从零开始地最详尽地讲解,包括html选择器中...总得来说本文档已基本包括了CSS的全部语法内容。并且全部 是实例加注释,尤其适合初学者入门学习使用。--要是看完了还不会,你可以买把刀追我。
Web-前端html+css从入门到精通 147. 3D基本语法及成像原理.zip
Web-前端html+css从入门到精通 149. 3D相关语法及扩展学习.zip
CSS的定义是由三个部分构成: 选择符(selector),属性(properties)和属性的取值(value)。 1.语法: selector {property: value} (选择符 {属性:值}) 说明: ·选择符是可以是多种形式,一般是你要定义样式的HTML标记,...