CSS图标
如何添加图标
向 HTML 页面添加图标的最简单方法是使用图标库,比如 Font Awesome。
将指定的图标类的名称添加到任何行内 HTML 元素(如 <i>
或 <span>
)。
下面的图标库中的所有图标都是可缩放矢量,可以使用 CSS进行自定义(大小、颜色、阴影等)。
Font Awesome 图标
如需使用 Font Awesome 图标,请访问 fontawesome.com,登录并获取代码添加到 HTML 页面的 <head>
部分:
<script src="url"></script>
url为你访问 fontawesome.com登录获取的
提示:无需下载或安装!
Bootstrap 图标
如需使用 Bootstrap glyphicons,请在 HTML 页面的 <head>
部分内添加这行:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
提示:无需下载或安装!
实例:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<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>
</html>
结果:
Google 图标
如需使用 Google 图标,请在HTML页面的 <head>
部分中添加以下行:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
提示:无需下载或安装!
实例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<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>
</body>
</html>
结果:
CSS 链接
设置链接样式
链接可以使用任何 CSS 属性(例如 color、font-family、background 等)来设置样式。
实例
a {
color: hotpink;
}
此外,可以根据链接处于什么状态来设置链接的不同样式。
四种链接状态分别是:
- a:link - 正常的,未访问的链接
- a:visited - 用户访问过的链接
- a:hover - 用户将鼠标悬停在链接上时
- 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 属性,将链接显示为框/按钮:
实例
<!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>
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;
}
</style>
</head>
<body>
<p><a href="https://www.baidu.com/?tn=98521242_hao_pg" target="_blank">链接</a></p>
</body>
</html>
cursor
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>
CSS 列表
HTML 列表和 CSS 列表属性
在 HTML 中,列表主要有两种类型:
- 无序列表(
<ul>
)- 列表项用的是项目符号标记 - 有序列表(
<ol>
)- 列表项用的是数字或字母标记
CSS 列表属性使您可以:
- 为有序列表设置不同的列表项标记
- 为无序列表设置不同的列表项标记
- 将图像设置为列表项标记
- 为列表和列表项添加背景色
实例
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
注释:有些值用于无序列表,而有些值用于有序列表。
图像作为列表项标记
list-style-image
属性将图像指定为列表项标记:
实例
ul {
list-style-image: url('sqpurple.gif');
}
定位列表项标记
list-style-position
属性指定列表项标记(项目符号)的位置。
“list-style-position: outside;
” 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的
“list-style-position: inside;
” 表示项目符号将在列表项内。由于它是列表项的一部分,因此它将成为文本的一部分,并在开头推开文本
删除默认设置
list-style-type:none
属性也可以用于删除标记/项目符号。请注意,列表还拥有默认的外边距和内边距。要删除此内容,请在 <ul>
或 <ol>
中添加 margin:0
和 padding:0
:
实例
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
列表 - 简写属性
list-style
属性是一种简写属性。它用于在一条声明中设置所有列表属性:
实例
ul {
list-style: square inside url("sqpurple.gif");
}
在使用简写属性时,属性值的顺序为:
- list-style-type(如果指定了 list-style-image,那么在由于某种原因而无法显示图像时,会显示这个属性的值)
- list-style-position(指定列表项标记应显示在内容流的内部还是外部)
- list-style-image(将图像指定为列表项标记)
如果缺少上述属性值之一,则将插入缺失属性的默认值(如果有)。
设置列表的颜色样式
我们还可以使用颜色设置列表样式,使它们看起来更有趣。
添加到 <ol>
或 <ul>
标记的任何样式都会影响整个列表,而添加到 <li>
标记的属性将影响各个列表项
CSS 表格
表格边框
如需在 CSS 中设置表格边框,请使用 border 属性。
下例为 <table>
、<th>
和 <td>
元素规定了黑色边框:
实例
table, th, td {
border: 1px solid black;
}
注意:上例中的表格拥有双边框。这是因为 table
和 <th>
和 <td>
元素都有单独的边框。
全宽表格
在某些情况下,上表似乎很小。如果您需要一个可以覆盖整个屏幕(全宽)的表格,请为 <table>
元素添加 width: 100%
:
实例
table {
width: 100%;
}
合并表格边框
border-collapse 属性设置是否将表格边框折叠为单一边框:
实例
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
可将上面的双边框变为单边框
如果只希望表格周围有边框,则仅需为 <table>
指定 border 属性:
实例
table {
border: 1px solid black;
}
表格宽度和高度
表格的宽度和高度由 width 和 height 属性定义。
下例将表的宽度设置为 100%,将 <th>
元素的高度设置为 50px:
实例
table {
width: 100%;
}
th {
height: 50px;
}
水平对齐
text-align 属性设置 <th>
或 <td>
中内容的水平对齐方式(左、右或居中)。
默认情况下,<th>
元素的内容居中对齐,而 <td>
元素的内容左对齐。
要使 <td>
元素的内容也居中对齐,请使用 text-align: center
垂直对齐
vertical-align 属性设置 <th>
或 <td>
中内容的垂直对齐方式(上、下或居中)。
默认情况下,表中内容的垂直对齐是居中(<th>
和 <td>
元素都是)。
下例将 <td>
元素的垂直文本对齐方式设置为下对齐:
实例
td {
height: 50px;
vertical-align: bottom;
}
表格内边距
如需控制边框和表格内容之间的间距,请在 <td>
和 <th>
元素上使用 padding 属性
水平分隔线
向 <th>
和 <td>
添加 border-bottom 属性,以实现水平分隔线:
实例
th, td {
border-bottom: 1px solid #ddd;
}
可悬停表格
在 <tr>
元素上使用 :hover
选择器,以突出显示鼠标悬停时的表格行:
实例
tr:hover {background-color: #f5f5f5;}
条状表格
为了实现斑马纹表格效果,请使用 nth-child() 选择器,并为所有偶数(或奇数)表行添加 background-color:
实例
tr:nth-child(even) {background-color: #f2f2f2;}
表格颜色
下例指定了 <th>
元素的背景颜色和文本颜色:
实例
th {
background-color: #4CAF50;
color: white;
}
响应式表格
如果屏幕太小而无法显示全部内容,则响应式表格会显示水平滚动条:
在 <table>
元素周围添加带有 overflow-x:auto 的容器元素(例如 <div>
),以实现响应式效果:
实例
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
注释:在 OS X Lion(在 Mac 上)中,滚动条默认情况下是隐藏的,并且仅在使用时显示(即使设置了 “overflow:scroll”)。