驗證性實驗
1．了解xml內容與顯示分離的特點；
2．掌握xml樣式的兩種技術css和xsl，並理解兩者的區別；
2．掌握css的基本語法和兩種引用方式；
3．理解基於xsl處理xml顯示的基本原理；
4．掌握xsl的語法結構和元素宣告。
5．掌握xsl中xpath的概念和基本使用方式；
6．掌握基於xml spy提供的xslt的轉換；
1．按要求對xml文件進行css定義；
2．使用css檔案對xml進行顯示；
3．按要求為xml文件編寫xsl樣式檔案；
4．使用xsl對xml進行顯示；
5．能利用xml spy的xsl轉換功能將xml轉換為html檔案。
配置有xml spy 2006或xml spy 2009開發環境的計算機裝置
1．xml的樣式表技術
xml本身不提供任何相關顯示的方法，也不像html帶有預定義的可提供顯示功能的標籤，在xml中可以使用css和xsl兩種樣式表技術來提供xml資料的格式化顯示。
xml將文件內容和外觀相分離。當需要顯示時，再附加包含樣式的樣式檔案。內容與顯示分離帶來了諸多的優點，使得開發的關注點被分離，要麼在資料內容上，要麼在顯示方式上。
同樣的資料內容可以有不同的顯示樣式，只需要更改使用的樣式檔案。分離也使得開發人員和設計人員能相互獨立無干擾地工作。
2． css——並非為xml專門設計的樣式表技術
css(cascading style sheets)，級聯樣式表，提供了簡單的語法和強大的格式化顯示能力。在css檔案中對xml元素設定不同的樣式規則，當使用瀏覽器顯示xml檔案，瀏覽器會根據所引用的css檔案，對xml每個元素進行格式化。
css最初是為html進行的設計，不具備xml的語法。
根據書本內容，掌握css的語法結構、常用屬性和兩種引用方式
3． xsl——基於xml的樣式表技術
xsl(extensible stylesheet language)，可擴充套件的樣式表語言，提供了基於xml的樣式顯示方式，它本身就是結構完整的xml文件。
xsl包含三個部分的內容：xslt、xpath和xsl-fo。
xsl的功能主要由xslt來完成。
在xsl中定義了用於xml顯示的模版和模式，當xml處理程式讀取xml檔案時，會將讀入的內容與模式比較，當識別出與xsl樣式檔案中模式匹配內容的時，將按照對應的模版組合這些內容，生成帶有顯示能力的其他文件。
使用xpath來查詢、定位xml文件片段。
xsl-fo物件可以對xsl轉換結果進行顯示。fo目前較少使用，一般來說，會將xml轉換為(x)html檔案，利用css和html來提供顯示。
4．css與xsl比較
css只能改變特定元素的格式，也只能以元素為基礎。但xsl樣式單可以重新排列元素並對元素進行重排序。這種樣式單可以隱藏一些元素而顯示另外一些元素。
更進一步說，還可以選擇應用樣式的標記，而不僅是基於標記的，而且還基於標記的內容和特性，還基於標記在文件中相對於其他元素的位置，以及基於各種其他的準則。
css的優越性在於具有廣泛的瀏覽器支援。但是xsl更為靈活和強大，可更好地適用於xml文件。而且帶xsl樣式單的xml文件可以很容易地轉換為帶css樣式單的html文件。
（1）對以下「聯絡人.xml」進行css定義（設css檔名為「聯絡人.css」）
<?xml version="1.0" encoding="gb2312" standalone="no"?>
<?xml-stylesheet type="text/css" href="聯絡人.css"?>
《聯絡人列表》
《聯絡人》
《姓名》李明 《**》134******** 《聯絡人》
《姓名》陳儷 《**》159******** （2）書寫css定義頭部
<?xml version="1.0" encoding="gb2312"?>
（3）定義「聯絡人列表」元素的顯示（由「聯絡人」組成）
聯絡人列表
（4）定義「聯絡人」元素的顯示
聯絡人 **
（6）在xml檔案中指定對應css樣式表
<?xml version="1.0" encoding="gb2312" standalone="no"?>
<?xml-stylesheet type="text/css" href="聯絡人.css"?>
《聯絡人列表》
《聯絡人》
《姓名》李明 《**》134******** 《聯絡人》
《姓名》陳儷 《**》159******** （8）在ie中開啟帶有css定義的「聯絡人資訊.xml」，觀察顯示結果。如顯示沒有效果，請修改xml中的元素中文名稱替換為字母，並修改對應的css檔案。
（10）修改css的引用方式為內部css。
問題與思考：
（1）css選擇器是否支援中文？
（2）css的選擇器定義的樣式規則是否會被繼承？
（1）對以下「圖書資訊.xml」進行xsl定義（設xsl檔名為「圖書資訊.xsl」）
<?xml version="1.0" encoding="gb2312"?>
000001
計算機演算法與資料結構
嚴蔚敏陳文博
清華大學出版社
242002-1-1
10000002
計算機軟體工程導論
張海藩清華大學出版社
5.41987-6-1
5000003
計算機xml/jsp網頁程式設計教材
吳艾北京希望電子出版社
462001-7-1
15000012
工具漢語成語字典
李一華呂德申
四川辭書出版社
121992-1-1
10000016
機械機電控制工程
高鐘毓王永梁
清華大學出版社
19.8
1994-9-1
19000018
工具英華大字典
鄭易裡商務印書館
CSS樣式表應用
例1 建立上標 下標樣式表 1 單擊 視窗 css樣式 命令，開啟 css樣式 面板。2 單擊 css樣式 面板右上角的下三角按鈕，從彈出的選單中選擇 新建css樣式 命令，這時會出現 新建css樣式 對話方塊。3 在 新建css樣式 對話方塊中，將 名稱 設定為sbiao，型別 設定為 類 可應用...
CSS樣式表Hack總結
select after 在firefox中，當子級都為浮動時，那麼父級的高度就無法完全的包住整個子級，那麼這時用這個清除浮動的hack來對父級做一次定義，那麼就可以解決這個問題。截字省略號 select 這個是在越出長度後會自行的截掉多出部分的文字，並以省略號結尾，很好的乙個技術。只是目前fire...
網頁製作知識樣式表CSS常用小技巧小結
完美的單象素外框線 在ie5.0 ie6.0及 ff 中均可通過測試，其它未測試 table td margin 取負值可以在標籤使用絕對定位的時候起到相對定位的作用，在頁面居中顯示時，使用絕對定位的層不適合使用 left xxpx 這個屬性。把這個層放到乙個要相對定位的標籤旁，然後使用 margi...