图标 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可以用不同的方式设置链接的样式
链接可以使用任何 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>