Creazione di CSS da un file HTML

Question

Ho un file HTML che contiene molti elementi:

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

Come si può vedere, 1 div ha molti div in esso. Ora voglio creare un file css che conterrà tutti gli stili di questa pagina html (non è necessario essere lo stesso). Devo scrivere qualcosa nel codice java. Ho a disposizione l'oggetto DOM di questo file.

Fondamentalmente, io voglio tutti gli stili per essere rimosso da qui e saranno tenuti sotto un file CSS come ad div con id = imgElt11289447233738dIi15v css sarà:

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

sto non lo faccio fino a questa parte ma poiché non so quanti livelli di gerarchia di elementi ci saranno, c'è un modo per fare lo stesso anche per tutti gli elementi figli?

ho usato il seguente codice

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

Edit: avuto modo di sapere che qualche espressione regolare può aiutare da ottenere una serie di oggetti SAX parser ed e uso delle espressioni regolari su di esso ... qualche idea? qualcuno? come implementarlo

Answer 1

Penso che dovresti usare SAX invece di DOM. In SAX puoi registrare il gestore che viene chiamato ogni volta che il parser vede il nuovo tag, l'attributo ecc. In questo caso ogni volta che vedi l'attributo "style" devi estrarne il valore nel file CSS.

Il prossimo approccio sta utilizzando Digester da jakarta.apache.org. Usa SAX e consente la configurazione XML (vedi DigesterDigester) che associa il tuo oggetto valore direttamente al tuo documento XML.

Una soluzione assolutamente diversa può essere eseguita utilizzando comandi shell unix come grep e sed. La preferenza per una soluzione dipende dai requisiti di sistema e dalla frequenza con cui è necessario eseguire questo codice. Se si tratta di una trasformazione in un'unica volta, utilizzare lo script di shell Unix. Se deve essere qualcosa di robusto e cambiare le pagine al volo usa la soluzione java.

Answer 2

è efficace definire uno stile per ogni singolo tag?
se fossi in te avrei controllato se qualsiasi altra variabile ha lo stesso stile e se tutti gli elementi con uno stile avevano la stessa 'tag_name' avevo usato il seguente:

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

e ogni elemento con questo nome del tag (se il suo 'stile non è impostato in altro modo) avrebbe questo stile.
se c'è un sacco di diversi tag con lo stesso stile:

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

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