【分享】说说标准——CSS标准中的值

人对于一件事，不知道的时候感觉它很神秘，于是便很想知道这个到底是怎么回事，但是知道了之后呢，感觉也不过如此，人就是这样……
呃……说正事儿，CSS中的样式设置，最终离不开两样东西：特性和特性的值。
特性是诸如 ”height”、“width”、“color”等可设置的名称，特性的值，顾名思义，就是特性的值，有大小，长短，颜色，路径等……
这些值，在CSS特性的描述中，都有自己的表示方式。比如，在描述”height”（这里： http://www.w3.org/TR/CSS2/visudet.html#the-height- property ）的时候，它的值是这样表示的：
Value: | | auto | inherit
是什么意思呢？
有是什么意思呢？
各位看官不要心急，这正是本帖所要说的内容，且听我慢慢道来，让你可以看破”值”尘。

1. 整数和数字
有些值类型可能会包含整数和实数（不知道什么是实数的回去补数学）。实数和整数都只能用 十进制 的数来表示。
整数值表示为 ，是由数字0～9，和前面的正负号组成。例如：0，-2，-7，7
实数值表示为 ，是由0～9，小数点以及前面的正负号组成。例如：-1.5，3.1415926，实数包括整数。
注意，有时候，某些特性会给定实数和整数的确切范围，比如，经常用到的非负整数。

2. 长度值
长度值适用于水平或垂直方向的尺寸。长度值表示为 。
长度值的格式是：+单位(e.g., px, em, etc.)，注意，一定要有单位，除非这个值是0。如果长度值是0，单位可有可无。
有些特性支持负的长度值，比如margin。
但是如果给一个不支持负长度值的特性设置一个负的值，那么这个声明会被忽略。
长度的单位有两种：相对长度和绝对长度。
先说 相对长度 ，相对二字表明了其长度单位会随着它的参考值的变化而变化，不是固定的。
相对长度有：
  ⃟ em: 与 'font-size' 的大小有关，与 作用到元素上的font-size的值大小相等。
  ⃟ ex: 一个小写字母 x 的高度
注：（ x-height ）为英文字体设计中的一个术词，它的标准高是一个小写字母x的高度单位
  ⃟ px: 像素数( pixels )。
例：

CSS code

   
     
     
     
     

    
      
      
      
      h1 
    
      
      
      
      {
       
    
      
      
      
       margin
    
      
      
      
      :
    
      
      
      
       0.5em 
    
      
      
      
      }
    
      
      
      
            
    
      
      
      
      /*
    
      
      
      
       em 
    
      
      
      
      */
    
      
      
      
      
h1 
    
      
      
      
      {
       
    
      
      
      
       margin
    
      
      
      
      :
    
      
      
      
       1ex 
    
      
      
      
      }
    
      
      
      
              
    
      
      
      
      /*
    
      
      
      
       ex 
    
      
      
      
      */
    
      
      
      
      
p  
    
      
      
      
      {
       
    
      
      
      
       font-size
    
      
      
      
      :
    
      
      
      
       12px 
    
      
      
      
      }
    
      
      
      
          
    
      
      
      
      /*
    
      
      
      
       px 
    
      
      
      
      */
   
     
     
     
     

绝对长度 有：
  ⃟ in: 英寸 — 等于2.54厘米
  ⃟ cm: 厘米
  ⃟ mm: 毫米
  ⃟ pt: 点 — CSS 2.1里 1pt 等于 1/72 英寸
  ⃟ pc: 皮卡 — 1pc 等于 12pt，也就是 1/6 英寸
例：

CSS code

   
     
     
     
     

    
      
      
      
      h1 
    
      
      
      
      {
       
    
      
      
      
       margin
    
      
      
      
      :
    
      
      
      
       0.5in 
    
      
      
      
      }
    
      
      
      
            
    
      
      
      
      /*
    
      
      
      
       inches  
    
      
      
      
      */
    
      
      
      
      
h2 
    
      
      
      
      {
       
    
      
      
      
       line-height
    
      
      
      
      :
    
      
      
      
       3cm 
    
      
      
      
      }
    
      
      
      
         
    
      
      
      
      /*
    
      
      
      
       centimeters 
    
      
      
      
      */
    
      
      
      
      
h3 
    
      
      
      
      {
       
    
      
      
      
       word-spacing
    
      
      
      
      :
    
      
      
      
       4mm 
    
      
      
      
      }
    
      
      
      
        
    
      
      
      
      /*
    
      
      
      
       millimeters 
    
      
      
      
      */
    
      
      
      
      
h4 
    
      
      
      
      {
       
    
      
      
      
       font-size
    
      
      
      
      :
    
      
      
      
       12pt 
    
      
      
      
      }
    
      
      
      
          
    
      
      
      
      /*
    
      
      
      
       points 
    
      
      
      
      */
    
      
      
      
      
h4 
    
      
      
      
      {
       
    
      
      
      
       font-size
    
      
      
      
      :
    
      
      
      
       1pc 
    
      
      
      
      }
    
      
      
      
           
    
      
      
      
      /*
    
      
      
      
       picas 
    
      
      
      
      */
   
     
     
     
     

3. 百分比值
百分比值表示为 。它的格式是：+ %。
百分比值总是跟其他的值有关，比如长度值。

4. URL和URI
Web上可用的每种资源 - HTML文档、图像、视频片段、程序等 - 由一个通用资源标志符（Uniform Resource Identifier, 简称"URI"）进行定位。详细的定义看这里：（ [RFC3986]）， 也可以通过 IBM 了解的更清楚： 分清 URI、URL 和 URN
URL  是Uniform Resource Location的缩写，译为“统一资源定位符”。它是URI命名机制的一个子集。
URI  表示为。定义 URI使用 “url()” 特性。

5. 计数器
计数器使用大小写敏感的标识符来表示。参考特性：' counter-increment ' 和 ' counter-reset '
计数器的标记是 'counter()' 或者 'counter(, <'list-style-type'>)'，其中'list-style-type'默认为 “decimal”，即小数点。
注意，IE浏览器从IE8才开始支持 counter值。

6. 颜色
颜色值用来表示。可以是一个RGB的颜色值，也可以是关键词。
颜色的关键词列表是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, 和 yellow。

上图来自W3C。
例如：

CSS code

   
     
     
     
     

    
      
      
      
      body 
    
      
      
      
      {
       
    
      
      
      
      color
    
      
      
      
      :
    
      
      
      
       black
    
      
      
      
      ;
    
      
      
      
       background
    
      
      
      
      :
    
      
      
      
       white 
    
      
      
      
      }
    
      
      
      
      
h1 
    
      
      
      
      {
       
    
      
      
      
       color
    
      
      
      
      :
    
      
      
      
       maroon 
    
      
      
      
      }
    
      
      
      
      
h2 
    
      
      
      
      {
       
    
      
      
      
       color
    
      
      
      
      :
    
      
      
      
       olive 
    
      
      
      
      }
   
     
     
     
     

当然，这些关键词，浏览器可以扩展，比如：gold，darkgray等。
RGB 颜色被用于数值表示颜色。例如，用不同的表示方法表示红色：

CSS code

   
     
     
     
     

    
      
      
      
      em 
    
      
      
      
      {
       
    
      
      
      
       color
    
      
      
      
      :
    
      
      
      
       #f00 
    
      
      
      
      }
    
      
      
      
                    
    
      
      
      
      /*
    
      
      
      
       #rgb 
    
      
      
      
      */
    
      
      
      
      
em 
    
      
      
      
      {
       
    
      
      
      
       color
    
      
      
      
      :
    
      
      
      
       #ff0000 
    
      
      
      
      }
    
      
      
      
                 
    
      
      
      
      /*
    
      
      
      
       #rrggbb 
    
      
      
      
      */
    
      
      
      
      
em 
    
      
      
      
      {
       
    
      
      
      
       color
    
      
      
      
      :
    
      
      
      
       rgb(255,0,0) 
    
      
      
      
      }
    
      
      
      
           
em 
    
      
      
      
      {
       
    
      
      
      
       color
    
      
      
      
      :
    
      
      
      
       rgb(100%, 0%, 0%) 
    
      
      
      
      }
   
     
     
     
     

十六进制的RGB颜色值必须含有 “#” 前缀，后跟三个或六个十六进制字符。其中，三位的和六位之间的转换是：#rgb 等于 #rrggbb，所以，#FFFFFF 可以简写成 #FFF。
函数记号的RGB颜色值，rgb(……)，括号里面是三个逗号分隔的0～255的值，或者是三个百分比值。百分比值 p 和整数值 v 的关系是 v=255×p。
超过有效范围的值，应该被处理为可用范围内的值，如：

CSS code

   
     
     
     
     

    
      
      
      
      em 
    
      
      
      
      {
       
    
      
      
      
       color
    
      
      
      
      :
    
      
      
      
       rgb(255,0,0) 
    
      
      
      
      }
    
      
      
      
             
    
      
      
      
      /*
    
      
      
      
       范围 0 - 255 
    
      
      
      
      */
    
      
      
      
      
em 
    
      
      
      
      {
       
    
      
      
      
       color
    
      
      
      
      :
    
      
      
      
       rgb(300,0,0) 
    
      
      
      
      }
    
      
      
      
             
    
      
      
      
      /*
    
      
      
      
       修剪为 rgb(255,0,0) 
    
      
      
      
      */
    
      
      
      
      
em 
    
      
      
      
      {
       
    
      
      
      
       color
    
      
      
      
      :
    
      
      
      
       rgb(255,-10,0) 
    
      
      
      
      }
    
      
      
      
           
    
      
      
      
      /*
    
      
      
      
       修剪为 rgb(255,0,0) 
    
      
      
      
      */
    
      
      
      
      
em 
    
      
      
      
      {
       
    
      
      
      
       color
    
      
      
      
      :
    
      
      
      
       rgb(110%, 0%, 0%) 
    
      
      
      
      }
    
      
      
      
        
    
      
      
      
      /*
    
      
      
      
       修剪为  rgb(100%,0%,0%) 
    
      
      
      
      */
   
     
     
     
     

6. 字符串
字符串可以被写在单引号或双引号中。
如：

CSS code

   
     
     
     
     

    
      
      
      
      a[title="a not so very long title"] 
    
      
      
      
      {
       
    
      
      
      
      /*
    
      
      
      
      ...
    
      
      
      
      */
    
      
      
      
      }
   
     
     
     
     

7. 不支持的值
标准中不支持的值，都应该被忽略。

终于完了，唉…… 这个也好长的说，这是CSS中非常基础的部分，很多开发者的错误，都跟这些值有关系。
比如，用JS改变元素的位置，设置top值：

JScript code

   
     
     
     
     

    
      
      
      
      a.style.top
    
      
      
      
      =
    
      
      
      
      40
    
      
      
      
      ;
   
     
     
     
     

错了，错哪里了？对，40后面应该有单位。
还有的是颜色值没有加 “#”，

CSS code

   
     
     
     
     

    
      
      
      
      div
    
      
      
      
      {
       
    
      
      
      
      color
    
      
      
      
      :
    
      
      
      
      FFFFFF
    
      
      
      
      }
    
      
      
      
       
   
     
     
     
     

总之五花八门儿。
而针对这些错误，不是所有浏览器都会忽略声明，有的浏览器会自动的更正这些值。于是，宽容开发者的 IE 就成了仁慈的圣母……
总之，我们应该尽量避免自己犯错，而不是靠浏览器自动地给我们纠正错误。

详细资料来自W3C CSS2.1 规范 4.2： http://www.w3.org /TR/CSS2/syndata.html#values

说说标准系列地址：http://topic.csdn.net/u/20100705/09/40918be9-bb47-4477-abf0-a45801f9df34.html?98687

原文地址：

http://topic.csdn.net/u/20100714/20/759e2fc2-a619-42b8-a8e9-6fcab711f7cb.html?53379