开发者学堂课程【前端开发CSS基础：CSS 属性_列表、表格 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4259
CSS 属性_列表、表格
内容介绍：
一、列表
二、表格
一、列表
css 列表允许你放置、改变列表标志，或者将图像作为列表项标志，只适用于类型为列表的元素，ul、ol。
属性 |
描述 |
list-style |
复合属性。设置列表项目相关内容 |
list-style-image |
列表项图像 |
list-style-position |
列表标志位置 |
list-style-type |
列表类型 |
1、list-style-type 在代码中应用：
打开集成开发环境，创建一个新的 html 文件，命名为 list ，再创建一个 css 文件，命名为 style ，将其引入。首先写一个列表 ul 里面嵌套 li 标签，加内容，复制几个，执行看一下效果。
此时想改变一下列表项标志的类型，可以使用 list-style-type 这个属性来定义的，它有多个取值：
值 |
描述 |
值 |
描述 |
disc |
实心圆 |
lower-alpha |
小写英文字母 |
circle |
空心圆 |
upper-alpha |
大写英文字母 |
decimal |
阿拉伯数字 |
armenian |
传统的亚美尼亚数字 |
lower-roman |
小写罗马数字 |
cjk-ideographic |
浅白的表意数字 |
upper-roman |
大写罗马数字 |
georgian |
传统的乔治数字 |
square |
实心方块 |
none |
不使用项目符号 |
给ul里的li标签添加样式，首先输入 list-style-type: disc ;实心圆，刷新执行，可以看到列表前标志项为实心圆，它也是 list-style-type 默认属性值。
输入 list-style-type:circle ;空心圆，刷新执行，这就是空心圆效果。
输入 list-style-type:square; 实心方块，刷新执行，这就是实心方块的效果。
输入 list-style-type:decimal ；阿拉伯数字，刷新执行，这就是阿拉伯数字的效果。
以上就是一些常用的取值效果。但是 list-style-type 有很多种不同的取值，表格中列举的也只是一部分，并不全。
注意∶只有当 <' list-style-image '>属性为 none 或指定图像不可用时，<’list-style-type '>属性才发生作用。
2、list-style-image 在代码中应用：
输入 url 用来引入资源图片，要作为列表项标志的图片，复制一个图片，粘贴进来，引入这张图片，给它一个 margin-left ，让它距浏览器有一定的宽度，设置为100px ，刷新执行，此时可以看到原来的列表项标志的小圆点变成了一张图片。
3、list-style-position 在代码中应用：
它改变列表项标志的位置，把之前写入的代码注释，给它一个宽度设置成200px，把内容加多一些，多复制几个，执行看一下效果。
改变列表项标志的位置要用到 list-style-position，可以看到它有 inside 和outside ，首先选择 inside ，刷新执行，可以看到列表项目标记放置在文本以内且环绕文本根据标记对齐，这就是 inside 。
输入 outside，刷新执行。列表项目标记放置在文本以外且环绕文本不根据标记对齐，它的默认值就是 outside。
二、表格
1.Css 表格
Css表格属性可以帮助极大的改善表格的外观。
创建一个表格，代码如下：
< ！DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css"/>
< /head>
<body>
<table>
<tr>
<td>姓名</td>
<td>年齢</td>
<td>性別</td>
</tr>
<tr>
<td>明明</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>tom</td>
<td>17</td>
<td>男</td>
</tr>
<tr>
<td>amy</td>
<td>15</td>
<td>女</td>
</tr>
</table>
< /body>
</html>
刷新看一下效果，可以看到一个无边框的表格。
设置表格变宽，在 html 中学习，直接为其添加一个属性 border=1，刷新执行，此时可以看到一个表格，这个表格不是很美观，就需要利用 css 的属性设置它。
2. 折叠边框
例：
table{
Border-collapse:separete;
}
它有几个值，第一个 separete 为边框独立，第二个为 collapse 为合并边框，先选择合并边框，刷新执行。它的意思就是合并相邻的边框。
设置默认值 separete ，刷新执行，它的意思是使边框独立。
这就是第一个属性折叠边框。
输入 Border-color：pink；设置边框颜色，为了美观还是合并一下边框，再执行，此时就可以看见一个粉色的表格。
3. 表格宽高
例：
td{
width:200px;
height:50px;
}
为每一个单元格设置宽高，执行看一下效果。
4. 表格内边距
例：
td{
width:200px;
height:50px;
padding-left:20px;
}
添加表格内边距，刷新执行，此时可以看到文字距表格有了一定的距离，这就是 padding 属性为表格添加内边距。
5. 表格文本对齐
例：
td{
width:200px;
height:50px;
/*padding-left:20px;*/
text-align:center;
}
设置表格文本对齐，刷新执行，此时可以看到文本水平居中。
6. 表格颜色
例：
tr{
backgroud-color：aquamarine;
}
设置表格背景颜色，设置浅蓝色，可以看到表格的背景颜色变成了蓝色。
7. 表格边框
例：
<style>
table{
border:1px solid blue;
}
第一个设置它的边框粗细 1px，第二个样式为实线，第三个颜色设置为蓝色，此时刷新看一下效果，可以看到能看到边框为蓝色的表格。
再为 tr 和 td 添加边框，刷新。
让表格折叠，输入 border-collapse :collapse; 合并，刷新。
为单元格设置一个宽高 td，宽为 200 px，高为 50 px，内边距设置为 20 px，刷新。
为第一行添加一个 id 为 first，在设一个 id 为 content，再分别设置它的样式，首先 first 设置一个背景颜色蓝色 cadetblue ，第二个 content 设置一个背景颜色 deepskyblue ，刷新看一下效果。
这就是一个简单的表格样式，以上就是对表格的一些简单的应用。
