HTML设置超链接字体颜色和点击后的字体颜色

定义链接样式
  CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是:
:link
:visited
:hover
:active
  因为我们要定义链接样式,所以其中必不可少的就是超级链接中的锚标签--a,锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法,它们的写法如下:
a:link,定义正常链接的样式;
a:visited,定义已访问过链接的样式;
a:hover,定义鼠标悬浮在链接上时的样式;
a:active,定义鼠标点击链接时的样式。
示例: 

复制代码代码如下:
a:link {
color:#FF0000;
text-decoration:underline;
}
a:visited {
color:#00FF00;
text-decoration:none;
}
a:hover {
color:#000000;
text-decoration:none;
}
a:active {
color:#FFFFFF;
text-decoration:none;
} 

  上面示例中定义的链接颜色是红色,访问过后的链接是绿色,鼠标悬浮在链接上时是黑色,点击时的颜色是白色。
如果正常链接和已访问过的链接样式相同,鼠标悬浮和点击时的样式相同,也可以将它们合并起来定义: 

复制代码代码如下:
a:link,
a:visited {
color:#FF0000;
text-decoration:underline;
}
a:hover,
a:active {
color:#000000;
text-decoration:none;
} 

链接定义的顺序
  没有规矩不成方圆,虽然链接定义写好了,但它也是有规则的,如果这四项的书写顺序稍有差错,链接的效果可能就没有了,所以每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母)。
定义局部链接样式
  在CSS中写上a:link{}这样的定义会使整个页面的链接样式改变,但有些局部链接需要特殊化,这个问题也不难解决,只要在链接样式定义的前面加上指定的id或class就可以了。
  示例: 

复制代码代码如下:
#sidebar a:link,
#sidebar a:visited {
color:#FF0000;
text-decoration:none;
}
#sidebar a:hover,
#sidebar a:active {
color:#000000;
text-decoration:underline;
} 

  调用方法:
<div id="sidebar"><a href="http://www.jb51.net" target="_blank">链接到脚本之家<a></div>
  class的定义方法和id相同,只要将#sidebar改为.sidebar就行了,还有一种方法是直接定义链接的样式,那样更直接,不过调用时比较麻烦,需要给每个特定的链接加上定义的代码。
  示例: 

复制代码代码如下:
 a.redlink a:link,
a.redlink a:visited {
color:#FF0000;
text-decoration:none;
}
a.redlink a:hover,
a.redlink a:active {
color:#000000;
text-decoration:underline;
background:#FFFFFF;
} 

  调用方法:
<div><a href="http://www.jb51.net" target="_blank" class="redlink" >链接到脚本之家一<a></div>
  链接的定义主要有三个属性,颜色(color)、文本修饰(text-decoration)和背景(background
时间: 2024-10-27 10:42:32

HTML设置超链接字体颜色和点击后的字体颜色的相关文章

设置超链接在各种状态改变的样式颜色

设置超链接在各种状态改变的样式颜色,在html的<head>标签下面添加下面的样式,可以自己根据需要修改样式. <style> a:link {color:blue;} a:visited {color:blue;} a:hover {color:red;} a:active {color:yellow;} </style> a:link 表示未未访问的状态. a:visited 表示已访问过的状态. a:hover  表示鼠标移动到链接上时的状态. a:active 

HTML中设置超链接字体 &amp; 字体颜色

定义链接样式 CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link :visited :hover :active 因为我们要定义链接样式,所以其中必不可少的就是超级链接中的锚标签--a,锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法,它们的写法如下: a:link,定义正常链接的样式: a:visited,定义已访问过链接的样式: a:hover,定义鼠标悬浮在链接上时的样

Android TextView中文字设置超链接、颜色、字体

TextView是用来显示文本的,有时需要给TextView中的个别字设置为超链接,或者设置个别字的颜色.字体等,那就需要用到Spannable对象,可以借助Spannable对象实现以上设置. 效果图: Activity代码: import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.text.Spannable; import android.tex

我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体

一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置. 1,  新建一个网页a.html,把下面的代码复制进去. <html> <head> <style type="text/css"> body { font-family : 微软雅黑,宋体; font-size : 1

textView设置按下和焦点改变时让字体颜色发生变化

在res/color/text_color_selector.xml这个下编写: <?xml version="1.0" encoding="utf-8" ?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:color

HTML基础(四)——设置超链接的样式示例

 ***设置超链接的样式示例  a:link 超链接被点前状态 a:visited 超链接点击后状态 a:hover 悬停在超链接时 a:active 点击超链接时 在定义这些状态时,有一个顺序l v h a 代码区: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

Zend Studio 12.0.2正式版发布和破解方法,zend studio 12.0.1汉化,相式设置为Dreamweaver,空格缩进为4个, 代码默认不折叠的设置,Outline中使用的图形标志,代码颜色之eot设置。

背景:zend studio 12.0.2 修复了一个12.0.1的:  Fixed problem with referenced variables marked as undefined,我都说好像有问题,刚开始还以为是破解得有问题呢. AddTime:2015-4-5zend studio 12.0.2 破解&keygen:http://download.csdn.net/detail/wfstock/8418635 破解ZendStudio 10.1:刚才装了个ZendStudio 1

NX二次开发-UFUN获取对象的显示属性(图层,颜色,空白状态,线宽,字体,高亮状态)UF_OBJ_ask_display_properties

1 NX9+VS2012 2 3 #include <uf.h> 4 #include <uf_modl.h> 5 #include <uf_obj.h> 6 7 UF_initialize(); 8 9 UF_FEATURE_SIGN Sign = UF_NULLSIGN;//设置布尔 10 double Corner_pt[3] = {0.0, 0.0, 0.0};//设置原点 11 char *Edge_Len[3] = {"100", &qu

JSP中设置超链接失效点击进入下载页面的问题

在JSP中设置超链接标签体后点击发现进入不了页面而是进入了下载页面,此时需要在你新建的超链接对应的Servlet中查看response响应头是否有设置,设置是否成功,如下代码: 在JSP页面设置如下超链接发现进入不了, <a href="<%= request.getContextPath()%>/servlet/BuyServlet?prod=电视">电视</a><br> 此时进入BuyServlet类中查看response的应答头的设