常用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