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属性来喂元素设置背景图片. 背景重复 如果需要在页面上对背 ...
随机推荐
- 腾讯bugly团队提供的android国内镜像
腾讯bugly团队提供的国内镜像 如果使用Android SDK Manager下载比较慢或者打不开,可以使用国内镜像 使用说明 http://android-mirror.bugly.qq.co ...
- iOS中响应者链条-触摸事件
总体来说,分2个步骤: 一,从上到下寻找合适的控件来处理这个触摸事件.如下图,如果点击了黄色4,则UIApplication -> UIWindow -> 1白色 -> 2橙色 -& ...
- 6、后记：PMO项目管理 - PMO项目管理办公室
PMO项目管理办公室的作用,按笔者所简化的理解,其作用就是将项目资源标准化.规范化.文档化.然后,根据实际的项目情况,对项目间的资源内容进行协调沟通和培训,让项目组能够更快更好的完成项目建设任务. 不 ...
- yii2整合百度编辑器umeditor
作者:白狼 出处:www.manks.top/article/yii2_umeditor 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责 ...
- [整理]PHP/HTML混写的四种方式
PHP作为一款后端语言,为了输出给浏览器让浏览器呈现出来,无可避免的要输出HTML代码,下文介绍下我用过的三种PHP/HTML混编方法 1.单/双引号包围法 这是最初级的方法了,用法就像下面这样 &l ...
- 小议如何使用APPLY
简介 如果你打算为在结果集中的每条记录写一个调用表值函数或者表值表达式的select语句,那么你就能用到APPLY 操作符来实现.一般又两种形式写法: 第一种格式就是CROSS APPLY.这种格式可 ...
- mysql datetime查询异常
mysql datetime查询异常 异常:Value '0000-00-00 00:00:00' can not be represented as java.sql.Timestamp (2011 ...
- 【故障处理】ORA-28040: No matching authentication protocol
[故障处理]ORA-28040: No matching authentication protocol 1.1 BLOG文档结构图 1.2 前言部分 1.2.1 导读和注意事项 各位技术爱好者 ...
- Confluent介绍（一）
最开始接触confluent是通过这篇博客,How to Build a Scalable ETL Pipeline with Kafka Connect,对于做大数据的,数据的ETL(抽取,转换,装 ...
- hdfs 机架感知和复制因子的设置
dfs.replication 新更新的复制因子的参数对原来的文件不起作用. 譬如说,原来的复制因子是2,则原来文件上传的时候就只有两个副本. 现在把dfs.replication设置为3,重新启动h ...