`
thoreau
  • 浏览: 355386 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

CSS控制超链接样式实例

阅读更多

样例:

<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="#" onfocus=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="#" onfocus=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>

分享到:
评论

相关推荐

    《精通CSS+DIV网页样式与布局》光盘源码

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一:模拟...

    精通CSS.DIV.网页样式与布局 源码

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一...

    精通CSS+DIV网页样式与布局

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一:模拟...

    精通CSS+DIV网页样式与布局视频教材

    精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址: 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...

    《CSS网站布局实战》—实例源码包

    文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。)智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web...

    精通CSS+DIV网页样式与布局Part1

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一:模拟...

    精通CSS.DIV网页样式与布局视频01

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一:模拟...

    CSS网站布局实录 (第二版)

    文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准...

    精通HTML5+CSS3+JavaScript网页设计.z01

    精通HTML5+CSS3+JavaScript网页设计是网页设计的精髓的一本书,《精通HTML5 + CSS3+JavaScript网页设计》以应用实例和综合实战案例的形式逐一详解了HTML5网页设计的文档结构、文本、图像、用HTML5创建超链接、表格、...

    HTML+CSS3+JavaScript叮叮书店相关代码

    学生

    CSS网站布局实录 (第二版)PDF版

    文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准...

    精通JavaScript+jQuery Part1

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一:模拟...

    CSS网站布局实录 基于Web标准的网站设计指南(第二版)-part1

    文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web...

    如何去掉超链接下划线用三个简单的实例来说明

    去掉超链接的下划线,需要用样式表CSS来控制,下面将举三个简单的实例来说明如何控制超链接的下划线,感兴趣的朋友可以参考下

    css 浮动实例c#网站开发

    浮动和清理 实例 1.float 属性的简单应用 使图像浮动于一个段落的右侧。 2.将带有边框和边界的图像浮动于段落的右侧 使图像浮动于段落的右侧。向图像添加边框和边界。 3.带标题的图像浮动于右侧 使带有标题的图像...

    《CSS网站布局实录》源码

    文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例189 设置超链接的样式 229 实例190 设置body的样式 230 实例191 模拟的进度条 231 实例192 标签设计用户注册页面 232 实例193 div标签设计论坛帖子浏览页面 234 实例194 标签设计论坛后台管理页面 236 实例195 ...

    《精通Javascript+jQuery》光盘源码

     3.2 使用CSS控制页面  3.2.1 行内样式  3.2.2 内嵌式  3.2.3 链接式  3.2.4 导入样式  3.3 CSS选择器  3.3.1 标记选择器  3.3.2 类别选择器  3.3.3 ID选择器  3.3.4 选择器集体声明  3.3.5 ...

    HTML5+CSS3+JavaScript网页设计8.zip

    第9章 CSS3美化表格和表单样式 第10章 CSS3美化图像 第11章 CSS3美化背景与边框 第12章 Java Script概述 第13章 Java Script语言基础 第14章 Java Script内置对象 第15章 Java Script对象编程 第16章 Java ...

    CSS商业网站布局之道

    本书是一本CSS技术专著,主要从布局这个角度全面、系统和深入地...除此之外,还就CSS开发中的一些技术难点和重点展开了详细的介绍,例如表格、表单、图像、超链接、导航菜单、滑动门、圆角、阴影、换肤、Tab技术等等。

Global site tag (gtag.js) - Google Analytics