常用CSS样式属性（转）

原文地址：[url]http://www.cnblogs.com/sidecore/archive/2013/01/20/2868464.html[/url]

[b]【长度单位】[/b]
[table]
|CSS可使用长度单位|
|单位|单位说明|范例|
|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%|
[/table]

[b]【颜色表示】[/b]
[table]
|CSS可用颜色表示方式|
|表示方式|表示方式说明|范例|
|#rrggbb|可以用Windows色彩选择工具找到|color:#feefc7|
|rgb(#,#,#)|用数字来表示红色蓝色以及绿色的混合...也可以用Windows色彩选择工具找|color:rgb(135,255,124)|
|rgb(%,%,%)|用百分比来代表红色蓝色以及绿色的强度来混合颜色|color:rgb(70%,35%,41%)|
|颜色名称|用颜色的名称来指定颜色|color:brown|
[/table]

[b]【背景可用值】[/b]
[table]
|CSS可用背景值|
|名称|说明|可能值|范例|
|background|背景|下面的背景设定值皆适用|background:fixed|
|background-attachment|背景图性是否固定|fixed, scroll|background-attachment:fixed|
|background-color|背景颜色|颜色 transparent(透空)|backgroun-color:yellow|
|background-image|背景图片|none(无背景图) url(****)(图片位置)|background-image:url(test.jpg)|
|background-position|背景图位置|水平 垂直|background-position:135 159|
|background-repeat|背景是否重复|repeat(重复) repeat-x(水平重复) repeat-y(垂直重复) no-repeat(不重复)|background-repeat:repeat|
[/table]

[b]【属性可用值】[/b]
[table]
|CSS可用属性值|
|名称|说明|可能值|范例|
|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|
|top(对象的position属性须为absolute或relative)|对象的Y坐标(原点根据postion属性有所同)|数字||
|left(对象的position属性须为absolute或relative)|对象的X坐标(原点根据postion属性有不同)|数字||
[/table]

[b]【文字设定可用值】[/b]
[table]
CSS可用文字设定值
|名称|说明|可能值|范例|
|font|文字设定|以下所有皆可使用 　|font:arial|
|font-family|字体|字体名称|font-family:arial|
|font-size|字体大小|百分比或是数字(单位)|font-size:12px|
|font-style|字型样式|normal(普通) italic(斜体) oblique(斜体)|font-style:italic|
|font-variant|字型特别样式|normal(普通) small-caps(大小英文字母)|font-variant:small-caps|
|font-weight|字型粗细|normal(普通) bold(粗体) bolder(超粗体) lighter(细体) 数字(400=normal 700=bold )|font-weight:bolder|
|letter-spacing|字符相距|normal(普通) 数字(预设为0)|letter-spacing:5|
|text-align|字符对齐|left(左边) right(右边) center(中间) justify(左右平分)|text-align:justify|
|text-decoration|字符样式|none(普通) underline(加底线) no-underline(不加底线) blink(闪烁) no-blink(不闪烁) line-through(加删除线) no-line-through(不加删除线) verline(加顶线) no-overline(不加顶线)|text-decoration:underline|
[/table]

[b]【表格设定】[/b]
[table]
CSS可用表格设定值 框线位置：(上-top.下-bottom.左-left.右-right)
|名称|说明|可能值|范例|
|border|表格边框设定|以下所有皆可使用 　|border:green|
|border-color, border-(框线位置)-color|边框颜色|任何颜色表示方法|border-color:blue|
|border-style, border-(框线位置)-style|边框样式|none(无边框) dotted(点线) dashed(虚线) solid(实线) double(双线) groove(立体凹线) ridge(立体凸线) inset(立体入线) outset(立体隆起线)|border-style:dotted|
|border-width, border-(框线位置)-width|边框宽度|数字|border-width:5|
|padding|边框补白|数字|padding:5|
[/table]

[b]【鼠标设定】[/b]
[table]
CSS可用鼠标光标设定值
|名称|说明|可能值|范例|
|cursor|光标图标|auto(自动决定) default(默认值) crosshair(十字) hand(手形) move(移动时的光标) help(有问号的游标) text(文字编辑的光标) wait(忙碌中的游标) w-resize(向左箭头) e-resize(向右箭头) n-resize(向上箭头) ne-resize{向右上箭头) nw-resize(向左上箭头) s-resize(向下箭头) se-resize(向右下箭头) sw-resize(向左下箭头) 　|cursor:hand|
[/table]

[b]【滚动条设定】[/b]
[table]
CSS可用滚动条列设定值
|名称|说明|可能值|范例|
|scrollbar-base-color|滚动条列主色调|颜色|scrollbar-base-color:#aaaaaa|
|scrollbar-arrow-color|按钮箭头的颜色|颜色 　|scrollbar-arrow-color:#000000|
|scrollbar-face-color|移动棒的颜色|颜色|scrollbar-face-color:#ffee99|
|scrollbar-highlight-color|按钮边框内层左边与上面的颜色及滚动条底部轨道网状颜色(与rack同时使用网状会消失)|颜色|scrollbar-highlight-color: #000000|
|scrollbar-3dlight-color|按钮边框外层左边与上面的颜色|颜色|scrollbar-3dlight-olor:#000000|
|scrollbar-darkshadow-color|按钮边框外层右边与下面的颜色|颜色|scrollbar-darkshadow-color:#000000|
|scrollbar-shadow-color|按钮边框内层右边与下面的颜色|颜色|scrollbar-track-color: #cccccc|
|scrollbar-track-color|底部轨道颜色|颜色|scrollbar-track-color: #cccccc|
[/table]