我们能够以不同的方法为链接设置样式。

设置链接的样式

能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态

a:link－普通的 未被访问的链接

a:visited-用户已经访问过的链接

a:hover 鼠标指针位于链接的上方

a:active 链接被点击的时刻

  1. a:link {color:#FF0000;}        /* 未被访问的链接 */
  2. a:visited {color:#00FF00;}    /* 已被访问的链接 */
  3. a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
  4. a:active {color:#0000FF;}    /* 正在被点击的链接 */

⚠️当为链接的不同状态设置样式的时候 请按照以下次序规则

a:hover 必须位于a:link和 a:visited之后

a:active必须位于a:hover之后

例子:

1:向链接添加不同的样式

  1. <head>
  2.         <meta charset="UTF-8">
  3.         <title>链接</title>
  4.         <style type="text/css">
  5.             a:link {
  6.                 color: #00FFFF;
  7.                 font-size: 10px;
  8.                 text-decoration: none;
  9.             }
  10.             a:visited {
  11.                 color: #FF0000;
  12.                 font-size:25px;
  13.                 text-decoration: underline;
  14.             }
  15.             a:hover {
  16.                 color: blue;
  17.                 font-size: 30px;
  18.                 text-decoration: underline;
  19.                 background-color: gray;
  20.             }
  21.             a:active {
  22.                 color: orange;
  23.                 font-size: 20px;
  24.                 text-decoration: none;
  25.                 background-color: purple;
  26.             }
  27.         </style>
  28.     </head>
  29.     <body>
  30.         <p><b><a class="one" href="http://www/baidu.com">百度一下</a></b></p>
  31.     </body>

高级 - 创建链接框

  1. <head>
  2.         <meta charset="UTF-8">
  3.         <title>链接</title>
  4.         <style type="text/css">
  5.             a:link ,a:visited{
  6.                 /*把标签a设置为块级元素*/
  7.                 display: block;
  8.                 width: 120px;
  9.                 font-weight: bold;
  10.                 font-size: 14px;
  11.                 background-color: #98bf21;
  12.                 font-family: "french script mt";
  13.                 color: #ffffff;
  14.                 text-align: center;
  15.                 padding: 4px;
  16.                 text-decoration: none;
  17.             }
  18.             a:hover, a:active{
  19.                 background-color: #7a991a;
  20.             }
  21.  
  22.         </style>
  23.     </head>
  24.     <body>
  25.         <a href="http:www.baidu.com" target="_blank">百度一下</a>
  26.     </body>

HTML 学习笔记 CSS样式（链接）的更多相关文章

  1. HTML 学习笔记 CSS样式（定位）

    CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...

  2. HTML 学习笔记 CSS样式（框模型）

    CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述

  3. HTML 学习笔记 CSS样式（外边框 外边框合并）

    CSS外边距 围绕在元素边框的空白区域就是外边距  设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...

  4. HTML 学习笔记 CSS样式（边框）

    元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...

  5. HTML 学习笔记 CSS样式（字体）

    css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列 在css中 有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...

  6. HTML 学习笔记 CSS样式（文本）

    CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...

  7. HTML 学习笔记 CSS样式（简介和语法）

    CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML4.0中 是为了解决内容与表现分离的问题 外部 ...

  8. HTML 学习笔记 CSS样式（相对定位 绝对定位）

    CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...

  9. HTML 学习笔记 CSS样式（背景）

    背景色 可以使用background-color属性为元素设置背景色 这个属性接受任何合法的颜色值. 可以使用background-image属性来喂元素设置背景图片. 背景重复 如果需要在页面上对背 ...

随机推荐

  1. 折腾一天的WordPress

    自从昨天开始要写博客,在网上找了找大家都比较推崇著名的WordPress,所以自己就闲来无事要坐下测试弄一个,不弄不知道,一弄折磨人啊,公司的破网直接想让我崩溃,所以这一天就在这搭建环境中度过,不过值 ...

  2. android加固系列—2.加固前先要学会破解，调试内存值修改程序走向

    [版权所有,转载请注明出处.出处:http://www.cnblogs.com/joey-hua/p/5138585.html] 因公司项目需要对app加固,经过本人数月的研究,实现了一套完整的仿第三 ...

  3. Android http 的使用

    1.okHttp https://github.com/square/okhttp 2.okhttp-utils       https://github.com/hongyangAndroid/ok ...

  4. Android之SeekBar定制

    1.SeekBar样式定制 xml文件中:  <SeekBar             android:id="@+id/seekbar_voice"             ...

  5. Spring AOP 四大通知

    Spring AOP 四大通知 Spring 3.X 以前 1.前置通知,实现  MethodBeforeAdvice 接口,重写 public  void  before(Method  metho ...

  6. ReactiveCocoa学习总结

    最近一直断断续续学习关于ReactiveCocoa的知识内容,对于它的一些基础内容将通过本文进行一个总结,主要是一些入门知识 一:RACSignal一些运用 @interface RACSignalT ...

  7. iOS不同IDS说明

    1.Vindor标识符  identifierForVendor 一个英文字符串,对于相同的产品商(这里指com.zhang.*,也就是前缀一样),其唯一的标识设备. * 这个值对于相同的产品商在相同 ...

  8. 浅谈Java五大设计原则之观察者模式

    定义一下观察者模式: 观察者模式又叫  发布-订阅  模式,定义的两个对象之间是一种一对多的强依赖关系,当一个对象的状态发生改变,所有依赖它的对象 将得到通知并自动更新(摘自Hand First). ...

  9. JQuery制作简单的网页导航特效

    使用JQuery中hover()方法,使其根据鼠标的移动简单的改变背景颜色; hover();用于模拟鼠标指针悬停事件,当鼠标指针移动到元素上时,会触发指定的第一个函数,当鼠标指针移除这个元素时,会触 ...

  10. eclipse插件Maven添加依赖查询无结果的解决方法(Select Dependency doesn't work)

    在eclipse中用过maven的可能都遇到过这种情况,我以前一直在search.maven里面搜索,然后添加pom信息. 今天在网上搜索时,找到了一个解决方法,在这里分享一下. 第一步,在prefe ...