CSS语法应用在Qt中的QSS和文本
- 【1】CSS语法
- 【1】QSS使用以上CSS语法
- 【1.1】QTextBrowser设置样式表
- 【1.2】QTextBrowser使用CSS语法设置文本样式
【1】CSS语法
💛💛💛💛💛💛💛💛💛💛💛💛💛💛💛💛💛💛
例子解释
- p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：
）。
- color 是属性，red 是属性值
- text-align是属性，center 是属性值
💛💛💛💛💛💛💛💛💛💛💛💛💛💛💛💛💛
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>这些段落是通过 CSS 设置样式的。</p>
</body>
</html>
运行效果
【1】QSS使用以上CSS语法
本次以Qt中的组件QTextBrowser为例
【1.1】QTextBrowser设置样式表
QTextBrowser{
text-align:center;
color:red;
}
效果
【1.2】QTextBrowser使用CSS语法设置文本样式
样式：文本居中对齐、字体颜色蓝色、字体大小12pt、字体加粗
ui->textBrowser->setReadOnly(true); //只读 不可编辑
QString html = "<!DOCTYPE html>\
<html>\
<head>\
<style>\
p {\
text-align: center;\
color: blue;\
font-size:12pt;\
font-style:bold;\
} \
</style>\
</head>\
<body>\
\
<p>每个段落都会受到样式的影响。</p>\
<p id='para1'>我也是！</p>\
<p>还有我！</p>\
\
</body>\
</html>";
ui->textBrowser->setHtml(html); //可以生效
ui->textBrowser->setText(html); //可以生效
ui->textBrowser->append(html); //可以生效
效果=
😚 😚😚 😚下节更精彩😚 😚😚 😚
