常用CSS样式属性
【长度单位】
|
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(不加删除线) overline(加顶线) 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 |
按钮边框内层左边与上面的颜色及滚动条底部轨道网状颜色(与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 |
|
