◤css技巧_应用技巧十四例--▃▄ 龙 人 网 络 ▄▃.htm
来自「web开发离不开css层叠样式表。此书言简意赅介绍了css技术。最常用的、最简洁」· HTM 代码 · 共 198 行 · 第 1/2 页
HTM
198 行
<BR><BR>7、如何给一部分文字加背景色？
<BR> 给文字加上不同颜色，在DW3中只要在属性面板上选取文字的颜色就行了，非常方便，但要给部分文字加不同的背景色却没有相应的功能，我们可以先做一个定义背景色的CSS（如：bgstyle），在DW3中点几下鼠就完成了。如一个定义淡黄色背景的CSS是这样的：
<BR><style type="text/css"> <BR><!-- <BR>.bgstyle { background:
#FFFFCC} <BR>--> <BR></style>
<BR> 在要用时选取那段文字，再在CSS面板上点一下“bgstyle”就行了。 <BR><BR>8、如何给部分文字加背景图像？
<BR> 与加背景色操作类似，中是在背景在选择加载图象就是了，一个定义好的加背景图象的CSS例子的代码是这样的： <BR><style
type="text/css"> <BR><!-- <BR>.imgbgstyle { background-image:
url(logo.gif)} <BR>--> <BR></style>
<BR> 在要用时选取那段文字，再在CSS面板上点一下“imgbgstyle”就行了。
<BR><BR>9、如何使页面的背景在文字“滚动”时背景图案静止不动？ <BR> 要使背景图案不随文字“滚动”的CSS是这样的：
<BR><style type="text/css"> <BR><!-- <BR>BODY { background:
purple url(bg.jpg); <BR> background-repeat:repeat-y; <BR>
background-attachment:fixed <BR> } <BR>--> <BR></style>
<BR><BR>10、如何定义字间距？ <BR> 在DW3中CSS的属性定义对话框（style Definition for
.style1)的“Block”上的“letter
spaceing”属性定义的就是字间距，它指的是每一个字符之间的额外间距，经长度为单位，正负值均可，当取负值时产生字符挤在一起的效果。下面代码是一个定义好的字间距CSS例子：
<BR><style type="text/css"> <BR><!-- <BR>.style1 {
letter-spacing: 3px} <BR>--> <BR></style>
<BR><BR>11、如何给文字加上划线、下划线、删除线和闪烁？ <BR> 在DW3中CSS的属性定义对话框(style Definition
for
.style1)的“Type”上的“decoration”属性定义的就是这些内容，要注意的是闪烁属性有些版本的浏览器不支持，少用为好。下面是一个定义好上述效果的<A
href="http://www.rr365.net/edu-css/css.htm"><FONT
color=#000000>CSS</FONT></A>例子： <BR><style type="text/css">
<BR><!-- <BR>.style1 { text-decoration: underline overline
line-through blink} <BR>--> <BR></style> <BR> 其中：
“underline”是定义下划线；“overline ”是定义上划线；“
line-through”定义的是删除线；“blink”定义的是文字闪烁。 <BR><BR>12、如何使网页具有“首行缩进”功能？
<BR> 由于DW3输入空格不方便，利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框（style Definition for
.style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”，所谓“首行”是指每段内容的第一行，也就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉字，设置好的CSS如下所示：
<BR><style type="text/css"> <BR><!-- <BR>.style1 { text-indent:
2em} <BR>--> <BR></style> <BR> 在DW3要注意：在DW3中CSS的属性定义对话框（style
Definition for .style1)的“Block”上的“text-indent”右面的缩进单位选择框中“ems”指的就是“em”。
<BR><BR>13、在用表格进行排版时，能使某一方向上的内容离开表格线一点吗？ <BR> 可以！在DW3中CSS的属性定义对话框（style
Definition for
.style1)的“Box”上的“margin”定义的就是内容离开边缘的距离，分别可定义四个方向：“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例子代码：
<BR><style type="text/css"> <BR><!-- <BR>.style1 { margin: 0px
0px 0px 10px} <BR>--> <BR></style> <BR><BR>14、能给某部分内容加边框吗？
<BR> 用CSS可以给某部分内容加边框，在DW3中CSS的属性定义对话框（style Definition for
.style1)的“Border”定义的就是边框线，“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色，这些定义好后不要忘记在下面的“style”中定义线型，否则将看不边框线，因为默认的线型是“none”。下面是一个定义了上边框为：蓝色细线；左边框为：绿色中粗线的CSS例子：
<BR><style type="text/css"> <BR><!-- <BR>.style1 { border:
solid; border-width: thin 0px 0px medium; border-color: #0000FF black
black #00FF00} <BR>--> <BR></style><BR> </SPAN></P>
<P align=left><BR></P></LI></UL></TD></TR>
<TR>
<TD>
<P
align=center>
</P></TD></TR>
<TR>
<TD>
<HR width="75%" color=#e5ecf9>
<P align=center>网页教程: <A
href="http://www.rr365.net/edu-asp/index.htm">ASP</A>| <A
href="http://www.rr365.net/edu-asp-net/asp-net.htm">ASP.net</A>| <A
href="http://www.rr365.net/edu-xml/xml.htm">XML</A>| <A
href="http://www.rr365.net/edu-php/php.htm">PHP4</A> | <A
href="http://www.rr365.net/edu-frontpage/frontpage.htm">FrontpageXP</A> |
<A
href="http://www.rr365.net/edu-dreamweaver/dreamweaver.htm">DreamWeaverMX</A></P>
<P
align=center>
<A href="http://www.rr365.net/edu-cplus/c.htm">C#</A>| <A
href="http://www.rr365.net/edu-jsp/jsp.htm">JSP</A> | <A
href="http://www.rr365.net/edu-javascript/javascript.htm">JavaScript</A> |
<A href="http://www.rr365.net/edu-vbscript/vbscript.htm">VBScript</A> | <A
href="http://www.rr365.net/edu-css/css.htm">CSS</A></P></TD></TR>
<TR>
<TD>
<HR width="50%" color=#e5ecf9>
<P> </P></TD></TR>
<TR>
<TD>
<FORM name=query0 action=http://www1.baidu.com/baidu method=get
target=_blank>
<DIV align=center><INPUT type=hidden value=baidu name=tn0> <A
href="http://www.baidu.com/"><IMG alt=Baidu
src="◤CSS技巧_应用技巧十四例--▃▄ 龙 人 网 络 ▄▃.files/baidu_logo.gif" align=bottom
border=0></A> <INPUT size=15 name=word0> <IFRAME border=0 name=I1
marginWidth=0 marginHeight=0
src="◤CSS技巧_应用技巧十四例--▃▄ 龙 人 网 络 ▄▃.files/help1.htm" frameBorder=no width=0
scrolling=no height=0></IFRAME><INPUT type=submit value=百度搜索>
</DIV></FORM> </TD></TR></TBODY></TABLE>
<TABLE id=table3 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD style="BORDER-BOTTOM: 1px solid" borderColor=#00ccff height=21> </TD></TR>
<TR>
<TD background="◤CSS技巧_应用技巧十四例--▃▄ 龙 人 网 络 ▄▃.files/tdbg.gif"
bgColor=#e5ecf9>
<P align=center><B><A
href="http://www.rr365.net/summary/aboutus.htm">关于我们</A>-<A
href="http://www.rr365.net/summary/paymethod.htm">付款方式</A>-<A
href="http://www.rr365.net/helpcenter/helpcenter.htm">帮助中心</A>-<A
href="http://www.rr365.net/agent/agent.htm">轻松代理</A>-<A
href="http://www.rr365.net/sitemap.htm">网站地图</A>-<A
href="mailto:support@rr365.net">联系我们</A></B></P></TD></TR></TBODY></TABLE></BODY></HTML>
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?