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>
CSS控制超链接的更多相关文章
- 通过css控制超链接不显示下划线
“页面属性”——“链接”——“下划线样式”——“始终无下划线” <style type="text/css"> a:link { text-decoration: no ...
- 【CSS】使用CSS改变超链接样式
超链接代码 <ahrefahref="http://www.divCSS5.com/"target="_blank" title="关于divC ...
- 学习笔记 第七章 使用CSS美化超链接
第7章 使用CSS美化超链接 学习重点 认识超链接 熟悉伪类 定义超链接样式 能够灵活设计符合页面风格的链接样式 7.1 定义超链接 在HTML5中建立超链接需要两个要素:设置为超链接的网页元素和 ...
- js,css控制网页内容不让选中和复制
---恢复内容开始--- JS, CSS控制网页内容不让选择和复制 CSS 控制: <style> body{ -moz-user-select:none;//针对火狐浏览器,谷歌则-we ...
- CSS控制表格(table)样式
CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}
- CSS 控制Html页面高度导致抖动问题的原因
CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码: html,body{ overflow-y:scroll;} ht ...
- CSS控制XML与通过js解析xml然后通过html显示xml中的数据
使用CSS控制XML的显示 book.css bookname{ display:block;color:Red} author{ display:block;font-style:italic} p ...
- Flex中使用CSS控制页面样式
Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...
- js控制固定div和随屏滚动div兼容多浏览器和纯css控制(来自网络)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 浅谈c#枚举
结构中的成员可以赋值,枚举呢....是取值,只读的 以下情况可以考虑将类创建为结构:(1)如果一个类其中的字段非常少,所有字段占用的内存总量不超过8.16字节:(2)如果一个类中的字段都是值类型: 关 ...
- 亚马逊 在线测试题目 amazon
分析:其实就是求矩形中某一个点到其他点的距离加权最小 方法一: 对每一个点求其到其他点的加权距离,然后比较最小.由于有M*N个点,对每一个点求加权距离是O(M*N)的,所以整体时间复杂度是O(M*M* ...
- 链表(c语言实现)--------------小练习
#include <stdio.h> #include <stdlib.h> #include <string.h> #define MAX_SIZE 100 #d ...
- POJ 1491
#include<iostream> #include<cmath> #include<iomanip> #define MAXN 50 using namespa ...
- 机器学习之神经网络模型-上(Neural Networks: Representation)
在这篇文章中,我们一起来讨论一种叫作"神经网络"(Neural Network)的机器学习算法,这也是我硕士阶段的研究方向.我们将首先讨论神经网络的表层结构,在之后再具体讨论神经网 ...
- Servlet3.0-使用注解定义Servlet
我使用的开发环境:MyEclipse10+Tomcat7+JDK6. 开发Servlet3的程序需要一定的环境支持.Servlet3是Java EE6规范的一部分,MyEclipse10和Tomcat ...
- JS之类型转换
一.显示类型转换 1.Boolean() (1).undefined/null/‘’ ==> false (2).任何对象(包括例如var obj = {} ) ==> true ( ...
- Project Euler 103:Special subset sums: optimum 特殊的子集和:最优解
Special subset sums: optimum Let S(A) represent the sum of elements in set A of size n. We shall cal ...
- JAVA数据库连接池实现(转)
连接池的管理用了了享元模式,这里对连接池进行简单设计. 一.设计思路 1.连接池配置属性DBbean:里面存放可以配置的一些属性 2.连接池接口IConnectionPool:里面定义一些基本的获取连 ...
- ios开发中超简单抽屉效果(MMDrawerController)的实现
ios开发中,展示类应用通常要用到抽屉效果,由于项目需要,本人找到一个demo,缩减掉一些不常用的功能,整理出一个较短的实例. 首先需要给工程添加第三方类库 MMDrawerController: 这 ...