HTML5权威指南读书笔记15（第24章）--其他css属性和特性、颜色及透明，表格样式，空白单元格处理，标题位置，表格布局，列表样式，光标样式

本文链接：https://blog.csdn.net/weixin_43745804/article/details/110148015

1、概述

在这里插入图片描述

2、设置元素的颜色和透明

在这里插入图片描述

<head>
    <style type="text/css">
        #mydiv1{ border:1px solid gray}
        span{width: 100px; height: 2em; border: 1px solid red;border: 1px solid red; 
        }
        body{ color: red;}
        span:hover{background-color: seagreen; opacity: 0.5;}
    </style>    
</head>
<body>
    <div id="mydiv1">
        相关知识越来越多人选择。比较熟悉，所以这系选择。比较熟悉，所以这系选择。比较熟悉，所以这系选择。比较熟悉，所以这系选择。比较熟悉，所以这系选择。比较熟悉，所以这系列文章将讲述Python搭建网站，<span>这里是span标签</span>的人选择。最新研究，Python已越多的人选择。最新研究，Py越多的人选择。最新研究，Python已多的人选择。最新研究，Python已校最受欢迎的语言，同时国内用Python开发的网站越来它比
    </div>  
</body>

3、设置表格样式-border-collapse属性

border-collapse属性值：
collapse：不要为相邻单元格绘制两个边框
separator：分离独立边框，单元格有独立边框
在这里插入图片描述

<head>
    <style type="text/css">
        #mydiv1{ border:1px solid gray}
        table{border-collapse: collapse; border: 1px solid gray; border-spacing: 2px;}
    </style>    
</head>
<body>
    <div id="mydiv1">
        <table border="1">
            <tr>
                <td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td>
            </tr>
        </table>
    </div>  
</body>

4、设置表格样式-border-collapse属性

还可以结合border-spacing进行处理

<head>
    <style type="text/css">
        #mydiv1{ border:1px solid gray}
        table{border-collapse: separate; border: 1px solid gray; border-spacing: 2px;}
    </style>    
</head>
<body>
    <div id="mydiv1">
        <table border="1">
            <tr>
                <td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td>
            </tr>
        </table>
    </div>  
</body>

5、empty-cells处理空白单元格

<head>
    <style type="text/css">
        #mydiv1{ border:1px solid gray}
        table{border-collapse: separate; border: 1px solid gray; border-spacing: 2px;
        empty-cells: hide;}
    </style>    
</head>
<body>
    <div id="mydiv1">
        <table border="1">
            <tr>
                <td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td><td></td><td>单元格</td><td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td>
            </tr>
        </table>
    </div>  
</body>

6、caption-side属性设置表格标题位置

caption-side：
top：
bottom：

<head>
    <style type="text/css">
        #mydiv1{ border:1px solid gray}
        table{border-collapse: separate; border: 1px solid gray; border-spacing: 2px;
        empty-cells: hide; caption-side: bottom;}
    </style>    
</head>
<body>
    <div id="mydiv1">
        <table border="1">
            <caption>表格正牌标题</caption>
            <tr>
                <td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td><td></td><td>单元格</td><td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td>
            </tr>
        </table>
    </div>  
</body>

7、table-layout指定表格布局

table-layout：fixed；在fixed模式中，表格的大小是由表格自身和单独每列的width值设置的，如果没有列宽值可用，浏览器会设置等距离的列宽

<head>
    <style type="text/css">
        #mydiv1{ border:1px solid gray}
        table{border-collapse: separate; border: 1px solid gray; border-spacing: 2px;
        empty-cells: hide; caption-side: bottom; table-layout: fixed;}
    </style>    
</head>
<body>
    <div id="mydiv1">
        <table>
            <caption>表格正牌标题</caption>
            <tr>
                <td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td><td></td><td>单元格</td><td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td>
            </tr>
        </table>
    </div>  
</body>

8、list-style设置列表样式

在这里插入图片描述

9、list-style-type设置列表标记类型

在这里插入图片描述

<head>
    <style type="text/css">
        #mydiv1{ border:1px solid gray}
        ol{ list-style-type: lower-alpha;}
    </style>    
</head>
<body>
    <div id="mydiv1">
        <ol>
            <li>是否存在重大依赖</li>
            <li>新媒体广告的增长比重</li>
            <li>是否存在重大依赖</li>
            <li>新媒体广告的增长比重</li>
            <li>是否存在重大依赖</li>
            <li>新媒体广告的增长比重</li>
        </ol>
    </div>  
</body>

10、list-style-image设置列表标记类型

<head>
    <style type="text/css">
        #mydiv1{ border:1px solid gray}
        ul{ list-style-image: url("images/icon.ico");}
    </style>    
</head>
<body>
    <div id="mydiv1">
        <ul>
            <li>是否存在重大依赖</li>
            <li>新媒体广告的增长比重</li>
            <li>是否存在重大依赖</li>
            <li>新媒体广告的增长比重</li>
            <li>是否存在重大依赖</li>
            <li>新媒体广告的增长比重</li>
        </ul>
    </div>  
</body>

11、list-style-position设置列表符号的位置

<head>
    <style type="text/css">
        #mydiv1{ border:1px solid gray}
        li.inside{
            list-style-position: inside;
        }
        li.outside{
            list-style-position: outside;
        }
    </style>    
</head>
<body>
    <div id="mydiv1">
        <ul>
            <li class="inside">是否存在重大依赖</li>
            <li class="inside">新媒体广告的增长比重</li>
            <li class="inside">是否存在重大依赖</li>
            <li class="outside">新媒体广告的增长比重</li>
            <li class="outside">是否存在重大依赖</li>
            <li class="outside">新媒体广告的增长比重</li>
        </ul>
    </div>  
</body>

12、cursor：设置光标样式

<head>
    <style type="text/css">
        #mydiv1{ border:1px solid gray;cursor: progress;}
        
    </style>    
</head>
<body>
    <div id="mydiv1">
        是否存在重大依赖是否存在重大依<br/>赖是否存在重大依赖是否存在重大依赖是否存在重大依赖是否存在重大依赖
    </div>  
</body>