`
wingware
  • 浏览: 144499 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

css 去掉超链接样式

阅读更多
我们可以用CSS语法来控制超链接的形式、颜色变化,为什么链接一定要使用下划线和颜色区分呢? 其主要原因主要是考虑到   1、视力差的人 2、色盲的人 。。。

下面我们做一个这样的链接:未被点击时超链接文字无下划线,显示为蓝色;当鼠标在链接上时有下划线,链接文字显示为红色;当点击链接后,链接无下划线,显示为绿色。

实现方法很简单,在源代码的<head>和<head>之间加上如下的CSS语法控制:

   <style type="text/css">
   <!--
   a:link { text-decoration: none;color: blue}
   a:active { text-decoration:blink}
   a:hover { text-decoration:underline;color: red}
   a:visited { text-decoration: none;color: green}
   -->
   </style>
  其中:
  a:link 指正常的未被访问过的链接;
  a:active 指正在点的链接;
  a:hover 指鼠标在链接上;
  a:visited 指已经访问过的链接;
  text-decoration是文字修饰效果的意思;
  none参数表示超链接文字不显示下划线;
  underline参数表示超链接的文字有下划线
-------------------------------------------------------------------------
演示:让网页中的链接去掉下划线
<style type="text/css">
<!--
A { text-decoration: none}
-->
</style>
将代码插入在<head></head>之间.<title>之前即可

-------------------------------------------------------------------------

使用CSS实现链接的虚线下划线\普通下划线效果

a {
color:#3399FF;
font-weight:Normal; /*CSS字体效果 普通 可以改成bold粗体 如果去除此行那么默认是不显示下划线的*/
text-decoration:none; /*CSS下划线效果:无下划线*/
}

a:hover {
color:#4499EE;
text-decoration:none; /*CSS下划线效果:无下划线*/
border-bottom: 1px #0099CC dotted /*CSS加一个只有下边的框 边框为虚线*/
}

a{ } :是用来控制连接的效果
a:hover{ }:是用来控制鼠标移上去的效果。
分享到:
评论

相关推荐

    Css——超链接样式

    这里我们将深入探讨CSS中的超链接样式及其四个关键状态。 1. `a:link` - 链接平常的状态 当用户尚未点击链接时,`a:link`用于定义超链接的初始样式。这通常包括颜色、文字装饰(如下划线)和字体大小等。例如,...

    css 浮雕式超链接

    利用CSS,我们可以实现各种视觉效果,包括创建浮雕式的超链接,这使得网页元素更具交互性和吸引力。在本主题中,我们将深入探讨如何使用CSS创建浮雕效果的超链接,并分享一些实用技巧。 首先,让我们理解浮雕效果。...

    css通过伪类来设置超链接样式附示例

    总的来说,CSS伪类选择器极大地增强了我们对超链接样式的控制能力,让网页设计更加灵活和个性化。无论是修改颜色、下划线,还是添加其他视觉效果,都可以通过巧妙运用`:link`, `:visited`, `:hover`, 和`:active`来...

    去掉超链接的虚线框

    在网页设计与开发中,超链接的外观与交互体验...同时,考虑到可访问性和用户体验,去除超链接的虚线框应谨慎操作,确保不会影响到依赖于焦点轮廓进行导航的用户。在追求美观的同时,也应兼顾功能性和无障碍设计的原则。

    使用CSS去掉网页中超链接的下划线示例

    然而,在某些设计中,我们可能希望去除超链接的默认下划线,并根据超链接的不同状态自定义颜色和下划线样式。 要实现这一目标,可以通过CSS(层叠样式表)来控制超链接的显示样式。CSS为开发者提供了一系列的伪类...

    html超链接去掉下划线

    要去除超链接的下划线,我们可以使用CSS(层叠样式表)进行样式定义。以下就是三种简洁的CSS代码方法: 1. **使用`text-decoration`属性**: CSS中的`text-decoration`属性用于设置文本的装饰,如下划线、上划线或...

    创建超链接及css 样式设置

    ### 创建超链接及CSS样式设置知识点整理 #### 超链接创建基础 超链接是HTML中非常基础且重要的部分,它允许用户点击文本或图片后跳转到另一处位置,可以是同一页面内的不同部分,也可以是互联网上的其他页面,甚至...

    网页超链接设计

    网页超链接设计是网页制作中的基础元素之一,...掌握CSS对超链接样式的控制,可以使你的网页设计更加专业和吸引人。通过深入学习和实践,你可以创建出符合个人审美且易于使用的超链接样式,为用户带来愉快的浏览体验。

    CSS样式文件设置网页中的页面元素的CSS

    本篇将深入探讨标题提及的“CSS样式文件设置网页中的页面元素”以及在描述中提到的“超链接样式”和“表格样式”。 1. **CSS样式文件**: CSS样式文件通常以`.css`为扩展名,它包含了针对HTML或XML文档中各个元素...

    实现超链接风格的按钮

    在网页设计和开发中,创建具有超链接样式但同时具备按钮功能的元素是一个常见的需求。这种设计能够提供一致的用户体验,使用户既能享受点击按钮的交互反馈,又能享受到跳转到新页面或执行某些动作的便利。在本教程中...

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

    总结来说,通过CSS,我们可以精准地控制超链接的下划线状态,无论是全局去除、部分去除,还是动态地在鼠标悬停时显示。这展示了CSS强大的样式控制能力,使得网页设计更加灵活和个性化。理解并熟练运用CSS中的选择器...

    adobe dreamweaver中去除超链接的下划线

    在Adobe Dreamweaver这款强大的网页编辑软件中,去除超链接的下划线是一项基本操作,它可以通过工具操作或直接编辑CSS来实现。下面我们将详细介绍两种方法。 1. **通过Dreamweaver的页面属性操作** - 首先,你...

    删除超链接底线删除超链接底线

    通过上述方法,我们可以有效地去除超链接的下划线,并根据需要自定义不同的样式。这对于提高网页的美观性和用户体验具有重要意义。当然,在实际开发过程中,还需要考虑到各种浏览器的兼容性问题,确保在不同的浏览器...

    javascript取下划线

    ### JavaScript与CSS去除超链接下划线方法 在网页设计中,经常需要对超链接进行样式调整以适应整体页面的设计风格。其中,去除超链接默认的下划线效果是一种常见的需求。下面将详细介绍如何通过JavaScript和CSS来...

    如何去掉图片热点链接或超链接的虚线框?.rar

    总结,去除图片热点链接或超链接的虚线框主要通过CSS的`border`和`outline`属性实现。通过内联样式或定义CSS类选择器,我们可以有效地控制链接的显示效果,同时兼顾网页的美观性和可访问性。在实际应用中,应根据...

    怎样去掉超级链接的下划线

    在网页设计与开发过程中,经常需要对超链接进行样式调整,其中一项常见的需求就是去除超链接默认的下划线。这不仅能够提升网站的整体美观度,还能增强用户体验。本文将详细介绍如何通过CSS(层叠样式表)来实现这一...

    HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局.docx

    然后,通过编写CSS来实现超链接的样式设置,包括但不限于颜色、装饰、字体家族、大小和权重,以及`download`、`hreflang`、`media`、`rel`、`target`和`type`等属性的配置。 例如,我们可以这样设置导航栏的样式: ...

    超链接怎么做?(9KB)

    3. **超链接样式** - CSS(层叠样式表)可以用于定制超链接的外观,如颜色、下划线等。例如: ``` a { color: blue; text-decoration: none; /* 去掉下划线 */ } a:hover { color: red; /* 鼠标悬停时的颜色...

    HTML5+CSS3网页设计-第五章 使用CSS美化网页元素.pptx

    本章主要探讨如何使用CSS3来美化网页元素,包括字体样式、文本样式、超链接样式、列表样式、背景样式以及渐变效果。下面我们将深入讲解这些知识点。 首先,我们来看CSS中用于突出文本的标签和属性。`&lt;span&gt;`标签常...

Global site tag (gtag.js) - Google Analytics