使用 CSS 显示 XML

通过使用 CSS,可为 XML 文档添加显示信息。

使用 CSS 显示您的 XML?

使用 CSS 来格式化 XML 文档是有可能的。

下面的例子就是关于如何使用 CSS 样式表来格式化 XML 文档:

这是 XML 文件:

  1. <!-- Edited with XML Spy v2007 (http://www.altova.com) -->
  2. <CATALOG>
  3. <CD>
  4. <TITLE>Empire Burlesque</TITLE>
  5. <ARTIST>Bob Dylan</ARTIST>
  6. <COUNTRY>USA</COUNTRY>
  7. <COMPANY>Columbia</COMPANY>
  8. <PRICE>10.90</PRICE>
  9. <YEAR>1985</YEAR>
  10. </CD>
  11. <CD>
  12. <TITLE>Hide your heart</TITLE>
  13. <ARTIST>Bonnie Tyler</ARTIST>
  14. <COUNTRY>UK</COUNTRY>
  15. <COMPANY>CBS Records</COMPANY>
  16. <PRICE>9.90</PRICE>
  17. <YEAR>1988</YEAR>
  18. </CD>
  19. <CD>
  20. <TITLE>Greatest Hits</TITLE>
  21. <ARTIST>Dolly Parton</ARTIST>
  22. <COUNTRY>USA</COUNTRY>
  23. <COMPANY>RCA</COMPANY>
  24. <PRICE>9.90</PRICE>
  25. <YEAR>1982</YEAR>
  26. </CD>
  27. <CD>
  28. <TITLE>Still got the blues</TITLE>
  29. <ARTIST>Gary Moore</ARTIST>
  30. <COUNTRY>UK</COUNTRY>
  31. <COMPANY>Virgin records</COMPANY>
  32. <PRICE>10.20</PRICE>
  33. <YEAR>1990</YEAR>
  34. </CD>
  35. <CD>
  36. <TITLE>Eros</TITLE>
  37. <ARTIST>Eros Ramazzotti</ARTIST>
  38. <COUNTRY>EU</COUNTRY>
  39. <COMPANY>BMG</COMPANY>
  40. <PRICE>9.90</PRICE>
  41. <YEAR>1997</YEAR>
  42. </CD>
  43. </CATALOG>

这是样式表:

  1. CATALOG
  2. {
  3. background-color: #ffffff;
  4. width: 100%;
  5. }
  6. CD
  7. {
  8. display: block;
  9. margin-bottom: 30pt;
  10. margin-left: 0;
  11. }
  12. TITLE
  13. {
  14. color: #FF0000;
  15. font-size: 20pt;
  16. }
  17. ARTIST
  18. {
  19. color: #0000FF;
  20. font-size: 20pt;
  21. }
  22. COUNTRY,PRICE,YEAR,COMPANY
  23. {
  24. display: block;
  25. color: #000000;
  26. margin-left: 20pt;
  27. }

下面是此XML文件的一个片断。 第二行,<?xml-stylesheet type="text/css" href="cd_catalog.css"?>,把这个 XML 文件链接到 CSS 文件:

  1. <?xml version="1.0" encoding="ISO-8859-1"?>
  2. <?xml-stylesheet type="text/css" href="cd_catalog.css"?>
  3. <CATALOG>
  4. <CD>
  5. <TITLE>Empire Burlesque</TITLE>
  6. <ARTIST>Bob Dylan</ARTIST>
  7. <COUNTRY>USA</COUNTRY>
  8. <COMPANY>Columbia</COMPANY>
  9. <PRICE>10.90</PRICE>
  10. <YEAR>1985</YEAR>
  11. </CD>
  12. <CD>
  13. <TITLE>Hide your heart</TITLE>
  14. <ARTIST>Bonnie Tyler</ARTIST>
  15. <COUNTRY>UK</COUNTRY>
  16. <COMPANY>CBS Records</COMPANY>
  17. <PRICE>9.90</PRICE>
  18. <YEAR>1988</YEAR>
  19. </CD>
  20. .
  21. .
  22. .
  23. .
  24. </CATALOG>

注释:使用 CSS 格式化 XML 不是常用的方法,更不能代表 XML 文档样式化的未来。W3C 推荐使用 XSLT。