写在开篇
本篇带领大家一起复习巩固html里css和超链接，在本篇中css只讲个基础，混个眼熟。在后面的文章中，将会专门讲解CSS有关的知识点。
CSS样式表
啥是CSS：层叠样式表（CSS）用于格式化网页的布局。使用CSS，可以控制颜色、字体、文本大小、元素之间的间距、元素的位置和布局、要使用的背景图像或背景颜色、不同设备的不同显示和屏幕大小等等！
使用CSS的方式
- CSS可以通过3种方式添加到HTML文档：
1. 内联：通过在HTML元素中使用style属性 2. 内部：使用 <head> 部分中的 <style> 元素 3. 外部：通过使用 <link> 元素链接到外部 CSS 文件
注意：添加CSS最常见的方法是「将样式保存在外部CSS文件中」。但是为了方便，笔者在这里先将使用内联样式和内部样式，更易于演示。
后续将会专门更深入的讲解CSS，在本文中，先热热身。
内联CSS
内联CSS用于将唯一样式应用于「单个HTML元素」，内联CSS使用HTML元素的「style属性」。
小栗子：定义字体颜色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> </head> <body> <h1 style="color:red">公众号ID：TtrOpsStack</h1> <p style="color:blue">彩虹运维技术栈社区于</p> </body> </html>
效果如下：
知识
知识点解析：h1元素中，使用了style属性，color:red是CSS本身的语法
内部CSS
小栗子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> <style> body {background-color:powderblue;} h1 {color: red;} p {color: blue;} </style> </head> <body> <h1>公众号ID：TtrOpsStack</h1> <p>彩虹运维技术栈社区于</p> </body> </html>
效果如下：
发现了吗？style在head中定义了，为不同的元素设置了不同的颜色，比如body元素，设置了背景色（如果笔者不是色盲的话，莫非天蓝色？），h1元素设置了红色。
外部CSS
其实，在实际的发开中，使用外部的CSS，才是最佳实践，内容和样式分离，方便管理。
小栗子：
- 创建一个独立的css文件，比如test.css
body { background-color: khaki; } h1 { color: blue; } p { color: red; }
- 在test.html中，通过link引入
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> <link rel="stylesheet" href="./test.css"> </head> <body> <h1>公众号ID：TtrOpsStack</h1> <p>彩虹运维技术栈社区于</p> </body> </html>
效果如下：
发现没有？这次我们将css的代码完全从html文件剥离了，创建了独立的css文件，并在html中引入它。
关于CSS的知识，本篇就到此为止，笔者后续会专门讲解CSS的相关知识点。
HTML链接
链接基础
超链接是什么鬼？说白了就是点击一个链接就可以从一张页面跳转到另一张页面。而且链接不一定是文本，链接也可以是图像或任何其他HTML元素。
废话不说，直接上个小栗子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> </head> <body> <a href="https://mp.weixin.qq.com/s/SDI9cAc2v8k7FujCuJ5qVA">复习巩固html中的知识点：文本格式化、引用、颜色，点击速看</a> </body> </html>
上面的代码中，在是a标签的href属性中指定链接的目标，定义超链接的方式中，a标签是很重要的哦。
效果如下图：
注意到效果了吗？默认情况下，链接将在所有浏览器中显示如下：
- 未访问的链接带有下划线和蓝色（当前的效果就是这样）
- 访问的链接带有下划线和紫色
- 活动链接带有下划线和红色
说明：链接可以长什么样子，是可以用CSS样式来控制它的表现的。
还有一点不知道朋友们有没有发现，当点击该链接时，是在当前浏览器窗口中跳转到新的页面，不信你试试。
如果，不想在新的浏览器窗口打开新的链接页面，怎么做呢？看下面代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> </head> <body> <a href="https://mp.weixin.qq.com/s/SDI9cAc2v8k7FujCuJ5qVA" target="_blank">复习巩固html中的知识点：文本格式化、引用、颜色，点击速看</a> </body> </html>
注意到了吗？在a标签中增加了target属性，值是“_blank”，此时当点击超链接时就会打开新的浏览器窗口跳转跳转到新的页面，不信你再试试。
那么关于target属性可以都可以定义什么值？如下：
- _self：默认，在单击时在同一窗口/选项卡中打开文档
- _blank：在新窗口或选项卡中打开文档
- _parent：在父级框架中打开文档
- _top：在整个窗口中打开文档
OK！到目前为止，上面讲的小例子都是使用绝对URL，也就是完整的网址，现在引出一个问题，当指向同一网站中的页面的链接怎么破？那么就需要使用到相对URL了，也就是不包含https://www的部分。废话不说，看下面的小栗子。
在同一目录下，创建home.html，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>彩虹运维技术栈社区主页</title> </head> <body> <h1> 哈喽！欢迎您来到彩虹运维技术栈社区的主页 </h1> <h2> 我们的公众号ID是：TtrOpsStack </h2> </body> </html>
接着，也在同一目录下创建test.html，代码如下：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> </head> <body> <a href="home.html" target="_blank">点击进入彩虹运维技术栈社区主页，有小彩蛋哦！</a> </body> </html>
OK！很好，上面的创建了home.html和test.html，是为了模拟同一个网站。注意到a标签了吗？指向了同一网站中的页面链接，这就是传说中的相对URL，下面看看效果。
test.html的页面效果如下：
在test页面中点击超链接后的效果如下：
效果非常完美，OK！！！我们继续下面的知识点，能不能使用图像作为链接呢？答案是阔以的，看下面代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> </head> <body> <h1>点击下面图片进入彩虹运维技术栈社区主页，有小彩蛋哦！</h1> <a href="home.html" target="_blank"> <img src="./img/logo-wechat-id.jpg" style="width:400px;height:400px;"> </a> </body> </html>
效果如下：
当鼠标点击该图片，就会跳转到相对url页面了，不信您试试。
非常完美，那我们继续，接下来如果你想给我们投稿，怎么办？看下面代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> </head> <body> <h2>彩虹运维技术栈社区投稿通道</h2> <p>欢迎广大同行盆友来搞，有稿费哦！可将您的稿件发送至下面的邮箱：</p> <p><a href="mailto:996298929@qq.com">我要投稿</a></p> </body> </html>
页面效果如下：
点击我要投稿后的效果如下：
- 居然调用了Win10自带的邮件客户端
上面的小栗子，笔者想说明的知识点是：如何链接到Email地址
下面继续我们的小栗子，用按钮来作为链接，看下面代码
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <p>重磅！DIY的Prometheus主备方案，全网唯一，点击下面按钮速看！</p> <button onclick="document.location='https://mp.weixin.qq.com/s/ESqqgSLDL6lhVVfA4MOEYg'">猛戳速看</button> </body> </html>
说明：要使用HTML按钮作为链接，必须添加一些JavaScript代码。JavaScript允许您指定在某些事件中发生的操作，例如上面示例代码中的单击按钮。
页面效果如下：
下面我们继续，当有一个超链接，想要让鼠标移动过去后能显示出指定的内容，怎么做？看下面代码
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <p>重磅！DIY的Prometheus主备方案，全网唯一，点击下面按钮速看！</p> <a href="https://mp.weixin.qq.com/s/ESqqgSLDL6lhVVfA4MOEYg" title="全网唯一的Prometheus主备方案">猛戳速看</a> </body> </html>
注意到a标签内的title属性了嘛？就是用它来实现的
效果如下图：
好了，对超链接的知识点，上半场结束了，我们先做个小总结：
使用 <a> 元素定义链接 使用 href 属性定义链接地址 使用 target 属性定义打开链接文档的位置 使用 <img> 元素 (内部 <a>) 将图像用作链接 使用 href 属性中的 mailto: 创建一个链接，打开用户的电子邮件程序
链接的颜色和书签
超链接的知识点你以为讲完了？当然没有，接下来继续我们的下半场，主要讲解知识点是链接的颜色和书签
看小栗子：在这个案例中，我们使用CSS更改不同状态链接颜色，未访问的链接将是绿色的，没有下划线。访问的链接将为粉红色，不带下划线。活动链接将为黄色并带下划线。此外，当鼠标悬停在链接(a:hover)上时，该链接将变为红色并带有下划线，代码如下：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> <style> a:link { color: green; background-color: transparent; text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } </style> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <a href="https://mp.weixin.qq.com/s/ESqqgSLDL6lhVVfA4MOEYg" target="_blank">DIY的Prometheus主备方案，猛戳速看</a><br> <a href="https://mp.weixin.qq.com/s/-jBbROxV4IZus97oLTyYPw" target="_blank">不可出外网的主机如何快速、方便、优雅的安装Python库？猛戳速看</a><br> <a href="https://mp.weixin.qq.com/s/8YySxBMN_590Sgz2mxX7dQ" target="_blank">MySQL中有关系的表如何干掉？表的基础管理简单剖析，猛戳速看</a><br> <a href="https://mp.weixin.qq.com/s/SDI9cAc2v8k7FujCuJ5qVA" target="_blank">运维开发必备技能！陪你一起复习巩固前端，攻破第一道防线，猛戳速看</a> </body> </html>
效果如下图：
OK！非常好，那我们继续小栗子：将一个超链接使用CSS将它的样式设置为按钮的形式。看下面代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> <style> a:link, a:visited { background-color: #f44336; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } </style> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <a href="https://mp.weixin.qq.com/s/ESqqgSLDL6lhVVfA4MOEYg" target="_blank">DIY的Prometheus主备方案，猛戳速看</a><br> </body> </html>
效果如下图：
非常完美！下面继续学习一个非常有用的技巧，那就是书签。书签的作用是方便在同一个很长的网页中滚动到带有书签的位置，废话不说，直接看代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> </head> <body> <p><a href="#c20">跳到彩虹运维技术栈社区20</a></p> <h2 id="c1">彩虹运维技术栈社区1</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区2</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区3</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区4</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区5</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区6</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区7</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区8</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区9</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区10</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区11</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区12</h2> <p>公众号ID：TtrOpsStack</p> <h2 id="c13">彩虹运维技术栈社区13</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区14</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区15</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区16</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区17</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区18</h2> <p>公众号ID：TtrOpsStack</p> <h2>彩虹运维技术栈社区19</h2> <p>公众号ID：TtrOpsStack</p> <h2 id="c20">彩虹运维技术栈社区20</h2> <p>公众号ID：TtrOpsStack</p> <p><a href="#c1">回到彩虹运维技术栈社区1</a></p> </body> </html>
注意到a标签中href属性指定的位置了嘛？也就是"#c20"和"#c1"，这是关键之精华所在。
效果如下图：
图1：
图2：
写在最后
到此为止，关于CSS的基础和超链接的知识点就非常愉快的结束了，望广大盆友多多关注我们、点赞、转发。万分感谢！
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)