第7章 CSS显示XML文件.pptVIP

第7章 CSS顯示XML文件 7-1 CSS的基礎 7-2 在XML文件使用CSS 7-3 CSS的選擇器Selector 7-4 CSS的Display屬性 7-5 XHTML標籤顯示超連結和圖片 7-1 CSS的基礎 什麼是CSS CSS的基本語法 常用的CSS屬性 什麼是CSS-1 「CSS」(Cascading Style sheets)層級式樣式表屬於一種樣式語言能夠定義HTML標籤顯示的效果，因為瀏覽程式對於HTML標籤都擁有預設的顯示樣式，例如：P標籤是段落、UL為清單項目，CSS能夠重新定義標籤的顯示樣式，以符合網頁設計者的需求。 在1996年12月公佈CSS Level 1規格，Internet Explorer 3.0或以上的版本都支援此規格，接著在1998年5月推出Level 2規格，不過連目前必威体育精装版版本的Internet Explorer 5.x也沒有完全支援，只支援部分的樣式規格。 什麼是CSS-2 CSS的目的是在定義文件內標籤的樣式，舉個例子來說，HTML標籤P標示網頁文字的段落，預設使用的為瀏覽程式的字體與字型大小，如果使用CSS，我們就能夠重新定義標籤P的樣式，如下所示： STYLE TYPE=text/css P { font-size: 10pt; color: red; } /STYLE 上述的程式碼定義標籤P使用10pt的文字尺寸，色彩為紅色，換句話說，只要在網頁使用標籤P的段落，都是使用此字型尺寸和色彩。 什麼是CSS-3 不僅如此，HTML 4.0x版的物件標籤DIV和SPAN，還可以直接使用Style屬性定義標籤內物件的顯示或絕對位置，如下所示： DIV STYLE=position:absolute; top:50px; width:130px; height:130px …. /DIV 上述的Style屬性定義物件顯示方式為絕對位置，並且指定其顯示的位置，CSS能夠輕鬆的在網頁上進行圖片、文字和表格等元素的定位和重疊顯示，編排出所需的精美網頁內容。 CSS的基本語法-1 在HTML標籤，CSS能夠針對指定的標籤定義全新的樣式，只需選擇好需要重新定義的標籤，就可以定義所需的顯示樣式。 Selector {property1: value1; property2: value2 } 上述CSS語法的前方為選擇器Selector可以選擇樣式套用的標籤，在選擇好標籤名稱後，使用大括號括起的樣式組，就是重新定義的標籤樣式，一個樣式組允許擁有數個樣式，如下所示： property1: value1; property2: value2 CSS的基本語法-2 如果XML文件定義了title標籤，如下所示： titleASP網頁製作徹底研究/title 對於上述的標籤，我們一樣可以使用CSS定義XML標籤，如同HTML標籤設定XML標籤的顯示樣式，如下所示： title { display: inline; color: red; font-size: 16pt; } 上述的CSS樣式就是告訴瀏覽程式如何顯示XML標籤title。 常用的CSS屬性-1 字型的樣式屬性 font-size、font-family、font-style、font-weight 色彩和背景樣式屬性 color、background-color、background-image、background-position 文字樣式屬性 line-height、margin-left、margin-right、margin-top、margin-bottom、text-decoration、text-transform、text-align、vertical-align、text-indent 常用的CSS屬性-2 區塊樣式屬性 border-color、border-style、border-top-width、border-right-width、border-bottom-width、border-left-width 絕對位置的樣式屬性 position、left、top、width、height、z-index、visibility 7-2 在XML文件使用CSS 使用外部CSS顯示XML文件 使用內部CSS顯示XML文件 使用外部CSS顯示XML文件 通常在顯示XML文件內容時，我們是將CSS定義的樣式獨立儲存成一個檔案，然後在XML文件指定使用的CSS樣式檔案。 ?xml-stylesheet type=text/css href=Ch7-2.css? 上述指令使用PI關鍵字xml-stylesheet指定XML文件使用的外部CSS檔案，各參數的說明，如下所示： type屬性：使用的樣式種類，