常用CSS样式属性|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
|
