📄 0016.htm
字号:
<html>
<head>
<title>新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, table {font-size: 9pt; font-family: 宋体}
a {text-decoration:none}
a:hover {color: red;text-decoration:underline}
.1 {background-color: rgb(245,245,245)}
-->
</style>
</head>
<p align="center"><script src="../../1.js"></script></a>
<p align="center"><big><strong>CSS产生的特殊效果</strong></big></p>
<div align="right">---摘自《一克教学》</div>
<p>经常有朋友问：如何使有超级连接的文字不出现下划线，如何使鼠标移动到超连上产生变色的效果？其实这些通过传统的方法是办不到的。而使用CSS的控制却可以非常轻松地作到，而且，页面的代码也不会臃肿。</p>
<p>★★先看看超连没有下划线的例子：</p>
<p>例子1：<a href="#bottom"> 这个连接可以去页面底部，但是没有下划线。</a></p>
<p>是如何作到这一点的呢？在<head>和</head>之间加上如下的CSS语法控制：</p>
<p> <style type="text/css"><br>
<!--<br>
a:link { text-decoration: none}<br>
a:active { text-decoration: none }<br>
a:visited { text-decoration: none }<br>
--><br>
</style></p>
<p>这样浏览器在执行时，就明白：</p>
<p> a:link 指正常的未被访问过的链接 <br>
a:active 指正在点击的链接<br>
a:visited 指已经访问过的链接<br>
其中，text-decoration是文字修饰效果的意思，none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线，换成overline则给超连文字加上划线，换成
line-through给超连文字加上删除线，blink则使文字在闪烁。<br>
</p>
<p>★★类似的控制：使粗体文字加上删除线。</p>
<p>例子2： <b>闪烁的粗体文字 </b>使用的代码是：B { text-decoration: line-through }</p>
<p>★★类似的控制：是粗体文字中所有的字母大写。</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>★★下面则是产生连接变色效果的内容：</p>
<p>在上面的“<font color="#FFFF00">例子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>★★扩展一下：如果我们同时用下面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>★★注意：并不是所有的浏览器都支持所有的选项属性。自己在多个浏览器上测试一下。</p>
<a name="bottom"></a>
</table>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -