编程笔记 html5cssjs 048 CSS链接

编程笔记 html5&css&js 048 CSS链接

  • 一、设置链接样式
  • 二、文本装饰
  • 三、背景色
  • 四、链接按钮
  • 五、练习
  • 小结

通过 CSS,可以用不同的方式设置链接的样式。

一、设置链接样式

链接可以使用任何 CSS 属性(例如 color、font-family、background 等)来设置样式。
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;
} 

四、链接按钮

本例演示了一个更高级的例子,其中我们组合了多个 CSS 属性,将链接显示为框/按钮:

a:link, a:visited {background-color: #f44336;color: white;padding: 14px 25px;text-align: center; text-decoration: none;display: inline-block;
}a:hover, a:active {background-color: red;
}

五、练习

<!DOCTYPE html>
<html lang="zh-cn"><head><title>css链接 编程笔记 html5&css&js</title><meta charset="utf-8" /><style>body {color: cyan;background-color: teal;}a.one:link {color: #ff0000;}a.one:visited {color: #0000ff;}a.one:hover {color: #ffcc00;}a.two:link {color: #ff0000;}a.two:visited {color: #0000ff;}a.two:hover {font-size: 150%;}a.three:link {color: #ff0000;}a.three:visited {color: #0000ff;}a.three:hover {background: #66ff66;}a.four:link {color: #ff0000;}a.four:visited {color: #0000ff;}a.four:hover {font-family: monospace;}a.five:link {color: #ff0000;text-decoration: none;}a.five:visited {color: #0000ff;text-decoration: none;}a.five:hover {text-decoration: underline;}</style></head><body><div align="center"><h2>移动鼠标观察样式的变化:</h2><p><b><a class="one" href="https://yss5678.blog.csdn.net/" target="_blank">明月看潮生的博客 此链接改变颜色</a></b></p><p><b><a class="two" href="https://yss5678.blog.csdn.net/" target="_blank">明月看潮生的博客 此链接改变字体大小</a></b></p><p><b><a class="three" href="https://yss5678.blog.csdn.net/" target="_blank">明月看潮生的博客 此链接改变背景色</a></b></p><p><b><a class="four" href="https://yss5678.blog.csdn.net/" target="_blank">明月看潮生的博客 此链接改变字体族</a></b></p><p><b><a class="five" href="https://yss5678.blog.csdn.net/" target="_blank">明月看潮生的博客 此链接改变文本装饰</a></b></p></div></body>
</html>

小结

有关伪类选择器就不再单独练习了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/637281.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库系统概论-00引言

引言 -数据库系统的发展经历了三代演变 层次/网状数据库系统&#xff0c;关系数据库系统&#xff0c;新一代数据库系统。 -造就了四位图灵奖得主 C.W.Bachman,E.F.Codd,James Gray,M.R.Stoebraker.。 -发展了一门计算机基础学科 数据建模和DBMS核心技术为主&#xff…

Java 面向对象02 封装 (黑马)

人画圆&#xff1a;画圆这个方法应该定义在园这个类里面。 人关门&#xff1a;是人给了门一个作用力&#xff0c;然后门自己关上了门&#xff0c;所以关门的方法是在门的类里面 封装对象的好处&#xff1a; 调用Java自带的方法举例实现&#xff1a; 在测试类中&#xff0c;对其…

电脑pdf如何转换成word格式?用它实现pdf文件一键转换

pdf转word格式可以用于提取和重用pdf文档中的内容&#xff0c;有时候&#xff0c;我们可能需要引用或引用pdf文档中的一些段落、表格或数据&#xff0c;通过将pdf转换为可编辑的Word文档&#xff0c;可以轻松地复制和粘贴所需内容&#xff0c;节省我们的时间&#xff0c;那么如…

Element-UI 多个el-upload组件自定义上传,不用上传url,并且携带自定义传参(文件序号)

1. 需求&#xff1a; 有多个&#xff08;不确定具体数量&#xff09;的upload组件&#xff0c;每个都需要单独上传获取文件&#xff08;JS File类型&#xff09;&#xff0c;不需要action上传到指定url&#xff0c;自定义上传动作和http操作。而且因为不确定组件数量&#xff0…

Oracle 经典练习题 50 题

文章目录 一 CreateTable二 练习题1 查询"01"课程比"02"课程成绩高的学生的信息及课程分数2 查询"01"课程比"02"课程成绩低的学生的信息及课程分数3 查询平均成绩大于等于60分的同学的学生编号和学生姓名和平均成绩4 查询平均成绩小于…

力扣精选算法100题——串联所有单词的字串(滑动窗口专题)

本题链接——串联所有单词的字串 本题和找到字符串中所有字母异位词题目非常相似&#xff0c;思路都是一样。通过自己的大脑能发现其中的相似之处。 第一步&#xff1a;了解题意 就按实例来分析吧&#xff0c;这样更通俗易懂。 words["ab","cd","ef…

Pycharm Terminal 无法激活conda环境

1.问题 Failed to activate conda environment. Please open Anaconda prompt, and run conda init powershell there. 这导致我们无法在Pycharm中使用conda命令 2.解决办法 修改为第二个&#xff0c;然后重启Terminal 再打开时发现已经是当前的conda环境

大数据安全 | 期末复习(上)| 补档

文章目录 &#x1f4da;概述⭐️&#x1f407;大数据的定义、来源、特点&#x1f407;大数据安全的含义&#x1f407;大数据安全威胁&#x1f407;保障大数据安全&#x1f407;采集、存储、挖掘环节的安全技术&#x1f407;大数据用于安全&#x1f407;隐私的定义、属性、分类、…

前端食堂技术周刊第 111 期:2023 JS Rising Stars、2024 年如何写 CSS、htmx、两个 React、npm 年度回顾

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;热橙美式 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 大家好&#xff0c;我是童欧巴。欢迎来到前端食堂技术周刊&#xff0c;我们先来看下…

李沐深度学习-多项式函数拟合试验

d2lzh_pytorch模块跳转连接 import torch import numpy as np import syssys.path.append("路径") import d2lzh_pytorch as d2l -----------------------------生成人工数据集 样本数n200 特征数3 三阶多项式y1.2x-3.4x^25.6x^35εn_train, n_test, true_w, true_…

免费三款备受推崇的爬虫软件

在信息爆炸的时代&#xff0c;爬虫软件成为了数据采集、信息挖掘的得力工具。为了解决用户对优秀爬虫软件的需求&#xff0c;本文将专心分享三款备受推崇的爬虫软件&#xff0c;其中特别突出推荐147采集软件&#xff0c;为您开启爬虫软件的奇妙世界。 一、爬虫软件的重要性 爬…

使用OpenCV绘制图形

使用OpenCV绘制图形 绘制黄色的线&#xff1a; # 绘制一个黑色的背景画布 canvas np.zeros((300, 300, 3), np.uint8) # 在画布上&#xff0c;绘制一条起点坐标为(150, 50)、终点坐标为(150, 250)&#xff0c;黄色的&#xff0c;线条宽度为20的线段 canvas cv2.line(canvas,…

迭代器模式介绍

目录 一、迭代器模式介绍 1.1 迭代器模式定义 1.2 迭代器模式原理 1.2.1 迭代器模式类图 1.2.2 模式角色说明 1.2.3 示例代码 二、迭代模式的应用 2.1 需求说明 2.2 需求实现 2.2.1 抽象迭代类 2.2.2 抽象集合类 2.2.3 主题类 2.2.4 具体迭代类 2.2.5 具体集合类 …

模拟外卖平台商家菜品上架系统

目的&#xff1a;模仿平台商品上架&#xff0c;完成外卖商家系统 需求&#xff1a;1.需要完成商家菜品上架操作&#xff1b;2.需要完成所有菜品信息的浏览&#xff1b; 分析&#xff1a; 步骤&#xff1a; 1.确定操作对象&#xff0c;并创建对象类以及对象操作类&#xff1b;…

tcp/ip协议2实现的插图,数据结构7 (27 - 章)

(166) 166 二七1 TCP的函数 函tcp_drain,tcp_drop (167) (168)

Windows WSL2 占用磁盘空间清理释放

目前工作中时常用到WSL2&#xff08;Ubuntu20.04&#xff09;&#xff0c;在使用一段时间后会发现WSL2所占用磁盘空间越来越多&#xff0c;体现在WSL2之上安装Linux分发对应的vhdx虚拟磁盘文件体积越来越大&#xff0c;会占用Windows自身空间&#xff0c;即使手动清理了Linux分…

GD32E230C8T6《调试篇》之 (软件) IIC通信(主机接收从机) + GN1650驱动芯片 + 按键 + 4位8段数码管显示 (成功)

GD32E230C8T6《调试篇》之 &#xff08;软件&#xff09; IIC通信 GN1650驱动芯片 4位8段数码管显示&#xff08;成功&#xff09; IIC是什么IIC简介1&#xff09;IIC总线物理连接2&#xff09;IIC时序协议 按键扫描代码1&#xff09;DIG2短按只一次&#xff0c;长按超过1s 一…

若依微服务框架,富文本加入图片保存时出现JSON parse error: Unexpected character (‘/‘ (code 47)):...

若依微服务框架&#xff0c;富文本加入图片保存时出现JSON parse error: Unexpected character 一、问题二、解决1.修改网关配置2、对数据进行加密解密2.1安装插件2.2vue页面加密使用2.3后台解密存储 一、问题 若依微服务项目在使用富文本框的时候&#xff0c;富文本加入图片进…

【Java程序员面试专栏 专业技能篇】MySQL核心面试指引(一):基础知识考察

关于MySQL部分的核心知识进行一网打尽,包括三部分:基础知识考察、核心机制策略、性能优化策略,通过一篇文章串联面试重点,并且帮助加强日常基础知识的理解,全局思维导图如下所示 本篇Blog为第一部分:基础知识考察,子节点表示追问或同级提问 基本概念 包括一些核心问…

Python中的卷积神经网络(CNN)入门

卷积神经网络&#xff08;Convolutional Neural Networks, CNN&#xff09;是一类特别适用于处理图像数据的深度学习模型。在Python中&#xff0c;我们可以使用流行的深度学习库TensorFlow和Keras来创建和训练一个CNN模型。在本文中&#xff0c;我们将介绍如何使用Keras创建一个…