读飘零雾雨版css3.0版 本笔记

一、Css中的属性继承分析：

1、不具备继承特点的有 ：定位、布局、弹性盒模型 、尺寸 、外补白

		内补白、边框、背景、多栏、2D变换、过度、动画、打印、媒体查询模块儿

2、具有继承特性的有；

	颜色 color ，颜色的color 属性具备继承特性，但是透明度则不具有继承性

	字体font（全部属性具备）

	文本 Text ：不具备继承特性的属性有；text-overflow 、text-decoration 、text-decoration-line 、Text-de

				coration-color、text-decoration-style、vertical-align、unicode-bidi；

		Text其他属性都具备

	列表 list (全部属性都具备继承特性)

	表格 table  的属性中，只有table-layout属性不具备继承特性

	内容：content ： quotes属性 即对象内使用的嵌套标记属性具备继承属性

	用户界面 user interface: cursor  和zoom属性具备继承特性

二、Css技巧和经验总结列表：

1、如何清除图片下方出现几个像素的空白间隙？

	方法一：	 Img{ display:block; }

	方法二： img{ vertical-align:top; }

	方法三： test {}

2、浮动和绝对定位（position：absolute；）肯定不会同时出现

3、clear: 该属性的值指出了不允许有浮动对象的边

 		Clear: left:  表示不允许当前对象左边有浮动对象

意思就是：如果左侧有个浮动元素，当前元素则会？？？

4、visibility：visible | hidden | collapse

    默认值：visible

    设置或检索是否显示对象。与display属性不同，此属性会为隐藏（visibility：hidden）的对象保留其占据的物理

空间，如果希望对象为可视，其父对象也必须是可视的。 

（扩：display：none； 隐藏对象。与visibility属性的hidden值不同，其不会为”被隐藏的对象”保留其物理空间 ）

    Visibility的几个可选值的区别：

	visible： 设置对象可视 

	hidden： 设置对象隐藏 

 	collapse： 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE6及以下不支持此参数值

5、剪切clip：auto | rect(<number>|auto <number>|auto <number>|auto <number>|auto)

	Clip 的可取值：

	Auto:对象无剪切 

	rect(<number>|auto <number>|auto <number>|auto <number>|auto)： 

	依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。 示例：clip:rect(auto 50px 20px auto);

	说明：上边不剪切，右边从第50个像素开始剪切直至最右边，下边从第20个像素开始剪切直至最底部，左边不剪切IE7及以下浏览器只支持rect(<number> <number> <number> <number>)的方式，其它浏览器还支持rect(<number>,<number>,<number>,<number>)加逗号的方式。

6、overflow  属性有4个值，默认为visible，即可见。

	visible： 不剪切内容。

	hidden： 将超出对象尺寸的内容进行裁剪，将不出现滚动条。 

	Scroll；将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。 

	auto： 在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。

	注：另外还有overflow-x  overflow-y 属性，取值同上，只是确定了方向

8、margin 外边距

    检索或者设置对象四边的外延边距：一般用于确定该元素的位置，比如和相距最近的 上下左右或者父元素的距离关系

    如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。  

    如果只提供一个，将用于全部的四边。 

    如果提供两个，第一个用于上、下，第二个用于左、右。 

    如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。 内联对象可以使用该属性设置左、右两边的外补丁；若要设上、下两边的外补丁，必须先使该对象表现为块级或内联块级。 外延边距始终透明。 

    注：如果一个元素为内联元素，则无法设置宽高，所以需要先设置display，  display：block;  或者display：inline-block;

9、padding  和margin 相对，该属性针对该元素自身来说，一般用于让自己内部元素看起来和边框有些距离感。

   具体用法同上，并且需要该元素为块级元素或者内联块级元素

十、边框 border 相关

  边框的属性使用方法可以归类为两类，复合属性和独立属性，

   复合属性有：

 	border:  border：[ border-width ] || [ border-style ] || [ border-color ] 

  	border-top:  用法同border，只是确定了方向

  	border-right: 用法同border，只是确定了方向

  	border-bottom: 用法同border，只是确定了方向

	border-left: 用法同border，只是确定了方向

      独立属性有关于以下几方面的设置：

	Border-width  宽度   值：medium |length值 | thin（细）| thick（厚）

	Border-style   样式  

     	 值：none： 无轮廓。border-color与border-width将被忽略 

     		 hidden：隐藏边框。IE7及以下尚不支持 

     		 dotted： 点状轮廓。IE6下显示为dashed效果 

		 dashed： 虚线轮廓。 

		 solid： 实线轮廓 

		 double： 双线轮廓。两条单线与其间隔的和等于指定的border-width值 

		 groove： 3D凹槽轮廓。 

		 ridge： 3D凸槽轮廓。 

		 inset： 3D凹边轮廓。 

		 outset： 3D凸边轮廓。 

	Border-color   颜色     值：颜色值

	Border-top-width   顶边宽度

	Border-top-style   顶边样式

	Border-top-color   顶边颜色

	其他的下 bottom  左 left  右 right 同top ，可以单独设置某边的border样式

	Css3 为border 增加的新特性有： 

	Border-image:  设置或检索对象的边框使用图像来填充，使用图像替代border-style去定义边框样式。当border-image为none或图像不可见时，将会显示border-style所定义的边框样式效果。 

	用法：border-image：<border-image-source> || <border-image-slice> [ / <border-image-width>? [ / <border-image-outset> ]? ]? || <border-image-repeat>

	none： 无背景图片。 

		<url>： 使用绝对或相对地址指定图像。 

		<number>： 用浮点数指定宽度。不允许负值。 

		<percentage>： 用百分比指定宽度。不允许负值。 

		<length>： 用长度值指定宽度。不允许负值。 

		stretch： 指定用拉伸方式来填充边框背景图。 

		repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。 

		round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。写本文档时仅Firefox能看到该效果 

	Border-radius:  设置或检索对象使用圆角边框

 同上，也可以为单独某个角设置圆角边框的特效。用法举例如下：

 Border-top-left-radius   设置或检索对象左上角圆角边框。其他三个角可同上设定

值：

	<length>： 用长度值设置对象的圆角半径长度。不允许负值 

	<percentage>： 用百分比设置对象的圆角半径长度。不允许负值 

设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数 

•	水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。 

•	如果只提供一个，将用于全部的于四个角。 

•	如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。 

•	如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。 

•	垂直半径也遵循以上4点。 

Box-shadow  边框阴影特效  可以设置对象阴影

值：

	box-shadow：none | <shadow> [ , <shadow> ]*

	<shadow> = inset? && [ <length>{2,4} && <color>? ]

 	none： 无阴影 

	<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 

	<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 

	<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 

	<length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值 

	<color>： 设置对象的阴影的颜色。 

	inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影 

此处可以和text-shadow进行对比学习

     Text-shadow:    默认值为none；

值：

	 text-shadow：none | <shadow> [ , <shadow> ]*

	<shadow> = <length>{2,3} && <color>?

	none： 无阴影 

	<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 

	<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 

	<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 

	<color>：    设置对象的阴影的颜色。 

	Box-reflect   设置或检索对象的倒影

	box-reflect：none | <direction> <offset>? <mask-box-image>?

		<direction> = above | below | left | right

		<offset> = <length> | <percentage>

		<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

		默认值：none

none： 无倒影 

<direction>　Demo: 简单图片倒影 See with Webkit

	above： 指定倒影在对象的上边 

	below： 指定倒影在对象的下边 

	left： 指定倒影在对象的左边 

	right： 指定倒影在对象的右边 

<offset>　Demo: 图片与倒影间隔 See with Webkit

	<length>： 用长度值来定义倒影与对象之间的间隔。可以为负值 

	<percentage>： 用百分比来定义倒影与对象之间的间隔。可以为负值 

<mask-box-image>　Demo: 更真实的图片倒影 文字倒影与渐变 See with Webkit

none： 无遮罩图像 

	<url>： 使用绝对或相对地址指定遮罩图像。 

	<linear-gradient>： 使用线性渐变创建遮罩图像。 

	<radial-gradient>： 使用径向(放射性)渐变创建遮罩图像。 

	<repeating-linear-gradient>： 使用重复的线性渐变创建背遮罩像。 

	<repeating-radial-gradient>： 使用重复的径向(放射性)渐变创建遮罩图像。 

十一、背景：

	背景设置有以下属性

Background：   background：[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]

该属性为背景属性的一个复合属性

Background-color:背景颜色     默认值为：transparent 透明

Backround-image：背景图像

	background-image：<bg-image> [ , <bg-image> ]*

		<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

	背景图片设置

	none： 无背景图。 

	<url>： 使用绝对或相对地址指定背景图像。 

	<linear-gradient>： 使用线性渐变创建背景图像。（CSS3） 

	<radial-gradient>： 使用径向(放射性)渐变创建背景图像。（CSS3） 

	<repeating-linear-gradient>： 使用重复的线性渐变创建背景图像。（CSS3） 

	<repeating-radial-gradient>： 使用重复的径向(放射性)渐变创建背景图像。（CSS3） 

Background-repeat:背景或检索对象图像如何铺排填充

	repeat-x： 背景图像在横向上平铺 

	repeat-y： 背景图像在纵向上平铺 

	repeat： 背景图像在横向和纵向平铺 

	no-repeat： 背景图像不平铺 

	round： 背景图像自动缩放直到适应且填充满整个容器。（CSS3） 

	space： 背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3

Background-attachment: 设置或检索对象背景图像是否随着对象内容滚动

	fixed： 背景图像相对于窗体固定。 

	scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。 

	local： 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3） 

Background-position: 设置或检索对象背景图像的位置

	<percentage>： 用百分比指定背景图像填充的位置。可以为负值。 

	<length>： 用长度值指定背景图像填充的位置。可以为负值。 

	center： 背景图像横向和纵向居中。 

	left： 背景图像在横向上填充从左边开始。 

	right： 背景图像在横向上填充从右边开始。 

	top： 背景图像在纵向上填充从顶部开始。 

	bottom： 背景图像在纵向上填充从底部开始。 

	设置或检索对象的背景图像位置。必须先指定background-image属性。 

•	该属性提供2个参数值。 

•	如果提供两个，第一个用于横坐标，第二个用于纵坐标。 

•	如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。

Background-origin: 设置或检索对象背景图像显示的原点

	padding-box： 从padding区域（含padding）开始显示背景图像。 

	border-box： 从border区域（含border）开始显示背景图像。 

	content-box： 从content区域开始显示背景图像。 

Background-clip: 检索或设置对象的背景向外裁剪的区域

	padding-box： 从padding区域（不含padding）开始向外裁剪背景。 

	border-box： 从border区域（不含border）开始向外裁剪背景。 

	content-box： 从content区域开始向外裁剪背景。 

	text： 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。遮罩效果 See with Webkit 

Background-size: 检索或设置对象的背景图像的尺寸大小

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

	<length>： 用长度值指定背景图像大小。不允许负值。 

	<percentage>： 用百分比指定背景图像大小。不允许负值。 

	auto： 背景图像的真实大小。 

	cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。 

	contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。 

	检索或设置对象的背景图像的尺寸大小。 

•	该属性提供2个参数值(特性值cover和contain除外)。 

•	如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。 

•	如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。 

Multiple  background : 检索或设置队形的多重背景图像

background：[ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]

	取值：

	[ background-image ]： 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像” 

	[ background-repeat ]： 指定对象的背景图像如何铺排填充。 

	[ background-attachment ]： 指定对象的背景图像是随对象内容滚动还是固定的。 

	[ background-position ]： 指定对象的背景图像位置。 

	[ background-origin ]： 指定对象的背景图像显示的原点。 

	[ background-clip ]： 指定对象的背景图像向外裁剪的区域。 

	[ background-size ]： 指定对象的背景图像的尺寸大小。 

说明：

复合属性。检索或设置对象的多重背景图像（背景色background-color不能设置多重）。 

•	一个元素可以设置多重背景图像。 

•	每组属性间使用逗号分隔。 

•	如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。 

•	示例：假设要在同一个元素上定义3个背景图像 

缩写方式：

background:url(test1.jpg) no-repeat scroll 10px 20px,url(test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;

background-origin:content-box,content-box,content-box;

background-clip:padding-box,padding-box,padding-box;

background-size:50px 60px,50px 60px,50px 60px;

拆分方式：

background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);

background-repeat:no-repeat,no-repeat,no-repeat;

background-attachment:scroll,scroll,scroll;

background-repeat:10px 20px,50px 60px,90px 100px;

background-origin:content-box,content-box,content-box;

background-clip:padding-box,padding-box,padding-box;

background-size:50px 60px,50px 60px,50px 60px;

•	如果定义了多个背景图片，而其他属性只有一个参数值，则表明所有背景图片的该属性都应用同一个参数值。据此可以对上面的例子进行缩写：

缩写方式：

background:url(test1.jpg) no-repeat scroll 10px 20px,url(test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;

background-origin:content-box;

background-clip:padding-box;

background-size:50px 60px;

拆分方式：

background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);

background-repeat:no-repeat;

background-attachment:scroll;

background-repeat:10px 20px,50px 60px,90px 100px;

background-origin:content-box;

background-clip:padding-box;

background-size:50px 60px;

十二、颜色color

Color 属性有 

	Color     直接指定颜色值

	Opacity    检索或设置对象的不透明度

			值：<number>： 使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。

十三、字体font：

	复合属性 

	font：[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | 值：

	<font-style>： 指定文本字体样式  

	normal： 指定文本字体样式为正常的字体 

	italic： 指定文本字体样式为斜体。对于没有斜体变量的特殊字体，将应					用oblique 

	oblique： 指定文本字体样式为倾斜的字体 

	<font-variant>： 指定文本是否为小型的大写字母 

		normal： 正常的字体 

		small-caps： 小型的大写字母字体 

<font-weight>： 指定文本字体的粗细 

	font-weight：normal | bold | bolder | lighter | <integer>

		normal： 正常的字体。相当于number为400 

		bold： 粗体。相当于number为700。 

		bolder： 特粗体。也相当于strong和b对象的作用 

		lighter： 细体 

		<integer>： 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 					| 700 | 800 | 900 

	<font-size>： 指定文本字体尺寸 

		<absolute-size>： 根据对象字体进行调节。可选参数值：xx-small | x-small | small | 						medium | large | x-large | xx-large 

		<relative-size>： 相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。					可选参数值：smaller | larger 

		<length>： 用长度值指定文字大小。不允许负值。 

		<percentage>： 用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不				允许负值。 

	<line-height>： 指定文本字体的行高 

		normal： 允许内容顶开或溢出指定的容器边界。 

		<length>： 用长度值指定行高。可以为负值。 

		<percentage>： 用百分比指定行高，其百分比取值是基于字体的高度尺寸。可以为负值。 

		<number>： 用乘积因子指定行高。可以为负值。

	<font-family>： 指定文本使用某个字体或字体序列 

		<family-name>： 字体名称。按优先顺序排列。以逗号隔开。如果字体名称					包含空格或中文，则应使用引号括起 

		<generic-family>：字体序列名称。

	caption： 使用有标题的系统控件的文本字体（如按钮，菜单等）（CSS2） 

	icon： 使用图标标签的字体（CSS2） 

	menu： 使用菜单的字体（CSS2） 

	message-box： 使用信息对话框的文本字体（CSS2） 

	small-caption： 使用小控件的字体（CSS2） 

	status-bar： 使用窗口状态栏的字体（CSS2） 

十四、文本 Text:

  Text 的属性有 ：

	Text-indent： 检索或设置对象中的文本的缩进    具体值或者百分比

	Text-overflow: 检索或设置是否使用一个省略标记(…)标示对象内文本的溢出与否

		clip： 当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。 

		ellipsis： 当对象内文本溢出时显示省略标记（...）。 

	Text-align: 设置或检索对象中文本的对齐方式

		left： 内容左对齐。 

		center： 内容居中对齐。 

		right： 内容右对齐。 

		justify： 内容两端对齐。写本文档时仅Firefox能看到正确效果 

		start： 内容对齐开始边界。（CSS3） 

		end： 内容对齐结束边界。（CSS3）

	Text-transform:检索或设置对象中的文本的大小写

		none： 无转换 

		capitalize： 将每个单词的第一个字母转换成大写 

		uppercase： 转换成大写 

		lowercase： 转换成小写 

		full-width： ??（CSS3） 

		full-size-kana： ??（CSS3）

	Text-decoration: 复合属性，检索或设置对象中的文本的装饰

		[ text-decoration-line ]： 指定文本装饰的种类。相当于CSS1时的text-decoration属性 

		[ text-decoration-style ]： 指定文本装饰的样式。 

		[ text-decoration-color ]： 指定文本装饰的颜色。 

	blink： 指定文字的装饰是闪烁。写本文档时仅Firefox和Opera支持该参数值 

	text-shadow:检索或设置对象中的文字是否有阴影及模糊效果

		none： 无阴影 

		<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 

		<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 

		<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 

		<color>： 设置对象的阴影的颜色。 

	text—fill-color:设置或检索对象中是文字的填充颜色

	text-stroke：复合属性。设置或检索对象中的文字的描边

		[ text-stroke-width ]： 设置或检索对象中的文字的描边厚度 

		[ text-stroke-color ]： 设置或检索对象中的文字的描边颜色 

	Text-stroke-width:设置或检索对象中的文字的描边厚度

	Text-stroke-color：设置或检索对象中的文字的描边颜色

	Letter-spacing：	检索或设置对象中的文字之间的间隔

		normal： 默认间隔 

		<length>： 用长度值指定间隔。可以为负值。

		设置或检索当表格的单元格无内容时，是否显示该单元格的边框。

	Word-spacing: 	检索或设置对象中的单词之间插入的空格数  检索或设置对象中的单词之间间隔。 

		该属性将指定的间隔添加到每个单词(词内不发生)之后，但最后一个字将被排除在外。 

		判断是否为单词的依据是单词间是否有空格。 

	Vertical-align: 	设置或检索对象内容的垂直对齐方式 

		baseline： 将支持valign特性的对象的内容与基线对齐 

		sub： 垂直对齐文本的下标 

		super： 垂直对齐文本的上标 

		top： 将支持valign特性的对象的内容与对象顶端对齐 

		text-top： 将支持valign特性的对象的文本与对象顶端对齐 

		middle： 将支持valign特性的对象的内容与对象中部对齐 

		bottom： 将支持valign特性的对象的文本与对象底端对齐 

		text-bottom： 将支持valign特性的对象的文本与对象顶端对齐 

		<percentage>： 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。 

		<length>： 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2） 

	Word-wrap: 	设置或检索当当前行超过指定容器的边界时是否断开				转行

		normal： 允许内容顶开或溢出指定的容器边界。 

		break-word： 内容将在边界内换行。如果需要，单词内部允许断行。 

	White-space：设置或检索对象内空格的处理方式

		normal： 默认处理方式。 

		pre： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象 

		nowrap： 强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。 

		pre-wrap： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。 

		pre-line： 保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。 

	Direction: 检索或设置文本流的方向

		ltr： 文本流从左到右。 

		rtl： 文本流从右到左。 

	Unicode-bidi:  检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离

		normal： 对象不打开附加的嵌入层，对于内联要素，隐式重排序跨对象边界进行工作。 

		embed： 对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序。 

		bidi-override： 严格按照direction属性的值重排序。忽略隐式双向运算规则。 

	Tab-size : 检索或设置对象中 的制表符的长度

		<integer>： 用整数值指定制表符的长度。不允许负值。 

		<length>： 用长度值指定制表符的长度。不允许负值。 

十五、列表（List）

  列表的属性有

	list-style：复合属性。设置列表项相关的内容

		[ list-style-image ]： 设置或检索作为对象的列表项标记的图像 

		[ list-style-position ]： 设置或检索作为对象的列表项标记如何根据文本排列 

		[ list-style-type ]： 设置或检索对象的列表项所使用的预设标记 

	list-style-image: 设置或检索作为对象的列表项标记的图像

		none： 不指定图像 

		<url>： 使用绝对或相对地址指定列表项标记图像。 

		设置或检索作为对象的列表项标记的图像。 

•	若list-style-image属性为none或指定图像不可用时，list-style-type属性将发生作用。

	list-style-position: 设置或检索作为对象的列表项标记如何根据文本排列

	outside： 列表项目标记放置在文本以外，且环绕文本不根据标记对齐 

	inside： 列表项目标记放置在文本以内，且环绕文本根据标记对齐 

•		仅作用于具有display值等于list-item的对象（如li对象）。 

•	注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性。 

list-style-type: 设置或检索对象的列表项所使用的预设标记

	disc： 实心圆(CSS1) 

	circle： 空心圆(CSS1) 

	square： 实心方块(CSS1) 

	decimal： 阿拉伯数字(CSS1) 

	lower-roman： 小写罗马数字(CSS1) 

	upper-roman： 大写罗马数字(CSS1) 

	lower-alpha： 小写英文字母(CSS1) 

	upper-alpha： 大写英文字母(CSS1) 

	none： 不使用项目符号(CSS1) 

	armenian： 传统的亚美尼亚数字(CSS2) 

	cjk-ideographic： 浅白的表意数字(CSS2) 

	georgian： 传统的乔治数字(CSS2) 

	lower-greek： 基本的希腊小写字母(CSS2) 

	hebrew： 传统的希伯莱数字(CSS2) 

	hiragana： 日文平假名字符(CSS2) 

	hiragana-iroha： 日文平假名序号(CSS2) 

	katakana： 日文片假名字符(CSS2) 

	katakana-iroha： 日文片假名序号(CSS2) 

	lower-latin： 小写拉丁字母(CSS2) 

	upper-latin： 大写拉丁字母(CSS2) 

	若list-style-image属性为none或指定图像不可用时，list-style-type属性将发生作用。 仅作用于具有display值等于list-item的对象（如li对象）。 

	注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性。 	对应的脚本特性为listStyleType。 

十六、表格table

	Table 属性有：

	Table-layout: 设置或检索表格的布局算法

		auto： 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢 

		fixed： 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切 

	Border-collapse: 设置或检索表格的行和单元格的边是合并在一起还是按照标准的html样式分开

		separate： 边框独立 

		collapse： 相邻边被合并

	Border-spacing: 设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距

•			该属性作用等同于标签属性cellspacing。 

•	只有当表格边框独立（即border-collapse属性等于separate时）此属性才起作用。 

•	如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。 

•	如果只提供一个length值时，这个值将作用于横向和纵向上的间距。 

•	对应的脚本特性为borderSpacing。 

	Caption-side: 设置或检索表格的caption对象是在表格的哪边

		top： 指定caption在表格上边 

		bottom： 指定caption在表格下边

	Empty-cells: 设置或检索当表格的单元格无内容时，是否显示该单元格的边框。

		hide： 指定当表格的单元格无内容时，隐藏该单元格的边框。 

		show： 指定当表格的单元格无内容时，显示该单元格的边框。 

十七、内容 content

	属性有：

	Content： 用来和 :after 及 :before 伪元素一起使用，在对象前或后显示内容。

		normal： 默认值。表现与none值相同 

		none： 不生成任何值。 

		<attr>： 插入标签属性值 

		<url>： 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源） 

		<string>： 插入字符串 

		counter(name)： 使用已命名的计数器 

	counter(name,list-style-type)： 使用已命名的计数器并遵从指定的list-style-type属性 

	counters(name,string)： 使用所有已命名的计数器 

	counters(name,string,list-style-type)： 使用所有已命名的计数器并遵从指定的	list-style-type属性 

	no-close-quote： 并不插入quotes属性的后标记。但增加其嵌套级别 

	no-open-quote： 并不插入quotes属性的前标记。但减少其嵌套级别 

	close-quote： 插入quotes属性的后标记 

	open-quote： 插入quotes属性的前标记 

Counter-increment: 设定当一个selector 发生计数器增加的值。

		none： 阻止计数器增加 

		<identifier>： identifier定义一个或多个将被增加的selector，id，或者class 

		<integer>： 定义计算器每次增加的数值，可以为负值，默认值是1 

Counter-reset：将指定selector的计数器复位。

	none： 阻止计数器复位 

	<identifier>： identifier定义一个或多个将被复位的selector，id，或者class 

	<integer>： 定义被复位的数值，可以为负值，默认值是0 

Quotes：设置或检索对象内使用的嵌套标记

	none： content属性的open-quote和close-quote值将不会生成任何标记 

	<string>： 定义content属性的open-quote和close-quote值的标记，2个为一组 

十八、用户界面User Interface

	常用的属性有：

	Outline: 复合属性。设置或检索对象外的线条轮廓

		[ outline-width ]： 指定轮廓边框的宽度。 

		[ outline-style ]： 指定轮廓边框的样式。 

		[ outline-color ]： 指定轮廓边框的颜色

	Outline-width:  设置或检索对象外的线条轮廓的宽度

	Outline-style: 设置或检索对象外地线条轮廓的样式

	Outline-color：设置或检索对象外的线条轮廓的颜色

	Outline-offset: 设置或检索对象外的线条轮廓偏移位置的数值

			设置或检索对象外的线条轮廓偏移容器的值

	Nav-index:  设置或检索对象的导航顺序

		auto： 默认顺序。 

		<id>： 被导航元素的id。 

		<target-name>： 框架目标页面之间的元素焦点导航。 

	Nav-up:  设置或检索对象的导航方向

	Nav-right: 设置或检索对象的导航方向

	Nav-down: 设置或检索对象的导航方向

	Nav-left：设置或检索对象的导航方向

	Cursor ：设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

		cursor：[<url> [<x> <y>]?,]*[ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]

默认值：auto

	Zoom: 设置或检索对吸那个的缩放比例

		normal： 使用对象的实际尺寸。 

		<number>： 用浮点数来定义缩放比例。不允许负值 

		<percentage>： 用百分比来定义缩放比例。不允许负值 

	Box-sizing: 设置或检索对象的盒模型组成模式

		语法：box-sizing:content-box|border-box

	content-box： 

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 

此属性表现为标准模式下的盒模型。 

	border-box： 

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 

此属性表现为怪异模式下的盒模型。 

	Resize:设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小

值：	none： 不允许用户调整元素大小。 

		both： 用户可以调节元素的宽度和高度。 

		horizontal： 用户可以调节元素的宽度 

		vertical： 用户可以调节元素的高度。 

	Ime-mode :设置或检索是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态

	auto： 不影响IME的状态。 

	normal： 正常的IME状态 

	active： 指定所有使用ime输入的字符。即激活本地语言输入法。用户仍				可以撤销激活ime 

	inactive： 指定所有不使用ime输入的字符。即激活非本地语言。用户仍				可以撤销激活ime 

	disabled： 完全禁用ime。对于有焦点的控件(如输入框)，用户不可以激活ime 

十九、多栏  multi-column

	属性有：

	Columns: 设置或检索对象的列数和每列的宽度。复合属性

		[ column-width ]： 设置或检索对象每列的宽度 

		[ column-count ]： 设置或检索对象的列数 

	Column-width: 设置或检索对象每列的宽度

	Column-count： 设置或检索对象的列数

	Column-gap: 设置或检索对象的列与列之间的间隙

	Column-rule:设置或检索对象的列与列之间的边框。复合属性

		[ column-rule-width ]： 设置或检索对象的列与列之间的边框厚度。 

		[ column-rule-style ]： 设置或检索对象的列与列之间的边框样式。 

		[ column-rule-color ]： 设置或检索对象的列与列之间的边框颜色。 

	Column-span: 设置或检索对象元素是否横跨所有列

		none： 不跨列 

		all： 横跨所有列 

Column-fill:设置或检索对象所有列的高度是否统一。

	auto： 列高度自适应内容 

	balance： 所有列的高度以其中最高的一列统一 

Column-break-before： 设置或检索对象之前是否断行

	auto： 既不强迫也不禁止在元素之前断行并产生新列 

	always： 总是在元素之前断行并产生新列 

	avoid： 避免在元素之前断行并产生新列 

Column-break-after： 设置或检索对象之后是否断行

Column-break-inside：设置或检索对象内部是否断行

	auto： 既不强迫也不禁止在元素内部断行并产生新列 

	avoid： 避免在元素内部断行并产生新列 

二十、关于动画、媒体等相关的未细查。

	有2D变换   过渡   动画   打印 媒体查询  only IE  only Firefox等

关于单位 附录 取值 语法与规则未细看