如何在PyQt加载的HTML内容中应用CSS样式？

核心问题分析 #

你之前的思路完全走偏了：QSS是Qt用来美化自身控件的样式表，和网页的CSS不是一回事，所以不管你怎么转CSS为QSS、调用app.setStyleSheet()，都不可能影响QWebEngineView里的网页内容。另外，用setHtml()加载HTML时，如果不指定资源基准路径，网页里的<link>引用会找不到本地CSS文件，这也是CSS不生效的关键原因。

正确解决方案 #

下面提供三种可行的解决方法，按需选择：

方法1：直接用load()加载本地HTML文件

这是最简单的方式，load()会自动以HTML文件所在目录为基准路径，正确解析相对路径引用的CSS：

from PyQt6.QtWidgets import QApplication, QWidget, QVBoxLayout
from PyQt6.QtWebEngineWidgets import QWebEngineView
from PyQt6.QtCore import QUrl
import os

app = QApplication([os.path.basename(__file__)])
window = QWidget()
layout = QVBoxLayout()
websiteSource = "C:/Users/mikei/OneDrive/Documents/GeneralWebsite/Test6/"

view = QWebEngineView()
layout.addWidget(view)

# 加载本地HTML文件，自动处理相对路径资源
view.load(QUrl.fromLocalFile(os.path.join(websiteSource, "index.html")))

window.setLayout(layout)
window.show()
app.exec()

方法2：用setHtml()时指定基准URL

如果必须使用setHtml()，需要通过第二个参数指定资源的基准目录，让网页能找到CSS文件：

from PyQt6.QtWidgets import QApplication, QWidget, QVBoxLayout
from PyQt6.QtWebEngineWidgets import QWebEngineView
from PyQt6.QtCore import QUrl
import os

app = QApplication([os.path.basename(__file__)])
window = QWidget()
layout = QVBoxLayout()
websiteSource = "C:/Users/mikei/OneDrive/Documents/GeneralWebsite/Test6/"

view = QWebEngineView()
layout.addWidget(view)

html_path = os.path.join(websiteSource, "index.html")
html_content = open(html_path).read()
# 设置基准URL为HTML文件所在目录，解析<link>的相对路径
view.setHtml(html_content, QUrl.fromLocalFile(websiteSource))

window.setLayout(layout)
window.show()
app.exec()

方法3：将CSS内容嵌入HTML

如果不想依赖外部CSS文件，可以直接把CSS代码嵌入到HTML的<head>中：

from PyQt6.QtWidgets import QApplication, QWidget, QVBoxLayout
from PyQt6.QtWebEngineWidgets import QWebEngineView
import os

app = QApplication([os.path.basename(__file__)])
window = QWidget()
layout = QVBoxLayout()
websiteSource = "C:/Users/mikei/OneDrive/Documents/GeneralWebsite/Test6/"

view = QWebEngineView()
layout.addWidget(view)

# 读取HTML和CSS内容，将CSS嵌入HTML
html_content = open(os.path.join(websiteSource, "index.html")).read()
css_content = open(os.path.join(websiteSource, "style.css")).read()
modified_html = html_content.replace("</head>", f"<style>{css_content}</style></head>")

view.setHtml(modified_html)

window.setLayout(layout)
window.show()
app.exec()

为什么之前的方法无效？ #

• QSS仅作用于Qt的QWidget控件，和网页渲染引擎（Chromium）完全无关，所以对HTML元素没有任何效果。
• 直接使用setHtml(open(...).read())时，网页没有基准路径，无法找到相对路径下的style.css，导致CSS加载失败。
• 调用app.setStyleSheet()是给整个Qt应用的控件设置样式，和网页内容没有关联。

内容的提问来源于stack exchange，提问作者HereForABit