qss美化___按钮
qss应用实例

qss应用实例
QSS,即Qt Stylesheet,是一种用于定制Qt应用程序界面的强大工具。
它类似于Web 开发中的CSS,允许开发者通过样式表文件来定义Qt控件的外观和布局。
下面是一个QSS 的应用实例,展示了如何使用QSS来美化一个简单的Qt窗口。
假设我们有一个Qt应用程序,包含一个主窗口和一些基本的控件,如按钮、文本框和标签。
我们可以使用QSS来改变这些控件的默认外观,使它们更加符合我们的设计要求。
首先,我们可以为整个应用程序设置一个全局的样式表。
这可以通过在Qt应用程序的代码中加载一个QSS文件来实现。
例如,我们可以创建一个名为"styles.qss"的文件,并在其中定义一些样式规则,如设置按钮的背景色、边框样式和字体大小等。
然后,在Qt应用程序的初始化代码中,我们可以使用QFile和QTextStream来读取并加载这个QSS文件。
一旦样式表被加载,它就会被应用到应用程序中的所有控件上。
除了全局样式表外,QSS还支持为特定的控件或控件类型定义样式。
例如,我们可以为所有的按钮定义一个鼠标悬停效果,使得当用户的鼠标悬停在按钮上时,按钮的背景色会发生变化。
这可以通过在QSS文件中添加相应的样式规则来实现。
此外,QSS还支持选择器的概念,允许我们根据控件的属性或状态来应用不同的样式。
例如,我们可以使用选择器来为处于禁用状态的按钮设置不同的背景色和字体颜色。
总的来说,QSS是一个非常灵活和强大的工具,可以帮助我们轻松地定制Qt应用程序的界面。
通过合理地使用QSS,我们可以创建出美观、易用且具有高度个性化的Qt应用程序。
Qt Style Sheet实践(三):QCheckBox和QRadioButton

导读单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素。
单选按钮只允许用户在一组选项中选择一个,且当其中一个被选中的时候,按钮组中的其他单选按钮自动取消。
复选框则可以让用户同时选中多个选项,这在多项选择的情况下非常有用。
此外,复选框经过设置还具备第三种状态:未决状态(partially checked)。
单选按钮和复选框应用广泛,在WEB表单、软件配置界面常常是不可或缺的元素。
这篇博文主要讲述Qt中单选按钮和复选框如何通过样式表进行外观定制。
基本实现单选按钮(QRadioButton)的基本特征是互斥。
当一个按钮选中,系统自动取消其他按钮的选中状态。
当然,前提是这些按钮都要放置同一个父组件(Parent Widget)中。
我们简单的用Qt Designer拖个按钮组,按Ctrl+R 进行预览:效果还不错,朴素简单。
在这里,我们将一组单选按钮全部放到了一个QGroupBox里面。
这样,当一个按钮选中的时候其他选中的按钮将被自动取消。
但是缺点是:如果我们想要获取当前被选中的按钮是哪一个,不太方便判断。
一个简单而粗暴的方法是,循环遍历每个单选按钮的状态进行检查。
显然这样的方法太笨拙。
另外的一个方法是,将这一组单选按钮全部添加到QButtonGroup中去。
QButtonGroup是一个容器组件,在Qt Designer中我们找不到这个组件,因为它是不可见的,仅仅是在后台工作的无名英雄。
因此,我们需要做的是将所有的单选按钮添加进去,之后通过QButtonGroup的方法可以快速查询按钮状态。
具体参见《QT中获取选中的radioButton的两种方法》及《QT 中根据ID设置radio按钮》。
如何进行样式定制呢?QRadioButton定制分成两个两个部分:选中按钮和文本。
其中我们重点要定制的就是选中按钮,为此我们需要准备一些状态图片。
看看Qt帮助手册的内容:QRadioButton::indicator { # indicator是一个子组件,这里的width和height分别指定按钮的宽和高width: 13px;height: 13px;}QRadioButton::indicator::unchecked { # 未选中时状态,也即正常状态image: url(:/images/radiobutton_unchecked.png);}QRadioButton::indicator:unchecked:hover { # 未选中时,鼠标悬停时的状态image: url(:/images/radiobutton_unchecked_hover.png);}QRadioButton::indicator:unchecked:pressed { #未选中时,按钮下按时的状态image: url(:/images/radiobutton_unchecked_pressed.png);}QRadioButton::indicator::checked { # 按钮选中时的状态image: url(:/images/radiobutton_checked.png);}QRadioButton::indicator:checked:hover { # 按钮选中时,鼠标悬停状态image: url(:/images/radiobutton_checked_hover.png);}QRadioButton::indicator:checked:pressed { # 按钮选中时,鼠标下按时的状态image: url(:/images/radiobutton_checked_pressed.png);}看上面的几条样式语句,我们显然要准备六张图片。
qss的用法

QSS,即Qt样式表,类似于CSS,用于定制Qt GUI应用程序的外观和感觉。
QSS提供了一种灵活的方式来定义和控制应用程序的视觉表现,包括颜色、字体、边框、阴影等。
以下是QSS的基本用法:1. 全局QSS文件方式:全局QSS文件是一个文本文件,其中包含样式表的声明。
你可以将这些声明放入一个文件中,然后在程序启动时加载这个文件。
这样,你可以在一个地方管理所有的样式信息,便于管理和维护。
例如:```cppQFile file(":/qss/default.qss");file.open(QFile::ReadOnly);QTextStream filetext(&file);QString styleSheet = filetext.readAll();qApp->setStyleSheet(styleSheet);```2. 在程序中为某个具体的控件设置样式:如果你想为某个特定的控件设置样式,你可以直接在控件上调用setStyleSheet()方法。
例如:```cppui->okBtn->setStyleSheet("font-size:30px");```上述代码会为"okBtn"设置字体大小为30px。
如果用户在程序中设置了控件的qss样式,那么它将覆盖全局样式。
3. QSS的语法规则:QSS的语法几乎与CSS相同。
一条QSS规则包括选择器和一个声明块。
声明块包含一个或多个声明,每个声明都包含一个属性和一个值。
例如:```cssQPushButton {background-color: red;color: white;}```上述代码将所有QPushButton的背景颜色设置为红色,文字颜色设置为白色。
请注意,当你在使用QSS时,要遵循一些规则和注意事项,例如优先使用更具体的选择器,遵循CSS规则(注释只能用/**/,不能使用//或#),避免伪状态的冒号左右有空格等。
qss用法

qss用法QSS(Qt样式表)是一种CSS样式的变体,用于Qt软件的外观定制。
QSS允许开发人员为窗口、部件和布局定义样式,使程序更美观、更易于使用。
以下是关于QSS用法的一些要点:一、定义QSS样式QSS样式可以通过代码、外部文件或控件属性来定义。
程序中,通过QWidget::setStyleSheet(QString styleSheet)来为窗口和部件设置QSS样式。
QSS文件可以通过QFile和QTextStream读取和编辑,也可以从外部加载。
二、QSS选择器QSS选择器用于选择需要样式化的部件,类似于CSS选择器。
选择器可使用元素名、类名、ID、伪类和伪元素等内容。
例如,以下代码将样式应用于具有“myButton”类的QPushButton:QPushButton.myButton {background-color: gray;}三、QSS属性QSS中的属性定义了部件的外观和行为。
可以设置的属性数量多达数百种,以下是一些属性的演示:背景颜色:background-color: #f0f0f0;background-image: url(images/background.png);字体:font-family: 微软雅黑;font-size: 15pt;边框:border: 1px solid gray;border-radius: 5px;布局:padding: 10px;margin: 5px;四、应用QSS到窗体将QSS文件加载到窗体或进程级别,可以将样式应用于整个应用程序或窗体。
以下是一个加载QSS文件的示例:QFile file(":/qss/qssFile.qss");file.open(QFile::ReadOnly);QString styleSheet = QLatin1String(file.readAll());qApp->setStyleSheet(styleSheet);五、Qt内置样式Qt内置了多种样式,包括开发人员不需要手动编写的样式。
qss的用法 -回复

qss的用法-回复什么是QSS?QSS是一种样式表语言,用于定义Qt应用程序的外观。
它是Qt Style Sheets的缩写,类似于HTML的CSS。
使用QSS可以为Qt界面元素设置样式,包括窗口、按钮、标签等。
QSS的基本语法QSS使用类似CSS的选择器语法来选择和设置元素的样式。
下面是QSS 的基本语法结构:选择器{属性: 值;属性: 值;...}选择器用于选择Qt应用程序中的特定元素,以便对其进行样式定义。
例如,可以使用选择器选择应用程序的窗口部件,或者选择按钮和标签等小部件。
属性-值对用于设置选定元素的样式。
例如,可以设置背景颜色、字体样式、边框等。
QSS的使用方式QSS可以通过以下两种方式使用:1. 内联方式内联方式将QSS代码嵌入到Qt代码中,以QWidget的setStyleSheet()函数为例,语法如下:widget->setStyleSheet("QSS代码");这种方式适用于仅需要设置一个或几个元素的样式时。
2. 外部文件方式外部文件方式将QSS代码保存在独立的文本文件中,然后在Qt代码中通过文件路径引用该文件。
以QApplication的setStyleSheet()函数为例,语法如下:qApp->setStyleSheet("文件路径");使用外部文件方式的好处是可以在不改动程序代码的情况下更新样式。
QSS的选择器QSS支持多种选择器,用于选择特定的Qt元素。
下面是一些常用的选择器示例:- 类选择器:使用控件的类名来选择元素。
例如,QPushButton选择所有按钮。
- ID选择器:使用控件的ID属性值来选择元素。
例如,#myButton将选择ID为myButton的按钮。
- 伪类选择器:用于选择控件的特定状态。
例如,QPushButton:checked 选择选中状态的按钮。
- 后代选择器:用于选择控件的后代元素。
例如,QGroupBox QPushButton选择QGroupBox下的所有按钮。
clion qss 语法

clion qss 语法
QSS(Qt Style Sheets)是一种基于CSS的样式表语言,用于定义Qt应用程序的外观和样式。
在CLion中,QSS语法可以用于定制化和美化Qt应用程序的界面。
QSS语法与CSS非常相似,但有一些特定于Qt的扩展。
以下是一些常用的QSS语法:
1. 选择器,可以使用类似于CSS的选择器来选择Qt控件,例如使用`QPushButton`选择所有的按钮控件。
2. 属性设置,使用类似于CSS的属性设置语法,例如
`background-color: red;`可以设置控件的背景颜色为红色。
3. 伪状态,Qt控件支持各种伪状态,例如`hover`(鼠标悬停)、`pressed`(鼠标按下)等,可以通过QSS来设置这些伪状态下的样式。
4. 子控件选择,某些Qt控件包含多个子控件,可以使用QSS 来选择和设置这些子控件的样式。
5. 资源文件引用,可以使用QSS来引用外部的资源文件,例如图片等。
在CLion中,可以通过在Qt应用程序的代码中使用
`setStyleSheet`方法来应用QSS样式表,从而实现界面的定制化。
在编写QSS样式表时,需要遵循QSS的语法规则,包括正确的选择器、属性设置和伪状态的使用。
同时,也可以通过CLion的代码提示和语法高亮功能来辅助编写QSS样式表,提高开发效率。
总的来说,QSS语法是用于定制化Qt应用程序界面样式的一种强大工具,通过在CLion中合理使用QSS语法,可以有效地实现界面的美化和定制化。
希望这些信息能够帮助你更好地理解CLion中的QSS语法。
用CSS创建一个美观的按钮(button)

⽤CSS创建⼀个美观的按钮(button)<button>标签默认的按钮很丑,我们要想把它变得美观,可以像这样做:⽰例代码:button.html<!DOCTYPE html><html><head><meta charset="utf-8"><title>HTML CSS Exercise CSS3 button</title><style type="text/css">button {width: 200px;padding:8px;background-color: #428bca;border-color: #357ebd;color: #fff;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */text-align: center;vertical-align: middle;border: 1px solid transparent;font-weight: 900;font-size:125%}</style></head><body><button>Subscribe Now</button></body></html>⽰例效果:怎么样?是不是好看了许多?这⾥主要应⽤了圆⾓这个概念:border-radius这⾥有许多关于圆⾓的应⽤:button{border:solid 10px #4d4e53;border-radius:10px 40px 40px 10px;} ⽰例效果:border-radius: border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius (左上,右上,右下,左下==》顺时针)button {width: 200px;padding:8px;background-color: #f7f8f9;color: #428bca;text-align: center;vertical-align: middle;font-weight: 900;font-size:125%}button{border:groove 1em red;border-radius:2em;} ==>这⾥的 border 的属性:button {padding:8px;color: #428bca;text-align: center;vertical-align: middle; font-weight: 900;font-size:125%}button{background: gold;border: ridge gold;border-radius: 13em/3em; width: 200px;height: 100px;} ==>button {padding:8px;color: #428bca;text-align: center;vertical-align: middle; font-weight: 900;font-size:125%}button{background: gold;border: none;border-radius: 40px 10px; width: 200px;height: 100px;} ==>button {padding:8px;color: #428bca;text-align: center;vertical-align: middle; font-weight: 900;font-size:125%}button{background: gold;border: none;border-radius: 50%;width: 200px;height: 100px;} ==>。
Qt精美的button合集

Qt精美的button合集常⽤精美buttonqss样式如下:QPushButton#pushButton{background-color:rgb(134,183,200);border:2px solid #5F92B2;border-radius:5px;color:white}QPushButton#pushButton:hover{background-color:rgb(0,130,150);border:2px solid #5F92B2;border-radius:5px;color:white;}QPushButton#pushButton:hover:pressed{background-color:rgb(85,170,255);border:2px solid #3C80B1;border-radius:5px;color:white;}QPushButton#pushButton_2{border: 1px solid #333333;padding: 4px;min-width: 65px;min-height: 12px;}QPushButton#pushButton_2:hover {background-color: #333333;border-color: #444444;}QPushButton#pushButton_2:pressed {background-color: #111111;border-color: #333333;color: yellow;}QPushButton#pushButton_2:disabled {color: #333333;}QPushButton#pushButton_3{color:white;background-color:rgb(14 , 150 , 254);border-radius:5px;}QPushButton#pushButton_3:hover{color:white;background-color:rgb(44 , 137 , 255);}QPushButton#pushButton_3:pressed{color:white;background-color:rgb(14 , 135 , 228);padding-left:3px;padding-top:3px;}QPushButton#pushButton_4{border: 1px solid #C0C0C0;background-color:#C0C0C0;border-style: solid;border-radius:0px;width: 40px;height:20px;padding:0 0px;margin:0 0px;}QPushButton#pushButton_4:pressed{ border: 1px solid black;background-color:#C0C0C0;border-style: solid;border-radius:0px;width: 40px;height:20px;padding:0 0px;margin:0 0px;}QPushButton#pushButton_5{border: 1px solid #C0C0C0;background-color:#FFFFFF;border-style: solid;border-radius:0px;width: 100px;height:20px;padding:0 0px;}QPushButton#pushButton_5:hover{ border: 1px solid #E3C46F;background-color:#FEF4BF;border-style: solid;border-radius:2px;width: 40px;height:20px;padding:0 0px;}QPushButton#pushButton_5:pressed{ background-color:#EAF0FF;border: 1px solid #AAB4C4;width: 40px;height:20px;padding:0 0px;border-radius:1px;}QPushButton#pushButton_6{color:red;background-color:rgb(30,75,10);border-style:outset;border-width:2px;border-color:rgb(10,45,110);border-radius:10px;font:bold 14px;min-width:100px;min-height:20px;padding:4px;}QPushButton#pushButton_6:pressed { background-color:rgb(40,85,20);border-style:inset;padding-left:6px;padding-top:6px;}QPushButton#pushButton_7{border:2px solid red;}QPushButton#pushButton_7:pressed { border:2px solid black;}Qt添加渐变⾊:右键控件渐变⾊的样式。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Qt开发界面程序时为按钮控件添加背景图片
Qt本身直接创建的按钮看起来有些单调,如,当然,程序员可以在程序代码里通过写相关的setStyle类的函数来自定义按钮样式,如设置颜色、形状等。
但有时这些样式仍不能满足客户的特殊需求,这就需要为按钮添加背景图片。
Qt自身支持的强大的qss美化文件为我们美化界面提供了极大方便,本文就最常用、简单的按钮美化给出简单教程。
1.首先,我们需要自己新建一个文本文件,写入以下内容:
QPushButton#MyBtn{
border-image:url(:/my_ObjectName/Resources/ Normal/btn_Pic.bmp);
}
QPushButton# MyBtn:hover{
border-image:url(:/my_ObjectName /Resources/ Go/ btn_Pic.bmp);
}
QPushButton# MyBtn:pressed{
border-image:url(:/my_ObjectName /Resources/ Press/ btn_Pic.bmp);
}
QPushButton# MyBtn:!enabled{
border-image:url(:/my_ObjectName /Resources/ Null/ btn_Pic.bmp);
}
将文件保存为my_qssFile.qss (注意:后缀是.qss),并将该文件放在你工程源代码的那个文件夹的目录下面。
说明:Normal文件夹下存放的是按钮正常状态下的背景图片,Go文件夹下存放的是鼠标经过该按钮时的按钮背景图片,Press文件夹下存放鼠标点击按下时的背景图片,Null文件夹下存放该按钮不可用时(setEnabled(false))的背景图片.
2.以记事本方式打开该目录下的.qrc文件(注意:该文件是建立工程时,系统自动生成的,不需要你改名字),在</qresource> 前回车新建一行,在该行写如下代码:
<file>Resources /Normal/ btn_Pic.bmp </file>
<file>Resources /Press/ btn_Pic.bmp </file>
<file>Resources /Go/ btn_Pic.bmp </file>
<file>Resources /Null/ btn_Pic.bmp </file>
然后保存该文件。
3.在程序main.cpp文件里封装如下函数
void SetGlobalStyle()
{
QFile file("my_qssFile.qss");
file.open(QFile::ReadOnly);
QString styleSheet = QLatin1String(file.readAll());
qApp->setStyleSheet(styleSheet);
file.close();
}
然后在main函数里调用上述函数。
4.在程序里定义自己的按钮,如QPushButton * btn = new QPushButton(this);
然后再写如下代码btn ->setObjectName(“MyBtn”);
5.效果如.
参考资料:QT4.6帮助文档 qt style sheet。