样例:
<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>
分享到:
相关推荐
1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一:模拟...
1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一...
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部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...
文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。)智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web...
1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一:模拟...
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 Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准...
精通HTML5+CSS3+JavaScript网页设计是网页设计的精髓的一本书,《精通HTML5 + CSS3+JavaScript网页设计》以应用实例和综合实战案例的形式逐一详解了HTML5网页设计的文档结构、文本、图像、用HTML5创建超链接、表格、...
学生
文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准...
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 Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web...
去掉超链接的下划线,需要用样式表CSS来控制,下面将举三个简单的实例来说明如何控制超链接的下划线,感兴趣的朋友可以参考下
浮动和清理 实例 1.float 属性的简单应用 使图像浮动于一个段落的右侧。 2.将带有边框和边界的图像浮动于段落的右侧 使图像浮动于段落的右侧。向图像添加边框和边界。 3.带标题的图像浮动于右侧 使带有标题的图像...
文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web...
实例189 设置超链接的样式 229 实例190 设置body的样式 230 实例191 模拟的进度条 231 实例192 标签设计用户注册页面 232 实例193 div标签设计论坛帖子浏览页面 234 实例194 标签设计论坛后台管理页面 236 实例195 ...
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 ...
第9章 CSS3美化表格和表单样式 第10章 CSS3美化图像 第11章 CSS3美化背景与边框 第12章 Java Script概述 第13章 Java Script语言基础 第14章 Java Script内置对象 第15章 Java Script对象编程 第16章 Java ...
本书是一本CSS技术专著,主要从布局这个角度全面、系统和深入地...除此之外,还就CSS开发中的一些技术难点和重点展开了详细的介绍,例如表格、表单、图像、超链接、导航菜单、滑动门、圆角、阴影、换肤、Tab技术等等。