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

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

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

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

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

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

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

上图来自W3C。
例如:
body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }
当然,这些关键词,浏览器可以扩展,比如:gold,darkgray等。
RGB 颜色被用于数值表示颜色。例如,用不同的表示方法表示红色:
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。
超过有效范围的值,应该被处理为可用范围内的值,如:
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. 字符串
字符串可以被写在单引号或双引号中。
如:
a[title="a not so very long title"] {/*...*/}

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

终于完了,唉…… 这个也好长的说,这是CSS中非常基础的部分,很多开发者的错误,都跟这些值有关系。
比如,用JS改变元素的位置,设置top值:
a.style.top=40;
错了,错哪里了?对,40后面应该有单位。
还有的是颜色值没有加 “#”,
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
...全文
3924 68 打赏 收藏 转发到动态 举报
写回复
用AI写文章
68 条回复
切换为时间正序
请发表友善的回复…
发表回复
雷诺妍 2012-12-14
  • 打赏
  • 举报
回复
谢谢 楼主分享
zhufangya 2012-05-23
  • 打赏
  • 举报
回复
很好学习了,不容易发现的错误往往都是很简单的细节
zoedevil 2010-10-22
  • 打赏
  • 举报
回复
强力顶起~~
zxingdream 2010-10-09
  • 打赏
  • 举报
回复
学习ing
yuxiangju 2010-07-22
  • 打赏
  • 举报
回复
学习了....
orangeZhan 2010-07-20
  • 打赏
  • 举报
回复
顶一个,,,,,,,,,,,,,,,,,,,
mochimo 2010-07-20
  • 打赏
  • 举报
回复
楼主,如果px 值有小数咋办?规范里没说哦~~~
tianya921 2010-07-20
  • 打赏
  • 举报
回复
学习了.........
  • 打赏
  • 举报
回复
em通常用来标宽,代表该字体显示m的宽度
ex通常用来标高,代表该字体显示x的高度

sunboyqq23 2010-07-19
  • 打赏
  • 举报
回复
顶一个。
sunboyqq23 2010-07-19
  • 打赏
  • 举报
回复
顶一个。
sunboyqq23 2010-07-19
  • 打赏
  • 举报
回复
顶一个。
TaoTaoYou 2010-07-19
  • 打赏
  • 举报
回复
我也推荐一个http://www.web666.net/css
immking 2010-07-19
  • 打赏
  • 举报
回复
good thank you
nigel_jun 2010-07-19
  • 打赏
  • 举报
回复
谢谢分享!
jialichen 2010-07-19
  • 打赏
  • 举报
回复
厉害,值得我们这些小辈学习
GGMM_WW 2010-07-18
  • 打赏
  • 举报
回复
看贴回贴是美德
gzkqg119 2010-07-18
  • 打赏
  • 举报
回复
复习一下
Greentea107 2010-07-18
  • 打赏
  • 举报
回复
好东西,先收藏 了再看
ideniece 2010-07-18
  • 打赏
  • 举报
回复
谢谢了,
加载更多回复(48)

5,006

社区成员

发帖
与我相关
我的任务
社区描述
解读Web 标准、分析和讨论实际问题、推动网络标准化发展和跨浏览器开发进程,解决各种兼容性问题。
社区管理员
  • 跨浏览器开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧