第07講 使用CSS顯示XML

1、軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院第07講 使用CSS顯示XML軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院目標(biāo) 知識目標(biāo)CSS文檔結(jié)構(gòu)CSS引用形式CSS選擇符和屬性 能力目標(biāo)學(xué)會編寫CSS文檔學(xué)會使用CSS屬性格式化顯示XML軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù) 任務(wù)1：XML中引用CSS 任務(wù)2：CSS選擇符的使用 任務(wù)3：CSS文本屬性的使用 任務(wù)4：CSS容器屬性的使用 任務(wù)5：CSS布局屬性的使用軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院CSS（級聯(lián)樣式單）簡介 百科名片：CSS是Cascading Style

2、 Sheet 的縮寫。譯作層疊樣式表單。是用于（增強）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。CSS也可以利用簡單的規(guī)則來控制XML元素在瀏覽器中的顯示方式。軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院CSS語法格式選擇符選擇符 屬性屬性1:1:屬性值屬性值1;1; 屬性屬性2:2:屬性值屬性值2 2； title font-family:Arial,sans-serif; / * 字體 */font-size:24px; /* 字號 */color:#369; /* 前景色 * /XML案例教程軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)1：X

3、ML中引用CSS任務(wù)1-1：XML內(nèi)部CSS引用任務(wù)1-2：XML外部CSS引用任務(wù)1-3：使用import指令軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)1-1：內(nèi)部CSS引用title font-family:Arial,sans-serif;font-size:24px;color:#369;XML案例教程說明說明1. 1. 內(nèi)部CSS引用的語法格式： CSS樣式指令說明說明2. 2. 需要在根元素中聲明html命名空間：xmlns:html=/Profiles/XHTML-transitional，因為要使用該命名空間里的元素定義CSS。

4、說明說明3. 3. 需要在指令區(qū)添加指令：指明使用CSS顯示XML文檔。軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)1-2：外部CSS引用title font-family:Arial,sans-serif; / * 字體 */font-size:24px; /* 字號 */color:#369; /* 前景色 * /XML案例教程title.csstitle.xmlXML文檔本身不含有樣式信息，可以通過引用外部獨立的CSS文件定義文檔的表現(xiàn)形式。軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院樣式顯示的優(yōu)先級1、當(dāng)全局樣式與局部樣式?jīng)_突時，局部樣式優(yōu)先。t1.csst

5、1.xml軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院樣式顯示的優(yōu)先級2、內(nèi)部CSS與外部CSS可混用，若有沖突，內(nèi)部CSS樣式優(yōu)先。t1.xmlt1.css軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院樣式顯示的優(yōu)先級3、也可在XML元素中，通過設(shè)置STYLE屬性創(chuàng)建內(nèi)聯(lián)樣式，當(dāng)內(nèi)聯(lián)樣式與其它CSS樣式?jīng)_突時， 內(nèi)聯(lián)樣式優(yōu)先。t1.xml軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)1-3：使用import指令title font-family:Arial,sans-serif; font-size:24px; color:#369;title.cssim

6、port url(“title.css);title color:red; padding-bottom:4px; border-bottom:1px solid #999;title-import.cssXML案例教程軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院說明 import指令可以將多個CSS文件合并，import指令只能在CSS文件中使用，指令以“；”結(jié)束。 語法 格式：import url(“CSS文件路徑”); 當(dāng)多個CSS文件嵌套時，若對同一元素的同一屬性設(shè)置有沖突，則最后包含import指令的CSS文件中的設(shè)置優(yōu)先。軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)

7、技術(shù)學(xué)院訓(xùn)練1XML文檔如下：翼出品：美國派拉蒙影片公司年份：1927導(dǎo)演：威廉.A.韋爾曼編寫CSS文件顯示XML數(shù)據(jù)(樣式自定)，嘗試以下三種方式引用CSS。1、在XML文檔內(nèi)部引用CSS；2、在使用xml-stylesheet指令引用外部CSS；3、使用import指令嵌套引用CSS。軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)2：CSS選擇符任務(wù)2-1：類型選擇符任務(wù)2-2：ID選擇符任務(wù)2-3：類選擇符任務(wù)2-4：選擇符分組任務(wù)2-5：包含選擇符軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)2-1：類型選擇符XML文檔中元素名稱title font-fa

8、mily:Arial,sans-serif; 軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)2-2：ID選擇符#b1 font-family:Arial,sans-serif;font-size:24px;color:blue;XML案例教程清華大學(xué)出版社郭永洪軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)2-3：類選擇符.b1 font-family:Arial,sans-serif;font-size:24px;color:#369;XML案例教程清華大學(xué)出版社郭永洪軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院.b1,author,publisher

9、 font-family:Arial,sans-serif;font-size:24px;color:yellow;任務(wù)2-4：選擇符分組多個選擇符應(yīng)用相同樣式，用“，”分割合并為一組。XML案例教程郭永洪西安電子科技大學(xué)出版社軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)2-5：包含選擇符name,.b1,publisher font-family:Arial,sans-serif;font-size:24px;color:blue;publisher name color:red;font-size:36px;border-bottom:1px solid #999;XML案

10、例教程郭永洪西安電子科技大學(xué)出版以設(shè)置父元素下某些子元素的個性樣式，使用時父元素在前，子元素在后，中間用空格隔開軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院訓(xùn)練2XML文檔如下：翼 類型：戲劇級別：G評價指數(shù)：5出品：美國派拉蒙影片公司年份：1927導(dǎo)演：威廉.A.韋爾曼編寫CSS文件顯示XML數(shù)據(jù)，要求：1、使用ID選擇符顯示片名“翼”，字體Arial，字號50px，顏色紅色red；2、使用類選擇符顯示類屬性值為c1的元素，字體Arial，字號40px，顏色綠色green；3、使用包含選擇符顯示Movie的子元素Director，字體Arial，字號1

11、0px，顏色藍色blue；4、將標(biāo)記Type、Rating、Review歸為一組顯示，字體Arial，字號10px，顏色#0e0e0e。軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)3：使用CSS文本屬性任務(wù)3-1：使用顯示屬性display顯示xml任務(wù)3-2：使用字體屬性font顯示xml任務(wù)3-3：設(shè)置XML前景色和背景色任務(wù)3-4：使用文本修飾屬性顯示XML軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)3-1：使用顯示屬性display1.display:none：用于隱藏元素，使元素在頁面中不可見。2.display:block：將元素顯示在塊中，塊級元素

12、通過換行與其他元素分隔(不同塊級元素占不同行)。3.display:inline：元素內(nèi)容緊接在前一元素內(nèi)容之后(與前一元素在同一行)。軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院案例3-1：display屬性及框架CSS文件的使用軟件工程鄧良松西安電子科技大學(xué)出版社陜西西安大學(xué)路88書比較系統(tǒng)全面地介紹了軟件工程n方法、面向?qū)ο箝_發(fā)方法。全書共16章。概述了軟件工程、各種生存周期模型和開發(fā)方法.22.2元Test.xmlBook font-family:Arial,sans-serif; font-size:24px; color:blue;T1.cs

13、s軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院Book display:block;title,abstract,pricedisplay:block;author display:none;publisherdisplay:inline;T2.cssimport url(T1.css);import url(T2.css);bookFramework.css案例3-1：display屬性及框架CSS文件的使用先設(shè)置一個框架框架CSSCSS文件文件bookFramework.css，在框架文件中使用“import”指令將外部所需的CSS文件引入到框架文件。采用框架設(shè)計方式將不同的C

14、SS屬性分文件保存，當(dāng)增加新的CSS屬性時，不需修改原來的CSS文件，只需建一個新的CSS文件，并將新文件引用到框架文件即可。軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)3-2：使用字體屬性font1.font-family：指定字體名稱，使用逗號分隔字體名稱。2.font-style：設(shè)置字體樣式，normal(正常)、italic(斜體)和oblique(傾斜體)。3.font-size：設(shè)置字體中典型字符的字高和字寬。4.font-weight：設(shè)置字體粗細(xì)。5.line-height：設(shè)置字高。軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)3-3：設(shè)置前景

15、色和背景色1. color屬性：設(shè)置XML文檔元素的前景色。color屬性值可以是名稱、十進制、十六進制或百分?jǐn)?shù)RGB的顏色值。2. background-color屬性：設(shè)置元素內(nèi)容的背景顏色，與color屬性的屬性值設(shè)置方式相同。 color:green color:#FF00CC (#后的后的6位數(shù)若兩兩相等，可只寫位數(shù)若兩兩相等，可只寫3位位)color:rgb(100,0,80) 軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)3-4：使用文本修飾屬性1、text-indent屬性：設(shè)置元素中文本的縮進。2、text-align屬性：設(shè)置元素中文本的對齊方式。 left：

16、左對齊；right：右對齊；center：居中對齊。3、vertical-align屬性：設(shè)置元素內(nèi)容的垂直對齊方式。 top：頂對齊；middle：中對齊；bottom：底對齊。4、text-decoration屬性：設(shè)置文本內(nèi)容的特殊效果。 line-through：加刪除線；overline：加上劃線；underline：加下劃線；none：默認(rèn)值，不加任何修飾。軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)4：使用CSS容器屬性盒模型：1、在元素周圍增加邊框（border）2、在元素與其邊框之間設(shè)定空格填充（padding，即補白）3、設(shè)置邊框與周圍元素之間的邊距（mar

17、gins）。軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)4：使用CSS容器屬性任務(wù)4-1：設(shè)置XML頁邊距任務(wù)4-2：設(shè)置XML邊框任務(wù)4-3：補白（空格填充）軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)4-1：設(shè)置XML頁邊距1、margin-top：設(shè)置上頁邊距2、margin-bottom：設(shè)置下頁邊距3、margin-left：設(shè)置左頁邊距4、margin-right：設(shè)置右的頁邊距5、margin：設(shè)置四邊頁邊距軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)4-2：設(shè)置XML邊框1. 設(shè)置邊框線樣式：border-style、 borde

18、r-top-style、 border-right-style、 border-bottom-style、 border-left-style屬性，其值分別為：none、dotted、dashed、solid、 double、groove、ridge、inset和outset。 2. 設(shè)置邊框線寬度：border-width、border-top-width、border-right-width、 border-bottom-width和border-1eft-width五個屬性。屬性值為thin、medium、thick或絕對長度值。使用絕對長度值時，不能為負(fù)數(shù)，可以是0。 3. 設(shè)置邊框線

19、顏色：border-color、border-top-color、border-right-color、 border-bottom-color和border-left-color五個屬性。 軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)4-3：補白（空格填充）指定邊框和內(nèi)部元素的間距，可以使用padding、padding-top、padding-right、padding-bottom和padding-left五個屬性來指定，屬性值為絕對長度或父元素寬度的百分比。 軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)5：使用CSS布局屬性任務(wù)5-1：元素絕對定位和相對定位任務(wù)5-2：設(shè)置元素大小任務(wù)5-3：環(huán)繞文本任務(wù)5-4：插入圖片軟件學(xué)院軟件學(xué)院常州信息職業(yè)技術(shù)學(xué)院常州信息職業(yè)技術(shù)學(xué)院任務(wù)5-1：絕對定位和相對定位1. 絕對定位元素根據(jù)瀏覽器或父元素左上角的邊緣開始計算定位數(shù)值 ，其周圍元素不受影響。如：控制左移和上移用left,top，反之則用right,bottomposition:absolute;left:100px;top:20px;2. 相對定位元素根據(jù)自己原始位置作相對位移，其周圍元素不受影響。如：控制左移和上移用left,top，反之則用right,bottomposition:relative;left:100