复习css样式的第1章(二)

简介: 复习css样式的第1章(二)

7.CSS 链接

设置链接样式

链接可以使用任何 CSS 属性(例如 colorfont-familybackground 等)来设置样式。

a {
  color: hotpink;
}

此外,可以根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是:

  • a:link - 正常的,未访问的链接
  • a:visited - 用户访问过的链接
  • a:hover - 用户将鼠标悬停在链接上时
  • a:active - 链接被点击时
/* 未被访问的链接 */
a:link {
  color: red;
}
/* 已被访问的链接 */
a:visited {
  color: green;
}
/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}
/* 被选择的链接 */
a:active {
  color: blue;
}

如果为多个链接状态设置样式,请遵循如下顺序规则:

  • a:hover 必须 a:link 和 a:visited 之后
  • a:active 必须在 a:hover 之后

文本装饰

text-decoration 属性主要用于从链接中删除下划线:

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

背景色

background-color 属性可用于指定链接的背景色

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
} 

本篇文章就到这吧,期待博主的第二篇文章嘛,请


211b431e7de44bd289af82d5f11a57b4.jpgb9581781b1ad40a98f5c4ff6d3cd1ab5.jpg


4797989065034d8e8845539f5de1f829.gif21af082af6514b64960e501f65f7f6a1.jpg



相关文章
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
32 0
|
1月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
28 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
42 0
|
3月前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
29 0
|
16天前
|
前端开发
|
19天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
23天前
|
XML 前端开发 数据格式
css添加样式
【4月更文挑战第4天】css添加样式
21 9
|
1月前
|
JavaScript 前端开发
如何在 Vue 中进行样式绑定和scoped CSS?
如何在 Vue 中进行样式绑定和scoped CSS?
15 0
|
1月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
23 0
|
1月前
|
前端开发 开发者
编程笔记 html5&css&js 017 HTML样式
编程笔记 html5&css&js 017 HTML样式