css控制超链接(css超链接样式)
发布时间：2014-04-15 14:43:29 作者：佚名 
我要评论
我要评论这篇文章主要介绍了css控制超链接的方法，也就是css超链接的样式，如给超链接a加上背景图片、给链接加上边框，,需要的朋友可以参考下
一、伪类
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="<a href="http://www.baidu.com">http://www.baidu.com</a>" class="web">网页设计</a> |
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">平面设计</a> |
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">网站前端</a> |
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">动画设计</a> |
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">软件开发</a> |
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">网页营销</a>
<a href="<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%;
/*line-height:是为了和下划线分开点*/
}
</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="<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: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="#">PHP.COM<span>PHP官网</span></a></p>
<p>
<a href="<a href="http://www.anfsdfasdybufdsfdasfdd.com/">http://www.anfsdfasdybufdsfdasfdd.com/</a>" class="tooltip">Andy Budd<span> (This website
rocks) </span></a> is a web developer based in Brighton England.
</p>
</body>
相关文章
如何使用CSS的object-position实现图片在img标签中的定位
该文章介绍了CSS中的object-position属性,用于精确控制替换元素在容器内的位置,通过指定水平和垂直方向的偏移量,可以实现精准定位2024-11-08- 文章主要探讨了CSS Grid布局在Internet Explorer（IE）中的不兼容问题,并提供了具体的解决方案和最佳实践,文章首先介绍了CSS Grid布局的基本概念和与传统布局方法的区别,然2024-11-08
本文介绍了CSS实现圆角渐变边框的方法,首先设置元素边框为1像素宽度,样式为实线,颜色为透明,然后设置元素边框圆角为10像素,再设置背景剪裁区域和背景绘制区域为内边距和边2024-10-29
在CSS布局中,实现元素左右排列有多种方式,Flex布局通过设置margin-left:auto或margin-right:auto实现元素靠右或靠左排列,Grid布局利用grid-template-columns和justify-self2024-10-29- 在CSS中,隐藏滚动条同时保留滚动功能可以通过设置overflow属性和使用特定的CSS伪元素实现,例如,使用::-webkit-scrollbar针对WebKit浏览器,-ms-overflow-style适用于IE和Edg2024-10-29
- 本文详细介绍了CSS中的border属性及其相关特性,包括border-width（宽度）、border-style（样式）和border-color（颜色）等,此外,还讲述了如何独立控制元素的四个边的边框,2024-10-28
- 本文主要介绍了在网页开发中如何实现“回到顶部”的功能,通过HTML和CSS的编写,可以实现一个浮动在页面右下角的小图标,点击后即可回到页面顶部,这种设计可以提高网站的可用2024-10-28
盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)
本文详细介绍了CSS3中的两个实现高斯模糊效果的API：filter和backdrop-filter,filter可以直接在图像或背景图上添加多种效果,而backdrop-filter则用于在元素后的区域添加效2024-09-26
最新评论