CSS控制超链接

一、伪类

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>

 

posted @ 2014-12-03 10:44  胡椒粉hjf  阅读(299)  评论(0编辑  收藏  举报