从 HTML 文件创建 CSS

Posted 2023-03-05

【中文标题】从 HTML 文件创建 CSS

【英文标题】：Creating CSS from a HTML file

【发布时间】：2011-05-25 06:04:31

【问题描述】：

我有一个包含许多元素的 html 文件：

<div>
    <div id="imgElt11289447233738dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1; LEFT: 795px; BORDER-LEFT: 0px; WIDTH: 90px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 186px; HEIGHT: 93px" lineid="lineid" y2="279" y1="186" x2="885" x1="795">
        <img style="WIDTH: 90px; HEIGHT: 93px"   src="../images//k03.jpg"  name="imgElt11289447233738dIi15vNI1m6G" tag="img"></img></div>
    <div id="imgElt11288263284216dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1; LEFT: 660px; BORDER-LEFT: 0px; WIDTH: 147px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 1964px; HEIGHT: 22px" lineid="lineid" y2="1986" y1="1964" x2="807" x1="660">
        <img style="WIDTH: 147px; HEIGHT: 22px"   src="../images//k03.jpg"  name="imgElt11288263284216dIi15vNI1m6G" tag="img"></img></div>
    <div id="txtElt11288262779851dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 2872735; LEFT: 250px; BORDER-LEFT: 0px; WIDTH: 95px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 1514px; HEIGHT: 18px" selectedindex="0" pos_rel="false" lineid="lineid" y2="1532" y1="1514" x2="345" x1="250" tag="div">
        <p><strong><font face="arial,helvetica,sans-serif" size="2">Course Name</font></strong></p>
    </div>
    <div id="txtElt11288262309675dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1565881; LEFT: 40px; BORDER-LEFT: 0px; WIDTH: 430px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 1464px; HEIGHT: 34px" selectedindex="0" pos_rel="false" lineid="lineid" y2="1498" y1="1464" x2="470" x1="40" tag="div">
        <p><strong>
        <font face="arial,helvetica,sans-serif" size="2" tag="font">16. Please 
        write below the Course Name in order of preference.</font></strong></p>
        <p tag="p"><strong><font face="Arial" size="2" tag="font">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (Please 
        see the &quot;Instructions to Candidate&quot; for list of courses)</font></strong></p>
    </div>
</div>

可以看出，1个div里面有很多个div。现在我想创建一个包含此 html 页面所有样式的 css 文件（不必相同）。必须用java代码写一些东西。我有这个文件的 DOM 对象可供我使用。

基本上，我希望从这里删除所有样式，并将其保存在 CSS 文件中，例如 id = imgElt11289447233738dIi15v 的 div，css 将是：

#imgElt11289447233738dIi15vBORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1; LEFT: 795px; BORDER-LEFT: 0px; WIDTH: 90px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 186px; HEIGHT: 93px

直到这一部分我才知道，但由于我不知道元素的层次结构有多少层，有没有办法对所有子元素做同样的事情？

我使用了以下代码

public static Document getStyleInCSSfile(Document aoDoc, String aoPathToWrite, String aoFileName) throws ApplicationException 
    String loValue = null;
    String loID = null;
    String lsContent = "";
    Element loRoot = aoDoc.getRootElement();
    List loTempElementList = loRoot.getChildren();
    int liCounter;
    for (liCounter = 0; liCounter < loTempElementList.size(); liCounter++) 
        Element loTemplateEle = (Element) loTempElementList.get(liCounter);
        String loId=loTemplateEle.getAttribute("id").getValue();
        loID = loTemplateEle.getAttributeValue("id");
        if(null != loID)
        
            loValue = loTemplateEle.getAttributeValue("style");
            if(loValue!=null && loValue.trim().length()>0)
            
                loTemplateEle.removeAttribute("style");
                lsContent = lsContent.concat("#"+loID+""+loValue+"\n");
            
        
    
    SaveFormOnLocalUtil.writeToFile(aoPathToWrite,aoFileName,lsContent);
    return aoDoc;

编辑： 知道一些正则表达式可能会通过获取 SAX 解析器对象的字符串并在其上使用正则表达式来帮助...任何想法？任何人？如何实现它

【参考方案1】：

我认为你应该使用 SAX 而不是 DOM。在 SAX 中，您可以注册每次解析器看到新标签、属性等时调用的处理程序。在这种情况下，每次看到属性“样式”时，您都应该将其值提取到 CSS 文件中。

下一个方法是使用来自 jakarta.apache.org 的 Digester。它使用 SAX 并允许 XML 配置（请参阅 DigesterDigester）将您的值对象直接映射到您的 XML 文档。

使用 grep 和 sed 等 unix shell 命令可以实现完全不同的解决方案。对其中一种解决方案的偏好取决于您的系统要求以及您必须多久运行一次此代码。如果是一次性转换，请使用 unix shell 脚本。如果它必须是健壮的东西并动态更改页面，请使用 java 解决方案。

【讨论】：

我使用 SAX 解析器来读取 dom。但找不到如何遍历将要创建的树结构的每个元素

完成 使用 SAX 解析器创建了一个基于需求的递归函数 :)

【参考方案2】：

为每个标签定义一个样式是否有效？ 如果我是你，我会检查是否有任何其他标签具有相同的样式，以及具有一种样式的所有元素是否具有相同的“tag_name”，我会使用以下内容：

tag_nametext-transform:uppercase;text-align:center;

并且每个具有此标记名称的元素（如果其样式未以任何其他方式设置）都将具有此样式。 如果有很多不同的标签具有相同的样式：

.class_nametext-transform:uppercase;text-align:center;

<tag class="class_name">content</tag>