CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 教你用CSS控制超链接

教你用CSS控制超链接

一、伪类

CSS控制元素的某种状态---偽类(用于向某些选择器添加特殊的效果)
偽类的语法:元素标签 偽类名称{属性:属性值;}

二、超链接
        a:link:未访问的链接
        a:hover:鼠标移动到链接上
        a:active:鼠标按下链接
        a:visited:已访问的链接

如果在点击过后再返回到该页面还有一些效果的话 就按照该顺序给链接添加状态 L V H A
  1. <style type="text/css">
  2.     a:link{text-decoration:none; color:#000;}
  3.     a:visited{text-decoration:none; color:#6F0;}
  4.     a:hover{text-decoration:underline; color:#00F;}
  5.     a:active{text-decoration:overline; color:#F00;}
  6.     a.web:visited{text-decoration:none; color:#000;}
  7. </style>
  8. </head>
  9. <body>
  10.     <div id="link">
  11.         <a href="http://www.baidu.com" class="web">网页设计</a> |
  12.         <a href="http://www.baidu.com">平面设计</a> |
  13.         <a href="http://www.baidu.com">网站前端</a> |
  14.         <a href="http://www.baidu.com">动画设计</a> |
  15.         <a href="http://www.baidu.com">软件开发</a> |
  16.         <a href="http://www.baidu.com">网页营销</a>  
  17.         <a href="http://www.baidu.com">我会闪</a>
  18.     </div>
  19. </body>
复制代码
三、:focus{属性:属性值}设置对象在成为输入焦点时的样式(IE6/7不支持)

  1. <style type="text/css">
  2.     input{
  3.         width:200px;
  4.         height:25px;
  5.         border:2px solid #FF0;
  6.     }
  7.     input:focus{
  8.             background:#9FF;
  9.         }
  10. </style>
  11. </head>
  12. <body>
  13.      <label>用户名: <input type="text" name="username"/></label>
  14.      <label>密 码: <input type="text" name="pwd"/></label>
  15. </body>
复制代码
四、练习

1.给链接加上边框

  1. <style type="text/css">
  2. a{
  3.     font-size:36px;
  4. }
  5. a:link{
  6.     color:#009;
  7.     text-decoration:none;
  8.     border-bottom:2px solid #F00;
  9.     line-height:150%;
  10.     /*line-height:是为了和下划线分开点*/
  11. }
  12. </style>
  13. </head>

  14. <body>
  15.     <a href="#">PHP100.COM中文网</a>
  16. </body>
复制代码
2.在超链接中用背景图象添加记号(给超链接a加上背景图片即可)

  1. <style type="text/css">
  2.     a:link{
  3.         color: #f00;
  4.         padding-left:13px;
  5.         background:url(fasfas.gif) no-repeat left center;
  6.         text-decoration:none;
  7.     }
  8.     a:visited{
  9.         color:#900;
  10.         padding-left:13px;
  11.         background:url(das.gif) no-repeat left center;
  12.         text-decoration:none;
  13.    
  14.     }
  15.     <!--将visited改为hover可以实现鼠标浮动的效果-->
  16. </style>
  17. </head>

  18. <body>
  19.     <p>PHP100.COM中文网,<a href="www.baidu.com">PHP</a>资源共享站</p>
  20. </body>
复制代码

7.创建按钮和翻转

  1. <style type="text/css">
  2.     a {
  3.         Display: block;
  4.         Width: 140px;
  5.         Padding: 3px;
  6.         height:30ox
  7.         Line-height: 30px;
  8.         Background-color: #94b8e9;
  9.         Border: 1px solid black;
  10.         Color: #000;
  11.         Text-decoration: none;
  12.         Text-align: center;
  13.     }
  14.     a:hover {
  15.         background-color: #369;
  16.         color:#fff;
  17.     }
  18. </style>
  19. </head>

  20. <body>
  21.     <a href="http:\\www.baidu.com">PHP100.COM中文网</a>
  22. </body>
复制代码

8.纯 css 工具提示

  1. <style type="text/css">
  2. a.tooltip {
  3.     position: relative;
  4. }
  5. a.tooltip span {
  6.     display: none;
  7. }
  8. a.tooltip:hover {
  9.         font-size: 100%; /* Fixes bug in IE5.x/Win */
  10. }
  11. a.tooltip:hover span {
  12.     display:block;
  13.     position:absolute;
  14.     top:1em;
  15.     left:2em;
  16.     padding: 0.2em 0.6em;
  17.     border:1px solid #996633;
  18.     background-color:#FFFF66;
  19.     color:# 000;
  20. }
  21. </style>
  22. </head>

  23. <body>
  24.     <p><a href="#">PHP100.COM<span>PHP官网</span></a></p>
  25.    
  26.     <p>
  27.         <a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span> (This website
  28.             rocks) </span></a> is a web developer based in Brighton England.
  29.     </p>
  30. </body>
复制代码



【教你用CSS控制超链接】相关文章

1. 教你用CSS控制超链接

2. 教你用CSS3动画实现的超炫过渡特效

3. 开发者用HTML5重制超级马里奥

4. 教你如何塑造JavaScript牛逼形象

5. 友情链接

6. 神奇的HTML5:现在Chrome浏览器支持直接通过Gmail打开邮件链接

7. 使用HTML5的链接预取功能给网站提速

8. 瀑布流多列布局排版控制CSS3的实现方法

9. HTML5游戏开发 之 循环的控制(3)

10. HTML5游戏开发 之 循环的控制(1)

本文来源:https://www.51html5.com/a1014.html

点击展开全部

﹝教你用CSS控制超链接﹞相关内容

「教你用CSS控制超链接」相关专题

其它栏目

也许您还喜欢