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属性来喂元素设置背景图片. 背景重复 如果需要在页面上对背 ...
随机推荐
- [Android]对BaseAdapter中ViewHolder编写简化
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3642849.html 在Android项目中,经常都会用到Li ...
- 操作系统开发系列—13.a.进程 ●
进程的切换及调度等内容是和保护模式的相关技术紧密相连的,这些代码量可能并不多,但却至关重要. 我们需要一个数据结构记录一个进程的状态,在进程要被挂起的时候,进程信息就被写入这个数据结构,等到进程重新启 ...
- 怎么查看Mac电脑的开机记录?
可以使用last命令查看Mac电脑来看开机记录,同时也能查看关机记录. 首先打开mac的命令终端: 命令行终端敲入命令:last | grep reboot (查看开机时间记录) 命令行终端敲入命令: ...
- DFX 安全测试-- 告诉你什么是XSS、sql注入?POST和GET的区别....
1.用户权限测试 (1) 用户权限控制 1) 用户权限控制主要是对一些有权限控制的功能进行验证 2) 用户A才能进行的操作,B是否能够进行操作(可通过窜session,将在下面介绍) 3)只能有A条件 ...
- samba服务配置
使用yum或者apt-get安装 # yum install samba samba-client samba-swat Samba开发环境配置 Acl权限设置 [不是必须.只要保证web目录的所有 ...
- 学习 HTML5-目录
1.学习 HTML5-页面结构 2.HTML5标记 3.HTML5机构化语义元素 4.HTML5表单 5.HTML5媒体元素:Audio和Video 6.HTML5绘图API 7.HTML5 Canv ...
- Use Excel Pivot Table as a BI tool
Normally, we have created a table, view in database or cube in SSAS, user can use Excel as a BI tool ...
- JDK7学习笔记之基础类型
printf()的基础用法: 变量的基础用法: 字符的输出:
- Iframe指定页面,并使其与该页面显示一致
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- innoDB源码分析--缓冲池
最开始学Oracle的时候,有个概念叫SGA和PGA,是非常重要的概念,其实就是内存中的缓冲池.InnoDB的设计类似于Oracle,也会在内存中开辟一片缓冲池.众所周知,CPU的速度和磁盘的IO速度 ...