CSS学习笔记（七）CSS图标，CSS 链接，cursor，CSS 列表，CSS 表格

最新推荐文章于 2023-12-15 11:58:25 发布

〔晴【天】º〕

最新推荐文章于 2023-12-15 11:58:25 发布

阅读量5.1k

点赞数 6

分类专栏：前端学习文章标签： html css

本文链接：https://blog.csdn.net/qq_43625134/article/details/116892956

版权

前端学习专栏收录该内容

34 篇文章 1 订阅

订阅专栏

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”）。

〔晴【天】º〕

关注

6
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记（七）CSS图标，CSS 链接，cursor，CSS 列表，CSS 表格

CSS图标如何添加图标向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。将指定的图标类的名称添加到任何行内 HTML 元素（如 <i> 或 <span>）。下面的图标库中的所有图标都是可缩放矢量，可以使用 CSS进行自定义（大小、颜色、阴影等）。Font Awesome 图标如需使用 Font Awesome 图标，请访问 fontawesome.com，登录并获取代码添加到 HTML 页面的 <head> 部分：<s
复制链接

扫一扫