一、伪类

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;}
    </style>
  7. </head>
  8. <body>
  9.     <div id="link">
  10.         <a href="http://www.baidu.com" class="web">网页设计</a> |
  11.         <a href="http://www.baidu.com">平面设计</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.     </div>
  18.  </body>

a伪类的应用：

　　a、四个伪类全用(搜索引擎、新闻门户、小说网站)

　　b、一般网站只用（ a{}   a:hover{}  ）

IE6不支持a以外其它任何标签的伪类；

IE6以上的浏览器支持所有标签的hover伪类；

 三、: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.  
  15. <body>
  16.     <a href="#">PHP100.COM中文网</a>
  17. </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.  
  19. <body>
  20.     <p>PHP100.COM中文网,<a href="www.baidu.com">PHP</a>资源共享站</p>
  21. </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.  
  21. <body>
  22.     <a href="http:\\www.baidu.com">PHP100.COM中文网</a>
  23. </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.  
  24. <body>
  25.     <p><a href="#">PHP100.COM<span>PHP官网</span></a></p>
  26.  
  27.     <p>
  28.         <a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span> (This website
  29.             rocks) </span></a> is a web developer based in Brighton England.
  30.     </p>
  31. </body>

CSS控制超链接的更多相关文章

  1. 通过css控制超链接不显示下划线

    “页面属性”——“链接”——“下划线样式”——“始终无下划线” <style type="text/css"> a:link { text-decoration: no ...

  2. 【CSS】使用CSS改变超链接样式

    超链接代码 <ahrefahref="http://www.divCSS5.com/"target="_blank" title="关于divC ...

  3. 学习笔记 第七章 使用CSS美化超链接

    第7章  使用CSS美化超链接 学习重点 认识超链接 熟悉伪类 定义超链接样式 能够灵活设计符合页面风格的链接样式 7.1  定义超链接 在HTML5中建立超链接需要两个要素:设置为超链接的网页元素和 ...

  4. js，css控制网页内容不让选中和复制

    ---恢复内容开始--- JS, CSS控制网页内容不让选择和复制 CSS 控制: <style> body{ -moz-user-select:none;//针对火狐浏览器,谷歌则-we ...

  5. CSS控制表格（table）样式

    CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}

  6. CSS 控制Html页面高度导致抖动问题的原因

    CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码: html,body{ overflow-y:scroll;} ht ...

  7. CSS控制XML与通过js解析xml然后通过html显示xml中的数据

    使用CSS控制XML的显示 book.css bookname{ display:block;color:Red} author{ display:block;font-style:italic} p ...

  8. Flex中使用CSS控制页面样式

    Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...

  9. js控制固定div和随屏滚动div兼容多浏览器和纯css控制（来自网络）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 利用URLRewriter.dll 实现ASP.NET实现伪静态

    大家一定经常在网络上看到很多网站的地址后缀都是用XX.HTML或者XX.ASPX等类似静态文件的标示来操作的吧,那么大家有怀疑过他真的是一个一个的静态生成的文件么,静态文件的生成的优缺有好有坏,对于访 ...

  2. MYSQL注入天书之服务器（两层）架构

    Background-6 服务器(两层)架构 首先介绍一下29,30,31这三关的基本情况: 服务器端有两个部分:第一部分为tomcat为引擎的jsp型服务器,第二部分为apache为引擎的php服务 ...

  3. 收集几个Web前端UI框架

    原文:http://www.isaced.com/post-200.html 关于Web前端UI库/框架,我觉得是非常方便的东西,对于我们这种业余的Web开发人员,有时候要写点前端代码的时候把UI框架 ...

  4. http status 汇总

    http status 汇总 常见HTTP状态码 200 OK 301 Moved Permanently 302 Found 304 Not Modified 307 Temporary Redir ...

  5. 转载：PHP,MySQL的安装与配置

    本文转自:http://www.cnblogs.com/janas/archive/2012/08/27/2659240.html 一.安装配置PHP 1.下载Php的版本zip包之后,解压缩到指定目 ...

  6. **关于PHP如何定义一个空对象(REST API如何处理空对象和空数组)

    在写接口的过程当中,手机端有需求说不让返回json数组,要返回一个对象. 那么我们可以怎么做呢? 其实很简单,强制转换即可. 声明空对象: $empty_object=(object)array(); ...

  7. IP TCP HTTP Socket的区别

    网络由下往上分为 物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 通过初步的了解,我知道IP协议对应于网络层,TCP协议对应于传输层,而HTTP协议对应于应用层, 三者从本质上来说没有可 ...

  8. C#日期大全

    DateTime dt = DateTime.Now; // Label1.Text = dt.ToString();//2005-11-5 13:21:25 // Label2.Text = dt. ...

  9. 李洪强漫谈iOS开发[C语言-005]-程序结构分析

  10. 执行脚本出现bin/bash: bad interpreter: No such file or directory

    -bash: ./test.sh: /bin/bash^M: bad interpreter: No such file or directory VI打开文件,没发现任何问题, 把/bin/bash ...