本节学习表格与列表中独有的CSS样式。
表格的独有样式
[1]border-collapse边框是否合并,separate为默认的独立,collapse为合并。
[2]border-spacing边框间距,只在上一个属性为独立时有效。
[3]caption-side设置表格标题(caption标签)所处的位置,默认在上方。
[4]empty-cells空单元格边框是否显示,hide为隐藏。
[5]table-layout设置表格排版方式,默认为auto(过长时拉伸),还有值fixed(不拉伸而是换行)。
*测试代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS表格和列表</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<caption>这里是表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三四五六七八九十</td>
<td></td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>28</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>44</td>
<td>男</td>
</tr>
</table>
</body>
</html>
@charset "utf-8";
table{
width: 400px;
height: 300px;
border: 1px solid red;/*外边框*/
text-align: center;
border-collapse: separate;
border-spacing: 30px;
caption-side: bottom;
empty-cells: hide;
table-layout: fixed;
}
table tr th{
border: 2px solid green;/*表头内边框*/
}
table tr td{
border: 2px solid blue;/*非表头内边框*/
}
运行结果:
列表的独有样式
[1]list-style-type列表前面的标记,默认为disc实心圆,还有circle空心圆,square实心方块,decimal阿拉伯数字等。
[2]list-style-position标记所在的位置,默认为outsize为在内容外,inside则为在内容以内。
[3]list-style-image使用图片作为前缀的标记,none为不使用,url为使用,并且要给出使用哪张图。
[4]list-style简写形式,先写标记形态,再写标记位置,再写url,中间用空格隔开。
*测试代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS表格和列表</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li>张三四五六七八九十</li>
<li>李四</li>
<li>王五</li>
<li>马六</li>
</ul>
</body>
</html>
@charset "utf-8";
ul{
width: 50px;
list-style-type: upper-roman;
list-style-position: inside;
list-style-image: url("inter.ico");
/*list-style: */
}
运行结果(按道理应该用个小图标):
有关垂直对齐
[1]表格中的垂直对齐
text-align可以水平对齐,垂直对齐则可以用CSS中的vertical-align属性,值有baseline(基线),top(顶端),middle(默认的中部),bottom(底端)。还有值sub(作下标),super(作上标)。
*测试代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS表格和列表</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table border="1">
<caption>这里是表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td></td>
<td class="sex">男</td>
</tr>
<tr>
<td>李四<b>vip</b></td>
<td>28</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>44</td>
<td>男</td>
</tr>
</table>
</body>
</html>
@charset "utf-8";
table{
width: 400px;
height: 300px;
text-align: center;/*水平对齐:居中*/
}
.sex{
vertical-align: bottom;/*垂直对齐:贴底*/
}
b{
vertical-align: super;/*作上标*/
}
运行结果:
[2]一般情形下的垂直对齐
一般情形下的水平对齐仍然只要用text-align属性即可,垂直对齐也是用CSS中的vertical-align属性,但是用的值是具体长度值或者百分比来调整。在一个盒子中某些信息的垂直对齐,就要建立一个更小的子盒子去装这些信息,然后再用值或者百分比来调整相对位置。
*测试代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS表格和列表</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<span>这里是一般情形下的文本,我希望它居中</span>
</div>
<br>
<em>内容简介:</em><textarea rows="20"></textarea>
</body>
</html>
@charset "utf-8";
div{
width: 500px;
height: 300px;
background: silver;
text-align: center;
}
div span{
background: green;
/*用负值向下调*/
vertical-align: -150px;/*在内嵌的标签中用值或者百分比*/
}
em{
/*用正值向上调*/
vertical-align: 150px;
}
运行结果: