CSS教程中的属性取值正则表达式介绍(一)
这几天经常有同学反映CSS教程中的属性的取值看不明白。比如background-position的取值[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit 。
首先CSS属性的取值是参考了w3c对CSS属性取值的方式(是利用正则表达式表示的)，我感觉这种方式能全面的表现CSS属性的各种取值情况。(正则表达式我将在js教程中详细介绍)
下面我就简单介绍一下几个已经涉及到的取值表达式(正则表达式)的符号的含义:
| — 代表“或”的意思(有且只有一个)
比如color属性的取值: <color> | inherit 。此取值方式说明可以使用<color>(颜色表示法)或者inherit(继承)，而且我们只能在<color>和inherit中选其一。(inherit是继承的意思，CSS高级教程我将介绍)
目前CSS教程中的大部分属性都只使用了“|”符号。比较简单:)
|| — 代表“可以取一个或多个”(正好和|符号相对应)
比如background属性的取值：[<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>] | inherit
首先我们将其分解为三部分：
第一部分：
[<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>]
第二部分：
|
第三部分：
inherit
从上面的分解可以看出background只能有两种取值方式，只能取[<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>]或者只能取inherit。
如果我们选择第一种取值方式[<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>]，那么这个取值表达式本身就包含了一个取值表达式。
<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>的意思就是说可以取这5种情况的一个或多个。
[] — 代表一个匹配（就是一个表达式）
就是说当不能用一个值来简单的表达的时候，我们就应该使用[]
比如inherit就是一个值，我们就没有必要加[]了，当然加了也没关系。
像<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>不是一个简单的值(是一个表达式)，就应该加[]表示。
今天先讲到这(不知道大家明白了吗？)，大家先消化一下，过两天我再给大家讲background-position的取值表达式。
Loading ...
2010-01-08
请教一下，
比如background-position的取值[ [ | | left | center | right ] [ | | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit 。
在这个例子中有一个“？”，请问问号表达的是什么意思呢？就是在bottom]后面的那个问号
[Reply]
2009-01-07
师兄，是我啊，呵！
我那网站是有点问题吧，给我EMAIL 行不
[Reply]
2008-12-06
非常感谢老师们给我们提供的这个学习的平台
不过我有个建议：
要是此站再添flash教程什么的，我想我会更喜欢。
况且flash最好是代码方面的教程，因为市场上现在flash初级教程太多了！
当然了，我一是一个建议，二是我喜欢这个站点！！
[Reply]
2008-10-21
哦哦，我看完HTML觉得写的很好，只是看的有点晕晕的，可能有的地方还是没懂，现在跑来看CSS，就是希望多学点东西呢，谢谢这个网站呢，很不错的，赞！
[Reply]
2008-10-06
[Reply]
2008-09-20
感谢！~
再感谢~
[Reply]
2008-08-24
[Reply]
2008-06-29
另外我觉得这个position的规则表达式直接可以写成：
[ [ | | left | center | right ] [ | | top | center | bottom ]? ] | inherit
而原文中重复了
呵呵
[Reply]
2008-06-29
写的好啊
急急期待css高级课程
[Reply]
2008-06-24
我在梦之都都住2月了！！
……
……
[Reply]
2008-06-18
[Reply]
2008-05-04
[Reply]
2008-05-01
[Reply]
2008-04-18
19楼的弟兄，你说的是什么意思啊？
什么叫“ASP是java脚本语言还是vb脚本语言”？我不太明白，请你解释一下好吗？
让我多学学，我只知道ASP和JSP相似，是一种创建动态网页的技术。
还有就是JAVA和VB都不是脚本语言吧，你说的是JavaScritp和VBScritp吧。
[Reply]
2008-04-11
猴子，我想问一下你这ASP是java脚本语言还是vb脚本语言弄的呀！如是java脚本的话，我还要学java
[Reply]
2008-03-29
猴子你好帅…
学这个恐怕得先把英语学好吧…..（我看到一堆不认识的字母…..）
[Reply]
2008-03-25
id选择符的疑问
答：比如 #header ,其中 #只是代表这个是id选择符，header才是id选择符的名字，在一个html页面中这个header只能被一个html元素使用，不能被多个使用（html文件里才是出现最好出现一次的地方，而不是在css文件里）
可以参考：http://www.dreamdu.com/css/selector_novice/
[Reply]
2008-03-25
我想问的是这句话：id选择符,唯一性选择符,比如 #dreamdured{color:red;},就是在名字前增加了一个#,id选择符在一个页面中只能出现一次,在整个网站中也最好出现一次(这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了).
跟下面的内容有矛盾吗？那个#符号出现了那么多次
(摘录自梦之都的链接样式内容的以下部分)
#sitetitle
{
font-weight:bold;
color:crimson;
font-size:18.5px;
padding:15px 0 10px 55px;
}
#header
{
padding: 0;
margin: 0;
}
#header #logo
{
margin: 10px 0 0 2%;
font-weight:bold;
color:#DC143C;
font-size:18.5px;
}
#header #maintag
{
margin: 5px 0 5px 10%;
color:#1170FF;
font-size:12px;
}
#header #search
{
float:right;
margin:10px 1% 0 0;
white-space:nowrap;
}
[Reply]
2008-02-15
NB的人，我一直在学习，虽然编程语言学习了不少，不过毕业后没从事编程公司（从事软件测试），不过自己的网站总要自己建设，最简单的当然是XHTML+CSS+DIV啦，可我仅仅懂得HTML的皮毛，结果找到这个网站来了，写得很不错，我学习到了很多东西，当然现在我还在学习中，学习CSS。。。这东西真好用，西西~~~
[Reply]
2008-02-11
猴子辛苦了，支持~~~
[Reply]
2008-01-26
忍不住再赞一声，准备这两天都泡你这里了。虽然设计过不少网页了，没有系统的学习过。对可爱的猴子表示最可爱的敬意！
对了，猴子兄是asp.net和jsp都很精通马？不会搞起来吗？C#和java的库
[Reply]