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属性来喂元素设置背景图片. 背景重复 如果需要在页面上对背 ...
随机推荐
- 编写高质量的Objective-C代码
点标记语法 属性和幂等方法(多次调用和一次调用返回的结果相同)使用点标记语法访问,其他的情况使用方括号标记语法. 良好的风格: view.backgroundColor = [UIColor or ...
- setRequestedOrientation设置屏幕方向
void android.app.Activity.setRequestedOrientation(int requestedOrientation) 官方API解释: Change th ...
- Android时区及语言代码
1. 设置默认时区 PRODUCT_PROPERTY_OVERRIDES += \ persist.sys.timezone=Asia/Shanghai\ 注:搜索“persist ...
- 利用听云Server和听云Network实测Kubernetes和Mesos在高并发下的网络性能
文章出自:听云博客 随着公司业务的不断增长,我们的应用数量也有了爆发式增长.伴随着应用爆发式的增长,管理的难度也随之加大.如何在业务爆发增长的同时快速完成扩容成了很大的挑战.Docker的横空出世恰巧 ...
- iOS Address Book指南
尽管OC是一门面向对象的语言,但是在你做开发的时候你会发现,并不是所有你用的frameworks都是面向对象的.有些是用C写的,例如Address Book的API,接下来让我们去学习一下Addres ...
- redis配置文件参数说明及命令操作
redis下载地址:https://github.com/MSOpenTech/redis/releases. Redis 的配置文件位于 Redis 安装目录下,文件名为redis.windows. ...
- Java 往年试卷参考答案！！！
仅供参考: 第一题: E C E A D D C A C A C A B A B C C D B C 第二题: True True False 11 12 13 14 No such file fou ...
- java 语言规范 java language specifications
在线地址: https://docs.oracle.com/javase/specs/ java语言规范下载: 链接:http://pan.baidu.com/s/1miEpJwk 密码:f89v j ...
- 开启Tomcat 源码调试
开启Tomcat 源码调试 因为工作的原因,需要了解Tomcat整个架构是如何设计的,正如要使用Spring MVC进行Web开发,需要了解Spring是如何设计的一样,有哪些主要的类,分别是用于干什 ...
- 海量IT资料 + 各种平台下的Oracle安装文件 + 公开课录像 + 各种视频教程资料
觉得老师的公开课讲的都挺好的,这里把我录的一些公开课视频分享给大家,都用的是<屏幕录像专家>来录制的,是lxe格式的,大家用这个软件来播放就可以了,后边的公开课录像文件也会慢慢添加进去的, ...