【Qt】界面优化(三)盒子模型的介绍和使用,给按钮,复选框,单行输入框设置样式
小编个人主页详情—请点击小编个人gitee代码仓库—请点击Qt系列专栏—请点击倘若命中无此运孤身亦可登昆仑送给屏幕面前的读者朋友们和小编自己!目录前言一、盒子模型盒子模型的介绍盒子模型的使用设置标签的边框和内边距设置按钮的边框和外边距二、给按钮设置样式三、给复选框的样式进行设置四、给单行输入框的样式进行设置总结前言【Qt】界面优化二类型选择器类选择器ID选择器并集选择器子控件选择器伪类选择器的介绍和使用——书接上文 详情请点击——本文会在上文的基础上进行讲解所以对上文不了解的读者友友请点击前方的蓝字链接进行学习本文由小编为大家介绍——【Qt】界面优化三盒子模型的介绍和使用给按钮复选框单行输入框设置样式一、盒子模型盒子模型的介绍要进行QSS样式的设置就需要使用到QSS中的样式属性而其实QSS中的样式属性是非常多的非常多的那么有的读者友友可能会说那我把QSS中的样式属性全部背下来这里要注意这样的做法是不科学不合理的因为人总会出错所以正确的做法是用到了某个样式属性的时候就去Qt Assistant对应的Qt官方文档中去进行查询即可那么我们在Qt Assistant中搜索Qt Style Sheets Reference然后点击List Of Properties如上就列举了QSS中的全部的样式属性左侧是样式属性右侧是这些样式属性在哪些控件中可以进行设置并且还演示了这些样式属性如何进行使用这里小编就不过多进行讲解了读者友友可以根据自己的需要进行QSS中样式属性的学习那么如上我们返回Qt Style Sheets Reference中然后点击List Of Stylable Widgets此时我们来看List Of Stylable Widgets其实并不是所有的控件都可以进行设置样式的有些控件是不支持设置样式的那么在List Of Stylable Widgets中就把哪些控件可以设置哪些样式给列举了出来对于上图的左侧是都有哪些控件可以设置样式对于上图的右侧是这些可以设置样式的控件可以设置哪些样式这里我们关注的主角是样式中box model我们看到对于右侧的这些样式中有很多的box model那么究竟该如何理解这里的box model又该如何使用box model呢那么此时我们点击上图的box model下面小编来进行逐一的讲解其实box model在QSS中是盒子模型是QSS从前端网页的CSS中参考过来的盒子模型盒子模型顾名思义就是一个盒子而盒子其实就是一个矩形所以如何理解这里的矩形呢在我们之前学了了那么多的Qt控件我们可以看出来Qt中的每个控件都好像是方方正正的所以在Qt中把每个控件都理解为了一个矩形这个矩形其实就是盒子模型那么针对这么一个矩形/盒子模型其实就可以分为如上几个部分我们由内向外来看CONTENT是内容(content)PADDING是内边距(padding)BORDER是边框(border)MARGIN是外边距(margin)其实单单凭借小编这么说还是比较抽象的下面小编借助房子的例子来帮助大家具象化理解如上左侧是一个房子右侧也是一个房子通过如下建模的过程我们就可以很好的理解盒子模型的构成了1房子四周的围壁是有厚度的我们把房子的围墙的厚度理解为边框border2一个房子中例如冰箱电视沙发桌子凳子等都可以称之为家具这些家具本身就是内容content3对于家具我们假设这些家具都不是紧挨着墙摆放的而是距离墙有一定的距离我们把家具和墙之间的距离称之为内边距padding4在村里房子和房子之间一般都要留出一定的距离我们把房子和房子之间的距离称之为外边距margin我们可以通过如下QSS中的属性来设置上述边距和边框的样式对于外边距内边距边框的单位是像素px默认为0 关于像素的讲解在第八点Qt坐标系的认识中的第13小点中进行的讲解详情请点击——1margin外边距是复合属性即可以拆分成如下四个属性通过一个margin就可以设置四个方向的外边距……1margin-top上外边距……2margin-bottom下外边距……3margin-left左外边距……4margin-right右外边距……5我们可以通过对上面四个属性单独设置来设置外边距同时也可以使用margin来设置四个方向的外边距CSS中也是这样设定的…………1margin: 10px; 上下左右四个方向都设置成10像素的外边距…………2margin: 10px 20px; 上下设置成10像素的外边距左右设置成20像素的外边距…………3margin: 10px 20px 30px 40px上右下左(顺时针)四个方向依次为10像素20像素30像素40像素的外边距2padding内边距也是复合属性同样也可以拆分成如下四个属性同样可以使用padding来设置四个方向的内边距对于padding如何设置的四个方向的内边距其实和margin设置四个方向外边距都是一样的道理这里小编就不再赘述了……1padding-top上内边距……2padding-bottom下内边距……3padding-left左内边距……4padding-right右内边距3border边框同样也是复合属性可以拆分成如下三个属性那么我们可以单独对三个属性进行设置同样也可以使用一个border可以设置如下三个属性设置属性的顺序不影响属性的设置……1border-style用于设置边框的样式例如虚线dashed实线solid等……2border-width用于设置边框的粗细单位是像素px……3border-color用于设置边框的颜色可以使用#或rgb这种计算机中的颜色rgb红绿蓝的方式也可以通过redblack显示指定颜色进行设置 关于计算机中的颜色rgb在第三点QWidget的styleSheet属性中的计算机中的颜色中进行的讲解详情请点击——盒子模型的使用设置标签的边框和内边距如上我们学习了和盒子模型有关的相关属性边框border内边距padding外边距margin接下来我们通过代码来验证并且使用一下这些属性首先我们针对标签设置一下边框和内边距所以接下来我们创建一个项目名为qss_8基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer如上左侧我们拖拽一个标签控件将标签控件显示的文字修改为文本内容我们可以看到对于我们我们修改的文本内容初始状态下是紧贴左侧的即代表初始状态下左内边距是0像素#includewidget.h#includeQApplicationintmain(intargc,char*argv[]){QApplicationa(argc,argv);QString styleQLabel { border: 5px solid red; padding-left: 5px; };a.setStyleSheet(style);Widget w;w.show();returna.exec();}那么我们在main.cpp文件中main函数中通过QApplication设置全局样式此时我们定义一个QString类型的style然后选择器选择QLabel标签控件接下来我们就可以设置边框了边框分为三个属性分别是边框的粗细边框的样式边框的颜色那么我们对于边框的粗细设置为5像素对于边框的样式设置为实线solid对于边框的颜色设置为红色red接下来我们将左内边距设置为5像素即可接下来通过QApplication的应用程序对象a进行调用setStyleSheet将样式style进行传参设置即可运行结果如下如上此时标签的边框的粗细是5像素边框的样式是实线solid边框的颜色是红色red并且边框的左内边距为5像素没有问题#includewidget.h#includeQApplicationintmain(intargc,char*argv[]){QApplicationa(argc,argv);// QString style QLabel { border: 5px solid red; padding-left: 5px; };QString styleQLabel { border: 20px dashed green; padding-left: 50px; };a.setStyleSheet(style);Widget w;w.show();returna.exec();}我们再将标签的边框和内边距再调整一下注释掉原来的样式那么对于边框的粗细设置为20像素对于边框的样式设置为虚线dashed对于边框的颜色设置为绿色green接下来我们将左内边距设置为50像素即可运行结果如下所以如上此时标签的边框的粗细是20像素边框的样式是虚线dashed边框的颜色是绿色green并且边框的左内边距为50像素没有问题其实这里的标签控件内部显示的文本内容其实就是盒子模型中的内容content我们也可以注意到其实这里的左内边距从当初的紧贴左侧0像素逐渐被我们调整为距离左侧5像素到现在的50像素随着左内边距的增大文本内容逐渐向右移换言之我们还可以对上内边距下内边距右内边距进行设置此时就可以达到让标签控件的内容content呈现在标签控件内部的任意位置而对于内边距如果我们不进行手动的设置其实内边距默认是0像素同样的对于外边距边框的粗细的默认值也都是0像素设置按钮的边框和外边距如上我们学习了和盒子模型有关的相关属性边框border内边距padding外边距margin接下来我们通过代码来验证并且使用一下这些属性接下来我们针对按钮设置一下边框和外边距所以接下来我们创建一个项目名为qss_9基类为QWidget派生类为Widget的项目#includewidget.h#includeui_widget.h#includeQPushButtonWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);QPushButton*buttonnewQPushButton(this);button-setGeometry(0,0,100,100);button-setText(按钮);}Widget::~Widget(){deleteui;}接下来我们在Widget的.cpp源文件中在Widget的构造函数中我们创建一个按钮指定父元素为this指针对应的Widget将按钮挂接到对象树上让按钮的生命周期随Widget窗口当Widget窗口关闭释放销毁的时候delete析构释放按钮接下来我们使用setGeometry设置按钮的坐标和尺寸坐标对应的横坐标x为0纵坐标y也为0尺寸对应的宽度为100像素高度为100像素然后接下来使用setText设置按钮显示的文本为按钮 关于位置和尺寸在第一点QWidget的geometry中进行的讲解详情请点击——运行结果如下如上由于按钮的位置对应的横坐标是0纵坐标也是0那么代表此时按钮是位于父控件的左上角也就是按钮的原点位置并且尺寸对应的宽度和高度也都为100像素没有问题#includewidget.h#includeui_widget.h#includeQPushButtonWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);QPushButton*buttonnewQPushButton(this);button-setGeometry(0,0,100,100);button-setText(按钮);button-setStyleSheet(QPushButton{ border: 5px solid red; });}Widget::~Widget(){deleteui;}此时我们通过setStyleSheet对按钮设置样式类型选择器选择按钮控件接下来我们就可以设置按钮的边框了边框分为三个属性分别是边框的粗细边框的样式边框的颜色那么我们对于边框的粗细设置为5像素对于边框的样式设置为实线solid对于边框的颜色设置为红色red即可运行结果如下所以如上此时按钮边框的粗细是5像素边框的样式是实线solid边框的颜色是红色red没有问题#includewidget.h#includeui_widget.h#includeQPushButtonWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);QPushButton*buttonnewQPushButton(this);button-setGeometry(0,0,100,100);button-setText(按钮);button-setStyleSheet(QPushButton{ border: 5px solid red; margin: 20px; });}Widget::~Widget(){deleteui;}那么紧接着对于按钮的样式我们设置按钮的外边距margin为20像素运行结果如下此时如上按钮的外边距为20像素但是小编我怎么感觉不太对呀感觉相比于没有设置按钮的外边距按钮设置了外边距之后好像按钮视觉上给我一种变小了的感觉是的我们仔细来看好像是按钮的位置对应的不是原点了即按钮的位置的横坐标和纵坐标好像不是0了按钮的尺寸对应的宽度和高度好像比100小了是否是真的呢下面我们来验证一下#includewidget.h#includeui_widget.h#includeQPushButton#includeQDebugWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);QPushButton*buttonnewQPushButton(this);button-setGeometry(0,0,100,100);button-setText(按钮);button-setStyleSheet(QPushButton{ border: 5px solid red; margin: 20px; });qDebug()button-geometry();}Widget::~Widget(){deleteui;}别忘了QPushButton继承了QWidget而QWidget中的属性中就有geometry而geometry这个属性中就描述了位置和尺寸由于QPushButton继承了QWidget所以自然的QPushButton也可以有了geometry这个属性自然我们就可以使用日志qDebug()打印进行打印打印设置了外边距之后的按钮geometry属性中的位置和尺寸此时就可以验证出来是否按钮设置了外边距之后位置和尺寸会发生改变运行结果如下如上结果显而易见设置了外边距之后的按钮geometry属性中的位置和尺寸没有发生改变位置对应的横坐标和纵坐标仍然0位于原点位置尺寸对应的宽度和高度仍然为100像素所以给按钮设置了外边距之后按钮控件会呈现给用户一种变小了的视觉效果但是实际上按钮控件的位置和尺寸没有发生变化对于位置仍然是位于原横坐标和原纵坐标对于尺寸仍然是原宽度和原高度所以给按钮设置了外边距虽然按钮控件会给用户呈现一种视觉效果变小了的感觉但是由于按钮的位置和尺寸没有发生变化那么自然的我去点击按钮横坐标为1像素纵坐标也为1像素对应的视觉效果为空的位置此时也就可以点击到按钮因为geometry属性中的位置和尺寸没有发生变化这个空位置仍然属于按钮的范围内二、给按钮设置样式如下蓝字链接在我们学习了QSS之后此时我们就可以对控件进行各种各样的自定义了接下来我们就对按钮的样式进行设置所以接下来我们创建一个项目名为qss_10基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer1【Qt】常用控件七QRadioButtonQCheckBox的属性和使用2【Qt】界面优化一QSS的介绍与基本使用样式与代码分离3【Qt】界面优化二类型选择器类选择器ID选择器并集选择器子控件选择器伪类选择器的介绍和使用此时我们拖拽左侧按钮控件将按钮控件显示的文本设置修改为按钮接下来右击按钮控件选择改变样式表使用QSS对按钮的样式进行编辑所以如上此时我们使用类型选择器选中按钮QPushButton然后对于按钮显示的字体font-size设置为20像素接下来我们就可以设置边框了边框的粗细我们设置为2像素边框的样式我们设置为实线solid接下来就要设置边框的颜色了此时我们可以点击编辑样式表的上方添加颜色此时就会弹出一个颜色对话框此时我们选择一个我们想要设定的边框颜色之后点击确定即可生成一个rgb形式的颜色1关于像素的讲解在第八点Qt坐标系的认识中的第13小点中进行的讲解详情请点击——2【Qt】Qt窗口七QColorDialog颜色对话框QFileDialog文件对话框的使用3关于计算机中的颜色rgb在第三点QWidget的styleSheet属性中的计算机中的颜色中进行的讲解详情请点击——QPushButton{font-size:20px;border:2px solidrgb(255,255,255);border-radius:10px;background-color:rgb(255,170,255);color:rgb(255,255,255)}如上我们看到当我们设置了按钮显示的文本大小以及边框之后按钮的样式就发生了改变此时按钮默认的样式就被覆盖了其实我们还可以使用border-radius设置圆角矩形单位是像素值其实圆角矩形就是可以将矩形的四个角设置为圆形的设置的像素值越大矩形的角越圆我们这里设置为10像素即可接下来我们使用background-color设置背景色那么我们同样点击添加颜色选择我们自己喜欢的颜色即可最后我们使用color设置按钮显示的文字颜色即可同样的点击添加颜色选择我们自己喜欢的颜色即可运行结果如下所以此时按钮显示的样式即字体大小边框圆角矩形背景色显示的文字颜色就为我们想要的了由于按钮原有的默认样式我们点击按钮会有背景色的调整但是由于我们自定义设置了按钮的样式那么按钮默认的样式就被覆盖了所以此时小编点击按钮之后没有任何背景色的变化所以我们还想要我们自定义的按钮被点击之后进行背景色的改变如下QPushButton{font-size:20px;border:2px solidrgb(255,255,255);border-radius:10px;background-color:rgb(255,170,255);color:rgb(255,255,255);}QPushButton:pressed{background-color:rgb(207,232,255);}所以此时我们就可以使用状态选择器QPushButton:pressed去进行选择这个按钮控件被鼠标按压的状态当按钮控件被鼠标按压的时候此时我们设置背景色background-color点击添加颜色选择我们自己喜欢的颜色即可运行结果如下所以此时鼠标按压按钮控件此时按钮控件的背景色就会发生改变了所以此时我们就实现了使用QSS对按钮的样式进行设置达到了自定义按钮的效果了所以此时我们归纳一下上面在自定义按钮中使用到的样式属性1font-size设置字体大小2border-radius设置圆角矩形3background-color设置背景色4color设置文字颜色三、给复选框的样式进行设置同样的我们也可以使用QSS对复选框QCheckBox进行设置样式所以接下来我们创建一个项目名为qss_11基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer1【Qt】常用控件七QRadioButtonQCheckBox的属性和使用此时我们拖拽左侧复选框控件将复选框控件显示的文本设置修改为复选框接下来右击复选框控件选择改变样式表使用QSS对复选框的样式进行编辑而我们想要改变复选框的什么样式呢改变复选框的显示字体的大小改变复选框中勾选框的大小最关键的是我们想要改变这个勾选框不同状态下的图标如上小编已经在阿里巴巴矢量图标库中找到了1对于是否勾选复选框显示黑色系图标当勾选复选框的时候勾选框显示的图标为图一当没有勾选复选框的时候勾选框显示的图标为图二2对于鼠标进入复选框的时候显示蓝色系图标如果勾选了复选框那么勾选框显示的图标为图二如果没有勾选复选框那么勾选框显示的图标为图五3对于鼠标按压复选框的时候显示红色系图标如果勾选了复选框那么勾选框显示的图标为图三如果没有勾选复选框那么勾选框显示的图标为图六所以既然这么多的图标此时我们要在项目的QSS中进行使用那么就要将图标导入到项目中此时我们就要使用到qrc机制 关于qrc机制在第四点qrc机制中进行的讲解详情请点击——观察到如上界面代表我们此时将图标导入到qrc成功QCheckBox{font-size:40px;}QCheckBox::indicator{width:40px;height:40px;}所以此时我们使用状态选择器选择QCheckBox复选框接下来设置显示的字体大小font-size为40像素然后我们还要设置复选框中勾选框的大小而复选框中的勾选框本质上是复选框的一个子控件所以此时我们就需要使用到子控件选择器QCheckBox::indicator选择复选框中的勾选框这个子控件那么想要改变一个控件的大小本质上就是改变一个控件的尺寸尺寸分为宽度和高度所以这里我们将宽度weight和高度height都设置为40像素即可1关于位置尺寸对应的宽度和高度在第一点QWidget的geometry中进行的讲解详情请点击——此时我们来看好像复选框左边的勾选框的默认图标由于被我们放的太大像素不够清晰了但是影响不大我们要使用我们自己的图标对勾选框的图标进行替换的那么接下来我们就要开始添加图标了所以此时我们先使用子控件选择器选中复选框的勾选框这个子控件要设置的是选中状态所以我们使用伪态选择器进行选择复选框被选中的状态:checked然后再使用图像image进行设置对于图像设置的值我们可以手动填写url执行图标的路径吗可以毫无疑问肯定可以但是人总会出错的尤其是对于图标路径不好写图标名字较长的情况容易拼写错误造成图标显示不出来的情况所以此时我们点击编辑样式表的左上角的添加资源然后继续点击resource root点击黑色的勾选图标即可进行给image图标指定url文件路径添加图标让Qt帮我们url文件的路径自动生成还是挺香的此时Qt就可以确保不会出现拼写错误QCheckBox{font-size:40px;}QCheckBox::indicator{width:40px;height:40px;}QCheckBox::indicator:checked{image:url(:/checkbox-checked.png);}QCheckBox::indicator:unchecked{image:url(:/checkbox-unchecked.png);}QCheckBox::indicator:checked:hover{image:url(:/checkbox-checked_hover.png);}QCheckBox::indicator:unchecked:hover{image:url(:/checkbox-unchecked_hover.png);}QCheckBox::indicator:checked:pressed{image:url(:/checkbox-checked_pressed.png);}QCheckBox::indicator:unchecked:pressed{image:url(:/checkbox-unchecked_pressed.png);}所以如上对于剩下的图标状态的添加我们按照如下规则如法炮制的进行添加即可需要注意的是伪态选择器选择复选框被选中的状态是:checked伪态选择器选择复选框没有被选中的状态是:unchecked伪态选择器选择复选框被进入的状态是:hover伪态选择器选择复选框被按压的状态是:pressed1对于是否勾选复选框显示黑色系图标当勾选复选框的时候勾选框显示的图标为图一当没有勾选复选框的时候勾选框显示的图标为图二2对于鼠标进入复选框的时候显示蓝色系图标如果勾选了复选框那么勾选框显示的图标为图二如果没有勾选复选框那么勾选框显示的图标为图五3对于鼠标按压复选框的时候显示红色系图标如果勾选了复选框那么勾选框显示的图标为图三如果没有勾选复选框那么勾选框显示的图标为图六运行结果如下所以结果如上当没有勾选复选框的时候勾选框显示的图标为图四没有问题当复选框还没有勾选的时候鼠标进入复选框的时候勾选框显示的图标为图五没有问题当复选框被勾选的时候勾选框显示的图标为图一没有问题当复选框被勾选的时候鼠标进入复选框的时候勾选框显示的图标为图二没有问题当复选框被勾选的时候鼠标按压复选框勾选框显示的图标为图三没有问题当复选框没有被勾选的时候鼠标按压复选框勾选框显示的图标为图六没有问题所以此时小编来归纳一下在自定义复选框中用到的样式属性子控件选择器伪态选择器1::indicator子控件选择器用于选择复选框的勾选框2:hover伪态选择器用于选择控件被鼠标进入的状态3:pressed伪态选择器用于选择控件被鼠标按压的状态4:checked伪态选择器用于选择QCheckedBox被勾选的状态5:unchecked伪态选择器用于选择QCheckedBox没有被勾选的状态6width用于设置控件宽度的样式属性7height用于设置控件高度的样式属性8image用于设置控件图标的样式属性需要给对应的值设置url(文件路径)那么同样的道理既然对于复选框我们可以自定义复选框设置复选框处于不同状态下的图标同样的那么对于单选按钮我们也可以采用相同的方式进行设置单选按钮处于不同状态下的图标过程几乎一致这里小编就不再演示了感兴趣的读者友友可以自行尝试四、给单行输入框的样式进行设置同样的我们也可以使用QSS对单行输入框QLineEdit进行设置样式所以接下来我们创建一个项目名为qss_12基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer1【Qt】常用控件十QLineEditQTextEdit的属性和使用此时我们拖拽左侧单行输入框控件接下来右击单行输入框控件选择改变样式表使用QSS对单行输入框的样式进行编辑QLineEdit{border-width:2px;border-color:rgb(255,255,255);border-style:solid;border-radius:20px;padding-left:10px;background-color:rgb(255,170,255);color:rgb(255,255,255);font-size:20px;}所以此时我们先使用状态选择器选择单行输入框QLineEdit然后就可以进行设置样式属性了首先我们来设置边框border这次我们就不使用边框border对边框的三个样式属性进行一并设置了而是针对边框的三个样式属性进行单独的设置所以此时我们对于边框的粗细border-width设置为20像素对于边框的颜色border-color设置为我们想要的纯白色对于边框的样式border-style我们设置为实线solid接下来我们继续设置边框的圆角矩形border-radius为20像素然后由于此时边框都是圆角矩形了所以对于单行输入框内的文本我们并不想让文本内容贴紧单行输入框的左侧而是留出10像素的距离来这样更为美观一些所以此时我们将单行输入框的左内边距padding-left设置为10像素即可接下来我们将单行输入框的背景色background-color设置为我们想要的淡紫色将单行输入框要显示的文本颜色color设置为我们想要的纯白色然后将单行输入框要显示的字体大小font-size设置为20像素即可运行结果如下如上此时对于单行输入框我们设置的各个样式属性都没有问题但是感觉如果我们使用鼠标选中文本的时候此时的蓝色背景和白色字体颜色有点不符合这个淡紫色的气质所以我们该如何进行调整呢QLineEdit{border-width:2px;border-color:rgb(255,255,255);border-style:solid;border-radius:20px;padding-left:10px;background-color:rgb(255,170,255);color:rgb(255,255,255);font-size:20px;selection-background-color:rgb(170,170,255);selection-color:rgb(255,0,0);}那么如上我们可以使用selection-background-color设置选中文字的背景色为淡蓝色使用selection-color设置选中文字显示的颜色为红色运行结果如下此时就比较好看了当然其实这里对于选中的文本如果显示的颜色为白色更为好看但是这里为了讲解需要我们还是将这个选中的文本显示的颜色设置为红色当然对于审美这个东西怎么样设置很好看这就需要一点艺术细胞了各位读者友友也可以自定设置自己喜欢的样式下面小编就来归纳一下自定义单行输入框中使用的样式属性1border-width用于设置边框的粗细/宽度2border-color用于设置边框的颜色3border-style用于设置边框的样式/风格4border-radius用于设置圆角矩形也就是边框的圆角像素越大边角越圆5padding-left用于设置边框的左内距6color用于设置文本颜色7background-color用于设置背景颜色8selection-background-color用于设置选中文本的背景颜色9selection-color用于设置选中文本显示的颜色总结以上就是今天的博客内容啦希望对读者朋友们有帮助水滴石穿坚持就是胜利读者朋友们可以点个关注点赞收藏加关注找到小编不迷路