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的取值表达式。

« .net中的ListView排序
三亚游 »
作者: 可爱的猴子
原载: 可爱的猴子 的blog
版权所有。转载时必须以链接形式注明作者和原始出处及本声明。

CSS教程中的属性取值正则表达式介绍(一)“27 评论”

  1. 想学习咯 说:
    2008-08-24

    支持

    [Reply]

  2. CIT 说:
    2008-06-29

    另外我觉得这个position的规则表达式直接可以写成：
    [ [ | | left | center | right ] [ | | top | center | bottom ]? ] | inherit
    而原文中重复了
    呵呵

    [Reply]

  3. CIT 说:
    2008-06-29

    写的好啊
    急急期待css高级课程

    [Reply]

  4. 朵依~ 说:
    2008-06-24


    我在梦之都都住2月了！！
    ……
    ……

    [Reply]

  5. 烈焰红丸 说:
    2008-06-18

    猴哥，看完了你的HTML和CSS教程，感觉真的是写的很到位，很容易理解。。。什么时候能吧PHP,MYSQL，还有Javascript的教程做出来呢？期待你的经典教程！！！

    [Reply]

  6. 快啊猴子 说:
    2008-05-04

    赶快出来个javaScript教程吧，先把初级的都学完就能做简单的网页了！

    [Reply]

  7. 华丽一射 说:
    2008-05-01

    先拜猴子，然后做起来听讲。哈哈

    [Reply]

  8. 跟猴子一起进步 说:
    2008-04-18

    19楼的弟兄，你说的是什么意思啊？
    什么叫“ASP是java脚本语言还是vb脚本语言”？我不太明白，请你解释一下好吗？
    让我多学学，我只知道ASP和JSP相似，是一种创建动态网页的技术。
    还有就是JAVA和VB都不是脚本语言吧，你说的是JavaScritp和VBScritp吧。

    [Reply]

  9. 有我没你 说:
    2008-04-11

    猴子，我想问一下你这ASP是java脚本语言还是vb脚本语言弄的呀！如是java脚本的话，我还要学java

    [Reply]

  10. 可爱的姚姚 说:
    2008-03-29

    猴子你好帅…

    学这个恐怕得先把英语学好吧…..（我看到一堆不认识的字母…..）

    [Reply]

  11. 可爱的猴子 说:
    2008-03-25

    id选择符的疑问

    答：比如 #header ,其中 #只是代表这个是id选择符，header才是id选择符的名字，在一个html页面中这个header只能被一个html元素使用，不能被多个使用（html文件里才是出现最好出现一次的地方，而不是在css文件里）

    可以参考：http://www.dreamdu.com/css/selector_novice/

    [Reply]

  12. id选择符的疑问 说:
    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]

  13. 小刚 说:
    2008-02-15

    NB的人，我一直在学习，虽然编程语言学习了不少，不过毕业后没从事编程公司（从事软件测试），不过自己的网站总要自己建设，最简单的当然是XHTML+CSS+DIV啦，可我仅仅懂得HTML的皮毛，结果找到这个网站来了，写得很不错，我学习到了很多东西，当然现在我还在学习中，学习CSS。。。这东西真好用，西西~~~

    [Reply]

  14. 梦幻弯刀 说:
    2008-02-11

    猴子辛苦了，支持~~~

    [Reply]

  15. leonmax 说:
    2008-01-26

    忍不住再赞一声，准备这两天都泡你这里了。虽然设计过不少网页了，没有系统的学习过。对可爱的猴子表示最可爱的敬意！
    对了，猴子兄是asp.net和jsp都很精通马？不会搞起来吗？C#和java的库

    [Reply]

  16. 猴子好厉害^_^ 说:
    2008-01-23

    支持 期待 PHP MYSQL

    [Reply]

  17. 金豆子 说:
    2008-01-16

    猴子老师谢谢你的广大还没有深入懂得网页的朋友一个方便的途径，我代表大家给您说声：您辛苦了！ 请问在哪里能看到您的CSS高级教程还有asp.net

    [Reply]

  18. lily 说:
    2007-12-01

    猴子老师讲滴很不错，希望你的JSP早点出世啊，最近在学。。。

    [Reply]

  19. 我 说:
    2007-11-22

    猴子好厉害

    期待

    jsp

    [Reply]

  20. 可爱的猴子 说:
    2007-09-22

    我不是教师，呵呵 只是自己比较喜欢总结。
    jsp属于比较高端的内容，暂时应该不会涉及。不过以后肯定会涉及到的。

    [Reply]

  21. 小侨 说:
    2007-09-22

    猴子是教师么，教材写得很不错啊!!换个时候搞个jsp教材吧!

    [Reply]

  22. 可爱的猴子 说:
    2007-08-24

    暂时没有弄jsp教程的打算，以后可能会考虑。

    [Reply]

  23. 士兵突击 说:
    2007-08-21

    猴子有弄JSP教程的打算吗?

    [Reply]

  24. 可爱的猴子 说:
    2007-07-15

    最好还是再全面的学习一下html，http://www.dreamdu.com/xhtml/ 这个是html教程，css教程可以看下面这个链接 http://www.dreamdu.com/css/ 你也可以加入网站上面显示的qq群，和大家一起讨论网络技术。

    [Reply]

  25. anson985 说:
    2007-07-13

    我刚学完html，也不算学完。只看了书了。懂了基本
    现在接触CSS。。我应该看你的教程那里？我看这个页面的内容貌似还不是很了解

    [Reply]

  26. 可爱的猴子 说:
    2007-06-30

    css初级教程发布完后才会发布css高级教程。
    asp.net相关的教程以后也会涉及到。

    [Reply]

  27. 脚丫冰凉 说:
    2007-06-30

    猴子啊
    你写的教程很好
    不过没找到CSS高级教程啊
    还有能不能有时间整个ASP.NET .NET教程啥的学习学习

    [Reply]

发表评论