当前位置：首页 > news >正文

前端与移动开发之 CSS vs QSS

news 2025/10/28 8:41:58

CSS（Cascading Style Sheets）

全称：层叠样式表
用途：主要用于网页（HTML）设计，用来控制页面元素的外观和布局

特点：

选择器灵活：可以通过标签名、类名、ID、伪类等选择 HTML 元素
支持层叠与继承：同一个元素可以被多个规则影响，后定义的优先级高
控制内容：颜色、字体、背景、边框、尺寸、阴影、动画等
与 HTML 完美结合：直接改变网页布局和样式，而不改变 HTML 结构

示例：

/* 按钮样式 */
button {background-color: #4CAF50;color: white;border-radius: 5px;padding: 10px 20px;
}button:hover {background-color: #45a049;
}

CSS 的世界是网页的“皮肤设计师”，可以让网页看起来五颜六色、动感十足

QSS（Qt Style Sheets）

全称：Qt Style Sheets
用途：Qt 提供的一套样式表系统，用于美化 Qt Widget 应用程序 的界面

特点：

语法与 CSS 类似，但针对 Qt 控件，例如 QPushButton、QLCDNumber、QPlainTextEdit 等
可以控制控件的颜色、字体、边框、圆角、背景图片、悬停状态、禁用状态等
支持层叠和继承，但只在 Qt 界面内部生效，不影响系统其他窗口
可以通过 .qss 文件或者直接调用 setStyleSheet() 来应用样式
支持伪状态选择器，例如 :hover, :checked, :disabled

示例：

QPushButton {background-color: #4CAF50;color: white;border-radius: 5px;padding: 5px 15px;
}QPushButton:hover {background-color: #45a049;
}QLCDNumber {background-color: #222;color: #00FF00;border: 2px solid #555;
}

优点：

直接美化 Qt 界面控件，无需修改控件代码。
可以快速统一应用程序主题风格。
与 CSS 相似，学习成本低。

HTML + CSS（网页按钮样式）

<button class="my-button">点击我</button><style>
.my-button {background-color: #4CAF50; /* 绿色背景 */color: white;              /* 白色文字 */border-radius: 5px;        /* 圆角 */padding: 10px 20px;        /* 内边距 */border: none;              /* 无边框 */
}.my-button:hover {background-color: #45a049; /* 鼠标悬停颜色变深 */
}
</style>

效果说明：

background-color 设置背景颜色
color 设置文字颜色
border-radius 设置圆角
:hover 是伪类，当鼠标悬停时应用样式

CSS 控制网页按钮的外观和交互效果。

Qt + QSS（Qt 按钮样式）

QPushButton *btn = new QPushButton("点击我");
btn->setStyleSheet(R"(QPushButton {background-color: #4CAF50; /* 绿色背景 */color: white;              /* 白色文字 */border-radius: 5px;        /* 圆角 */padding: 10px 20px;        /* 内边距 */border: none;              /* 无边框 */}QPushButton:hover {background-color: #45a049; /* 鼠标悬停颜色变深 */}
)");