CSS与XML.ppt

第 7 章 CSS與XML CSS的簡介- 什麼是標記語言 什麼是CSSCSS的英文全名為Cascading Style Sheet，譯為重疊樣式表。那什麼是樣式呢？樣式其實就是格式，在網頁來說，像文字的大小、顏色以及圖片位置…等，都是網頁呈現資料的樣式。 為什麼要有CSSCSS的觀念就是將樣式定義與HTML網頁分離，只要建立一個定義樣式的CSS檔，並讓所有HTML網頁都套用這個CSS檔所定義的樣式，以後要更改HTML網頁內某種段落的樣式時，只要更改CSS檔的樣式定義即可。 CSS的簡介- 什麼是標記語言 在XML文件中引用CSS運用CSS控制XML文件的顯示方式，運用的方式有以下兩種： 直接將CSS的樣式，定義在XML文件中。 將CSS樣式定義在另一個檔案中，然後在XML文件中，運用處理命令元素，指定使用CSS檔為XML文件的樣式表。 運用CSS控制XML文件的顯示 - CSS樣式的定義與使用 CSS樣式的定義CSS檔將把一組樣式控制的屬性，定義為選擇器（selector）。而選擇器的名稱，通常對應於欲套用該組樣式之XML文件的元素名稱。選擇器的定義語法如下： 選擇器名稱{樣式屬性:設定值; 樣式屬性:設定值; ……} 運用CSS控制XML文件的顯示 - CSS樣式的定義與使用 以下敘述將定義名為booklist選擇器，此選擇器之樣式將套用至booklist元素中。其樣式為以段落顯示（display:block），段落寬度為20em（width: 20em），文字對齊方式為置中對齊（text-align: center）。 運用CSS控制XML文件的顯示 - CSS樣式的定義與使用 於XML文件中使用CSS樣式欲在XML文件定義控制資料顯示格式的CSS樣式時，需於XML文件的文件元素中，以HTML的Style標籤定義CSS樣式。而文件元素中需定義HTML的名稱空間（/TR/REC-html40），語法如下： 文件元素 xmlns:html=/TR/REC-html40 html:style …… /html:style …… /文件元素 運用CSS控制XML文件的顯示 - CSS樣式的定義與使用 以下敘述將於XML文件中，定義套用於booklist元素的樣式。 運用CSS控制XML文件的顯示 - CSS檔的引用 我們亦可將CSS樣式定義於另一個檔案中，然後於XML文件中，運用處理命令元素指定欲引用的CSS樣式檔，語法如下： ?xml-stylesheet type=text/css href=CSS檔的名稱與路徑? 以下敘述將在XML文件中，引用xmlcss2.css檔，利用該檔控制XML文件內資料的顯示。 運用CSS控制XML文件的顯示 - 群組選擇器的定義 當XML文件中，數個元素欲套用相同樣式時，可運用群組樣式。定義群組樣式時，只需要運用『,』符號，將欲定義為同一個群組的選擇器名稱隔開，語法如下： 選擇器名稱, 選擇器名稱, …… {樣式屬性:設定值; 樣式屬性:設定值; ……} 以下敘述將定義title、author、price三個為同一群組的選擇器，其樣式均為文字顏色為深綠色（color: darkgreen）。 運用CSS控制XML文件的顯示 - 子選擇器的定義 若在XML文件的不同元素中，擁有相同名稱的子元素時，可運用建立子選擇器的方式，區別出兩同名元素所套用的不同樣式。子選擇器的建構語法如下： 選擇器名稱 子選擇器名稱 {樣式屬性:設定值; 樣式屬性:設定值; ……} 運用CSS控制XML文件的顯示 - 子選擇器的定義 以下敘述運用定義子元素的方式，分別定義出套用於cover元素下subject子元素與messages元素下subject子元素的選擇器。