前端CSS基础6（CSS列表与表格的相关属性，边框的样式调整）

CSS列表相关属性

在 CSS 中，列表（List）是常见的网页元素之一，可以使用以下属性来对列表进行样式设置：
回忆列表

<ul> <!-- 无序列表容器 -->
    <li>List item 1</li> <!-- 第一个列表项 -->
    <li>List item 2</li> <!-- 第二个列表项 -->
    <li>List item 3</li> <!-- 第三个列表项 -->
</ul>
<ol> <!-- 有序列表容器 -->
    <li>List item 1</li> <!-- 第一个列表项 -->
    <li>List item 2</li> <!-- 第二个列表项 -->
    <li>List item 3</li> <!-- 第三个列表项 -->
</ol>

1. list-style-type：指定列表项标记的类型，这些属性适用于 <ul> （无序列表）和 <ol>
   （有序列表）元素，常见取值包括：
   disc：实心圆点。
   circle：空心圆点。
   square：实心方块。
   decimal：阿拉伯数字。
   upper-roman：大写罗马数字。
   lower-alpha：小写字母。

ul {
    list-style-type: disc;
}

2. list-style-position：指定列表项标记的位置，可选值有：

inside：标记位于列表项内部。
outside：标记位于列表项外部。

ul {
    list-style-position: inside;
}

3. list-style-image：使用自定义图像作为列表项标记，指定图像的 URL。

ul {
    list-style-image: url('path/to/image.png');
}

4. list-style：上述三个属性的缩写形式，复合属性，按顺序指定 list-style-type, list-style-position, list-style-image。

ul {
    list-style: square inside url('path/to/image.png');
}

5. list-style-color：用于定义列表项标记的颜色。

ul {
    color: red; /* 列表项标记的颜色 */
}

这些属性可以应用于 <ul> （无序列表）和 <ol> （有序列表）元素，<li>也可以。通过调整这些属性。

CSS表格相关属性

回忆表格

先回忆回忆表格，咱就是说学着忘着：
在 HTML 中，表格由以下几个主要元素组成，这些元素构成了表格的结构：

<table>：用于定义整个表格。所有表格内容都应该位于 <table> 标签内。

<tr>：表示表格中的行（table row）。每个 <tr> 元素代表表格中的一行。

<th> 和 <td>：在表格中用来定义单元格内容的元素。

<th> 用于定义表头单元格，通常显示为粗体且居中，可用于表示列或行的标题。
<td> 用于定义普通数据单元格，包含实际表格数据。
<thead>、<tbody> 和 <tfoot>：这些元素用于将表格内容分组，分别表示表头、表身和表尾部分。这有助于更好地组织表格内容并应用样式。

<caption>：用于为整个表格添加标题，位于 <table> 标签之后且在表格上方显示。
下面为具体表格的举例。

<table>
    <caption>Monthly Sales Report</caption>
    <thead>
        <tr>
            <th>Month</th>
            <th>Sales Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$5000</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$6000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$11000</td>
        </tr>
    </tfoot>
</table>

点我回忆表格基础知识呀呀呀

边框相关属性

边框相关属性：
border-width、border-style、border-color：分别用于设置边框的宽度、样式和颜色。ps:表格的border属性不仅表格元素可以使用，其他元素也可以使用。
示例：

table{
border-width: 2px;
border-style: dashed;
border-color: red;
}

border：把border-width、border-style、border-color：分别用于设置边框的宽度、样式和颜色。这三种属性三合一，用于设置表格边框的样式、宽度和颜色，可以分别指定（有顺序）。
示例：border: 1px solid black;
ps:表格的border属性（以上属性）不仅表格元素可以使用，其他元素也可以使用。
以下是表格独有的属性：
border-radius：用于设置边框的圆角半径。
示例：border-radius: 5px;

单元格边框相关属性

回忆单元格的跨行和跨列

要在 HTML 表格中实现单元格的跨行（rowspan）和跨列（colspan），你可以使用以下属性：

rowspan：指定单元格跨越的行数。
colspan：指定单元格跨越的列数。
点我回忆表格基础知识呀呀呀

操作单元格边框的相关属性

表格相关属性：

1. border-collapse：合并相邻的单元格的边框，可以是 collapse（边框合并）或 separate（边框分开）。

示例：border-collapse: collapse;可以使相邻单元格的边框合并。

2. border-spacing：指定表格边框与单元格，单元格与单元格之间的间距，仅在 border-collapse 设置为separate 时生效。

示例：border-spacing: 5px;
设置 border-spacing: 0; 可以消除合并后的单元格之间的间距。

3. table-layout：控制表格的列宽，有两个值的选择：auto和fixed

auto：浏览器根据内容自动调整列宽，可能会导致表格的各列宽度不一致。
fixed：强制表格布局固定，并且所有列的宽度由表格的宽度、列宽和单元格内部内容共同决定。这种方式可以更精确地控制表格的布局，使得列宽更加统一。
举例： table-layout: fixed;可以提供更加可控和稳定的表格布局，适用于需要精确控制列宽和提高性能的情况。

empty-cells：用于指定空单元格的边框显示方式，生效前提：单元格不能合并。
示例：empty-cells: hide;

caption-side：这个属性用于指定 元素的位置。它有两个可能的取值：
top：将 元素放置在表格上方。
bottom：将 元素放置在表格下方。
通过在 CSS 中设置 caption-side 属性来控制 元素的位置。例如，要将 放置在表格上方，可以这样设置：

caption {
    caption-side: top;
}