Skip to main content

Usare CSS per disegnare documenti XML

Javascript Tutorial - Custom File Upload Button | HTML + CSS (Giugno 2025)

Javascript Tutorial - Custom File Upload Button | HTML + CSS (Giugno 2025)
Anonim

Creare un documento XML, scrivere il DTD e analizzarlo con un browser va bene, ma come verrà visualizzato il documento quando lo visualizzi? XML non è un linguaggio di visualizzazione. In effetti, i documenti scritti con XML non avranno alcuna formattazione.

Quindi, come posso visualizzare il mio XML?

La chiave per visualizzare XML in un browser è Cascading Style Sheets. I fogli di stile consentono di definire ogni aspetto del documento XML, dalle dimensioni e dal colore del testo allo sfondo e alla posizione degli oggetti non di testo.

Supponiamo tu abbia un documento XML:

>

Judy

Layard

Jennifer

Brendan

Se dovessi visualizzare quel documento in un browser pronto XML, come Internet Explorer, mostrerebbe qualcosa di simile a questo:

Judy Layard Jennifer Brendan

Ma cosa succede se si desidera differenziare tra gli elementi padre e figlio? O persino fare una distinzione visiva tra tutti gli elementi del documento. Non è possibile farlo con XML, e non è un linguaggio che deve essere utilizzato per la visualizzazione.

Ma per fortuna, è facile usare Cascading Style Sheets, o CSS, nei documenti XML per definire come visualizzare quei documenti e applicazioni quando vengono visualizzati in un browser. Per il documento sopra, è possibile definire lo stile di ciascuno dei tag nello stesso modo in cui si farebbe con un documento HTML.

Ad esempio, in HTML potresti voler definire tutto il testo all'interno dei tag di paragrafo () con il carattere Verdana, Ginevra o Helvetica e il colore di sfondo verde. Per definirlo in un foglio di stile in modo che tutti i paragrafi siano così, si dovrebbe scrivere:

p {

font-family: verdana, ginevra, helvetica;

background-color: # 00ff00;

}

Le stesse regole funzionano per i documenti XML. Ogni tag in XML può essere definito nel documento XML:

famiglia {

colore: # 000000;

}

genitore {

font-family: Arial Black;

colore: # ff0000;

bordo: solido 5px;

larghezza: 300 px;

}

bambino {

fonte-famiglia: verdana, helvetica;

colore: # cc0000;

bordo: solido 5px;

border-color: # cc0000;

}

Una volta che hai il tuo documento XML e il tuo foglio di stile è scritto, devi metterli insieme. Simile al comando link in HTML, si mette una linea nella parte superiore del documento XML (sotto la dichiarazione XML), dicendo al parser XML dove trovare il foglio di stile. Per esempio:

Come indicato sopra, questa riga dovrebbe essere trovata sotto la dichiarazione <? Xml?> Ma prima di qualsiasi elemento nel documento XML.

Mettendo tutto insieme, il tuo documento XML dovrebbe leggere:

>

Judy

Layard

Jennifer

Brendan