CSS常用属性之（列表、表格、鼠标）属性，（如果想知道CSS的列表、表格、鼠标相关的属性知识点，那么只看这一篇就足够了！）

        前言：在学习CSS的时候，必不可少的就要学习选择器和常见的属性，而本篇文章讲解的是CSS中的列表、表格、背景、鼠标属性。

✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

大致了解一下本篇文章讲解的内容：

1.列表相关属性

        先来看一下有哪些常用的列表属性：

        （1）list-style-type

属性作用：用于指定列表前标记的样式。

常用值如下：
        none ：不显示前面的标识（很常用！）
        square ：实心方块
        disc ：圆形
        decimal ：数字
        lower-roman ：小写罗马字
        upper-roman ：大写罗马字
        lower-alpha ：小写字母
        upper-alpha ：大写字母

我们使用实心方块来进行演示说明：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.23.css">
</head>
<body>
    <!-- 创建一个列表 -->
    <ul>
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期天</li>
    </ul>
</body>
</html>

CSS代码：

/* 将无序列表前的标志改为实心方块 */
li {
    list-style-type: square;
}

这样我们就将指定列表前标记的样式进行了修改。

        （2）list-style-image

属性作用：用于自定义列表前标记的样式。

使用方式：

/* 在list-style-image使用url（图片地址） */
li {
    list-style-image: url();
}

例如：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.23.css">
</head>
<body>
    <!-- 创建一个列表 -->
    <ul>
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期天</li>
    </ul>
</body>
</html>

CSS代码：

/* 自定义无序列表前的标志样式 */
li {
    list-style-image: url(./小飞机1.png);
}

这样我们就可以使用自己喜欢的样式来替代列表前的样式了。

        （3）list-style-position

属性作用：用于指定列表前样式的位置。

常见值：

        "list-style-position: outside;" 表示项目符号点将在列表项之外。

        "list-style-position: inside; " 表示项目符号将在列表项内。

看完之后感觉不是太明白什么是列表项之外，什么是列表项之内？那么我们使用一个例子来使你进一步了解：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.23.css">
</head>
<body>
    <!-- 创建一个列表 -->
    <ul>
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期天</li>
    </ul>
</body>
</html>

CSS代码：

/* 设置列表前样式为圆形,并且为外部 */
li {
    list-style-type: disc;
    list-style-position: inside;
    background-color: orange;
}

当我们将参数改为inside后：

/* 设置列表前样式为圆形,并且为内部 */
li {
    list-style-type: disc;
    list-style-position: inside;
    background-color: orange;
}

我们可以发现，列表前样式与文字同时被背景颜色进行修饰了，简而言之为指定列表前样式是显示在内容流的内部还是外部。

这样我们就了解了列表前样式的位置属性的使用方式了。

        （4）list-style

属性作用：用于复合之前的属性，使代码更加的简洁。

例如：我们想将列表前的样式改为大写的罗马数字并且列表前的样式在列表的里面：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.25.css">
</head>
<body>
    <ul>
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期其</li>
    </ul>
</body>

CSS代码：

/* 将列表前的样式改为大写的罗马数字 并且 列表前的样式在列表的里面 */
ul li {
    background-color: orange;
    list-style: upper-roman inside;
}

注意：将属性进行复合的时候，没有数量、顺序的要求，属性之间只需要使用空格隔开即可。

2.表格相关的属性

        表格相关的属性大致分为两种：一种为其他元素也能用，另一种为只有table标签才能使用，那么先让我们看一下有哪些有关表格的属性：

那么我们就按照顺序，先介绍其他元素也可以使用的属性：

【1】其他元素也能用的属性

        （1）border-width

属性作用：用于设置边框宽度。

我们使用实例来进一步进行理解：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.25.css">
</head>
<body>
    <div>我要开始学习CSS表格属性！</div>
</body>
</html>

CSS代码：

/* 将div元素周边设置一圈10px大小的边框 */
div {
    border-width: 10px;
}

但是当我们要查看作用效果的时候，我们会发现好像和没有设置一样，并没有什么变化。这是因为border-width、border-color、border-style三个属性是连锁的，即只有当三个属性都进行设置了之后才会有结果。

那么我们先将border-color、border-style了解完之后，在回来测试代码的作用。

        （2）border-color

属性作用：用于设置边框颜色。

其属性值可为 CSS 中可用的颜色值。

        （3）border-style

属性作用：用于设置边框样式。

常用属性值：

        1. none 默认值
        2. solid 实线
        3. dashed 虚线
        4. dotted 点线
        5. double 双实线

我们迅速了解完border-width、border-color、border-style三个属性之后，我们在来设置一下元素边框，只不过这次加上了border-color、border-style属性

这次的html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.25.css">
</head>
<body>
    <div>我要开始学习CSS表格属性！</div>
</body>
</html>

CSS代码：

/* 将div元素周边设置一圈10px大小、颜色为天蓝色、样式为实线的边框 */
div {
    border-width: 10px;
    border-color: skyblue;
    border-style: solid;
}

这样我们就将能用在其他元素身上的border-width、border-color、border-style三个属性了解了，当然border属性也有复合属性，即将三个属性直接写到一个border属性上：（代码如下）

/* 将div元素周边设置一圈10px大小、颜色为天蓝色、样式为实线的边框 */
div {
    border: 10px skyblue solid;
}

这样我们就了解了能写在其他元素身上的有关表格的属性，那么接下来让我们了解只有table标签才能使用的属性。

【2】只有table标签才能使用的属性

        （1）table-layout

属性作用：用于设置表格的列宽度。

常用属性值：

        auto ：自动，列宽根据内容计算（默认值）。
        fixed ：固定列宽，平均分。

让我们直接使用代码来进一步理解：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.25.css">
</head>
<body>
    <table border="1px">
        <caption>六年级二班的学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>学生的性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>zhangsan</td>
                <td>11</td>
                <td>男</td>
            </tr>
            <tr>
                <td>lisi</td>
                <td>10</td>
                <td>女</td>
            </tr>
            <tr>
                <td>wangwu</td>
                <td>12</td>
                <td>男</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">以上为六年级二班所有学生信息</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

CSS代码：

我们会发现使用auto后，如果表格头文字多，那么其列宽就宽，如果文字少，那么列宽就小，这即是设置为auto属性值后的效果。

如果我们设置的属性值为fixed：

/* 设置表格宽高，并且列宽为fixed */
table {
    width: 400px;
    height: 300px;
    table-layout: fixed;
}

如果将table-layout的属性值设置为fixed后，各列的列宽就都相同了。

        （2）border-spacing

属性作用：用于设置表格的单元格间距。

我们直接使用案例讲解，如果我们将上述的表格设置其border-spacing为10px，那么它会变成什么样呢？

CSS代码：

/* 设置单元格间距为10px */
table {
    width: 400px;
    height: 300px;
    border-spacing: 10px;
}

明显我们发现单元格直接出现了空隙，并且其大小为10px。

注意：设置border-spacing属性值生效的前提为单元格边框不能合并。（接下来会讲解，先了解）

        （3）border-collapse

属性作用：用于合并单元格边框。

常用属性值：

        collapse ：合并
        separate ：不合并

现在我们在设置了border-spacing为10px的情况下，我们设置一下border-spacing的值，让我们看一下会发生什么：

CSS代码：

/* 设置单元格间距为10px 又设置了border-collapse为collapse */
table {
    width: 400px;
    height: 300px;
    border-spacing: 10px;
    border-collapse: collapse;
}

这时候我们就会发现设置的border-spacing属性值失效了，这也是上文中提到的（设置border-spacing属性值生效的前提为单元格边框不能合并），如果设置了合并那么border-spacing属性值即会失效。

        （4）empty-cells

属性作用：用于隐藏没有内容的单元格。

常用属性值：

        show ：显示，默认
        hide ：隐藏

让我们直接使用案例看一下结果：

我们还是使用之前的六年级二班的案例，只不过这次我们将zhangsan的年龄所在的单元格设置为空。

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.25.css">
</head>
<body>
    <table border="1px">
        <caption>六年级二班的学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>学生的性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>zhangsan</td>
                <td></td>
                <td>男</td>
            </tr>
            <tr>
                <td>lisi</td>
                <td>10</td>
                <td>女</td>
            </tr>
            <tr>
                <td>wangwu</td>
                <td>12</td>
                <td>男</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">以上为六年级二班所有学生信息</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

CSS代码：

/* 设置单元格间距为10px 又设置了border-collapse为separate */
table {
    width: 400px;
    height: 300px;
    border-spacing: 10px;
    border-collapse: separate;
}

我们会发现zhangsan的年龄信息为空，这和我们预料的相同，但是如果这是我们设置了empty-cells属性值为hide会怎么样呢？

CSS代码：

/* 设置单元格间距为10px 又设置了border-collapse为separate 设置empty-cells为hide*/
table {
    width: 400px;
    height: 300px;
    border-spacing: 10px;
    border-collapse: separate;
    empty-cells: hide;
}

我们就会发现zhangsan的年龄信息所在的单元格没有了，这就是设置empty-cells为hide的效果。这样我们就了解了empty-cells属性。

注意：设置empty-cells为hide生效前提也是单元格不能合并。

        （4）caption-side

属性作用：用于设置表格标题位置。

常用属性值：

        top ：上面（默认值）
        bottom ：在表格下面

我们直接使用上边案例，只不过使用caption-side属性将其表格标题改到下边。

CSS代码：

/* 设置标题在表格的下方 */
table {
    width: 400px;
    height: 300px;
    caption-side: bottom;
}

这样我们就了解了所有常用的有关只有table标签才能使用的属性。

3.鼠标相关的属性

以下为鼠标相关的属性

CSS属性名功能属性值
cursor设置鼠标光标的样式pointer ：小手
move ：移动图标
text ：文字选择器
crosshair ：十字架
wait ：等待
help ：帮助

我们使用一个案例进行演示（使用属性值为小手）

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.25.css">
</head>
<body>
    <div><img src="./fish.jpg" alt="fish"></div>
</body>
</html>

CSS代码：

/* 将鼠标放在div上就会变为小手 */
img {
    width: 300px;
    height: 300px;
    cursor: pointer;
}

这样我们就了解了鼠标相关的属性。

想学习其他CSS知识点---->CSS_秋刀鱼不做梦的博客-CSDN博客

以上就是本篇文章的全部信息了~~~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/572934.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

new String和直接赋值的一些问题

new String和直接赋值的一些问题

分析1 我们先看以下代码&#xff1a; String str1 "abc"; // 在常量池中String str2 new String("abc"); // 在堆上System.out.println(str1 str2)以上结果的输出是什么&#xff1f; 输出&#xff1a;false 前置知识&#xff1a; 在JVM中&#xff0c…
阅读更多...
VForm3的文件上传后的一种文件回显方式

VForm3的文件上传后的一种文件回显方式

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a…
阅读更多...
(C++) 内类生成智能指针shared_from_this介绍

(C++) 内类生成智能指针shared_from_this介绍

文章目录 &#x1f601;介绍&#x1f914;类外操作&#x1f605;错误操作&#x1f602;正确操作 &#x1f914;类内操作&#x1f62e;std::enable_shared_from_this<>&#x1f62e;奇异递归模板 CRTP&#xff08;Curiously Recurring Template Pattern&#xff09;&#…
阅读更多...
新手如何搭建测试平台？一文1800字从0到1实现【建议收藏】

新手如何搭建测试平台？一文1800字从0到1实现【建议收藏】

01、职责 一个健康的测试平台体系&#xff0c;对测试人员的职责分工、协作模式会有不同的要求。 测试平台核心的职责是完成高质量的交付已满足业务需求。测试活动包括单元测试、集成测试、接口测试、性能测试等&#xff0c;都是通过这些测试手段&#xff0c;协同整个测试平台…
阅读更多...
JavaEE 初阶篇-深入了解 UDP 通信与 TCP 通信（综合案例：实现 TCP 通信群聊）

JavaEE 初阶篇-深入了解 UDP 通信与 TCP 通信（综合案例：实现 TCP 通信群聊）

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 UDP 通信 1.1 DatagramSocket 类 1.2 DatagramPacket 类 1.3 实现 UDP 通信&#xff08;一发一收&#xff09; 1.3.1 客户端的开发 1.3.2 服务端的开发 1.4 实现 …
阅读更多...
将Python机器学习模型集成到C++ Qt客户端应用程序中|Qt调用python详解

将Python机器学习模型集成到C++ Qt客户端应用程序中|Qt调用python详解

0、前言 有几个不同的选项可以将你的Python机器学习模型集成到你的C Qt客户端应用程序中。以下是一些可能的解决方案&#xff1a; 创建API&#xff1a; 将你的机器学习模型部署为一个API服务。你可以使用像Flask这样的轻量级Web框架来创建一个简单的HTTP服务。这样&#xff0…
阅读更多...
Linux---Socket

Linux---Socket

网络套接字(socket) 网络通信仅仅是为了让两台主机间传送数据吗&#xff1f;数据是被谁需要的呢&#xff1f;--- 进程&#xff0c;所以网络通信的本质是两个进程间的通信。那么如何找到两台主机上的两个进程呢&#xff1f; 1、通过IP地址确定网络中的唯一一台主机 2、通过po…
阅读更多...
Linux关闭swap分区操作[适用于CDH报警等]

Linux关闭swap分区操作[适用于CDH报警等]

1.查看swap分区挂载路径(没卵用) swapon -s 2.设置配置文件的swap配置 echo “vm.swappiness 0” > /etc/sysctl.conf 3.设置内存中的swap状态。有时候配置文件为0&#xff0c;但集群或服务仍然使用了swap分区&#xff0c;可能原因就是内存没有同步配置 echo “0” > …
阅读更多...
C++入门----内联函数auto范围fornullptr指针

C++入门----内联函数auto范围fornullptr指针

1.内联函数 顾名思义&#xff0c;内联函数也是函数的一种&#xff0c;我们在C语言的学习过程里面知道了函数和宏之间的区别和各自的优缺点&#xff1b; 函数的使用需要建立栈帧&#xff0c;宏的使用需要考虑各种符号的优先级问题&#xff0c;很容易出错&#xff0c;因为宏在使…
阅读更多...
jmeter之跨线程关联

jmeter之跨线程关联

1&#xff09;_setproperty函数&#xff1a;将值保存成jmeter属性 2&#xff09;_property函数&#xff1a;在其他线程组中使用property函数读取属性 一、跨线程接口引用变量 1. 法一&#xff1a;jmeter自带函数_setProperty和_property 1. 1线程组 01 创建登录的【HTTP请求】…
阅读更多...
Java知识总结---并发篇

Java知识总结---并发篇

线程 线程的状态 Java中线程可以有如下6中状态&#xff1a; NEW 新创建 RUNNABLE 可运行 BLOCKED 阻塞 WAITING 等待 TIMED WAITING 计时等待 TERMINATED 终止 线程的创建 &#xff08;1&#xff09;继承Thread类 public class ExtendsThread extends Thread { O…
阅读更多...
后端工程师——C++工程师招聘需求

后端工程师——C++工程师招聘需求

相比 Java 语言方向&#xff0c;C 入门简单&#xff0c;精通难&#xff0c;找工作竞争压力更小&#xff0c;但 C 依然是近年来招聘的热门岗位之一。本文将从以下三个方面进行详细讲解&#xff0c;帮助你对 C 相关岗位的就业前景、岗位要求、学习路线等有更充分的了解。 C工程师…
阅读更多...
48-70V降12V/33V 5A高效同步降压DC-DC——AH1007

48-70V降12V/33V 5A高效同步降压DC-DC——AH1007

AH1007是一款高效率、高压外置MOSFET管降压芯片TEL&#xff1a;186*4884*3702*&#xff0c;芯片典型输入是8V~100V,输出 电压可调&#xff0c;AH1007最大输出电流可支持6A以上&#xff0c;需要注意板子的散热和温升。 AH1007典型开关频率为150KHz。轻载时会自动降低开关频率以…
阅读更多...
SSRF—服务器请求伪造 漏洞详解

SSRF—服务器请求伪造 漏洞详解

漏洞简述 SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造&#xff0c;由服务端发起请求的一个网络攻击&#xff0c;一般用来在外网探测或攻击内网服务&#xff0c;其影响效果根据服务器用的函数不同&#xff0c;从而造成不同的影响。 SSRF 形成的原因…
阅读更多...
H5点击复制功能 兼容安卓、IOS

H5点击复制功能 兼容安卓、IOS

效果图 HTML代码 <div>链接&#xff1a;<span style"color: #FF8A21" click"CopyUrl" id"copyId"> https://blog.csdn.net/qq_51463650?spm1000.2115.3001.5343</span> </div>复制方法 const CopyUrl () > {let …
阅读更多...
水库大坝安全白蚁监测系统解决方案

水库大坝安全白蚁监测系统解决方案

一、系统背景 白蚁作为河岸生态系统中的重要病害&#xff0c;不仅会导致水库大坝外部环境发生改变&#xff0c;甚至会引发水库大坝破坏&#xff0c;进而导致自身结构失去稳定性&#xff0c;严重影响水库大坝的正常运行。因此&#xff0c;治理水库大坝白蚁是确保水库大坝工程顺利…
阅读更多...
chrome 浏览器 f12 如何查看 websocket 消息？

chrome 浏览器 f12 如何查看 websocket 消息？

1. 打开目标页面 2. f12--》网络--》WS&#xff0c;然后刷新页面( 如果不刷页面&#xff0c;就会看不到 websocket 请求&#xff0c;因为 websocket 是长连接&#xff0c;页面加载后只发出一次连接请求&#xff0c;不像 http 接口&#xff0c;不用刷新页面&#xff0c;待会儿也…
阅读更多...
Linux Docker下载镜像更改默认存储位置/usr/lib/docker

Linux Docker下载镜像更改默认存储位置/usr/lib/docker

用于解决docker默认存储位置磁盘空间不足&#xff0c;切换存储位置 1、执行下面命令查看 现在docker的存储位置 docker info | grep "Docker Root Dir" 1.2、如果之前已经下载过镜像可以用mv命令把原来的镜像复制到新的地址 mv /var/lib/docker /data/docker 2、…
阅读更多...
十堰着力建设城市级供应链安全检测平台，全力打造数字政府安全示范区

十堰着力建设城市级供应链安全检测平台，全力打造数字政府安全示范区

4月23日&#xff0c;十堰市互联网信息办公室、十堰政务服务和大数据管理局、十堰数安技术有限公司共同签订了《城市供应链安全检测平台战略合作框架协议》&#xff0c;通过政企深度协作&#xff0c;加强十堰市数字安全体系建设&#xff0c;为推动十堰市乃至湖北省数字经济产业发…
阅读更多...
RS1G08XF5规格详情

RS1G08XF5规格详情

RS1G08XF5 是一款由润石&#xff08;RUNIC&#xff09;公司生产的电子元器件。根据所提供的信息&#xff0c;这是一款SOT-23-5封装的器件&#xff0c;其主要参数包括最小电源电压为5V&#xff0c;最大电源电压为6V&#xff0c;最小工作温度为-40C。 为了更准确地了解这款器件的…
阅读更多...
最新文章

Copyright @ 2022~2023