今天小编跟大家讲解下有关css控制超链接(css超链接样式) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css控制超链接(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="https://www.aidi.net.cn//css/<a href="http://www.baidu.com">http://www.baidu.com</a>"class="web">网页设计</a> | <a href="https://www.aidi.net.cn//css/<a href="http://www.baidu.com">http://www.baidu.com</a>">平面设计</a> | <a href="https://www.aidi.net.cn//css/<a href="http://www.baidu.com">http://www.baidu.com</a>">网站前端</a> | <a href="https://www.aidi.net.cn//css/<a href="http://www.baidu.com">http://www.baidu.com</a>">动画设计</a> | <a href="https://www.aidi.net.cn//css/<a href="http://www.baidu.com">http://www.baidu.com</a>">软件开发</a> | <a href="https://www.aidi.net.cn//css/<a href="http://www.baidu.com">http://www.baidu.com</a>">网页营销</a> <a href="https://www.aidi.net.cn//css/<a href="http://www.baidu.com">http://www.baidu.com</a>">我会闪</a></div> </body>三、: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%;}</style></head></p><p><body><a href="">PHP.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;</p><p>}<!--将visited改为hover可以实现鼠标浮动的效果--></style></head></p><p><body><p>PHP100.COM中文网,<a href="https://www.aidi.net.cn//css/<a href="http://www.baidu.com">PHP</a">www.baidu.com">PHP</a</a>>资源共享站</p></body>7.创建按钮和翻转
复制代码代码如下:<style type="text/css">a {Display: block;Width: 140px;Padding: 3px;height:30oxLine-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="https://www.aidi.net.cn//css/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%; }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="">PHP.COM<span>PHP官网</span></a></p><p><a href="https://www.aidi.net.cn//css/<a href="http://www.anfsdfasdybufdsfdasfdd.com/">http://www.anfsdfasdybufdsfdasfdd.com/</a>"class="tooltip">Andy Budd<span> (This websiterocks) </span></a> is a web developer based in Brighton England.</p></body>
来源：爱蒂网
