CSS（七）——CSS 列表和CSS Table（表格）

已于 2024-07-25 22:11:51 修改
阅读量1.1k 收藏 27
点赞数 29
文章标签： css 前端
于 2024-07-25 22:09:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62701594/article/details/140700261
版权

目录

CSS 列表

列表

作为列表项标记的图像

列表 - 简写属性

移除默认设置

所有的CSS列表属性

CSS 表格

表格边框

折叠边框（border-collapse）

表格宽度和高度

表格文字对齐

表格填充

表格颜色

CSS 列表

CSS 列表属性作用如下：

设置不同的列表项标记为有序列表

设置不同的列表项标记为无序列表

设置列表项标记为图像

列表

在 HTML中，有两种类型的列表：

无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）

有序列表 ol - 列表项的标记有数字或字母

使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

示例：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>操作示例</title>
	<style>
ul.a{
	list-style-type: circle;
}

ul.a1{
	list-style-type: square;
}

ol.b{
	list-style-type: upper-roman;
}

ol.b1{
	list-style-type: lower-alpha;
}
	</style>
</head>

<body>
	<h1>无序列表</h1>
	<ul class="a">
		<li>第一项</li>
		<li>第二项</li>
		<li>第三项</li>
	</ul>
	<ul class="a1">
		<li>第一项</li>
		<li>第二项</li>
		<li>第三项</li>
	</ul>
	<h1>有序列表</h1>
	<ol class="b">
		<li>第一项</li>
		<li>第二项</li>
		<li>第三项</li>
	</ol>
	<ol class="b1">
		<li>第一项</li>
		<li>第二项</li>
		<li>第三项</li>
	</ol>

</body>

</html>

运行结果：

作为列表项标记的图像

要指定列表项标记的图像，使用列表样式图像属性

比如：

ul
{
    list-style-image: url('sqpurple.gif');
}

这样就会在列表的前面显示图像，把图像作为前面的小圆点，比如这样：

列表 - 简写属性

在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。

为列表使用简写属性，列表样式属性设置如下：

ul
{
    list-style: square url("sqpurple.gif");
}

可以按顺序设置如下属性：

list-style-type

list-style-position 

list-style-image   如果上述值丢失一个，其余仍在指定的顺序，就没关系。

移除默认设置

list-style-type:none 属性可以用于移除小标记。默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

所有的CSS列表属性

属性描述
list-style简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image将图像设置为列表项标志。
list-style-position设置列表中列表项标志的位置。
list-style-type设置列表项标志的类型。

CSS 表格

使用 CSS 可以使 HTML 表格更美观

表格边框

指定CSS表格边框，使用border属性。

比如：border: 1px solid black;

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>操作示例</title>
	<style>
table,th,td{
	border: 1px solid black;
	text-align: center;
}
	</style>
</head>

<body>
	<table>
		<tr>
			<th>字母1</th>
			<th>字母2</th>
		</tr>
		<tr>
			<td>a</td>
			<td>b</td>
		</tr>

	</table>

</body>

</html>

运行结果：

在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

为了显示一个表的单个边框，使用 border-collapse属性。

折叠边框（border-collapse）

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

border-collapse:collapse;

示例：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>操作示例</title>
	<style>
		table {
			border-collapse: collapse;
		}

		table,
		th,
		td {
			border: 1px solid black;
			text-align: center;
		}
	</style>
</head>

<body>
	<table>
		<tr>
			<th>字母1</th>
			<th>字母2</th>
		</tr>
		<tr>
			<td>a</td>
			<td>b</td>
		</tr>

	</table>

</body>

</html>

运行结果：

表格宽度和高度

Width和height属性定义表格的宽度和高度。

示例:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>操作示例</title>
	<style>
		table {
			width:100%;
		}

		table,
		th,
		td {
			border: 1px solid black;
			text-align: center;
		}
		th{
			height: 50px;
		}
	</style>
</head>

<body>
	<table>
		<tr>
			<th>字母1</th>
			<th>字母2</th>
		</tr>
		<tr>
			<td>a</td>
			<td>b</td>
		</tr>

	</table>

</body>

</html>

运行结果：

表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，向左    text-align:left;

，右    text-align:right;

，或中心   text-align:center;

垂直对齐属性设置垂直对齐，比如顶部   vertical-align:top;

，底部     vertical-align:bottom;

或中间   vertical-align:medium;

表格填充

如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性  padding: XXpx;

示例：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>操作示例</title>
	<style>
		table {
			width: 100%;
		}

		table,
		th,
		td {
			border: 1px solid black;
			text-align: center;
		}

		th {
			height: 50px;
		}

		td {
			padding: 20px;
		}
	</style>
</head>

<body>
	<table>
		<tr>
			<th>字母1</th>
			<th>字母2</th>
		</tr>
		<tr>
			<td>a</td>
			<td>b</td>
		</tr>

	</table>

</body>

</html>

运行结果：

表格颜色

可以指定边框的颜色，和th元素的文本和背景颜色

示例：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>操作示例</title>
	<style>
		table {
			width: 100%;
		}

		table,
		th,
		td {
			border: 1px solid green;
			text-align: center;
		}

		th {
			background-color: green;
			color: red
		}
	</style>
</head>

<body>
	<table>
		<tr>
			<th>字母1</th>
			<th>字母2</th>
		</tr>
		<tr>
			<td>a</td>
			<td>b</td>
		</tr>

	</table>

</body>

</html>

运行结果：

如果想给表格设置一个标题：

需要： <caption>name</caption>

使用示例：
 

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>操作示例</title>
	<style>
		table {
			width: 100%;
		}

		table,
		th,
		td {
			border: 1px solid green;
			text-align: center;
		}

		th {
			background-color: green;
			color: red
		}
	</style>
</head>

<body>
	<table>
		<caption>Table1</caption>
		<tr>
			<th>字母1</th>
			<th>字母2</th>
		</tr>
		<tr>
			<td>a</td>
			<td>b</td>
		</tr>

	</table>

</body>

</html>

运行结果：

还可以修改标题所在的位置：

caption-side:;属性

比如caption-side:bottom; 标题在下方

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>操作示例</title>
	<style>
		table {
			width: 100%;
		}

		table,
		th,
		td {
			border: 1px solid green;
			text-align: center;
		}

		th {
			background-color: green;
			color: red
		}

		caption {
			caption-side: bottom;
		}
	</style>
</head>

<body>
	<table>
		<caption>Table1</caption>
		<tr>
			<th>字母1</th>
			<th>字母2</th>
		</tr>
		<tr>
			<td>a</td>
			<td>b</td>
		</tr>

	</table>

</body>

</html>

运行结果：

神秘的博主
关注
  • 29
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值