第16章 web开发技术3
5 表格样式：
要定制表格的边框、背景、颜色等样式属性，可以使用css对表格元素进行样式设置。以下是一些常见的表格样式属性及其示例：
1 边框样式（border）：
自定义表格边框的宽度、样式和颜色，可以使用`border`属性。
```css
table {
border: 1px solid ccc;
}
```
2 单元格内边距和外边距（padding、margin）：
调整单元格的内边距和外边距，可以使用`padding`和`margin`属性。
```css
table {
border-collapse: collapse;
}
th, td {
padding: 10px;
margin: 5px;
border: 1px solid ccc;
}
```
3 表格背景色（background-color）：
为表格设置背景色，可以使用`background-color`属性。
```css
table {
background-color: f5f5f5;
}
```
4 单元格颜色（color）：
设置单元格中文本的颜色，可以使用`color`属性。
```css
th, td {
color: 333;
}
```
5 隔行变色（nth-child）：
使用`nth-child`伪类可以实现表格隔行变色的效果。
```css
tr:nth-child(even) {
background-color: f2f2f2;
}
```
6 表头样式（th）：
使用css为表头设置样式，如背景色、文本对齐方式等。
```css
th {
background-color: 4caf50;
color: white;
text-align: left;
}
```
7 响应式表格：
使用媒体查询为不同屏幕尺寸的设备设置合适的表格样式。
```css
media screen and (max-width: 600px) {
table, th, td {
border: 0;
}
th, td {
display: block;
text-align: right;
}
thead {
display: none;
}
tr {
border-bottom: 1px solid ccc;
}
tfoot {
display: block;
}
tfoot td {
display: block;
text-align: right;
border-top: 1px solid ccc;
}
}
```
将这些样式应用到html表格中，可以提高表格的可读性和美观度
6 列表样式：定制列表项的前缀、背景、颜色等样式属性，美化列表显示效果。
要定制列表项的前缀、背景、颜色等样式属性，可以使用css对列表元素进行样式设置。以下是一些常见的列表样式属性及其示例：
1 列表项前缀（list-style-type）：
自定义列表项前缀的样式，如圆形点、方形点、数字等，可以使用`list-style-type`属性。
```css
ul {
list-style-type: circle;
}
```
2 列表项背景（background-color）：
为列表项设置背景色，可以使用`background-color`属性。
```css
li {
background-color: f5f5f5;
}
```
3 列表项颜色（color）：
设置列表项中文本的颜色，可以使用`color`属性。
```css
li {
color: 333;
}
```
4 列表项内边距和外边距（padding、margin）：
调整列表项的内边距和外边距，可以使用`padding`和`margin`属性。
```css
li {
padding: 10px;
margin: 5px;
border: 1px solid ccc;
}
```