前端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>
list-style-type:
指定列表项标记的类型,这些属性适用于<ul>
(无序列表)和<ol>
(有序列表)元素,常见取值包括:
disc:
实心圆点。
circle:
空心圆点。
square:
实心方块。
decimal:
阿拉伯数字。
upper-roman:
大写罗马数字。
lower-alpha:
小写字母。
ul {
list-style-type: disc;
}
list-style-position
:指定列表项标记的位置,可选值有:
inside:标记位于列表项内部。
outside:标记位于列表项外部。
ul {
list-style-position: inside;
}
list-style-image
:使用自定义图像作为列表项标记,指定图像的 URL。
ul {
list-style-image: url('path/to/image.png');
}
list-style
:上述三个属性的缩写形式,复合属性,按顺序指定list-style-type
,list-style-position
,list-style-image
。
ul {
list-style: square inside url('path/to/image.png');
}
- 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
:指定单元格跨越的列数。
点我回忆表格基础知识呀呀呀
操作单元格边框的相关属性
表格相关属性:
border-collapse:
合并相邻的单元格的边框,可以是 collapse(边框合并)或 separate(边框分开)。
示例:border-collapse: collapse;
可以使相邻单元格的边框合并。
border-spacing
:指定表格边框与单元格,单元格与单元格之间的间距,仅在 border-collapse 设置为separate 时生效。
示例:border-spacing: 5px;
设置 border-spacing: 0; 可以消除合并后的单元格之间的间距。
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;
}