做公司网站需要多,python是什么意思,wordpress 4.5 多站点,网站开发与技术维护样式表的组成
样式表由两大元素组成#xff1a;选择器和声明。选择器实际上可以理解为对象#xff0c;声明则是对该对象的属性的设置。
样式表的使用
方法一#xff1a;在代码中调用setStyleSheet()来设置样式#xff1b; 方法二#xff1a;通过加载qss文件来设置样式。…样式表的组成
样式表由两大元素组成选择器和声明。选择器实际上可以理解为对象声明则是对该对象的属性的设置。
样式表的使用
方法一在代码中调用setStyleSheet()来设置样式 方法二通过加载qss文件来设置样式。
样式表的简单使用介绍
setStyleSheet()的简单应用 【1】通过QApplication的对象调用 1创建QSS文件——myqss.qss; 创建文本文件存入源文件所在的同级目录下修改其文件名为myqss.qss。 2用QtCreate打开该工程在项目名上右键点击添加新文件选择Qt资源文件按照提示创建资源文件 3在创建的资源文件上右键选择添加前缀之后添加该项目所用到的资源文件即图片添加之后保存 4在main.cpp文件中添加如下代码。
#include QApplication
#include QFile
int main(int argc,char *argv[])
{QApplication app(argc,argv);QFile file(.\myqss.qss);/*QSS文件所在的路径*/file.open(QIODevice::ReadOnly);if(file.isOpen()){QString strFile file.readAll();app.setStyleSheet(strFile);file.close();/*记得关闭QSS文件*/}return app.exec();
}
备注 此方法通过在主函数中读取QSS文件来设置界面的样式可以将整个项目中各界面对应的样式设置都都在一个QSS文件下
qss文件的大体介绍
只有一个界面的QSS文件 内容形式控件类名#objectName{ … } 如只有一个界面界面上有一个QPushButton控件在其对应的qss文件中可以编写其内容为下
/*创建应用程序基类为QWidget,在其ui文件中将QWidget的objectName更改为WidgetPainter拖入控件QPushButton将其ObjectName更改为pushButtonPainter现在qss文件中设置按钮的样式按钮未被点击的状态和按钮被点击的状态*/
/*画笔未被点击*/
QWidget#WidgetPainterQPushButton#pushButtonPainter{background-color:transparent;image:url(:/image/painterUnchecked.png);
}/*画笔被点击*/
QWidget#WidgetPainterQPushButton#pushButtonPainter:pressed{background-color:transparent;image:url(:/image/painterChecked.png);
}因为整个应用程序只有一个界面可以将整个项目中所有控件的样式设置都写到一个qss文件中在main函数中加载qss文件给界面设置样式。 2. 多界面的QSS文件 可以将每一个界面写一个qss文件然后在各界面对应的类中的构造函数里加载qss文件也可以将所有界面的样式设置写到一个qss文件中在main函数中加载qss文件。
/*将信号源名字界面与系统设置界面的样式设置写道同一个qss文件中对于部件间关系的归属必须锊清否则会达不到预想的界面效果下面是在一个QWidget(objectName为SignalSource)上拖入一个QWidget(objectName为widget_title)再在objectName为widget_title的QWidget上拖入标签QLabel和按钮QPushButton,即QLabel和QPushButton为widget_title的直接子部件widget_title为SignalSource的直接子部件之间子部件之间使用,控件类与控件的名称之间使用#*/
/***************************信号源名字子页面**************/
/*页面的背景*/
QWidget#SignalSource{background-color:#FF2D3274;
}/*页面标题栏*/
QWidget#SignalSourceQWidget#widget_title{background-color:#FF262B63;
}/*信号源的名字*/
QWidget#widget_titleQLabel#label_name{color: rgb(255, 255, 255);font-size:16px;font-family:Microsoft YaHei;
}/*控制按钮*/
QWidget#widget_titleQPushButton#pushButton_control{background-color:transparent;image:url(:/new/prefix1/images/contrl.png);border-style:flat;
}/*控制按钮被点击状态*/
QWidget#widget_titleQPushButton#pushButton_control:checked{image:url(:/new/prefix1/images/finishControl.png);
}/*上屏按钮*/
QWidget#widget_titleQPushButton#pushButton_upscr{background-color:transparent;image:url(:/new/prefix1/images/upsrc.png);border-style:flat;
}/*上屏按钮被点击状态*/
QWidget#widget_titleQPushButton#pushButton_upscr:checked{image:url(:/new/prefix1/images/downscr.png);
}/*设置按钮*/
QWidget#widget_titleQPushButton#pushButton_set{ background-color:transparent;image:url(:/new/prefix1/images/seting.png);border-style:flat;
}/*设置按钮鼠标按下状态*/
QWidget#widget_titleQPushButton#pushButton_set:checked{image:url(:/new/prefix1/images/seting2.png);
}/*全屏按钮*/
QWidget#widget_titleQPushButton#pushButton_fullscr{background-color:transparent;image:url(:/new/prefix1/images/fullscr.png);border-style:flat;
}/*全屏按钮鼠标按下状态*/
QWidget#widget_titleQPushButton#pushButton_fullscr:checked{image:url(:/new/prefix1/images/fullsrc2.png);
}/*******************系统设置****************/
/*整体窗口背景#FF2E3274*/
QDialog#SystemSet{background-color:#FF2E3274;
/* box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);*/border-radius: 5px 5px 5px 5px;
}/*窗体头背景*/
QDialog#SystemSetQWidget#widget_title{background-color:#FF262B63;
}/*系统设置标题*/
QWidget#widget_titleQLabel#label_title{color:#FFFFFFFF;font-family:MicrosoftYaHei;font-size:16px;
}/*系统设置图标*/
QWidget#widget_titleQLabel#label_sysSet{background-color:transparent;image:url(:/new/prefix1/images/sysset.png);
}/*默认设置按钮*/
QWidget#widget_titleQPushButton#pushButton_defaultset{color:#FFFFFFFF;font-family:MicrosoftYaHei;font-size:16px; background-color:#FF282C66;border-top-left-radius:5px;border-top-right-radius:5px;border-style:flat;
}/*默认设置按钮被点击*/
QWidget#widget_titleQPushButton#pushButton_defaultset:pressed{color:#FFFFFFFF;background-color:#FF008AFF;font-family:MicrosoftYaHei;font-size:16px;
}/*默认设置按钮旁边白线*/
QWidget#widget_titleQLabel#label1{background-color:#FFFFFF; border-radius: 1px; opacity: 0.5;
}/*高级设置按钮*/
QWidget#widget_titleQPushButton#pushButton_advanceset{color:#FFFFFFFF;font-family:MicrosoftYaHei;font-size:16px; background-color: #FF282C66;border-top-left-radius:5px;border-top-right-radius:5px;border-style:flat;
}/*高级设置按钮被点击*/
QWidget#widget_titleQPushButton#pushButton_advanceset:pressed{color:#FFFFFFFF;background-color:#FF008AFF;font-family:MicrosoftYaHei;font-size:16px;
}/*高级设置按钮旁边白线*/
QWidget#widget_titleQLabel#label2{background-color:#FFFFFF; border-radius: 1px; opacity: 0.5;
}/*ip设置按钮*/
QWidget#widget_titleQPushButton#pushButton_ipset{color:#FFFFFFFF;font-family:MicrosoftYaHei;font-size:16px; background-color: #FF282C66; border-top-left-radius:5px;border-top-right-radius:5px;border-style:flat;
}/*ip设置按钮被点击*/
QWidget#widget_titleQPushButton#pushButton_ipset:pressed{color:#FFFFFFFF;background-color:#FF008AFF;font-family:MicrosoftYaHei;font-size:16px;
}QWidgetQPushButton#pushButton_close{background-color:transparent;image:url(:/new/prefix1/images/close.png);
}以上是对QSS使用过程中的一些简单的总结。涉及更多的内容还需自己挖掘个人理解在多界面共用一个qss文件时部件之间关系十分重要。 在使用图片作为整个界面的背景图片时需要在QWidget中拖入一个QWidget在拖入的QWidget中设置背景透明背景图片并且需要将整个界面的QWidget设置为透明无标题否则达不到想要的效果 如下面的qss文件中所写
/*提示窗口的整体需要加载一张图片先在QDialog中拖入控件QWidget(objectName为widget)在程序设置QDialog的没有标题和背景透明在qss文件中编写widget背景透明加载背景图片*/
/****************通知提示窗口*************/
/*界面的整体背景rgba(0,255,255,255)*/
QDialog#InformDialogQWidget#widget{ background-color:transparent;background-image:url(:/new/prefix1/images/informbackground.png);
}image,backgroun-image,border-image的区别image的不会改变图片的大小不会拉伸和压缩图片backgroun-image一般用于整个控件的背景图片无法随部件的大小自动缩放border-image为可以随部件的大小自动缩放
子部件的样式设置
控件的子控件设置样式简单的贴一些自己之前做过的更多还需自己学习。
/*QComboBox控件的子部件的简单设置下拉的界面下拉界面每一项下拉按钮的样式QSpinBox,QCheckBox,QRadioButton子部件的设置*/
/*下拉按钮*/
QWidget#systemdefaltSetQComboBox{ background-color: #121650;border-radius: 6px;font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF;
}/*下拉按钮*/
QWidget#systemdefaltSetQComboBox::down-arrow{ image:url(:/new/prefix1/image/comboxDown.png);
}/*下拉按钮隐藏边框*/
QWidget#systemdefaltSetQComboBox::drop-down{ border:none;top:4px;left:-15px;
}/*下拉窗体*/
QWidget#systemdefaltSetQComboBox QAbstractItemView{ background-color:#55557f;outline: 1px solid #ffaa7f; /* 选定项的虚框 */selection-background-color:#121650;color:#FFFFFF;
}/*下拉窗体每一项*/
QWidget#systemdefaltSetQComboBox QAbstractItemView::item{ height:50px;
}
/*行列按钮最初形态#spinBoxrow*/
advanceSetQSpinBox{ background-color: #12164F;border-radius: 6px; font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF;
}/*行列按钮被点击之后整体轮廓设置*/
advanceSetQSpinBox:pressed{ background-color: #121650;border: 1px solid #00FFFF;border-radius: 6px;
}/*行列按钮上箭头没有被点击的状态:unchecked*/
advanceSetQSpinBox::up-button{ image:url(:/new/prefix1/image/spinupbtnUnchecked.png);
}/*行列按钮下箭头没有被点击的状态:unchecked*/
advanceSetQSpinBox::down-button{ image:url(:/new/prefix1/image/spindownbtnUnchecked.png);
}/*行列按钮上箭头被点击的状态*/
advanceSetQSpinBox::up-button:pressed{ image:url(:/new/prefix1/image/spinupbtnChecked.png); border:none;
}/*行列按钮下箭头被点击的状态*/
advanceSetQSpinBox::down-button:pressed{ image:url(:/new/prefix1/image/spindownbtnChecked.png); border:none;
}/*此界面上所有的单选按钮最初状态*/
advanceSetQRadioButton{font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF;
}/*此界面上所有的单选按钮的子部件的最初状态未点击状态*/
advanceSetQRadioButton::indicator{image:url(:/new/prefix1/image/radioUnchecked.png);
}/*此界面上所有的单选按钮的子部件的被点击后的状态点击状态*/
advanceSetQRadioButton::indicator:checked{image:url(:/new/prefix1/image/radioChecked.png);
}/*此界面上所有的复选框最初时的状态*/
advanceSetQCheckBox{font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF;
}/*此界面上所有的复选框子部件未被点击时的状态*/
advanceSetQCheckBox::indicator{background-color:transparent;image:url(:/new/prefix1/image/checkbtnUnchecked.png);
}/*此界面上所有的复选框子部件被点击时的状态*/
advanceSetQCheckBox::indicator:checked{image:url(:/new/prefix1/image/checkbtnChecked.png);
}多个相同类型的控件的样式相同
若同一类型的控件的样式要求一致可以一起设置。
界面上有多个相同类型的控件但是有几个控件的样式要求一致可以采取如下设置
/*界面中还有其它的QPushButton但是有两个QPushButton的样式设置要求一致可以一起设置*/
/*确定按钮,取消按钮*/
QWidget#widgetQPushButton#pushButton_confirm,QPushButton#pushButton_cancel{ font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF;background-color:#FF080C3E; border: 1px solid #FFFFFF;border-radius: 6px;
}/*确定按钮,取消按钮被点击状态*/
QWidget#widgetQPushButton#pushButton_confirm:pressed,QPushButton#pushButton_cancel:pressed{font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #000438; background-color: #00FFFF;opacity: 0.9;border-radius: 6px;
}2.若界面上所有同一类型的控件的样式都要求设置一致可以不用指明控件名称直接设置。
/*界面上所有的QPushButton控件的样式一致*/
InformDialogQPushButton{color:#FFFFFF;background-color:#FF2D3274;border: 1px solid #FFFFFF;border-radius: 6px;
}/*取消按钮被点击状态*/
InformDialogQPushButton:pressed{background-color: #008AFF;border-radius: 6px;
}
