(9)css 链接

本篇学习资料的主要介绍: 超链接文本的样式设计、鼠标指针效果。

1、超链接文本的样式设计

普通的网站中,所有的页面都会通过超链接相互链接在一起,这样才会形成一个有机的网站。

超链接是网页上普通的元素,通过超链接能够实现页面的跳转、功能的激活等,因此,超链接也是与用户打交道最多的元素之一。

(1)在html语言中,超链接是通过标记<a>来实现的,链接的具体地址是利用<a>标记的href属性,如下:

<a href="http://www.cnblogs.com/KTV123/">老罗江湖</a>

接下来用css去设置超链接的字体、颜色和背景等,而且引用伪类别制作更多动态效果。(伪类别:CSS为一些特殊效果准备了特定的工具,我们称之为“伪类别”。)

经常用到的4种伪类别a:link :超链接的普通样式,(未访问的链接)。
a:visited:被点击过的超链接的样式,(已访问的链接)。
a:hover:鼠标指针经过超链接时的样式,(鼠标移动到链接上)。

a:active:在超链接点击过时,即“当前激活”时超链接的样式,(已访问的链接)。  /*这个很少使用,下面不做介绍*/

下面准备一个简单案列进行解释:

“简单案列1”:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>链接动态效果</title>
  <style type="text/css">
  body{
      background-color:#99CCFF;
   }
   a{
      font-size:14px;
      font-family:Arial, Helvetica, sans-serif;
   }
   a:link{                    /*超链接正常状态下的样式*/
     color:red;                   /* 红色 */
     text-decoration:none;      /*去掉下划线*/
   }
   a:visited{                 /*被点击过的超链接的样式*/
       color:back;                /* 黑色 */
       text-decoration:none;      /*去掉下划线*/
   }
   a:hover{                    /*鼠标指针经过超链接时样式*/
       color:yellow;              /* 黄色 */
       text-decoration:underline;  /*有下划线*/
       background-color:blue;      /* 背景颜色为蓝色 */
   }
  </style>
 </head>
 <body>
 <a href="http://www.cnblogs.com/KTV123/">博客园</a> &nbsp;&nbsp;&nbsp;
 <a href="http://www.cnblogs.com/KTV123/">主页</a> &nbsp;&nbsp;&nbsp;
 <a href="http://www.cnblogs.com/KTV123/">新随笔</a>   &nbsp;&nbsp;&nbsp;
 <a href="http://www.cnblogs.com/KTV123/">联系</a>   &nbsp;&nbsp;&nbsp;
 <a href="http://www.cnblogs.com/KTV123/">订阅</a>   &nbsp;&nbsp;&nbsp;
 <a href="http://www.cnblogs.com/KTV123/">管理</a>   &nbsp;&nbsp;&nbsp;
 </body>
</html>

效果图:

上图讲解:

超链接正常没被访问过的颜色是红色,没有下划线;而超链接被点击过后变成了黑色,同样没有下划线;当鼠标指针经过时,超链接则变成了黄色,而且出现了下划线。

其实每一个链接元素都可以通过4种伪类别设置相应的4种状态的css的样式。

除了上面用到的文字相关的css的样式,其他各种背景、边框、和排版的css样式都可以随意加入到超链接的几个伪类别的样式规则中,从而得到各式各样的效果。

在设置一个<a>元素的这4种伪类别时,需要注意顺序,要依次按照 a:link、 a:visited 、a:hover 、a:active。

每个伪类别的冒号前面的选择器之间不要有空格。

(2)按钮式超链接

这里通过css的普通属性来模拟”按钮式的超链接“效果。

简单案列2:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>按钮式的超链接</title>
  <style type="text/css">
      body{
         background-color:#AAA;
      }
      a{                                /*同一设置所有样式*/
         font-family:Arial;
         font-size:14px;
         text-align:center;
         margin:3px;
      }
      a:link, a:visited{                /*超链接正常的状态、被访问的超链接的样式*/
          color:#A62020;                    /*深玫瑰色*/
          padding:4px 10px 4px 10px;
          background-color:#DDD;
          text-decoration:none;
          border-top:1px solid #EEE;              /*通过设置同样颜色的上、左边框,再设置同样颜色的下、右边框,就可以实现阴影效果的按钮*/
          border-left:1px solid #EEE;             /*边框实现阴影效果*/
          border-bottom:1px solid #717171;
          border-right:1px solid #717171;
      }
      a:hover{                           /*鼠标经过时的超链接*/
          color:#821818;                    /*改变文字颜色*/
          padding:5xp 8px 3px 12px;            /*改变文字位置*/
          background-color:#ccc;                  /*改变背景色*/
          border-top:1px solid #717171;               /*边框改变,实现“按下去”效果*/
          border-left:1px solid #717171;
          border-bottom:1px solid #eee;
          border-right:1px solid #eee;
      }
  </style>

 </head>
 <body>

 <a href="http://www.cnblogs.com/KTV123/">博客园</a> &nbsp;&nbsp;&nbsp;
 <a href="http://www.cnblogs.com/KTV123/">主页</a> &nbsp;&nbsp;&nbsp;
 <a href="http://www.cnblogs.com/KTV123/">新随笔</a>   &nbsp;&nbsp;&nbsp;
 <a href="http://www.cnblogs.com/KTV123/">联系</a>   &nbsp;&nbsp;&nbsp;
 <a href="http://www.cnblogs.com/KTV123/">订阅</a>   &nbsp;&nbsp;&nbsp;
 <a href="http://www.cnblogs.com/KTV123/">管理</a>   &nbsp;&nbsp;&nbsp;
 </body>
 </body>
</html>

效果图:

案列中对<a>标记进行整体控制,同时加入css的3个伪属性;对于普通超链接和点击过的超链接采用同样的样式,并且利用边框的样式模拟按钮效果;而对于鼠标指针经过时的超链接,相应地改变文字颜色、背景色、位置和边框,从而模拟出按钮“按下去”的特效。

(3)荧光灯效果菜单

下面制作一个简单的竖直排列的菜单效果。

简单案列3:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>荧光效果的菜单</title>
  <style type="text/css">
   body{
   cursor:progress;
   }
   /*设置div容器的css样式---开始*/
   #menu{
       font-family:Arial;
       font-size:14px;
       font-weight:bold;
       width:120px;
       background:#000;
       border:1px solid #ccc;
       padding:8px;                  /*设置内边距*/
       margin:0 auto;                   /*设置水平居中*/
   }
   /*设置div容器的css样式---结束*/

   /*设置菜单选项---开始*/
   #menu a,#menu a:visited{
       display:block;
       padding:4px 8px;
       color:#ccc;
       text-decoration:none;
       border-top:1px solid #060;
   }
   #menu a:hover{
       color:#0ff;
       border-top:8px solid #0E0;
   }
   /*设置菜单选项---结束*/
  </style>
 </head>
 <body>
  <div id="menu">
     <a href="#">博客园</a> &nbsp;&nbsp;&nbsp;
     <a href="#">主页</a> &nbsp;&nbsp;&nbsp;
     <a href="#">新随笔</a>   &nbsp;&nbsp;&nbsp;
     <a href="#/">联系</a>   &nbsp;&nbsp;&nbsp;
     <a href="#">订阅</a>   &nbsp;&nbsp;&nbsp;
     <a href="#">管理</a>   &nbsp;shou‘xian&nbsp;&nbsp;
  </div>
 </body>
</html>

1、首先body部分十分的简单,6个文字链接被放置到一个设置为menu的div容器中。

2、设置为menu的div容器整体区域样式:

。设置文字的字体、大小;

。菜单的宽度、背景色、边框;对菜单进行定位;

3、设置菜单项的css样式:

。 为了让6个文字链接依次排列,将它们从“行元素”变为“块级元素” ,为了每个菜单项的文字之间宽敞些设置内边距;

。设置文字的样式、取消下划线;

。在每个菜单项的上面加一个“荧光灯”作为特效,通过设置上边框来实现;

效果图:

 

2、控制鼠标指针

css中,通过cursor属性可以设置各种各样的鼠标指针样式,例如:

body{
       cursor:hand;                       /*鼠标指针为“手形”*/
}

以下是cursor定制的各种鼠标指针效果:

时间: 2024-10-05 06:36:02

(9)css 链接的相关文章

css链接列表表格

1.css链接 a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 注意: a:hover 必须跟在 a:link 和 a:visited后面 a:active 必须跟在 a:hover后面 text-decoration:none;下划线 2.css列表前面的标记 list-style-type: upper-roman; list-style-image: url('oo.p

HTML5样式和列表、CSS链接的四种状态

一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel="stylesheet":外部样式表: 3.三种样式表插入方法: (1)外部样式表: 在<head></head>中写入: <link  rel="stylesheet"  type="text/css"  href=&q

CSS链接样式设置

CSS链接样式,我们知道当我们读一篇文章的时候,有的时候鼠标滑到什么一些文字,有的文字下面会有下 划线,或者是颜色发生变化,其实我们都知道这就是一个链接,出现下滑线和颜色发生变化,都是链接的时 候我们对链接样式的设置.以上我们简单的介绍了什么是样式,你可能会问,哇呜,什么是样式,怎样没有定义 其实我们没有定义更好,我们只需要是去理解.可是我还不理解.不急.请听我慢慢道来: 不同的链接可以有不同的样式,链接样式可用CSS任意的属性,比如颜色color,font,background等等.慢着 我们

HTML5 css链接添加不同的样式

可以用css的选择器来为不同链接添加不同的样式,但经过测试,不知道为什么用id选择器并未成功,经过测试发现用class选择器是可行的,相关案例如下: 本案例是为了实现链接的文本跳转(由页面底部调到首部)和为不同链接添加不同样式,其中,底端链接单独添加了样式,代码如下: HTML5代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <

【CSS3】CSS——链接

CSS链接样式 属性 描述 a:link 普通的.未被访问的链接 a:visited 用户已访问的链接 a:hover 鼠标指针位于链接的上方 a:active 链接被点击的时刻 1.a:link  :未被访问的链接 今天学到一点就是当使用a:link时,变换颜色却不起作用,后来查找资料说记忆Cookies的原因,结果清除后果然显示出想要变换的颜色 还有要补充一点的是a标签这些伪类的执行顺序:link--visited--hover-active,也就是我们常说到的LoVe HAte原则,即"爱

CSS链接属性

CSS链接: 1. 链接的四种状态: (1)a:link - 普通的.未被访问的链接 (2)a:visited - 用户已访问的链接 (3)a:hover - 鼠标指针位于链接的上方 (4)a:active - 链接被点击的时刻 2. 当为链接的不同状态设置样式时,请按照以下次序规则:l-v-h-a,设置才能生效: 3.文本装饰:text-decoration 属性大多用于去掉链接中的下划线:例:

支持鼠标跟随的JS+CSS链接提示框

觉得纯css的tips限制有点大,而且好像兼容性也不好,这是我发现的一个Js+CSS的链接提示框效果,还会跟随鼠标而移动,而且兼容性也不错,代码与大家分享:前端分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu

第十八章 CSS链接、光标、DHTML、缩放

CSS中链接的使用 CSS中光标的使用 CSS中DHTML的使用 CSS中缩放的使用 18.1 CSS中链接的使用 超链接伪类属性 a:link        表示该超链接文字尚未被点选 a:visited      表示该超链接文字已被点选过 a:active      表示该超链接文字正被点选,但未被放开 a:hover       表示当鼠标停留在文字上 简写:a{ 属性值1 属性值2 } 这个表示同时调用4个属性 18.2 CSS中光标的使用(更详细可看文档) 属性名称         

6、CSS 链接样式

链接样式 链接的样式,可以用任何CSS属性(如颜色,字体,背景等). 特别的链接,可以有不同的样式,这取决于他们是什么状态. 这四个链接状态是: a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 <style> a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {