CSS学习笔记（七）--CSS样式之列表与表格

1. 列表

无序列表

ul.disc {list-style-type: disc}    #实心圆
ul.circle {list-style-type: circle}  #空心圆
ul.square {list-style-type: square}   #方框
ul.none {list-style-type: none}   #无标识

有序列表

ol.decimal {list-style-type: decimal}   #数字 
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}  #带零的数字
ol.lroman {list-style-type: lower-roman}  #小写罗马数字
ol.uroman {list-style-type: upper-roman}  #大写罗马数字
ol.lalpha {list-style-type: lower-alpha}   #小写英语字母
ol.ualpha {list-style-type: upper-alpha}  #大写英语字母
ul.lower-greek {list-style-type: lower-greek}   #希腊字母
ul.cjk-ideographic {list-style-type: cjk-ideographic}  #中文数字

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

2. 表格

表格边框 border
table, th, td { border: 1px solid blue; }
折叠边框 border-collapse
是否将表格边框折叠为单一边框

table
  {
  border-collapse:collapse;
  }

table,th, td
  {
  border: 1px solid black;
  }

表格宽度和高度:width 和 height

table
  {
  width:100%;
  }

th
  {
  height:50px;
  }

表格文本对齐:text-align 和 vertical-align
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐
td{ text-align:right; }
td { height:50px; vertical-align:bottom; }
表格内边距:padding 表格中内容与边框的距离
td { padding:15px; }
padding:3px 7px 2px 147px; #分别是距离上、右、下、左边距
表格颜色:
table, td, th { border:1px solid green; } th { background-color:green; color:white; }
是否显示表格中中空单元
empty-cells: hide;
边框之间的距离
border-spacing: 10px 50px #一个是上下，另一个是左右
表格标题
caption{caption-side:bottom} #位于表格下方