复习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



相关文章
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
8天前
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点,适用于不同场景。
|
2天前
|
前端开发
css <样式一>
css <样式一>
11 1
|
19天前
|
设计模式 移动开发 前端开发
CSS内联样式的使用,吐血整理
CSS内联样式的使用,吐血整理
31 6
|
23天前
|
XML 前端开发 数据格式
CSS常用样式及示例
CSS常用样式及示例
|
1月前
|
前端开发
CSS 设置hr样式
【8月更文挑战第9天】
|
20天前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
35 0
|
20天前
|
前端开发 JavaScript 开发者
【前端革新力】React与CSS-in-JS完美邂逅:从styled-components到emotion,全面解析样式管理新趋势的实战应用与优势剖析!
【8月更文挑战第31天】CSS-in-JS 作为一种新兴的样式管理方式,近年来在前端社区受到广泛关注。它将样式嵌入 JavaScript,实现了样式与逻辑的高度耦合,提升了开发效率并解决了全局样式污染等问题。本文通过具体代码示例,探讨 CSS-in-JS 在 React 开发中的应用,并分享实践心得。首先介绍了 CSS-in-JS 的基本概念,然后详细展示了如何使用 styled-components 和 emotion 这两个流行库创建样式化组件。
29 0
|
2月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
2月前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
69 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)