关闭

CSS样式表

107人阅读 评论(0) 收藏 举报
分类:

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:41537次
    • 积分:984
    • 等级:
    • 排名:千里之外
    • 原创:38篇
    • 转载:131篇
    • 译文:0篇
    • 评论:1条
    最新评论