HTML 学习笔记 CSS样式（链接）
我们能够以不同的方法为链接设置样式。
设置链接的样式
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态
a:link－普通的 未被访问的链接
a:visited-用户已经访问过的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
⚠️当为链接的不同状态设置样式的时候 请按照以下次序规则
a:hover 必须位于a:link和 a:visited之后
a:active必须位于a:hover之后
例子:
1:向链接添加不同的样式
<head>
<meta charset="UTF-8">
<title>链接</title>
<style type="text/css">
a:link {
color: #00FFFF;
font-size: 10px;
text-decoration: none;
}
a:visited {
color: #FF0000;
font-size:25px;
text-decoration: underline;
}
a:hover {
color: blue;
font-size: 30px;
text-decoration: underline;
background-color: gray;
}
a:active {
color: orange;
font-size: 20px;
text-decoration: none;
background-color: purple;
}
</style>
</head>
<body>
<p><b><a class="one" href="http://www/baidu.com">百度一下</a></b></p>
</body>
高级 - 创建链接框
<head>
<meta charset="UTF-8">
<title>链接</title>
<style type="text/css">
a:link ,a:visited{
/*把标签a设置为块级元素*/
display: block;
width: 120px;
font-weight: bold;
font-size: 14px;
background-color: #98bf21;
font-family: "french script mt";
color: #ffffff;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover, a:active{
background-color: #7a991a;
} </style>
</head>
<body>
<a href="http:www.baidu.com" target="_blank">百度一下</a>
</body>
HTML 学习笔记 CSS样式（链接）的更多相关文章
- HTML 学习笔记 CSS样式（定位）
CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...
- HTML 学习笔记 CSS样式（框模型）
CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述
- HTML 学习笔记 CSS样式（外边框 外边框合并）
CSS外边距 围绕在元素边框的空白区域就是外边距 设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...
- HTML 学习笔记 CSS样式（边框）
元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...
- HTML 学习笔记 CSS样式（字体）
css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列 在css中 有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...
- HTML 学习笔记 CSS样式（文本）
CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...
- HTML 学习笔记 CSS样式（简介和语法）
CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML4.0中 是为了解决内容与表现分离的问题 外部 ...
- HTML 学习笔记 CSS样式（相对定位 绝对定位）
CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...
- HTML 学习笔记 CSS样式（背景）
背景色 可以使用background-color属性为元素设置背景色 这个属性接受任何合法的颜色值. 可以使用background-image属性来喂元素设置背景图片. 背景重复 如果需要在页面上对背 ...
随机推荐
- iOS中sqlite版本号
https://github.com/yapstudios/YapDatabase/wiki/SQLite-version-(bundled-with-OS) https://github.com/y ...
- 浅谈Java五大设计原则之责任链模式
首先我们得先定义一个责任链模式: 责任链模式是一种线性执行流程,多个对象都有机会去执行同一个任务,只是在执行过程中, 由于执行的权利和范围不一样,那么当自己不能处理此任务时,就必须将这个任务抛给下一个 ...
- Label自适应高度
每次都逼我翻代码 这次干脆写博客里面算了 哈哈哈 CGSize maxSize = CGSizeMake(ScreenWith-30,NSIntegerMax); CGSize labelsize ...
- iOS Xcode编译报错问题解决办法汇总
1. 编译出现错误:linker command failed with exit code 1 第一种方法:找到Build settings->Linking->Other Linker ...
- C语言的结构体和C++结构体的区别
关于C++中声明结构体中需要使用构造器创建实例对象的语法: <C++的结构体构造方法的基本概念:结构体的构造方法需要和结构体的名字相同,并且无返回值,也不要void关键字,这样的方法就是构造器的 ...
- Virtualbox虚拟机安装CentOS6.5图文详细教程
什么是Virtualbox? VirtualBox 是一款开源虚拟机软件(注:跟vmware差不多).VirtualBox 是由德国 Innotek 公司开发,由Sun Microsystems公司出 ...
- BIEE使用技巧
索引: 1.如何清除缓存 2.通过“编辑 SQL”取得前一天的日期 3.格式化日历框参数 4.根据传入的开始时间和结束时间取得事实表中的指标(用到了3中的技巧) 5.直接调用数据库函数 6.时间格式转 ...
- Mysql字符集知识总结
字符集&字符编码方式 字符集(Character set)是多个字符的集合,字符集种类较多,每个字符集包含的字符个数不同,这里的字符可以是英文字符,汉字字符,或者其他国家语言字符. 常见字符集 ...
- Oracle 列转行函数 Listagg()
这是最基础的用法: LISTAGG(XXX,XXX) WITHIN GROUP( ORDER BY XXX) 例: select listagg(oeid,',') within GROUP (ord ...
- Hyper-V 上的android
为了各种实验环境,装了Hyper-V,然后ADT的android虚拟机就用不上Intel的HAXM了,慢得不行.只有想办法在Hyper-v上装android,还得要ADT能连上. 半天下来,终于搞定. ...