列表属性
用于ul、ol、li其他的不行哦。
我们先写一个无序列表
<body>
<ul>
<li>《震惊！某高校学生竟做出这种事》</li>
<li>《一夜暴富指南》</li>
<li>《如何成为程序员》</li>
</ul>
</body>
前面几个点感觉好难看，我们来让他消失吧，
<style>
ul {
list-style-type: none;
}
</style>
这里还有几个其他值，友友们可以自己去尝试：square(方块)、lower-roman（小写罗马数字）、upper-reoman（大写罗马数字）、decimal（数字，像是有序列表的样式）
当然我们可以调节列表序号的位置，为了便于观察我们加了背景色
<style>
ul {
list-style-type: square;
list-style-position: inside;
}
li{
background-color: red;
}
</style>
如果把值改成outside
这个列表符号是真不怎么好看，我们能不能自定义列表符号捏，可以的可以的兄弟。
list-style-image: url(http://www.ttdr.top/wp-content/uploads/2025/02/20130520094139496.gif);
效果达成，欸嘿。
根据之前的经验，这些属性应该是可以复合的吧，我们来看看怎么复合。
list-style: square outside url(http://www.ttdr.top/wp-content/uploads/2025/02/20130520094139496.gif); 一键复合，那么有顺序要求吗，当然没有的兄弟。
表格属性
边框属性
<body>
<table>
<caption>人员信息</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>党员</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>女</td>
<td>18</td>
<td>群众</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>男</td>
<td>22</td>
<td>党员</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>女</td>
<td>19</td>
<td>群众</td>
</tr>
</tbody>
</table>
</body>我们来看这么一个表，我们怎么增加一个边框呢，我们学HTML 的时候，学到了一个很简单的方式.
<table border="1">
但是好像格式有些单调，这里我们来用css看看能不能调整一下
<style>
table {
border-width:2px;
border-color: blue;
border-style: solid;
}
</style>这里注意哦，一定要设置是什么线（常见的值：solid实线，dashed虚线，dotted点线，double双实线），有什么颜色。
丝三行代码有点麻烦了，当然我们可以复合一下
border: 2px solid blue;一键完成，但是怎么只有外面一圈，我们看看能不能给里面也加上，欸用并集选择器就可以了。
th,td{
border: 1px solid red;
}
边框定制版，达成了。
注意：这里不仅仅限于表格单元格，border可以写在其他元素上
我们来看一个代码片段
h1{
border: 1px solid red;
}
</style>
</head>
<body>
<h1>表格属性</h1>
当然行内元素也是可以的，这里就不展示啦，这里只是简单提一下边框，在后面盒模型，我们会更加详细的讲解。
表格独有属性
在HTML学习中，我们学到了rowspan以及colspan来进行跨行和跨列操作，我们注意，这个只能通过调整这两个属性来进行， 不能通过css来实现。
<style>
table {
width: 500px;
border: 2px solid blue;
}
th,td{
border: 1px solid red;
}
</style>
我们先来看一下初始效果
列宽
好像政治面貌这个列格外宽啊，我们能控制列宽吗，可以的可以的
属性名：table-layout
属性值：auto（默认）、fixed(固定的)
如果我们把值调成fixed
哇哦天下大一统了。
单元格间距
我们学HTML的时候用的是cellspacing,这里用css来调用的是border-spacing,属性值就是npx
border-spacing: 10px;
合并相邻的单元格的边框
属性名：border-collapse: collapse;
属性值：seprate(分离)、collapse（合并）
我们看看合并的效果，舒服了许多欸。
这里，我们一旦合并了单元格的边框，那么单元格的间距就不奏效了
隐藏没有内容的单元格
我们把王五的性别扣掉
我们怎么隐藏捏，属性名：empty-cells
属性值：show、hide
意思和单词的意思很符合欸，我们调成hide来看看效果
好像没什么变化啊，我们这里把合并单元格边框的效果去掉，再来看
真的消失了欸。
表格标题位置
属性名：caption-side
属性值：top or bottom
放在表格上面或者下面。
背景属性
<head>
<meta charset="UTF-8">
<title>背景属性</title>
<style>
div{
width: 400px;
height: 400px;
background-color: skyblue;
border:2px black solid;
}
</style>
</head>
<body>
<div>你好，世界</div>
</body>我们来看一个初始样例
其中back-color就是背景色，前面已经用过无数次了，这里提及一下默认值是transparent(透明色)
背景图片
很简单背景不写颜色了
background-image: url("http://www.ttdr.top/wp-content/uploads/2025/02/20130520094139496.gif");
有点套路化了，博主以及不想解释了,这里我们发现如果图片小，会重复，那么我们能不能规定图片重复方式呢，可以的，
背景图片重复方式
属性名：background-repeat
属性是：repeat,no-repeat,repeat-x,repeat-y
分别是重复，不重复，x轴方向上重复，y轴方向上重复
控制背景图的位置
属性名：background-position
属性名：
1.关键词（left,center,right,top,bottom)
这里注意，水平和竖直的居中都是center
还有，这里可以两个位置词联用，可以确定去某个角哦
background-position: top left;2.像素值
background-position: 10px 20px;
这里像素值，就相当于是x，y轴定位，以左上角为坐标原点，
复合属性
一个个写太麻烦了，我们能不能复合一下呢，可以的兄弟。
background: skyblue url("http://www.ttdr.top/wp-content/uploads/2025/02/20130520094139496.gif" no-repeat 10px 20px);一个属性名搞定，干净整洁，而且不挑个数不挑顺序。
如果复合属性前面写了其他属性，注意有的属性会被复合属性的默认值取代的哦，比如说背景色，如果在复合属性前面写了背景色，背景色会被复合属性背景色默认值覆盖而显示透明色
鼠标属性
属性名：cursor
属性值：pointer(变成一个小手)，move（变成一个指向标），wait(等待图标)，crossshair（十字架），剩下的可以去MDN查看
既然已经有这么多好看的样式我们为什么要改呢，我们这里加一个按钮
<body>
<div>把鼠标放进来看一看</div>
<button>点我</button>
</body>
我们发现鼠标放上去没什么变化，这里不能截图，不能展示了，大家自己展示吧
button{
cursor: pointer;
}我们可以加一个样式。
当然我们还可以再个性化一点
cursor:url(`````) ,pointer;通过在里面加入图片来实现个性化操作，注意pointer不要漏了哦。
