【CSS 06】图标 icons 链接 link 光标 cursor-Toy模板网

这篇具有很好参考价值的文章主要介绍了【CSS 06】图标 icons 链接 link 光标 cursor。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

图标 icons

向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome

将指定的图标类的名称添加到任何行内 HTML 元素（如 <i> 或 <span>）

下面的图标库中的所有图标都是可缩放矢量，可以使用 CSS进行自定义（大小、颜色、阴影等）

如需使用 Font Awesome 图标，请访问 fontawesome.com，登录并获取代码添加到 HTML 页面的 <head> 部分
<script src="https://kit.fontawesome.com/yourcode.js"></script>(此方式可能已经不可用)

如需使用 Bootstrap glyphicons，请在 HTML 页面的 <head> 部分内添加这行：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body class="container">

<p>一些 Bootstrap 图标：</p>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
<br><br>

<p>有样式的 Bootstrap 图标（尺寸和颜色）：</p>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>

</body>

如需使用 Google 图标，请在HTML页面的 <head> 部分中添加以下行：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<body>

<p>一些 Google 图标：</p>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br>

<p>有样式的 Google 图标（尺寸和颜色）：</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>

</body>

链接 link

通过CSS可以用不同的方式设置链接的样式文章来源地址https://www.toymoban.com/news/detail-480194.html

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式
a {
	color: hotpink;
}

此外可以根据链接处于什么状态来设置链接的不同样式
四种链接状态分别是:
1. a:link
2. a:visited
3. a:hover
4. 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;
}

<a href="/index.html" target="_blank">这是一个链接</a>

更多有趣的链接样式

1 为超链接添加不同的样式
<!DOCTYPE html>
<html>
<head>
<style>
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>

<p>请把鼠标移到链接上并观察样式的变化：</p>

<p><b><a class="one" href="/index.html" target="_blank">此链接改变颜色</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">此链接改变字体大小</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">此链接改变背景色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">此链接改变字体族</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">此链接改变文本装饰</a></b></p>

</body>
</html>

2 创建带有边框的链接按钮
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}
</style>
</head>
<body>

<a href="/index.html" target="_blank">这是一个链接</a>

</body>
</html>

3 改变光标
cursor 属性指定要显示的光标类型
<!DOCTYPE html>
<html>
<body>

<p>请把鼠标移动到单词上，以查看指针效果：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

</body>
</html>