CSS控制超链接样式实例

最新推荐文章于 2022-10-03 17:14:47 发布
最新推荐文章于 2022-10-03 17:14:47 发布
阅读量310 收藏 1
点赞数
文章标签： CSS JavaScript ASP HTML BBS ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_18722/article/details/81863657
版权

样例:

<html>
<head>
<title>CSS控制超链接样式实例</title>
<style type="text/css">
a:link {color: #FF0000;text-decoration:none}     /* 未被访问的链接 红色 没有下划线*/
a:visited {color: #00FF00;text-decoration:none}  /* 已被访问过的链接 绿色 没有下划线*/
a:hover {color: #FFCC00;text-decoration:underline}   /* 鼠标悬浮在上的链接 橙色 有下划线 下划线为underline 上划线为overline 无下划线为none*/
a:active {color: #0000FF;text-decoration:none}   /* 鼠标点中激活链接 蓝色 没有下划线*/
</style>
</head>
<body>
<a href="javascript:void(0)" >CSS控制超链接样式实例</a>
</body>
</html>

 

超链样式定义方式:

第一种：
<style type="text/css">
a:link {
        text-decoration: none;
}
</style>

第二种：
<style type="text/css">
 a.类名称:link{
        color: #FF0000;
}
</style>

第三种（有时候无效，不知何故？）：
<style type="text/css">
.类名称 a:link{
        color: #FF0000;
}
</style>

 

【转】在软件界面中常用到的超链接样式
          －http://www.it365cn.com/bbs/topic.asp?topicid=1528

这几天做一个项目忙得没有时间来看兄弟姐妹们了，在做东西时发现有些问题在页面中可能会常用到样式，在这里总结几条供大家参考，很简单但却很有用：

1.在软件界面中常常希望点击超链接时不要出现默认状态的虚线边框：
<style type="text/css">
a{blr:expression(this.onFocus=this.blur());}
</style>
这在图片链接时尤其有用；

2.在页面中常用到希望改变超链接的背景样式：
在<head></head>之间定义：
<style type="text/css">
.a1{border:1px solid #ffcc00}/*定义onmouseover时的背景边框样式*/
.a2{border:1px solid #ffffff}/*定义onmouseout时的背景边框样式*/
</style>
<script language="javascript">
function changestyle(the,a){
the.className=a;
}
</script>
在正文中：
<table width="200" border="0" cellspacing="0" cellpadding="3">
<tr align="center">
<td class="a2" id="l1"><a href="#" οnfοcus=this.blur() onMouseOver="changestyle(l1,''''a1'''')" onMouseOut="changestyle(l1,''''a2'''')">样式一</a></td>
<td class="a2" id="l2"><a href="#" onMouseOver="changestyle(l2,''''a1'''')" onMouseOut="changestyle(l2,''''a2'''')">样式二</a></td>
</tr>
</table>
注意：红色字体部分一定要注意，在预先定义背景样式，这里是边框样式，所以比较特殊要先定义，不然页面会出现抖动现象！
至于超链接下划线的问题，我想大家应该很熟悉了，就不多说了，最后再把行超链接背景色的变化写一下吧，其实和在2中提到的差不多，只是有一些小的地方要值得注意一下：
在<head></head>之间定义：
<style type=text/css>
.td1{background-color:#e1fffe;cursor:hand}
</style>
<script language="javascript">
function changestyle(the,a){
the.className=a;
}
</script>
在下文定义如下：
<table>
<tr align="center" id="l3" onMouseOver="changestyle(l3,''''td1'''')" onMouseOut="changestyle(l3,document.bgcolor)">
<td>样式三</td>
<td>样式三</td>
</tr>
<tr align="center" id="l4" onMouseOver="changestyle(l4,''''td1'''')" onMouseOut="changestyle(l4,document.bgcolor)">
<td>样式四</td>
<td>样式四</td>
</tr>
</table>
请注意2与最后一处之间的关系与区别！好了，写了这么多，该休息一下了，希望对大家有所帮助！

///
<html>
<head>
<title>改变超链接的样式</title>
<style type="text/css">
.a1{border:1px solid #ffcc00}/*定义onmouseover时的背景边框样式*/
.a2{border:1px solid #ffffff}/*定义onmouseout时的背景边框样式*/
.td1{background-color:#e1fffe;cursor:hand}

a{blr:expression(this.onFocus=this.blur());}
a:visited{text-decoration:none;color:#000000}
a:active{text-decoration:none;color:#000000}
a:link{text-decoration:none;color:#000000}
a:hover{text-decoration:none;color:#000000}
</style>
<script language="JavaScript">
function changestyle(the,a){
the.className=a;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<body>
<table width="200" border="0" cellspacing="0" cellpadding="3">
  <tr align="center">
    <td class="a2" id="l1"><a href="#" οnfοcus=this.blur() onMouseOver="changestyle(l1,'a1')" onMouseOut="changestyle(l1,'a2')">样式一</a></td>
    <td class="a2" id="l2"><a href="#" onMouseOver="changestyle(l2,'a1')" onMouseOut="changestyle(l2,'a2')">样式二</a></td>
  </tr>
  <tr align="center" id="l3" onMouseOver="changestyle(l3,'td1')" onMouseOut="changestyle(l3,document.bgcolor)">
    <td>样式三</td>
    <td>样式三</td>
  </tr>
  <tr align="center" id="l4" onMouseOver="changestyle(l4,'td1')" onMouseOut="changestyle(l4,document.bgcolor)">
    <td>样式四</td>
    <td>样式四</td>
  </tr>
</table>
</body>
</html>

iteye_18722
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML（常用标签与超链接）的案例
ChengMeng11的博客
03-04 1626
HTML（常用标签与超链接）的案例 1.常用标签 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> hello<br>htm...
css案例学习之按钮超链接
weixin_34198453的博客
11-30 162
效果   css实现 &lt;html&gt; &lt;head&gt; &lt;title&gt;按钮超链接&lt;/title&gt; &lt;style&gt; a{ /* 统一设置所有样式 */ font-family: Arial; font-size: ....
关于css超链接样式的小案例
weishaohang的专栏
03-28 521
a{   text-decoration:none;   color: #0033CC;   padding-top:1px;   text-align:center;       height:40px;   width:80px;   } a:hover{   text-decoration:none;   color:#FFFFFF;   background-colo
css超链接的案例
yibashou的博客
01-24 434
DOCTYPE html> html> head> meta charset="utf-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge"> title>css的超链接导航条的案例title> meta name="viewport" content="width=device-width, initi
HTML超链接实例介绍
a676465927的博客
07-04 366
<html><head><title>第六节课</title><meta charset="UTF-8"></head><body><!--<a href="http://www.hxsd.com">火星</a><!--外部链接--><!--<a hr...
HTML基础知识——设置超链接的样式简单实例
09-28
本篇将详细介绍如何设置HTML超链接的样式，并提供一个简单的实例。...希望这个实例能对你理解HTML超链接样式有所帮助，更多关于HTML和CSS的学习资源可在网络上找到，持续学习和实践是提高技能的关键。
代码实例之纯CSS代码实现翻页效果
10-30
代码实例之纯CSS代码实现翻页效果 在本篇文章中，我们将探索如何使用纯CSS来实现翻页效果。翻页效果是网页中非常常见的交互效果，它可以提高用户体验和网站的可用性。在本例中，我们将使用CSS来实现翻页效果， 无需...
html+css实例
08-22
CSS可以使用选择器（如类选择器 `.class`，ID选择器 `#id` 或元素选择器 `element`）来指定需要应用样式的元素，然后定义相应的属性，如`color`、`font-size`、`background-color`等。此外，CSS还有盒模型（Box ...
DIV CSS制作的个性水平导航菜单实例
12-01
在示例中，`<div>` 元素用 `id="pointermenu"` 定义了菜单容器，这使得我们可以通过CSS对其进行样式控制。`<ul>` 标签包含了所有菜单项，每个菜单项由一个 `<li>` 元素和一个链接 `<a>` 构成。`<li>` 用于表示列表项...
Html-and-css.rar_html实例
09-23
CSS是用于控制网页样式的语言，它可以改变HTML元素的颜色、大小、布局等视觉效果。CSS选择器用于定位HTML元素，如`#id`选择器、`.class`选择器和`element`选择器。CSS还支持层叠规则，意味着如果多个样式规则应用于...
html 超链接例,html超链接实例.doc
weixin_30175751的博客
06-30 283
html超链接实例HTML实例 超级链接使用2010-01-05 21:51:47 作者： 来源： 网友评论 0 条HTML代码实例：详细讲解超级链接,超级链接是网站中使用比较频繁的HTML元素，因为网站的各种页面都是由超级链接串接而成，超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段，在后面的技术中会逐步深化学习。????????????超级链接超级链接是网站? ? ? ?...
CSS 设置链接样式
li420520的博客
10-15 2332
使用标签定义了一个超链接，点击其中的文本可以跳转到蚂蚁部落首页。 链接是HTML中最为重要的元素之一，犹如一个超时空飞船，实现了页面之间或者站点之间的跳转。 所以对于超链接样式的设置也是比较重要的操作，可以提示浏览者当前链接处于一个什么状态，比如是否处于点击状态，或者是否已经访问过等，下面通过代码实例分别做一下介绍。 一.超链接四种状态： （1）.a:link：设置链接的初始样式，也就是未被点击的...
课程介绍专栏/html5+css/案例演示
No1banana的博客
02-10 6781
实现效果 合给出的素材，运用列表标签、超链接标签以及CSS控制列表与超链接的样式实现下图所示的课程介绍专栏效果。其中课程类别都是可以点击的链接，当鼠标移上时，其样式会发生变化。 鼠标移动到对应位置上的效果 代码以及注释 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>课程介绍专栏</title> <style> *{ margin: 0;
HTML超链接
weixin_43055077的博客
08-16 3190
HTML超链接 一、超链接简介         网页文件可以通过超链接相互连接构成一个纷繁复杂的互联网世界。超链接属于网页的一部分，是一种允许一个网页同其他网页或站点之间进行连接的元素，超链接除了可连接文本之外，也可以连接各种媒体，如声音、图像和动画等。一般网站首页上的导航条会有很多栏目，每个栏目对应一个连接。 二、创建超链接         建立超
CSS3之缩略图作为连接
gxgalaxy
04-11 225
在CSS3中我们利用border来创建缩略图，并且在图片外层加一个超连接 代码如下： <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <htm...
HTML ---超链接 案例
sumuqi的博客
03-04 1734
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script>aleert ("嘿嘿")</script> </head> <body> &lt...
CSS超链接样式详解
最新发布
大河之犬的博客
10-03 7542
除了使用浏览器自带的鼠标样式，我们还可以使用cursor属性来自定义鼠标样式cursor:url(图片地址),属性值;这个“图片地址”是鼠标图片地址，其中鼠标图片后缀名一般都是“.cur”，我们可以使用一些小软件来制作这个“属性值”一般只会用到3个，分别是default、pointer和text。
CSS样式——背景和超链接
One of thre_tigers的博客
01-10 651
CSS样式是对HTML基本类型的样式设定，其中一大重点就是背景和超链接的设置 1.背景样式 背景样式用background来设置，有几个子属性：背景颜色background-color，背景图片background，以及背景填充background-reapeat 属性 描述 用法 background-color 背景颜色 backgro...
css如何设置超链接样式
学习也休闲
11-22 9750
css设置超链接样式是通过伪类来实现的   (1) :link：设置a对象在未被访问前的样式表属性。 (2) :visited：设置a对象在其链接地址已被访问过时的样式表属性。 (3) :hover：设置对象在其鼠标悬停时的样式表属性。 (4) :active：设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。     css中关于超链接的四个属性正确顺序为：
CSS3超链接样式与HTML5协同打造新颖界面
章节详细讲解了CSS的选择器、颜色与背景、字体设置、文本属性、超链接样式、列表、表格、CSS轮廓以及浮动元素等内容，并提供了实例来展示如何在HTML文档中应用CSS。" 在CSS中，超链接样式是网页设计中不可或缺的一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值