CSS六章小教程全部看完了，内容远远不及苏沈小雨的CSS中文手册广泛，不过都是常用的。接下来就是实践了，找时间做个PJBLOG皮肤，毕竟别人的永远不如自己的亲切，呵呵。入门很简单的东西是不是要精通就格外的难？
background-repeat 设定背景重复
可能值：
repeat 重复背景图形填满页面
repeat-x 水平方向重复背景图形
repeat-y 垂直方向重复背景图形
no-repeat 不重复显示背景图形
一般范例：BODY { background-repeat : repeat-x }
同轴范例：<BODY style="background-repeat: repeat-x">
background-attachment 设定背景附著
可能值：
scroll 背景图形随著卷轴卷动
fixed 背景图形随著卷轴卷动（浮水印）
一般范例：BODY { background-attachment : fixed }
同轴范例：<BODY style="background-attachment:fixed">
background-position 设定背景位置
可能值：
<percent> X% Y% 图形上X% Y%的点对准元素的X% Y%位置
<length> X Y 将图形左上角置于元素左上角水平 X垂直 Y之处
center 背景图形置于中央
left 背景图形对 左边
right 背景图形对 右边
top 背景图形对 顶部
bottom 背景图形对 底部
一般范例：BODY { background- position : 100% 50% }
同轴范例：<BODY style="background- position:100% 50%">
background 综合设定背景性质
可能值：
background-color 设定背景颜色
background-image 设定背景图形
background-repeat 设定背景重复
background-attachment 设定背景附著
background-position 设定背景位置
一般范例：BODY { BLUE url(image/gif) repeat-x fixed center }
同轴范例：<BODY style="BLUE url(image/gif) repeat-x fixed center">
float 设定浮动性质（多用于文绕图的情形）
可能值：
left 元素靠左，文字围绕其右
right 元素靠右，文字围绕其左
none 以预设的方法显示
一般范例：DIV { float : right }
同轴范例：<DIV style="float:right">
clip 设定裁剪（设定某区域形状及大小，区域外通透）
可能值：
rect(top,right,bottom,left) 设定矩形之上右下左长度，会自动比对对边长度
一般 写法为rect(0,长度,长度,0)
不可以写为rect(0,0,长度,长度)
四个数值皆可以"auto"代替
一般范例：DIV { clip : rect(0,100px,50px,0) }
同轴范例：<DIV style="clip:rect(0,100px,50px,0)">
overflow 设定溢位处理（控制当元素内容超过该元素大小时的显示方式）
可能值：
visible 元素将不会依所设订大小显示，而能看见所有内容
hidden 超过元素所设订大小之部份将被隐藏不予显示
scroll 如有必要出现卷轴可让使用者看到全部的内容
一般范例：DIV { overflow : scroll }
同轴范例：<DIV style="overflow:scroll">
visibility 设定可视度
可能值：
visible 设定该元素显示
hidden 设定该元素不显示，但仍占据空间
inherit 以父元素可视度决定
一般范例：DIV { visibility : hidden }
同轴范例：<DIV style="visibility:hidden">
z-index 设定Ｚ轴参数（三度空间）
可能值：
<number> 十进位数值，数值大的元素会出现在数值小的元素的上方
auto 当元素位置重复时，原始码中写在後面元素会出现在写在前面元素的上方
一般范例：DIV { z-index : 3 }
同轴范例：<DIV style="z-index:3">
font 综合设定字型性质
可能值：
<font-style> 设定字体样式 / normal 普通字 italic 斜体字 oblique 斜体字
<font-variant> 设定文字转换 / normal 普通字 small-caps 将小写文字转换为大写
<font-weight> 设定字型份量 / normal 普通字 bold 粗体字 bolder 相对于父元素稍粗 lighter 相对于父元素稍细
<font-size> 设定文字大小
<font-family> 设定文字字型
line-height 设定列高
可能值：
<number> 以元素字型大小乘以该数即为列高
<length> 设定长度，请参考第一章基本单位的相关说明
<percentage> 百分比，相对于元素字型大小为比例
一般范例：DIV { line-height : 120% }
同轴范例：<DIV style="line-height:120%">
text-align 设定文字对
可能值：
center 对 中央
right 对 右边
left 对 左边
justify 左右对
一般范例：DIV { text-align : center }
同轴范例：<DIV style="text-align:center">
vertical-align 设定垂直对
可能值：
top 对 同列最高元素顶端
bottom 对 同列最低元素底端
baseline 对 底线
middle 对 中央
sub 将元素置于下标
super 将元素置于上标
text-top 对 文字顶端
text-bottom 对 文字底端
<percentage> 参照元素本身列高，以父元素底线为基准作位移
一般范例：SPAN { vertical-align : sub }
同轴范例：<SPAN style="vertical-align:sub">
text-decoration 设定文字装饰
可能值：
none 普通字
underline 文字加底线
overline 文字加顶线
line-through 文字加删除线
blink 设定文字闪烁
一般范例：SPAN { text-decoration : blink }
同轴范例：<SPAN style="text-decoration:blink">
text-transform 设定文字转换
可能值：
none 普通字
capitalize 将英文单字地一个字母转换为大写
uppercase 将所有文字转换为大写
lowercase 将所有文字转换为小写
一般范例：SPAN { text-transform : uppercase }
同轴范例：<SPAN style="text-transform:uppercase">
letter-spacing 设定字母间隔
可能值：
normal 不改变字母间隔，使用浏览器预设值
<length> 要额外增加的间隔长度，可为负值
一般范例：SPAN { letter-spacing : 0.5pt }
同轴范例：<SPAN style="letter-spacing : 0.5pt">
text-indent 设定文字缩排
可能值：
<length> 长度单位，请参考第一章基本单位的相关说明
<percentage> 以父元素宽度为基准的百分比值
一般范例：DIV { text-indent : 3pt }
同轴范例：<DIV style="text-indent:3pt">
区块性质的ＣＳＳ指令
margin-top 设定上边缘宽度
margin-right 设定右边缘宽度
margin-bottom 设定下边缘宽度
margin-left 设定左边缘宽度
border-top-width 设定上边框宽度
border-right-width 设定右边框宽度
border-bottom-width 设定下边框宽度
border-left-width 设定左边框宽度
border-top-style 设定上边框样式
border-right-style 设定右边框样式
border-bottom-style 设定下边框样式
border-left-style 设定左边框样式
padding 综合设定补白宽度
border 综合设定边框性质
说明:
如果指定了四个合法设定值，则会依序套用于四个边缘；
如果只 有指定一个合法设订值，则会统一套用于四个边持；
若只有指定二或三个合法设定值，则 未指定的边缘会套用对边的宽度设定值。
DIV { margin: 20pt } →top=20pt;right=20pt;bottom=20pt;left=20pt
DIV { margin: 20pt 15pt } →top=20pt;right=15pt;bottom=20pt;left=15pt
DIV { margin: 20pt 15pt 10pt } →top=20pt;right=15pt;bottom=10pt;left=15pt
DIV{border-color:RED } →top=RED;right=RED;bottom=RED;left=RED
DIV{border-color:RED GREEN } →top=RED;right=GREEN;bottom=RED;left=GREEN
DIV{border-color: RED GREEN BLUE} →top=RED;right=GREEN;bottom=BLUE;left=GREEN
DIV{border-width:outset} →top=outset;right=outset;bottom=outset;left=outset
DIV{border-width:outset inset} →top=outset;right=inset;bottom=outset;left=inset
DIV{border-width:outset inset ridge} →top=outset;right=inset;bottom=ridge;left=inset
DIV { padding: 1pt } →top=1pt;right=1pt;bottom=1pt;left=1pt
DIV { padding: 1pt 2pt } →top=1pt;right=2pt;bottom=1pt;left=2pt
DIV { padding: 1pt 2pt 3pt } →top=1pt;right=2pt;bottom=3pt;left=2pt
background-repeat 设定背景重复
可能值：
repeat 重复背景图形填满页面
repeat-x 水平方向重复背景图形
repeat-y 垂直方向重复背景图形
no-repeat 不重复显示背景图形
一般范例：BODY { background-repeat : repeat-x }
同轴范例：<BODY style="background-repeat: repeat-x">
background-attachment 设定背景附著
可能值：
scroll 背景图形随著卷轴卷动
fixed 背景图形随著卷轴卷动（浮水印）
一般范例：BODY { background-attachment : fixed }
同轴范例：<BODY style="background-attachment:fixed">
background-position 设定背景位置
可能值：
<percent> X% Y% 图形上X% Y%的点对准元素的X% Y%位置
<length> X Y 将图形左上角置于元素左上角水平 X垂直 Y之处
center 背景图形置于中央
left 背景图形对 左边
right 背景图形对 右边
top 背景图形对 顶部
bottom 背景图形对 底部
一般范例：BODY { background- position : 100% 50% }
同轴范例：<BODY style="background- position:100% 50%">
background 综合设定背景性质
可能值：
background-color 设定背景颜色
background-image 设定背景图形
background-repeat 设定背景重复
background-attachment 设定背景附著
background-position 设定背景位置
一般范例：BODY { BLUE url(image/gif) repeat-x fixed center }
同轴范例：<BODY style="BLUE url(image/gif) repeat-x fixed center">
float 设定浮动性质（多用于文绕图的情形）
可能值：
left 元素靠左，文字围绕其右
right 元素靠右，文字围绕其左
none 以预设的方法显示
一般范例：DIV { float : right }
同轴范例：<DIV style="float:right">
clip 设定裁剪（设定某区域形状及大小，区域外通透）
可能值：
rect(top,right,bottom,left) 设定矩形之上右下左长度，会自动比对对边长度
一般 写法为rect(0,长度,长度,0)
不可以写为rect(0,0,长度,长度)
四个数值皆可以"auto"代替
一般范例：DIV { clip : rect(0,100px,50px,0) }
同轴范例：<DIV style="clip:rect(0,100px,50px,0)">
overflow 设定溢位处理（控制当元素内容超过该元素大小时的显示方式）
可能值：
visible 元素将不会依所设订大小显示，而能看见所有内容
hidden 超过元素所设订大小之部份将被隐藏不予显示
scroll 如有必要出现卷轴可让使用者看到全部的内容
一般范例：DIV { overflow : scroll }
同轴范例：<DIV style="overflow:scroll">
visibility 设定可视度
可能值：
visible 设定该元素显示
hidden 设定该元素不显示，但仍占据空间
inherit 以父元素可视度决定
一般范例：DIV { visibility : hidden }
同轴范例：<DIV style="visibility:hidden">
z-index 设定Ｚ轴参数（三度空间）
可能值：
<number> 十进位数值，数值大的元素会出现在数值小的元素的上方
auto 当元素位置重复时，原始码中写在後面元素会出现在写在前面元素的上方
一般范例：DIV { z-index : 3 }
同轴范例：<DIV style="z-index:3">
font 综合设定字型性质
可能值：
<font-style> 设定字体样式 / normal 普通字 italic 斜体字 oblique 斜体字
<font-variant> 设定文字转换 / normal 普通字 small-caps 将小写文字转换为大写
<font-weight> 设定字型份量 / normal 普通字 bold 粗体字 bolder 相对于父元素稍粗 lighter 相对于父元素稍细
<font-size> 设定文字大小
<font-family> 设定文字字型
line-height 设定列高
可能值：
<number> 以元素字型大小乘以该数即为列高
<length> 设定长度，请参考第一章基本单位的相关说明
<percentage> 百分比，相对于元素字型大小为比例
一般范例：DIV { line-height : 120% }
同轴范例：<DIV style="line-height:120%">
text-align 设定文字对
可能值：
center 对 中央
right 对 右边
left 对 左边
justify 左右对
一般范例：DIV { text-align : center }
同轴范例：<DIV style="text-align:center">
vertical-align 设定垂直对
可能值：
top 对 同列最高元素顶端
bottom 对 同列最低元素底端
baseline 对 底线
middle 对 中央
sub 将元素置于下标
super 将元素置于上标
text-top 对 文字顶端
text-bottom 对 文字底端
<percentage> 参照元素本身列高，以父元素底线为基准作位移
一般范例：SPAN { vertical-align : sub }
同轴范例：<SPAN style="vertical-align:sub">
text-decoration 设定文字装饰
可能值：
none 普通字
underline 文字加底线
overline 文字加顶线
line-through 文字加删除线
blink 设定文字闪烁
一般范例：SPAN { text-decoration : blink }
同轴范例：<SPAN style="text-decoration:blink">
text-transform 设定文字转换
可能值：
none 普通字
capitalize 将英文单字地一个字母转换为大写
uppercase 将所有文字转换为大写
lowercase 将所有文字转换为小写
一般范例：SPAN { text-transform : uppercase }
同轴范例：<SPAN style="text-transform:uppercase">
letter-spacing 设定字母间隔
可能值：
normal 不改变字母间隔，使用浏览器预设值
<length> 要额外增加的间隔长度，可为负值
一般范例：SPAN { letter-spacing : 0.5pt }
同轴范例：<SPAN style="letter-spacing : 0.5pt">
text-indent 设定文字缩排
可能值：
<length> 长度单位，请参考第一章基本单位的相关说明
<percentage> 以父元素宽度为基准的百分比值
一般范例：DIV { text-indent : 3pt }
同轴范例：<DIV style="text-indent:3pt">
区块性质的ＣＳＳ指令
margin-top 设定上边缘宽度
margin-right 设定右边缘宽度
margin-bottom 设定下边缘宽度
margin-left 设定左边缘宽度
border-top-width 设定上边框宽度
border-right-width 设定右边框宽度
border-bottom-width 设定下边框宽度
border-left-width 设定左边框宽度
border-top-style 设定上边框样式
border-right-style 设定右边框样式
border-bottom-style 设定下边框样式
border-left-style 设定左边框样式
padding 综合设定补白宽度
border 综合设定边框性质
说明:
如果指定了四个合法设定值，则会依序套用于四个边缘；
如果只 有指定一个合法设订值，则会统一套用于四个边持；
若只有指定二或三个合法设定值，则 未指定的边缘会套用对边的宽度设定值。
DIV { margin: 20pt } →top=20pt;right=20pt;bottom=20pt;left=20pt
DIV { margin: 20pt 15pt } →top=20pt;right=15pt;bottom=20pt;left=15pt
DIV { margin: 20pt 15pt 10pt } →top=20pt;right=15pt;bottom=10pt;left=15pt
DIV{border-color:RED } →top=RED;right=RED;bottom=RED;left=RED
DIV{border-color:RED GREEN } →top=RED;right=GREEN;bottom=RED;left=GREEN
DIV{border-color: RED GREEN BLUE} →top=RED;right=GREEN;bottom=BLUE;left=GREEN
DIV{border-width:outset} →top=outset;right=outset;bottom=outset;left=outset
DIV{border-width:outset inset} →top=outset;right=inset;bottom=outset;left=inset
DIV{border-width:outset inset ridge} →top=outset;right=inset;bottom=ridge;left=inset
DIV { padding: 1pt } →top=1pt;right=1pt;bottom=1pt;left=1pt
DIV { padding: 1pt 2pt } →top=1pt;right=2pt;bottom=1pt;left=2pt
DIV { padding: 1pt 2pt 3pt } →top=1pt;right=2pt;bottom=3pt;left=2pt
浙公网安备 33010602011771号