如何将外部 CSS 添加到 HTML '样式'
Posted
技术标签:
【中文标题】如何将外部 CSS 添加到 HTML \'样式\'【英文标题】:How to add external CSS to HTML 'style'如何将外部 CSS 添加到 HTML '样式' 【发布时间】:2017-01-06 23:15:02 【问题描述】:如何使用 Java 将外部 CSS 样式表转换为我的 html 的“样式”部分?
我希望能够让我的外部 CSS 存在于“样式”部分,以便我可以将其解析为内联样式而不是外部样式,我见过的最简单的方法是将 CSS 直接放在HTML 而不是链接。
我想在我的 HTML 中更改它:
<link rel="stylesheet" href="smartdoc.css" />
为此(理想情况下,通过将 CSS 文件作为方法的参数传递):
<style>
Content from external CSS.
</style>
这样我就可以使用 JSoup 将其转换为内联样式,如下所示:
public static String inlineCss(String html)
final String style = "style";
Document doc = Jsoup.parse(html);
Elements els = doc.select(style);// to get all the style elements
for (Element e : els)
String styleRules = e.getAllElements().get(0).data().replaceAll("\n", "").trim();
String delims = "";
StringTokenizer st = new StringTokenizer(styleRules, delims);
while (st.countTokens() > 1)
String selector = st.nextToken(), properties = st.nextToken();
if (!selector.contains(":")) // skip a:hover rules, etc.
Elements selectedElements = doc.select(selector);
for (Element selElem : selectedElements)
String oldProperties = selElem.attr(style);
selElem.attr(style,
oldProperties.length() > 0 ? concatenateProperties(
oldProperties, properties) : properties);
e.remove();
return doc.toString();
private static String concatenateProperties(String oldProp, @NotNull String newProp)
oldProp = oldProp.trim();
if (!oldProp.endsWith(";"))
oldProp += ";";
return oldProp + newProp.replaceAll("\\s2,", " ");
对此有何建议?
【问题讨论】:
【参考方案1】:我假设您的所有文件都在以 UTF-8 编码的本地硬盘上。
dummy.html
<link rel="stylesheet" href="smartdoc.css" />
smartdoc.css
a
background-color: red;
p
background-color: green;
示例代码
要将 link
节点替换为 CSS 文件内容,请执行以下操作:
// Load HTML file
String charsetName = "UTF-8";
Document doc = Jsoup.parse(new File("dummy.html"), charsetName);
System.out.println("BEFORE:\n" + doc.outerHtml());
// Replace each link nodes with its respective CSS file content
for (Element link : doc.select("link[rel=stylesheet]"))
String cssFilename = link.attr("href");
Element style = new Element(Tag.valueOf("style"), "");
style.appendText("/* " + cssFilename + " */");
style.appendText(loadCssFileContent(cssFilename, charsetName));
link.replaceWith(style);
System.out.println("\nAFTER:\n" + doc.outerHtml());
private static String loadCssFileContent(String path, String charsetName) throws IOException
byte[] encoded = Files.readAllBytes(Paths.get(path));
return new String(encoded, charsetName);
输出
BEFORE:
<html>
<head>
<link rel="stylesheet" href="smartdoc.css">
</head>
<body></body>
</html>
AFTER:
<html>
<head>
<style>/* smartdoc.css */a background-color: red; p background-color: green; </style>
</head>
<body></body>
</html>
【讨论】:
以上是关于如何将外部 CSS 添加到 HTML '样式'的主要内容,如果未能解决你的问题,请参考以下文章