【CSS3学习笔记】11:表格和列表的样式

本节学习表格与列表中独有的CSS样式。

表格的独有样式
[1]border-collapse边框是否合并,separate为默认的独立,collapse为合并。
[2]border-spacing边框间距,只在上一个属性为独立时有效。
[3]caption-side设置表格标题(caption标签)所处的位置,默认在上方。
[4]empty-cells空单元格边框是否显示,hide为隐藏。
[5]table-layout设置表格排版方式,默认为auto(过长时拉伸),还有值fixed(不拉伸而是换行)。

*测试代码


<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>28td>
        <td>td>
    tr>
    <tr>
        <td>王五td>
        <td>44td>
        <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;/*非表头内边框*/
}

运行结果:
【CSS3学习笔记】11:表格和列表的样式_第1张图片

列表的独有样式
[1]list-style-type列表前面的标记,默认为disc实心圆,还有circle空心圆,square实心方块,decimal阿拉伯数字等。
[2]list-style-position标记所在的位置,默认为outsize为在内容外,inside则为在内容以内。
[3]list-style-image使用图片作为前缀的标记,none为不使用,url为使用,并且要给出使用哪张图。
[4]list-style简写形式,先写标记形态,再写标记位置,再写url,中间用空格隔开。

*测试代码


<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: */
}

运行结果(按道理应该用个小图标):
【CSS3学习笔记】11:表格和列表的样式_第2张图片

有关垂直对齐

[1]表格中的垂直对齐
text-align可以水平对齐,垂直对齐则可以用CSS中的vertical-align属性,值有baseline(基线),top(顶端),middle(默认的中部),bottom(底端)。还有值sub(作下标),super(作上标)。
*测试代码


<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>vipb>td>
        <td>28td>
        <td>td>
    tr>
    <tr>
        <td>王五td>
        <td>44td>
        <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;/*作上标*/
}

运行结果:
【CSS3学习笔记】11:表格和列表的样式_第3张图片

[2]一般情形下的垂直对齐
一般情形下的水平对齐仍然只要用text-align属性即可,垂直对齐也是用CSS中的vertical-align属性,但是用的值是具体长度值或者百分比来调整。在一个盒子中某些信息的垂直对齐,就要建立一个更小的子盒子去装这些信息,然后再用值或者百分比来调整相对位置。
*测试代码


<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;
}

运行结果:
【CSS3学习笔记】11:表格和列表的样式_第4张图片

你可能感兴趣的:(CSS3)