CSS常用属性之（列表、表格、鼠标）属性，（如果想知道CSS的列表、表格、鼠标相关的属性知识点，那么只看这一篇就足够了！）

前言：在学习CSS的时候，必不可少的就要学习选择器和常见的属性，而本篇文章讲解的是CSS中的列表、表格、背景、鼠标属性。

✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

大致了解一下本篇文章讲解的内容：

1.列表相关属性

先来看一下有哪些常用的列表属性：

（1）list-style-type

属性作用：用于指定列表前标记的样式。

常用值如下：
        none ：不显示前面的标识（很常用！）
        square ：实心方块
        disc ：圆形
        decimal ：数字
        lower-roman ：小写罗马字
        upper-roman ：大写罗马字
        lower-alpha ：小写字母
        upper-alpha ：大写字母

我们使用实心方块来进行演示说明：

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.23.css">
</head>
<body><!-- 创建一个列表 --><ul><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li><li>星期六</li><li>星期天</li></ul>
</body>
</html>

CSS代码：

/* 将无序列表前的标志改为实心方块 */
li {list-style-type: square;
}

这样我们就将指定列表前标记的样式进行了修改。

（2）list-style-image

属性作用：用于自定义列表前标记的样式。

使用方式：

/* 在list-style-image使用url（图片地址） */
li {list-style-image: url();
}

例如：

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.23.css">
</head>
<body><!-- 创建一个列表 --><ul><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li><li>星期六</li><li>星期天</li></ul>
</body>
</html>

CSS代码：

/* 自定义无序列表前的标志样式 */
li {list-style-image: url(./小飞机1.png);
}

这样我们就可以使用自己喜欢的样式来替代列表前的样式了。

（3）list-style-position

属性作用：用于指定列表前样式的位置。

常见值：

"list-style-position: outside;" 表示项目符号点将在列表项之外。

"list-style-position: inside; " 表示项目符号将在列表项内。

看完之后感觉不是太明白什么是列表项之外，什么是列表项之内？那么我们使用一个例子来使你进一步了解：

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.23.css">
</head>
<body><!-- 创建一个列表 --><ul><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li><li>星期六</li><li>星期天</li></ul>
</body>
</html>

CSS代码：

/* 设置列表前样式为圆形,并且为外部 */
li {list-style-type: disc;list-style-position: inside;background-color: orange;
}

当我们将参数改为inside后：

/* 设置列表前样式为圆形,并且为内部 */
li {list-style-type: disc;list-style-position: inside;background-color: orange;
}

我们可以发现，列表前样式与文字同时被背景颜色进行修饰了，简而言之为指定列表前样式是显示在内容流的内部还是外部。

这样我们就了解了列表前样式的位置属性的使用方式了。

（4）list-style

属性作用：用于复合之前的属性，使代码更加的简洁。

例如：我们想将列表前的样式改为大写的罗马数字并且列表前的样式在列表的里面：

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.25.css">
</head>
<body><ul><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li><li>星期六</li><li>星期其</li></ul>
</body>

CSS代码：

/* 将列表前的样式改为大写的罗马数字 并且 列表前的样式在列表的里面 */
ul li {background-color: orange;list-style: upper-roman inside;
}

注意：将属性进行复合的时候，没有数量、顺序的要求，属性之间只需要使用空格隔开即可。

2.表格相关的属性

表格相关的属性大致分为两种：一种为其他元素也能用，另一种为只有table标签才能使用，那么先让我们看一下有哪些有关表格的属性：

那么我们就按照顺序，先介绍其他元素也可以使用的属性：

【1】其他元素也能用的属性

（1）border-width

属性作用：用于设置边框宽度。

我们使用实例来进一步进行理解：

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.25.css">
</head>
<body><div>我要开始学习CSS表格属性！</div>
</body>
</html>

CSS代码：

/* 将div元素周边设置一圈10px大小的边框 */
div {border-width: 10px;
}

但是当我们要查看作用效果的时候，我们会发现好像和没有设置一样，并没有什么变化。这是因为border-width、border-color、border-style三个属性是连锁的，即只有当三个属性都进行设置了之后才会有结果。

那么我们先将border-color、border-style了解完之后，在回来测试代码的作用。

（2）border-color

属性作用：用于设置边框颜色。

其属性值可为 CSS 中可用的颜色值。

（3）border-style

属性作用：用于设置边框样式。

常用属性值：

1. none 默认值
2. solid 实线
3. dashed 虚线
4. dotted 点线
5. double 双实线

我们迅速了解完border-width、border-color、border-style三个属性之后，我们在来设置一下元素边框，只不过这次加上了border-color、border-style属性

这次的html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.25.css">
</head>
<body><div>我要开始学习CSS表格属性！</div>
</body>
</html>

CSS代码：

/* 将div元素周边设置一圈10px大小、颜色为天蓝色、样式为实线的边框 */
div {border-width: 10px;border-color: skyblue;border-style: solid;
}

这样我们就将能用在其他元素身上的border-width、border-color、border-style三个属性了解了，当然border属性也有复合属性，即将三个属性直接写到一个border属性上：（代码如下）

/* 将div元素周边设置一圈10px大小、颜色为天蓝色、样式为实线的边框 */
div {border: 10px skyblue solid;
}

这样我们就了解了能写在其他元素身上的有关表格的属性，那么接下来让我们了解只有table标签才能使用的属性。

【2】只有table标签才能使用的属性

（1）table-layout

属性作用：用于设置表格的列宽度。

常用属性值：

auto ：自动，列宽根据内容计算（默认值）。
fixed ：固定列宽，平均分。

让我们直接使用代码来进一步理解：

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.25.css">
</head>
<body><table border="1px"><caption>六年级二班的学生信息</caption><thead><tr><th>姓名</th><th>年龄</th><th>学生的性别</th></tr></thead><tbody><tr><td>zhangsan</td><td>11</td><td>男</td></tr><tr><td>lisi</td><td>10</td><td>女</td></tr><tr><td>wangwu</td><td>12</td><td>男</td></tr></tbody><tfoot><tr><td colspan="3">以上为六年级二班所有学生信息</td></tr></tfoot></table>
</body>
</html>

CSS代码：

我们会发现使用auto后，如果表格头文字多，那么其列宽就宽，如果文字少，那么列宽就小，这即是设置为auto属性值后的效果。

如果我们设置的属性值为fixed：

/* 设置表格宽高，并且列宽为fixed */
table {width: 400px;height: 300px;table-layout: fixed;
}

如果将table-layout的属性值设置为fixed后，各列的列宽就都相同了。

（2）border-spacing

属性作用：用于设置表格的单元格间距。

我们直接使用案例讲解，如果我们将上述的表格设置其border-spacing为10px，那么它会变成什么样呢？

CSS代码：

/* 设置单元格间距为10px */
table {width: 400px;height: 300px;border-spacing: 10px;
}

明显我们发现单元格直接出现了空隙，并且其大小为10px。

注意：设置border-spacing属性值生效的前提为单元格边框不能合并。（接下来会讲解，先了解）

（3）border-collapse

属性作用：用于合并单元格边框。

常用属性值：

collapse ：合并
separate ：不合并

现在我们在设置了border-spacing为10px的情况下，我们设置一下border-spacing的值，让我们看一下会发生什么：

CSS代码：

/* 设置单元格间距为10px 又设置了border-collapse为collapse */
table {width: 400px;height: 300px;border-spacing: 10px;border-collapse: collapse;
}

这时候我们就会发现设置的border-spacing属性值失效了，这也是上文中提到的（设置border-spacing属性值生效的前提为单元格边框不能合并），如果设置了合并那么border-spacing属性值即会失效。

（4）empty-cells

属性作用：用于隐藏没有内容的单元格。

常用属性值：

show ：显示，默认
hide ：隐藏

让我们直接使用案例看一下结果：

我们还是使用之前的六年级二班的案例，只不过这次我们将zhangsan的年龄所在的单元格设置为空。

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.25.css">
</head>
<body><table border="1px"><caption>六年级二班的学生信息</caption><thead><tr><th>姓名</th><th>年龄</th><th>学生的性别</th></tr></thead><tbody><tr><td>zhangsan</td><td></td><td>男</td></tr><tr><td>lisi</td><td>10</td><td>女</td></tr><tr><td>wangwu</td><td>12</td><td>男</td></tr></tbody><tfoot><tr><td colspan="3">以上为六年级二班所有学生信息</td></tr></tfoot></table>
</body>
</html>

CSS代码：

/* 设置单元格间距为10px 又设置了border-collapse为separate */
table {width: 400px;height: 300px;border-spacing: 10px;border-collapse: separate;
}

我们会发现zhangsan的年龄信息为空，这和我们预料的相同，但是如果这是我们设置了empty-cells属性值为hide会怎么样呢？

CSS代码：

/* 设置单元格间距为10px 又设置了border-collapse为separate 设置empty-cells为hide*/
table {width: 400px;height: 300px;border-spacing: 10px;border-collapse: separate;empty-cells: hide;
}

我们就会发现zhangsan的年龄信息所在的单元格没有了，这就是设置empty-cells为hide的效果。这样我们就了解了empty-cells属性。

注意：设置empty-cells为hide生效前提也是单元格不能合并。

（4）caption-side

属性作用：用于设置表格标题位置。

常用属性值：

top ：上面（默认值）
bottom ：在表格下面

我们直接使用上边案例，只不过使用caption-side属性将其表格标题改到下边。

CSS代码：

/* 设置标题在表格的下方 */
table {width: 400px;height: 300px;caption-side: bottom;
}

这样我们就了解了所有常用的有关只有table标签才能使用的属性。

3.鼠标相关的属性

以下为鼠标相关的属性

CSS属性名	功能	属性值
cursor	设置鼠标光标的样式	pointer ：小手 move ：移动图标 text ：文字选择器 crosshair ：十字架 wait ：等待 help ：帮助

我们使用一个案例进行演示（使用属性值为小手）

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.25.css">
</head>
<body><div><img src="./fish.jpg" alt="fish"></div>
</body>
</html>

CSS代码：

/* 将鼠标放在div上就会变为小手 */
img {width: 300px;height: 300px;cursor: pointer;
}

这样我们就了解了鼠标相关的属性。

想学习其他CSS知识点---->CSS_秋刀鱼不做梦的博客-CSDN博客

以上就是本篇文章的全部信息了~~~