<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0050)http://java2000.wol.com.cn/jsschool/css/class7.htm -->
<HTML><HEAD><TITLE> 织 梦 地 带 CSS 精 彩 教 程 第 七 章</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>TD {
FONT-FAMILY: "宋体"; FONT-SIZE: 9pt
}
A:link {
TEXT-DECORATION: none
}
A:visited {
TEXT-DECORATION: none
}
B {
COLOR: #66ffff; TEXT-DECORATION: line-through; TEXT-TRANSFORM: uppercase
}
A:hover {
TEXT-DECORATION: underline}
</STYLE>
<META content="css 式样单 层叠式样单 教学" name=keywords>
<META content=CSS层叠式样单的教学-第七课 name=description>
<META content="MSHTML 5.00.2014.210" name=GENERATOR></HEAD>
<BODY bgColor=#FFFFFF>
<TABLE border=1 width="80%" cellpadding="3" cellspacing="0" bordercolor="#333333" align="center">
<tr bgcolor="#CCCCCC" bordercolor="#000000">
<td>[ 第 七 章] CSS 产 生 的 特 殊 效 果 举 例 说 明</td>
</tr>
<TBODY>
<TR>
<TD height=587>
<P><font color="#FF6600">★</font><font color="#006699">☆</font><font color="#FF6600">★</font>经常有朋友问：如何使有链接的文字不出现下划线，如何使鼠标移动到超连上产生变色的效果，如何使得Onmouse
over的时候，文字的背景发生变化？其实这些通过传统的方法是办不到的。而通过使用CSS却可以非常轻松地作到，而且，页面的代码也不会变得臃肿。</P>
<P><font color="#FF6600">★</font><font color="#006699">☆</font><font color="#FF6600"></font>先看看超连没有下划线的例子：</P>
<P>例子1：<A
href="http://java2000.wol.com.cn/jsschool/css/class7.htm#bottom"> 这个连接可以去页面底部，但是没有下划线。鼠标放上去时出现下划线</A></P>
<P>是如何作到这一点的呢？在<head>和</head>之间加上如下的CSS代码：</P>
<P><style type="text/css"><BR>
<!--<BR>
a:link { text-decoration: none}<BR>
a:hover { text-decoration: underline }<BR>
a:visited { text-decoration: none }<BR>
--><BR>
</style></P>
<P>这样浏览器在执行时，就明白：</P>
<P>a:link 指正常的未被访问过的链接 <BR>
a:hover 指Mouseover的链接<BR>
a:visited 指已经访问过的链接<BR>
其中，text-decoration是文字修饰效果的意思，none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线，换成overline则给超连文字加上划线，换成
line-through给超连文字加上删除线，blink则使文字在闪烁。<BR>
</P>
<P><font color="#FF6600">★</font><font color="#006699"></font>类似的控制：使粗体文字加上删除线。</P>
<P>例子2： <B>闪烁的粗体文字 </B>使用的代码是：B { text-decoration: line-through }</P>
<P><font color="#FF6600">★</font><font color="#006699">☆</font><font color="#FF6600"></font>类似的控制：是粗体文字中所有的字母大写。</P>
<P>使用代码： B { text-transform: uppercase }</P>
<P>例子3：产生既大写，又有颜色，又有删除线的效果 <B><FONT
face="Arial, Helvetica, sans-serif">hello welcome and enjoy them !</FONT></B><BR>
</P>
<P>以上的代码是：b { text-decoration: line-through; text-transform: uppercase;
color: #66FFFF} </P>
<P>类似的，用lowercase使所有字母小写显示，capitalize 使每个单词的首字母大写显示。<BR>
</P>
<P><font color="#FF6600">★</font><font color="#006699">☆</font><font color="#FF6600"></font>下面则是产生连接变色效果的内容：</P>
<P>在上面的“<font color="#990000">例子1</font>”中，如果作一点修饰，可以使具有link,active,visited属性的连接显示不同的颜色，但是却不会产生鼠标覆盖变色效果。先看下面的代码，使连接文字显示绿色，正在点击的连接显示黄色，已经反复问过的连接显示红色。算是复习前面的内容（别忘记啊！）：</P>
<P><style type="text/css"><BR>
<!--<BR>
a:link { text-decoration: none ; color: green }<BR>
a:active { text-decoration: none ; color: yellow }<BR>
a:visited { text-decoration: none ; color: red }<BR>
--><BR>
</style></P>
<P>如果要产生变色效果，就要用到另一个属性了,这就是 hover，看下面的代码。</P>
<P>a:hover { text-decoration: none ; color: yellow } 表示鼠标移动到连接文字上时，文字修饰风格为“无”（即没有下划线），同时显示黄色。</P>
<P>a:hover { text-decoration: underline; color: green } 表示鼠标移动到连接文字上时，文字修饰风格为“underline”（即下划线），同时显示绿色。</P>
<P><font color="#FF6600">★</font><font color="#006699">☆</font><font color="#FF6600"></font>扩展一下：如果我们同时用下面2种属性，会产生什么效果呢？</P>
<P><BR>
a:link { text-decoration: none ; color: yelloe ; font-size: 9pt }</P>
<P>a:hover { text-decoration: underline; color: green ; font-size: 12pt }</P>
<P>连接文字没有下划线，黄色显示，9pt大小。鼠标移动到连接上时出现下划线，颜色为绿色，字符大小12pt。是不是变色了？而且字体由于大小变化，就有动感了，似乎一下子扩大了。</P>
<P>总之，所有前面讲过的方法，要综合运用才可以呀。</P>
<P><font color="#FF6600">★</font><font color="#006699">☆</font><font color="#FF6600"></font>注意：并不是所有的浏览器都支持所有的选项属性。自己在多个浏览器上测试一下。</P>
<P align=center> </P>
<P align="center"><A name=bottom></A><a href="tcss6.htm">上一章</a>>>>>>---------------
本章结束 ----------------->>>>> 待续。。。。。。。</P>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY></HTML>
CSS精彩教程.rar （37个子文件） 
CSS精彩教程 
主页特效制作百宝箱.exe 404KB
tcss4.htm 2KB tcss3.htm 5KB tcss7.htm 5KB tcss2.htm 4KB Javascript特效大全(上册).exe 502KB tcss1.htm 3KB 对象 onMouseOveronMouseOut事件.htm 663B window对象2.htm 1KB history对象.htm 33B history对象1.htm 61B window对象的弹出方法.htm 912B 点击打开新窗口.htm 912B 以属性的形式出现的事件处理程序.htm 836B window的settimeout方法使用.htm 472B onFocusonBlur事件示例.htm 184B onclick事件.htm 444B onResize事件示例.htm 212B onChange事件示例.htm 409B elements集合.htm 640B onLoad事件.htm 248B location对象.htm 852B window对象4.htm 297B HTML 标记事件处理程序.htm 797B window对象1.htm 1KB document对象 no1.htm 422B Uno2.htm 465B close.htm 573B Document 对象1.htm 862B document对象的links,anchor,form等三个最重要的对象.htm 650B index.htm 467B window对象3.htm 549B onMouseDownonMouseUp事件.htm 207B tcss6.htm 3KB 5日精通CSS层叠样式表.chm 50KB desktop.ini 91B tcss5.htm 3KB资源评论
