1, 背景
| 名称 | 说明 | 可能值 | 范例 |
| background | 背景 | 下面的背景设定值皆适用 | background:fixed |
| background-attachment | 背景图性是否固定 | fixed, scroll | background-attachment:fixed |
| background-position | 背景图位置 | 水平 垂直 | background-position:135 159 |
| background-color | 背景颜色 | 颜色 transparent(透明) | backgroun-color:yellow |
| background-image | 背景图片 | none(无背景图) url(****)(图片位置) | background-image:url(test.jpg) |
| background-repeat | 背景是否重复 | repeat(重复) repeat-x(水平重复) repeat-y(垂直重复) no-repeat(不重复) | background-repeat:repeat |
2, 表格
| 名称 | 说明 | 可能值 | 范例 |
| border | 表格边框设定 | 以下所有皆可使用 | border:green |
| border-color | 边框颜色 | 任何颜色表示方法 | border-color:blue |
| border-style | 边框样式 | none(无边框) dotted(点线) dashed(虚线) solid(实线) double(双线) groove(立体凹线) ridge(立体凸线) inset(立体嵌入线) outset(立体隆起线) | border-style:dotted |
| border-width | 边框宽度 | 数字 | border-width:5 |
| padding | 边框补白 | 数字 | padding:5 |
| margin | 设置元素的边距 (可设置四个值) | 百分比（基于父对象总高度或宽度的百分比） 长度值（定义一个固定的边距） auto（浏览器设定的值）。 | margin:10px 5px 15px 20px; |
| margin-bottom | 设置元素的底边距 | 同margin | margin-bottom:1%; |
| margin-left | 设置元素的左边距 | 同margin | margin-left:1% |
| margin-right | 设置元素的右边据 | 同margin | margin-right:1% |
| margin-top | 设置元素的顶边距 | 同margin | margin-top:1% |
| outline | 在一行设置所有的outline属性 | 参见outlineWidth outlineStyle outlineColor | |
| outline-color | 设置围绕元素的轮廓颜色 | color 指定轮廓颜色。 invert 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。 inherit 规定应该从父元素继承轮廓颜色的设置。 | outline:#00FF00 dotted thick; |
| outline-style | 设置围绕元素的轮廓样式 | none 默认。定义无轮廓。 dotted 定义点状的轮廓。 dashed 定义虚线轮廓。 solid 定义实线轮廓。 double 定义双线轮廓。双线的宽度等同于 outline-width 的值。 groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 inherit 规定应该从父元素继承轮廓样式的设置。 | outline-style：double |
| outline-width | 设置围绕元素的轮廓宽度 | thin 规定细轮廓。 medium 默认。规定中等的轮廓。 thick 规定粗的轮廓。 length 允许您规定轮廓粗细的值。 inherit 规定应该从父元素继承轮廓宽度的设置。 | outline-width：2px |
| padding | 设置元素的填充 (可设置四个值) | length 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px % 规定基于父元素的宽度的百分比的填充 inherit 指定应该从父元素继承padding | padding:10px 5px 15px 20px; |
| padding-bottom | 设置元素的下填充 | 同padding | padding-bottom：1% |
| padding-left | 设置元素的左填充 | 同padding | padding-left：1% |
| padding-right | 设置元素的右填充 | 同padding | padding-right：1% |
| padding-top | 设置元素的顶填充 | 同padding | padding-top：inherit |
3, 布局
| 名称 | 说明 | 可能值 | 范例 |
| visibility | 显示或是隐藏 | inherit(父组件决定) hidden(隐藏) visible(显示) | visibility:hidden |
| width | 宽度 | auto 数字 | width:135 |
| height | 高度 | auto 数字 | height:100 |
| z-index | Z轴高度(立体，是否在另一个组件之上) | auto 数字 | z-index:135 |
| position | 定位方式 | absolute (绝对寻址-依窗口坐标，原点为父窗口左上角) relative (相对定位-以一般网页排列[right.center.left]后再根据坐标定位，原点为定位后的位置) static (静态定位-以一般网页排列) | position:absolute |
| clear | 设置在元素的哪边不允许其他的浮动元素 | left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承 clear 属性的值。 | clear:both; |
| display | 设置元素如何被显示 | none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 table-row 此元素会作为一个表格行显示（类似 <tr>）。 table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 table-column 此元素会作为一个单元格列显示（类似 <col>） table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） table-caption 此元素会作为一个表格标题显示（类似 <caption>） inherit 规定应该从父元素继承 display 属性的值。 | display="inline" |
| bottom | 设置元素的底边缘距离父元素底边缘的之上或之下的距离 | auto 默认值。通过浏览器计算底部的位置。 % 设置以包含元素的百分比计的底边位置。可使用负值。 length 使用 px、cm 等单位设置元素的底边位置。可使用负值。 inherit 规定应该从父元素继承 bottom 属性的值。 | bottom:5px; |
| position | 把元素放置在static, relative, absolute 或 fixed 的位置 | absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 sticky 粘性定位，该定位基于用户滚动的位置。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 inherit 规定应该从父元素继承 position 属性的值。 initial 设置该属性为默认值 | position:absolute; |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移 | auto 默认值。通过浏览器计算底部的位置。 % 设置以包含元素的百分比计的底边位置。可使用负值。 length 使用 px、cm 等单位设置元素的底边位置。可使用负值。 inherit 规定应该从父元素继承 bottom 属性的值。 | right:5px; |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 | auto 默认值。通过浏览器计算底部的位置。 % 设置以包含元素的百分比计的底边位置。可使用负值。 length 使用 px、cm 等单位设置元素的底边位置。可使用负值。 inherit 规定应该从父元素继承 bottom 属性的值。 | left:5px; |
| top | 设置元素的顶边缘距离父元素顶边缘的之上或之下的距离 | auto 默认值。通过浏览器计算底部的位置。 % 设置以包含元素的百分比计的底边位置。可使用负值。 length 使用 px、cm 等单位设置元素的底边位置。可使用负值。 inherit 规定应该从父元素继承 bottom 属性的值。 | top:5px; |
| overflow | 规定如何处理不适合元素盒的内容 | visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 | overflow="scroll" |
| max-height | 设置元素的最大高度 | none 默认。定义对元素被允许的最大高度没有限制。 length 定义元素的最大高度值。 % 定义基于包含它的块级对象的百分比最大高度。 inherit 规定应该从父元素继承 max-height 属性的值。 | max-height:50px; |
| max-width | 设置元素的最大宽度 | none 默认。定义对元素被允许的最大高度没有限制。 length 定义元素的最大高度值。 % 定义基于包含它的块级对象的百分比最大高度。 inherit 规定应该从父元素继承 max-height 属性的值。 | max-height:50px; |
| min-height | 设置元素的最小高度 | none 默认。定义对元素被允许的最大高度没有限制。 length 定义元素的最大高度值。 % 定义基于包含它的块级对象的百分比最大高度。 inherit 规定应该从父元素继承 max-height 属性的值。 | min-height:50px; |
| min-width | 设置元素的最小宽度 | none 默认。定义对元素被允许的最大高度没有限制。 length 定义元素的最大高度值。 % 定义基于包含它的块级对象的百分比最大高度。 inherit 规定应该从父元素继承 max-height 属性的值。 | min-width:50px; |
4, 文字
| 名称 | 说明 | 可能值 | 范例 |
| font | 文字设定 | 以下所有皆可使用 | font:arial |
| font-family | 字体 | 字体名称 | font-family:arial |
| font-size | 字体大小 | 百分比或是数字(单位) | font-size:12px |
| font-style | 字型样式 | normal 默认值。浏览器显示一个标准的字体样式。 italic 浏览器会显示一个斜体的字体样式。 oblique 浏览器会显示一个倾斜的字体样式。 inherit 规定应该从父元素继承字体样式。 | font-style:italic |
| font-variant | 字型特别样式 | normal 默认值。浏览器会显示一个标准的字体。 small-caps 浏览器会显示小型大写字母的字体。 inherit 规定应该从父元素继承 font-variant 属性的值。 | font-variant:small-caps |
| font-weight | 字型粗细 | normal 默认值。定义标准的字符。 bold 定义粗体字符。 bolder 定义更粗的字符。 lighter 定义更细的字符。 100-900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 | font-weight:bolder |
| letter-spacing | 字符相距 | normal 默认。规定字符间没有额外的空间。 length 定义字符间的固定空间（允许使用负值）。 inherit 规定应该从父元素继承 letter-spacing 属性的值。 | letter-spacing:5 |
| text-align | 字符对齐 | left 把文本排列到左边。默认值：由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。 justify 实现两端对齐文本效果。 inherit 规定应该从父元素继承 text-align 属性的值。 | text-align:justify |
| text-decoration | 字符样式 | none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 inherit 规定应该从父元素继承 text-decoration 属性的值。 | text-decoration:underline |
| text-shadow* | 设置文本的阴影效果 | h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊的距离。 color 可选。阴影的颜色。参阅 CSS 颜色值。 | text-shadow="2px 2px #ff0000" |
| text-transform | 对文本设置大写效果 | none 默认。定义带有小写字母和大写字母的标准的文本。 capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 lowercase 定义无大写字母，仅有小写字母。 inherit 规定应该从父元素继承 text-transform 属性的值。 | text-transform="uppercase" |
| color | 设置文本的颜色 | color_name 规定颜色值为颜色名称的颜色（比如 red）。 hex_number 规定颜色值为十六进制值的颜色（比如 #ff0000）。 rgb_number 规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。 inherit 规定应该从父元素继承颜色。 | color="#FF0000" |
| white-space | 设置如何设置文本中的折行和空白符 | normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。 | white-space:nowrap; |
| word-spacing | 设置文本中的词间距 | normal 默认。定义单词间的标准空间。 length 定义单词间的固定空间。 inherit 规定应该从父元素继承 word-spacing 属性的值。 | word-spacing:30px; |
| letter-spacing | 设置字符间距 | normal 默认。规定字符间没有额外的空间。 length 定义字符间的固定空间（允许使用负值）。 inherit 规定应该从父元素继承 letter-spacing 属性的值。 | letter-spacing:2px |
| line-height | 设置行间距 | normal 默认。设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 length 设置固定的行间距。 % 基于当前字体尺寸的百分比行间距。 inherit 规定应该从父元素继承 line-height 属性的值。 | line-height:90% |
5, 滚动条
| 名称 | 说明 | 可能值 | 范例 |
| scrollbar-base-color | 滚动条列主色调 | 颜色 | scrollbar-base-color:#aaaaaa |
| scrollbar-arrow-color | 按钮箭头的颜色 | 颜色 | scrollbar-arrow-color:#000000 |
| scrollbar-face-color | 移动棒的颜色 | 颜色 | scrollbar-face-color:#ffee99 |
| scrollbar-highlight-color | 按钮边框内层左边与上面的颜色及滚动条底部轨道网状颜色(与track同时使用网状会消失) | 颜色 | scrollbar-highlight-color: #000000 |
| scrollbar-3dlight-color | 按钮边框外层左边与上面的颜色 | 颜色 | scrollbar-3dlight-color:#000000 |
| scrollbar-darkshadow-color | 按钮边框外层右边与下面的颜色 | 颜色 | scrollbar-darkshadow-color:#000000 |
| scrollbar-shadow-color | 按钮边框内层右边与下面的颜色 | 颜色 | scrollbar-track-color: #cccccc |
| scrollbar-track-color | 底部轨道颜色 | 颜色 | scrollbar-track-color: #cccccc |
6, 长度单位
| 单位 | 单位说明 | 范例 |
| pt | Point，就像是Word里面的Point一样大小 | font-size:10pt |
| px | Pixels，依您屏幕分辨率而决定大小 | font-size:10px |
| pc | Pica，6个Pica是一英吋 | font-size:10pc |
| mm | 公厘，用过尺...这个设定值完全不会因为其它设定而改变 | font-size:10mm |
| cm | 公分，不会因为使用者设定而改变 | font-size:10cm |
| % | 百分比，大部分是指所在位置宽度或者长度百分比 | font-size:10% |
7, 颜色表示
| 表示方式 | 表示方式说明 | 范例 |
| #rrggbb | 可以用Windows色彩选择工具找到 | color:#feefc7 |
| rgb(#,#,#) | 用数字来表示红色蓝色以及绿色的混合...也可以用Windows色彩选择工具找 | color:rgb(135,255,124) |
| rgb(%,%,%) | 用百分比来代表红色蓝色以及绿色的强度来混合颜色 | color:rgb(70%,35%,41%) |
| 颜色名称 | 用颜色的名称来指定颜色 | color:brown |
| RGBA（红，绿，蓝，alpha） | RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。 | color:rgba(255,0,0,0.5); |
| HSL（色调，饱和度，明度） | IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。色相是在色轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，240是蓝色的。饱和度是一个百分比值;0％意味着灰色和100％的阴影，是全彩。亮度也是一个百分点;0％是黑色的，100％是白色的 | color:hsl(120,65%,75%); |
| HSLA（色调，饱和度，亮度，α） | HSLA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+.支持.颜色值是一个带有alpha通道的HSL颜色值的延伸,Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。 | color:hsla(120,65%,75%,0.3) |
993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
