前端css学习笔记5：列表表格背景样式设置
本文为个人学习总结，如有谬误欢迎指正。前端知识众多，后续将继续记录其他知识点！
目录
前言
一、列表（下面属性用于ul ol li）
不同的列表项目标记—list-style-type
定位列表项标记—list-style-position
图像作为列表项标记—list-style-image
简写—list-style（type-position-image）
二、表格
边框相关（其他元素也能用）—border
独有的属性（只有table能用）
三、背景—background
background-image 属性指定用作元素背景的图像。
background-repeat 属性在水平和垂直方向上都重复图像（默认）
background-position 属性用于指定背景图像的位置
编辑background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）
前言
在网页设计与开发的世界里，如何清晰、美观地呈现信息是核心课题之一。列表能够让繁杂的内容条理分明，表格可将数据有序排列，而背景则能为页面增添氛围与层次感，它们共同构成了网页信息展示的重要基石。掌握列表的样式设置、表格的边框与内容处理以及背景的图像与属性调控，不仅能让网页更具专业性，还能极大提升用户的浏览体验。希望这份笔记能为同样正在学习CSS的同学提供参考，也欢迎大家结合原课程视频深入学习，共同进步。
网课链接： https://www.bilibili.com/video/BV1p84y1P7Z5/?share_source=copy_web&vd_source=faad59aa4025692c65fca19bc4320e39
一、列表（属性用于ul ol li）
不同的列表项目标记—list-style-type
list-style-type 属性指定列表项标记的类型。
此属性值;
- none：没有列表标记（常用）
- square：方形
- circle：空心圆
- lower-roman：小写罗马数字
- upper-alpha：大写字母
- decimal：小写阿拉伯数字（样式看起来是有序表）
- 有些用于有序表，有些用于无序表
定位列表项标记—list-style-position
list-style-position 属性指定列表项标记（项目符号）的位置。
"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的：
"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本：
图像作为列表项标记—list-style-image
list-style-image 属性将图像指定为列表项标记：
使用url（"文件路径"）
简写—list-style（type-position-image）
list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性（书写时无顺序，数量要求）：
在使用简写属性时，属性值的顺序为：
• list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
• list-style-position（指定列表项标记应显示在内容流的内部还是外部）
• list-style-image（将图像指定为列表项标记）
如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。
二、表格
边框相关（其他元素也能用）—border
写在table元素选择器中
- 只是给表格的（thead和tbody部分加边框），里面单元格没有
- 如果只写border-width/-color/-style，只写一个不显示边框，要写3个；或者直接用border属性，写3个值（写全）
给单元格加边框—并集选择器（td，th）
- 上面的属性都可以使用，不仅用于表格，其他元素（标题，div，span，图片,下拉框（需要显示边框的）等等都可以）
独有的属性（只有table能用）
-
table-layout的默认值，自动，字多列宽大
-
结合选择器，单独设置某一列宽
-
单元格间距，html使用table标签的cellspacing属性
-
border-spacing:写0，单元格边界线重合
- 隐藏没有内容单元格
三、背景—background
书写不考虑值顺序，数量
background-image 属性指定用作元素背景的图像。
默认情况下，图像会重复，以覆盖整个元素。
还可以为特定元素设置背景图像，例如 <p> 元素：
<!DOCTYPE html>
<html> <head> <style> p {background-image: url("/i/paper.jpg"); }</style> </head> <body> <h1>Hello World!</h1> <p>本段以一幅图像作为背景！</p></body>
</html> background-repeat 属性在水平和垂直方向上都重复图像（默认）
仅在水平方向重复 ：background-repeat: repeat-x;
仅在垂直方向重复：background-repeat: repeat-y;
只显示一次背景图像（不重复）：background-repeat：no-repeat；
background-position 属性用于指定背景图像的位置
属性值：（前提是background-position值为不重复）
- 关键词（水平：left center right；垂直：top center bottom）：
-
- left top（左上—默认），right top（右上）
- left bottom（左下），right bottom（右下）
- center top（水平方向中间），left center（垂直方向中间），。。
- center（正中间）
- 其他只写一个词，另一个默认是center
background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）
属性值：
- fixed：指定应该固定背景图像
- scroll：指定背景图像应随页面的其余部分一起滚动：