惯用CSS样式属性(转)

常用CSS样式属性(转)
原文地址:http://www.cnblogs.com/sidecore/archive/2013/01/20/2868464.html

【长度单位】
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%


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


【背景可用值】
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


【属性可用值】
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属性有不同) 数字


【文字设定可用值】
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


【表格设定】
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


【鼠标设定】
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


【滚动条设定】
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