Creación de CSS de un archivo HTML

Question

que tiene un archivo HTML que contiene muchos elementos:

<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" height="21" alt="Image" src="../images//k03.jpg" width="25" 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" height="21" alt="Image" src="../images//k03.jpg" width="25" 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> 

Como puede verse, 1 div tiene muchos divs en el mismo. Ahora quiero crear un archivo CSS que contendrá todo el diseño de esta página html (no tiene que ser el mismo). Tengo que escribir algo en código Java. Tengo el objeto DOM de este archivo disponible para mí.

Básicamente, quiero todos los estilos sean retirados de aquí y se mantendrán en un archivo CSS como por div con id = css imgElt11289447233738dIi15v será:

#imgElt11289447233738dIi15v{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} 

estoy no lo hago hasta esta parte pero dado que no sé cuántos niveles de jerarquía de elementos habrá, ¿hay alguna forma de hacer lo mismo para todos los elementos secundarios?

He utilizado el siguiente código

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; 
} 

Editar: tiene que saber que alguna expresión regular puede ayudar a conseguir mediante una serie de objetos y analizador SAX y el uso de expresiones regulares en él ... alguna idea? alguien? cómo implementarlo

Answer 1

Creo que debería usar SAX en lugar de DOM. En SAX puede registrar el controlador que se llama cada vez que el analizador ve una nueva etiqueta, atributo, etc. En este caso, cada vez que vea un atributo "estilo", debe extraer su valor al archivo CSS.

El siguiente enfoque es utilizar Digester de jakarta.apache.org. Utiliza SAX y permite la configuración XML (ver DigesterDigester) que mapea tu objeto de valor directamente en tu documento XML.

Se puede hacer una solución completamente diferente usando comandos de shell unix como grep y sed. La preferencia por una de las soluciones depende de los requisitos de su sistema y de la frecuencia con la que debe ejecutar este código. Si se trata de una transformación única, utilice las secuencias de comandos del shell de Unix. Si debe ser algo robusto y cambiar las páginas sobre la marcha, use la solución java.

Answer 2

¿es efectivo definir un estilo para cada etiqueta?
si yo fuera usted había comprobado si cualquier otra etiqueta tiene el mismo estilo y si todos los elementos con un estilo tenían el mismo 'tag_name' que había usado el siguiente:

tag_name{text-transform:uppercase;text-align:center;} 

y cada elemento con este nombre de etiqueta (si su estilo no está configurado de otra manera) tendría este estilo.
si hay una gran cantidad de diferentes etiquetas con el mismo estilo:

.class_name{text-transform:uppercase;text-align:center;} 

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