教你用CSS控制超链接
一、伪类
CSS控制元素的某种状态---偽类(用于向某些选择器添加特殊的效果)
偽类的语法:元素标签 偽类名称{属性:属性值;}
二、超链接
a:link:未访问的链接
a:hover:鼠标移动到链接上
a:active:鼠标按下链接
a:visited:已访问的链接
如果在点击过后再返回到该页面还有一些效果的话 就按照该顺序给链接添加状态 L V H A
三、:focus{属性:属性值}设置对象在成为输入焦点时的样式(IE6/7不支持)
四、练习
1.给链接加上边框
2.在超链接中用背景图象添加记号(给超链接a加上背景图片即可)
7.创建按钮和翻转
8.纯 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>
三、: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控制超链接
5. 友情链接
6. 神奇的HTML5:现在Chrome浏览器支持直接通过Gmail打开邮件链接
本文来源:https://www.51html5.com/a1014.html
﹝教你用CSS控制超链接﹞相关内容
- HTML5游戏开发 之 循环的控制(2)
- 一款带左右控制按钮的图片滚动Jquery插件
- Chrome发布新扩展 实现跨平台远程控制
- iOS 5.1更新猜想:Siri直接控制硬件
- HTML5控制接口重设 Firefox 11发新版
- UC首创情人节语音彩蛋 语音控制与HTML5
- 基于 HTML5的远程桌面控制,Guacamole 0.8.0 发布
- 用iOS设备控制的HTML5“小蜜蜂”游戏
- SlimerJS – Web开发人员可编写 JS 控制的浏览器
- Voix.js:使用声音来控制和操纵你的网站