常用CSS样式属性CSS样式表
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
字符相距
normal(普通)
数字(预设为0)
letter-spacing:5
text-align
字符对齐
left(左边)
right(右边)
center(中间)
justify(左右平分)
text-align:justify
text-decoration
字符样式
none(普通)
underline(加底线)
字体
字体名称
font-family:arial
font-size
字体大小
百分比或是数字(单位)
font-size:12px
font-style
字型样式
normal(普通)
italic(斜体)
oblique(斜体)
font-style:italic
font-variant
字型特别样式
normal(普通)
backgroun-color:yellow
background-image
背景图片
none(无背景图)
url(****)(图片位置)
background-image:url(test.jpg)
background-position
背景图位置
水平 垂直
background-position:135 159
small-caps(大小英文字母)
font-variant:small-caps
font-weight
字型粗细
normal(普通)
bold(粗体)
bolder(超粗体)
lighter(细体)
数字(400=normal 700=bold )
font-weight:bolder
letter-spacing
常用CSS样式属性|CSS样式表
【长度单位】
CSS可使用长度单位
单位
单位说明
例
pt
Point，就像是Word里面的Point一样大小
font-size:10pt
px
Pixels，依您屏幕分辨率而决定大小
font-size:10px
pc
Pica，6个Pica是一英吋
font-size:10pc
mm
公厘，用过尺...这个设定值完全不会因为其它设定而改变
边框补白
数字
padding:5
【鼠标设定】
CSS可用鼠标光标设定值
名称
说明
可能值
例
cursor
光标图标
auto(自动决定)
default(默认值)
crosshair(十字)
hand(手形)
move(移动时的光标)
help(有问号的游标)
text(文字编辑的光标)
对象的Y坐标(原点根据postion属性有所不同)
数字
left(对象的position属性须为absolute或relative)
对象的X坐标(原点根据postion属性有所不同)
数字
【文字设定可用值】
CSS可用文字设定值
名称
说明
可能值
例
font
文字设定
以下所有皆可使用
font:arial
font-family
名称
说明
可能值
例
border
表格边框设定
以下所有皆可使用
border:green
border-color
border-(框线位置)-color
边框颜色
任何颜色表示方法
border-color:blue
border-style
border-(框线位置)-style
边框样式
none(无边框)
dotted(点线)
no-underline(不加底线)
blink(闪烁)
no-blink(不闪烁)
line-through(加删除线)
no-line-through(不加删除线)
overline(加顶线)
no-overline(不加顶线)
text-decoration:underline
【表格设定】
CSS可用表格设定值 框线位置：(上-top.下-bottom.左-left.右-right)
background-repeat
背景是否重复
repeat(重复)
repeat-x(水平重复)
repeat-y(垂直重复)
no-repeat(不重复)
background-repeat:repeat
【属性可用值】
CSS可用属性值
名称
说明
可能值
例
visibility
显示或是隐藏
inherit(父组件决定)
用数字来表示红色蓝色以及绿色的混合...也可以用Windows色彩选择工具找
color:rgb(135,255,124)
rgb(%,%,%)
用百分比来代表红色蓝色以及绿色的强度来混合颜色
color:rgb(70%,35%,41%)
颜色名称
用颜色的名称来指定颜色
color:brown
【背景可用值】
CSS可用背景值
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)
dashed(虚线)
solid(实线)
double(双线)
groove(立体凹线)
ridge(立体凸线)
inset(立体嵌入线)
outset(立体隆起线)
border-style:dotted
border-width
border-(框线位置)-width
边框宽度
数字
border-width:5
padding
font-size:10mm
cm
公分，不会因为使用者设定而改变
font-size:10cm
%
百分比，大部分是指所在位置宽度或者长度百分比
font-size:10%
【颜色表示】
CSS可用颜色表示方式
表示方式
表示方式说明
例
#rrggbb
可以用Windows色彩选择工具找到
color:#feefc7
rgb(#,#,#)
名称
说明
可能值
例
background
d:fixed
background-attachment
背景图性是否固定
fixed, scroll
background-attachment:fixed
background-color
背景颜色
颜色
transparent(透空)
normal(普通)
数字(预设为0)
letter-spacing:5
text-align
字符对齐
left(左边)
right(右边)
center(中间)
justify(左右平分)
text-align:justify
text-decoration
字符样式
none(普通)
underline(加底线)
字体
字体名称
font-family:arial
font-size
字体大小
百分比或是数字(单位)
font-size:12px
font-style
字型样式
normal(普通)
italic(斜体)
oblique(斜体)
font-style:italic
font-variant
字型特别样式
normal(普通)
backgroun-color:yellow
background-image
背景图片
none(无背景图)
url(****)(图片位置)
background-image:url(test.jpg)
background-position
背景图位置
水平 垂直
background-position:135 159
small-caps(大小英文字母)
font-variant:small-caps
font-weight
字型粗细
normal(普通)
bold(粗体)
bolder(超粗体)
lighter(细体)
数字(400=normal 700=bold )
font-weight:bolder
letter-spacing
常用CSS样式属性|CSS样式表
【长度单位】
CSS可使用长度单位
单位
单位说明
例
pt
Point，就像是Word里面的Point一样大小
font-size:10pt
px
Pixels，依您屏幕分辨率而决定大小
font-size:10px
pc
Pica，6个Pica是一英吋
font-size:10pc
mm
公厘，用过尺...这个设定值完全不会因为其它设定而改变
边框补白
数字
padding:5
【鼠标设定】
CSS可用鼠标光标设定值
名称
说明
可能值
例
cursor
光标图标
auto(自动决定)
default(默认值)
crosshair(十字)
hand(手形)
move(移动时的光标)
help(有问号的游标)
text(文字编辑的光标)
对象的Y坐标(原点根据postion属性有所不同)
数字
left(对象的position属性须为absolute或relative)
对象的X坐标(原点根据postion属性有所不同)
数字
【文字设定可用值】
CSS可用文字设定值
名称
说明
可能值
例
font
文字设定
以下所有皆可使用
font:arial
font-family
名称
说明
可能值
例
border
表格边框设定
以下所有皆可使用
border:green
border-color
border-(框线位置)-color
边框颜色
任何颜色表示方法
border-color:blue
border-style
border-(框线位置)-style
边框样式
none(无边框)
dotted(点线)
no-underline(不加底线)
blink(闪烁)
no-blink(不闪烁)
line-through(加删除线)
no-line-through(不加删除线)
overline(加顶线)
no-overline(不加顶线)
text-decoration:underline
【表格设定】
CSS可用表格设定值 框线位置：(上-top.下-bottom.左-left.右-right)
background-repeat
背景是否重复
repeat(重复)
repeat-x(水平重复)
repeat-y(垂直重复)
no-repeat(不重复)
background-repeat:repeat
【属性可用值】
CSS可用属性值
名称
说明
可能值
例
visibility
显示或是隐藏
inherit(父组件决定)
用数字来表示红色蓝色以及绿色的混合...也可以用Windows色彩选择工具找
color:rgb(135,255,124)
rgb(%,%,%)
用百分比来代表红色蓝色以及绿色的强度来混合颜色
color:rgb(70%,35%,41%)
颜色名称
用颜色的名称来指定颜色
color:brown
【背景可用值】
CSS可用背景值
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)
dashed(虚线)
solid(实线)
double(双线)
groove(立体凹线)
ridge(立体凸线)
inset(立体嵌入线)
outset(立体隆起线)
border-style:dotted
border-width
border-(框线位置)-width
边框宽度
数字
border-width:5
padding
font-size:10mm
cm
公分，不会因为使用者设定而改变
font-size:10cm
%
百分比，大部分是指所在位置宽度或者长度百分比
font-size:10%
【颜色表示】
CSS可用颜色表示方式
表示方式
表示方式说明
例
#rrggbb
可以用Windows色彩选择工具找到
color:#feefc7
rgb(#,#,#)
名称
说明
可能值
例
background
d:fixed
background-attachment
背景图性是否固定
fixed, scroll
background-attachment:fixed
background-color
背景颜色
颜色
transparent(透空)