整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
先让我们回顾下前端入门——html 超链接的用法 <a href="url"> , 超链接是一个非常伟大的发明，它链接了整个互联网，没有它就没有互联网。
超链接在发明之初就给它设计了一个默认的样式，就是蓝色带下划线的样式，如下图：
默认样式
关于为什么超链接是蓝色带下划线的历史，可以参考这里：https://baijiahao.baidu.com/s?id=1710334071632114373&wfr=spider&for=pc
当网页变得越来越丰富，用户的需求越来越高的时候，这样的样式已经不符合大众的审美，所以通过css来美化超链接非常有用和有趣。
链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。
如下图：
除此之外，可以根据链接状态来设置不同样式，链接状态分别有：
如下示例：
/* 未被访问的链接 */
a:link {
color: red;
}
/* 已被访问的链接 */
a:visited {
color: green;
}
/* 将鼠标悬停在链接上 */
a:hover {
color: hotpink;
}
/* 被选择的链接 */
a:active {
color: blue;
}未被访问的链接
已被访问的链接
将鼠标悬停在链接上
被选择的链接
如果为多个链接状态设置样式，请遵循如下顺序规则：
以上是链接的各种伪类，描述了链接的不同状态，你可以试试在不同状态下给设置不同的属性，比如背景色，字体或者文本修饰等等。
链接通常用来当做按钮使用，点击它跳转页面或执行一些事件或js函数。如下示例：
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;
}定义了一个背景色为红色的按钮，如下图：
注意：如果想在点击这个按钮后禁止跳转页面，可以给href属性设置javascript：void();,在以后会讲到JavaScript在网页中的使用，这里你已经看到，在href属性中通过Javascript：的形式可以执行一段js语句或函数，这里void()就是阻止链接跳转。
上面只是一个简单的例子，当然你也可以制作更漂亮的按钮，比如加上圆角、阴影、或渐变背景等。
当鼠标移动到链接上时，你会看到鼠标变成一个手形，通过css cursor 属性可以改变鼠标指针的形状，如下图：
可以尝试按照上面的属性依次练习一遍，链接的样式到此就介绍完了，感谢关注。
上篇：前端入门——css字体和文本
链接是网页的基本元素之一，几乎每个网页我们都可以看到超链接。在之前讲 HTML 的时候就讲过，超链接会自带一些默认样式，例如未点击的超链接会显示带下划线的蓝色字体、点击时字体变为红色、点击后字体变为紫色。这种点击前后不一致的样式，其实是超链接的伪类样式，伪类就是不根据名称、属性或者内容，而是根据标签处于某种行为或状态时的特征来修饰样式，也就是说超链接将根据不同的状态显示不同的样式。
首先，我们知道超链接本身是带有默认下划线的，但是一般我们在网页中看到的超链接都是没有下划线的，那么要如何去掉超链接的下划线呢？ 其实前面我们讲文本样式的时候提到过，就是使用 text-decoration 属性。
示例：
下面是两个超链接：
<body>
<p><a href="#">普通的超链接</a></p>
<p><a href="#" class="no">去掉下划线的超链接</a></p>
</body>
我们使用类选择器 no ，去掉其中一个链接的下划线：
.no{
text-decoration: none;
}
在浏览器中的演示效果：
超链接有一个特点，就是可以根据它们所处的状态来设置不同的样式。
超链接的四种状态（伪类）如下所示：
伪类样式的基本语法：
a:伪类名 {
属性:属性值;
}
示例：
例如设置不同状态下超链接的字体颜色：
<a href="#">这是一个超链接</a>
CSS 样式代码：
a:link{ color: #F00; } /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color: #ff7300;} /* 正在被点击的链接 */
在浏览器中的演示效果：
上面讲到的四种超链接伪类，在设置样式时对顺序有没有要求呢？当然有啦，在 CSS 设置超链接伪类的顺序为：a:link 和 a:visited --> a:hover --> a:active。
其中 a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后，如果设置顺序不对，则样式可能不起作用。
在浏览网页的时候，我们通常可以看到鼠标的指针形状一般可以为箭头、手形、I字形等，这些效果都可以通过 CSS 中的 cursor 属性来设置。
cursor 属性的常用属性值如下所示：
示例：
举个例子，例如要设置当鼠标移动到超链接上时，将鼠标指针变为十字状：
a:hover {
color: green;
cursor: crosshair;
}
在浏览器中的演示效果：
本节我们讲了四种超链接伪类，即 a:link、a:visited、a:hover 、a:active。其中用的比较多的还是a:hover 鼠标悬浮其上。一定要记住如果想要同时使用好几种状态，四种状态的书写顺序， a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后。
1）字体的属性
字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示：
属 性 | 可 取 值 | 描 述 |
font | font-style、font-variant、font-weight、font-size（或 line-height）、font-family | 在一个声明中设置所有的字体属性 |
font-family | 字体名称、inherit | 设置字体类型 |
font-size | xx-small、x-small、small、medium（默认）、large、x-large、xx-large smaller、larger length、%、inherit | 设置字体大小 |
font-weight | normal（默认）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold） | 设置字体粗细 |
font-style | normal、italic、oblique、inherit | 设置字体风格 |
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h3 {
font-size: 20px;
font-family: 隶书;
line-height: 28px;
}
span {
font: italic 16px 华文彩云;
}
</style>
</head>
<body>
<h3>Web 前端技术</h3>
<span
>在当今社会中，Web 已经成为网络信息共享和发布的主要形式。要想开发 Web 应用
系统，就必须掌握 Web 前端技术。</span
>
</body>
</html>显示为，
（2）CSS 中链接标签可用的伪类：
CSS 中，伪类是添加到选择器的关键字，给指定元素设置一些特殊状态，我们以 : 开头。
链接有以下四个状态。这四种状态也称之为超链接的伪类。
状态 | 效果 |
a:link | 普通的、未被访问的链接。 |
a:hover | 鼠标指针位于链接的上方。 |
a:active | 链接被单击的时刻。 |
a:visited | 用户已访问的链接。 |
针对超链接的上述四种状态设置样式规则，能起到美化超链接的作用。例如，为了完成下对超链接的显示要求，编写的 CSS 样式代码如下。
状 态 | 颜 色 | 背 景 色 | 文 本 修 饰 |
未访问 | 蓝色 | 无 | 无下画线 |
鼠标移到 | 黑色 | #DDDDDD | 下画线 |
正单击 | 红色 | #AAAAAA | 删除线 |
已访问 | 绿色 | 无 | 无下画线 |
对于超链接的伪类，我们推荐的使用顺序是：:link - :visited - :hover - :active。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
text-decoration: none;
}
a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href="#">这是一个链接</a>
</body>
</html>
显示为，
为什么要按照这样的顺序来使用呢？ 调整几个伪类的顺序，看看会发生什么。
我们把 a:link 放到最后，效果如下：
从图中可以发现其中的样式属性都被覆盖了。
（3）列表相关的样式属性：
属 性 | 可 取 值 | 描 述 |
list-style | list-style-type、list-style-position、list-style-image | 在一个声明中设置所有的列表属性 |
list-style-image | URL、none | 设置图像为列表项标志 |
list-style-position | inside、outside、inherit | 设置列表中列表项标志的位置 |
list-style-type | disc（默认）、circle、square、decimal 等 | 设置列表项标志的类型 |
例子，
wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif*请认真填写需求信息，我们会在24小时内与您取得联系。
