首页 > 代码库 > CSS控制超链接

CSS控制超链接

2024-08-05 20:03:14   219人阅读

一、伪类

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="http://www.mamicode.com/#">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="http://www.mamicode.com/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.mamicode.com/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="http://www.mamicode.com/#">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控制超链接


联系
我们