Css应用小技巧十四例

8、如何给部分文字加背景图像？
　　与加背景色操作类似，中是在背景在选择加载图象就是了，一个定义好的加背景图象的CSS例子的代码是这样的：
〈style type="text/css"〉
〈!--
.imgbgstyle { background-image: url(logo.gif)}
--〉
〈/style〉
　　在要用时选取那段文字，再在CSS面板上点一下“imgbgstyle”就行了。
9、如何使页面的背景在文字“滚动”时背景图案静止不动？
　　要使背景图案不随文字“滚动”的CSS是这样的：
〈style type="text/css"〉
〈!--
BODY { background: purple url(bg.jpg);
　　　 background-repeat:repeat-y;
　　　 background-attachment:fixed 　
　　　　}
--〉
〈/style〉
10、如何定义字间距？
　　在DW3中CSS的属性定义对话框（Style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就是字间距，它指的是每一个字符之间的额外间距，经长度为单位，正负值均可，当取负值时产生字符挤在一起的效果。下面代码是一个定义好的字间距CSS例子：
〈style type="text/css"〉
〈!--
.style1 { letter-spacing: 3px}
--〉
〈/style〉
11、如何给文字加上划线、下划线、删除线和闪烁？
　　在DW3中CSS的属性定义对话框(Style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些内容，要注意的是闪烁属性有些版本的浏览器不支持，少用为好。下面是一个定义好上述效果的CSS例子：
〈style type="text/css"〉
〈!--
.style1 { text-decoration: underline overline line-through blink}
--〉
〈/style〉
　　其中： “underline”是定义下划线；“overline ”是定义上划线；“ line-through”定义的是删除线；“blink”定义的是文字闪烁。
12、如何使网页具有“首行缩进”功能？
　　由于DW3输入空格不方便，利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框（Style Definition for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”，所谓“首行”是指每段内容的第一行，也就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉字，设置好的CSS如下所示：
〈style type="text/css"〉
〈!--
.style1 { text-indent: 2em}
--〉
〈/style〉
　　在DW3要注意：在DW3中CSS的属性定义对话框（Style Definition for .style1)的“Block”上的“text-indent”右面的缩进单位选择框中“ems”指的就是“em”。
13、在用表格进行排版时，能使某一方向上的内容离开表格线一点吗？
　　可以！在DW3中CSS的属性定义对话框（Style Definition for .style1)的“Box”上的“margin”定义的就是内容离开边缘的距离，分别可定义四个方向：“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例子代码：
〈style type="text/css"〉
〈!--
.style1 { margin: 0px 0px 0px 10px}
--〉
〈/style〉
14、能给某部分内容加边框吗？
　　用CSS可以给某部分内容加边框，在DW3中CSS的属性定义对话框（Style Definition for .style1)的“Border”定义的就是边框线，“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色，这些定义好后不要忘记在下面的“Style”中定义线型，否则将看不边框线，因为默认的线型是“none”。下面是一个定义了上边框为：蓝色细线；左边框为：绿色中粗线的CSS例子：
〈style type="text/css"〉
〈!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
--〉
〈/style〉