【CSS 06】图标 icons 链接 link 光标 cursor

CSS

      • 图标 icons
      • 链接 link
      • 更多有趣的链接样式

图标 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">cloudi>
<i class="material-icons">favoritei>
<i class="material-icons">attachmenti>
<i class="material-icons">computeri>
<i class="material-icons">traffici>
<br><br>

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

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;
}

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

更多有趣的链接样式

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">autospan><br>
<span style="cursor:crosshair">crosshairspan><br>
<span style="cursor:default">defaultspan><br>
<span style="cursor:e-resize">e-resizespan><br>
<span style="cursor:help">helpspan><br>
<span style="cursor:move">movespan><br>
<span style="cursor:n-resize">n-resizespan><br>
<span style="cursor:ne-resize">ne-resizespan><br>
<span style="cursor:nw-resize">nw-resizespan><br>
<span style="cursor:pointer">pointerspan><br>
<span style="cursor:progress">progressspan><br>
<span style="cursor:s-resize">s-resizespan><br>
<span style="cursor:se-resize">se-resizespan><br>
<span style="cursor:sw-resize">sw-resizespan><br>
<span style="cursor:text">textspan><br>
<span style="cursor:w-resize">w-resizespan><br>
<span style="cursor:wait">waitspan><br>

body>
html>

你可能感兴趣的:(CSS,css,html,css3)