一、伪类

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

二、超链接
        a:link:未访问的链接
        a:hover:鼠标移动到链接上
        a:active:鼠标按下链接
        a:visited:已访问的链接
如果在点击过后再返回到该页面还有一些效果的话 就按照该顺序给链接添加状态 L V H A

<style type="text/css">

    a:link{text-decoration:none; color:#000;}

    a:visited{text-decoration:none; color:#6F0;}

    a:hover{text-decoration:underline; color:#00F;}

    a:active{text-decoration:overline; color:#F00;}

    a.web:visited{text-decoration:none; color:#000;}
</style>

</head>

<body>

    <div id="link">

        <a href="http://www.baidu.com" class="web">网页设计</a> |

        <a href="http://www.baidu.com">平面设计</a> |

        <a href="http://www.baidu.com">网站前端</a> |

        <a href="http://www.baidu.com">动画设计</a> |

        <a href="http://www.baidu.com">软件开发</a> |

        <a href="http://www.baidu.com">网页营销</a>

        <a href="http://www.baidu.com">我会闪</a>

    </div>

 </body>

a伪类的应用：

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

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

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

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

 三、:focus{属性:属性值}设置对象在成为输入焦点时的样式(IE6/7不支持)

<style type="text/css">

    input{

        width:200px;

        height:25px;

        border:2px solid #FF0;

    }

    input:focus{

            background:#9FF;

        }

</style>

</head>

<body>

     <label>用户名： <input type="text" name="username"/></label>

     <label>密　码： <input type="text" name="pwd"/></label>

</body>

四、练习

1.给链接加上边框

<style type="text/css">

a{

    font-size:36px;

}

a:link{

    color:#009;

    text-decoration:none;

    border-bottom:2px solid #F00;

    line-height:150%;

    /*line-height:是为了和下划线分开点*/

}

</style>

</head>

<body>

    <a href="#">PHP100.COM中文网</a>

</body>

2.在超链接中用背景图象添加记号（给超链接a加上背景图片即可）

<style type="text/css">

    a:link{

        color: #f00;

        padding-left:13px;

        background:url(fasfas.gif) no-repeat left center;

        text-decoration:none;

    }

    a:visited{

        color:#900;

        padding-left:13px;

        background:url(das.gif) no-repeat left center;

        text-decoration:none;

    }

    <!--将visited改为hover可以实现鼠标浮动的效果-->

</style>

</head>

<body>

    <p>PHP100.COM中文网,<a href="www.baidu.com">PHP</a>资源共享站</p>

</body>

7.创建按钮和翻转

<style type="text/css">

    a {

        Display: block;

        Width: 140px;

        Padding: 3px;

        height:30ox

        Line-height: 30px;

        Background-color: #94b8e9;

        Border: 1px solid black;

        Color: #000;

        Text-decoration: none;

        Text-align: center;

    }

    a:hover {

        background-color: #369;

        color:#fff;

    }

</style>

</head>

<body>

    <a href="http:\\www.baidu.com">PHP100.COM中文网</a>

</body>

8.纯 css 工具提示

<style type="text/css">

a.tooltip {

    position: relative;

}

a.tooltip span {

    display: none;

}

a.tooltip:hover {

        font-size: 100%; /* Fixes bug in IE5.x/Win */

}

a.tooltip:hover span {

    display:block;

    position:absolute;

    top:1em;

    left:2em;

    padding: 0.2em 0.6em;

    border:1px solid #996633;

    background-color:#FFFF66;

    color:# 000;

}

</style>

</head>

<body>

    <p><a href="#">PHP100.COM<span>PHP官网</span></a></p>

    <p>

        <a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span> (This website

            rocks) </span></a> is a web developer based in Brighton England.

    </p>

</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. Keil RTX systick 初始化

    在STM32F215上移植Keil的RTX操作系统,随便设置下就能好使,但是当我想知道systick到底是怎么设置的时候,就得翻翻代码了,原来在 rt_HAL_CM.h中以一个内联函数的形式定义的 _ ...

  2. Grid分组汇总

    Ext.onReady(function () {                Ext.define('personInfo', {                    extend: 'Ext. ...

  3. 游戏引擎网络开发者的 64 做与不做 | Part 1 | 客户端方面

    摘要:纵观过去 10 年的游戏领域,单机向网络发展已成为一个非常大的趋势.然而,为游戏添加网络支持的过程中往往存在着大量挑战,这里将为大家揭示游戏引擎网络开发者的 64 个做与不做. [编者按]时下, ...

  4. （转）Eclipse平台技术概述

    转载:周金根 http://zhoujg.blog.51cto.com/1281471/516833    Eclipse:Eclipse平台技术概述 2010-10-19 13:35:00 标签:E ...

  5. java 静态构造函数

    在java中貌似是没有静态构造函数的. 不过用下面的方式同样可以实现效果. static { }//end 这是静态代码块

  6. lintcode：最大间隔

    题目 给定一个未经排序的数组,请找出其排序表中连续两个要素的最大间距. 如果数组中的要素少于 2 个,请返回 0. 注意事项 可以假定数组中的所有要素都是非负整数,且最大不超过 32 位整数. 样例 ...

  7. 如何在solution中添加一个test case

    在solution Explorer中右键点击需要添加的folder,选择Add-New Item.也可以选择使用相应Unit Test之类的.Generic Test一般用于创建manual cas ...

  8. Spring学习总结（1）——Spring AOP的概念理解

    1.我所知道的aop 初看aop,上来就是一大堆术语,而且还有个拉风的名字,面向切面编程,都说是OOP的一种有益补充等等.一下子让你不知所措,心想着:怪不得 很多人都和我说aop多难多难 .当我看进去 ...

  9. 基于RPC原理的dubbo

    在校期间大家都写过不少程序,比如写个hello world服务类,然后本地调用下,如下所示.这些程序的特点是服务消费方和服务提供方是本地调用关系. 而一旦踏入公司尤其是大型互联网公司就会发现,公司的系 ...

  10. Linux基础--用户和组管理

    1.账号管理相关文件 1)/etc/passwd    每一行都代表一个账号,有几行就代表有几个账号在你的系统中,不过需要特别留意的是,里头很多账号本来就是系统中必须要的,我们可以简称他为系统账号, ...