如何使有超级连接的文字不出现下划线，如何使鼠标移动到超连上产生变色的效果？其实这些通过传统的方法是办不到的。而使用CSS的控制却可以非常轻松地作到，而且，页面的代码也不会臃肿。
★★先看看超连没有下划线的例子：
例子1： 这个连接可以去页面底部，但是没有下划线。
是如何作到这一点的呢？在<head>和</head>之间加上如下的CSS语法控制：
<style type="text/css">
<!--
a:link { text-decoration: none}
a:active { text-decoration: none }
a:visited { text-decoration: none }
-->
</style>
这样浏览器在执行时，就明白：
a:link 指正常的未被访问过的链接
a:active 指正在点击的链接
a:visited 指已经访问过的链接
其中，text-decoration是文字修饰效果的意思，none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline 就表示有下划线，换成overline则给超连文字加上划线，换成 line-through给超连文字加上删除线，blink则使文字在闪烁。
★★类似的控制：使粗体文字加上删除线。
例子2： 闪烁的粗体文字使用的代码是：
B { text-decoration: line-through }
★★类似的控制：是粗体文字中所有的字母大写。
使用代码： B { text-transform: uppercase }
例子3：产生既大写，又有颜色，又有删除线的效果
hello welcome and enjoy them !
以上的代码是：b { text-decoration: line-through;
text-transform: uppercase; color: #66FFFF}
类似的，用lowercase使所有字母小写显示，capitalize
使每个单词的首字母大写显示。
★★下面则是产生连接变色效果的内容：
在上面的“例子1”中，如果作一点修饰，可以使具有link,active,visited属性的连接显示不同的颜色，但是却不会产生鼠标覆盖变色效果。先看下面的代码，使连接文字显示绿色，正在点击的连接显示黄色，已经反复问过的连接显示红色。算是复习前面的内容（别忘记啊！）：
<style type="text/css">
<!--
a:link { text-decoration: none ; color: green }
a:active { text-decoration: none ; color: yellow }
a:visited { text-decoration: none ; color: red }
-->
</style>
如果要产生变色效果，就要用到另一个属性了,这就是 hover，看下面的代码。
a:hover { text-decoration: none ; color: yellow }
表示鼠标移动到连接文字上时，文字修饰风格为“无”（即没有下划线），同时显示黄色。
a:hover { text-decoration: underline; color: green } 表示鼠标移动到连接文字上时，文字修饰风格为“underline”（即下划线），同时显示绿色。
★★扩展一下：如果我们同时用下面2种属性，会产生什么效果呢？
a:link { text-decoration: none ; color: yelloe ;
font-size: 9pt }
a:hover { text-decoration: underline; color: green ; font-size: 12pt }
连接文字没有下划线，黄色显示，9pt大小。鼠标移动到连接上时出现下划线，颜色为绿色，字符大小12pt。是不是变色了？而且字体由于大小变化，就有动感了，似乎一下子扩大了。
分享到：
相关推荐
前端开源库-postcss-css-variablespostcss css变量，postcss插件，用于将css自定义属性（css变量）语法转换为静态表示形式
css那些事儿---csscss那些事儿---css
css-cheat-sheet,css-cheat-sheet,css-cheat-sheet
广告------css---css广告------css---css
CSS技巧汇总---div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...).pdf
CSS Pro布局 CSS库，用于构建响应式和可自定义的页面布局 文献资料 有关完整文档，请访问 入门 您可以使用NPM或Yarn安装CSS专业版 NPM npm install css-pro-layout 纱 yarn add css-pro-layout 将css-pro-layout....
postcss-icss-selectors, 用于本地范围类和id的css模块的PostCSS插件 postcss-icss-selectors 用于本地范围类和id的css模块的PostCSS插件用法postcss([ require('postcss-icss-selectors')(options) ])有关环
css动画 css-animation-101.pdf
css-selector-tokenizer, 解析和 stringifies CSS选择器 CSS模块：CSS选择器标记器解析和 stringifies CSS选择器。import Tokenizer from "css-selector-tokenizer";let input = "a#content.act
前端开源库-typed-css-modules-loader类型化CSS模块加载器，类型化CSS模块的Webpack加载器
学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习...
前端开源库-css-to-radiumcss to radium，radium migration cli，将css转换为与radium兼容的js对象
前端项目-css-element-queries,css元素查询polyfill。在有效的CSS中高速元素维度/媒体查询的概念证明。
下载后直接解压，然后运行index.html即可开始练习 从最简单的标签选择器开始，逐渐提升难度。 总共32关
postcss-选择器命名空间 安装 $ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) ...
PostCSS CSS变量 插件可将语法转换为静态表示形式。 该插件提供了使用大多数CSS变量功能（包括选择器级联和一些警告）的一种面向未来的方式，因为它只能看到CSS，而不能看到应用CSS的潜在动态HTML和DOM。 安装 npm ...
HTML CSS-------
HTML---CSS----基础知识及代码----各种小程序网页设计
前端开源库-css-background-videoCSS背景视频，一个支持背景视频作为CSS属性的HTML5填充程序
FireFox_css_usage-0.2.9 过滤网站中没有必要的CSS 简化CSS代码非常方便