第07講 使用CSS顯示XML

XML應(yīng)用開發(fā)第07講使用CSS顯示XML目標(biāo)知識(shí)目標(biāo)CSS文檔結(jié)構(gòu)CSS引用形式CSS選擇符和屬性能力目標(biāo)學(xué)會(huì)編寫CSS文檔學(xué)會(huì)使用CSS屬性格式化顯示XML任務(wù)任務(wù)1：XML中引用CSS任務(wù)2：CSS選擇符的使用任務(wù)3：CSS文本屬性的使用任務(wù)4：CSS容器屬性的使用任務(wù)5：CSS布局屬性的使用CSS（級(jí)聯(lián)樣式單）簡介百科名片：CSS是CascadingStyleSheet的縮寫。譯作「層疊樣式表單」。是用于（增強(qiáng)）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。CSS也可以利用簡單的規(guī)則來控制XML元素在瀏覽器中的顯示方式。CSS語法格式選擇符 {

屬性1:屬性值1;

屬性2:屬性值2；

……}title{ font-family:Arial,sans-serif;/*字體*/ font-size:24px;/*字號(hào)*/ color:#369;/*前景色*/}<title>XML案例教程</title>任務(wù)1：XML中引用CSS任務(wù)1-1：XML內(nèi)部CSS引用任務(wù)1-2：XML外部CSS引用任務(wù)1-3：使用@import指令任務(wù)1-1：內(nèi)部CSS引用<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"?><Bookxmlns:html="/Profiles/XHTML-transitional">

<html:style> title{ font-family:Arial,sans-serif; font-size:24px; color:#369;

} </html:style> <title>XML案例教程</title></Book>說明1.內(nèi)部CSS引用的語法格式：<html:style>CSS樣式指令</html:style>說明2.需要在根元素中聲明html命名空間：xmlns:html=/Profiles/XHTML-transitional，因?yàn)橐褂迷撁臻g里的元素<style>定義CSS。

說明3.需要在指令區(qū)添加指令：<?xml-stylesheettype=“text/css”?>指明使用CSS顯示XML文檔。任務(wù)1-2：外部CSS引用title{ font-family:Arial,sans-serif;/*字體*/ font-size:24px;/*字號(hào)*/ color:#369;/*前景色*/}<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"href=“title.css"?><Book> <title>XML案例教程</title></Book>title.csstitle.xmlXML文檔本身不含有樣式信息，可以通過引用外部獨(dú)立的CSS文件定義文檔的表現(xiàn)形式。樣式顯示的優(yōu)先級(jí)1、當(dāng)全局樣式與局部樣式?jīng)_突時(shí)，局部樣式優(yōu)先。t1.csst1.xml樣式顯示的優(yōu)先級(jí)2、內(nèi)部CSS與外部CSS可混用，若有沖突，內(nèi)部CSS樣式優(yōu)先。t1.xmlt1.css樣式顯示的優(yōu)先級(jí)3、也可在XML元素中，通過設(shè)置STYLE屬性創(chuàng)建內(nèi)聯(lián)樣式，當(dāng)內(nèi)聯(lián)樣式與其它CSS樣式?jīng)_突時(shí)，

內(nèi)聯(lián)樣式優(yōu)先。t1.xml任務(wù)1-3：使用@import指令title{font-family:Arial,sans-serif;font-size:24px;color:#369;}title.css@importurl(“title.css");title{color:red;padding-bottom:4px;border-bottom:1pxsolid#999;}title-import.css<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"href=“title-import.css"?><Book> <title>XML案例教程</title></Book>說明@import指令可以將多個(gè)CSS文件合并，@import指令只能在CSS文件中使用，指令以“；”結(jié)束。語法

格式：@importurl(“CSS文件路徑”);當(dāng)多個(gè)CSS文件嵌套時(shí)，若對同一元素的同一屬性設(shè)置有沖突，則最后包含@import指令的CSS文件中的設(shè)置優(yōu)先。訓(xùn)練1XML文檔如下：<?xmlversion="1.0"encoding="UTF-8"?><Movie> <Title>翼</Title> <Company>出品：美國派拉蒙影片公司</Company> <Year>年份：1927</Year> <Director>導(dǎo)演：威廉.A.韋爾曼</Director></Movie>編寫CSS文件顯示XML數(shù)據(jù)(樣式自定)，嘗試以下三種方式引用CSS。1、在XML文檔內(nèi)部引用CSS；2、在使用xml-stylesheet指令引用外部CSS；3、使用@import指令嵌套引用CSS。任務(wù)2：CSS選擇符任務(wù)2-1：類型選擇符任務(wù)2-2：ID選擇符任務(wù)2-3：類選擇符任務(wù)2-4：選擇符分組任務(wù)2-5：包含選擇符任務(wù)2-1：類型選擇符XML文檔中元素名稱title{font-family:Arial,sans-serif;}任務(wù)2-2：ID選擇符#b1{ font-family:Arial,sans-serif; font-size:24px; color:blue;}<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"href=“title-id.css"?><Book> <titleID="b1">XML案例教程</title> <publisherID="b2">清華大學(xué)出版社</publisher> <authorID="b1">郭永洪</author></Book>任務(wù)2-3：類選擇符.b1{ font-family:Arial,sans-serif; font-size:24px; color:#369;}<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"href=“title-class.css"?><Book> <titleclass="b1">XML案例教程</title> <publisherclass="b2">清華大學(xué)出版社</publisher> <authorclass="b1">郭永洪</author></Book>.b1,author,publisher{ font-family:Arial,sans-serif; font-size:24px; color:yellow;}任務(wù)2-4：選擇符分組多個(gè)選擇符應(yīng)用相同樣式，用“，”分割合并為一組。<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"href=“group.css"?><Book>

<titleclass="b1">XML案例教程</title> <author>郭永洪</author> <publisher>西安電子科技大學(xué)出版社</publisher></Book>任務(wù)2-5：包含選擇符name,.b1,publisher{ font-family:Arial,sans-serif; font-size:24px; color:blue;}publishername{ color:red; font-size:36px; border-bottom:1pxsolid#999;}<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"href="T3.css"?><Book> <name>XML案例教程</name> <authorclass="b1">郭永洪</author> <publisher>

<name>西安電子科技大學(xué)出版社</name> <phone>lt;/phone> </publisher></Book>可以設(shè)置父元素下某些子元素的個(gè)性樣式，使用時(shí)父元素在前，子元素在后，中間用空格隔開訓(xùn)練2XML文檔如下：<?xmlversion="1.0"encoding="UTF-8"?><Movie> <Titleid="id1">翼</Title><Type>類型：戲劇</Type> <Rating>級(jí)別：G</Rating> <Review>評(píng)價(jià)指數(shù)：5</Review> <Companyclass="c1">出品：美國派拉蒙影片公司</Company> <Yearclass="c1">年份：1927</Year> <Director>導(dǎo)演：威廉.A.韋爾曼</Director> </Movie>編寫CSS文件顯示XML數(shù)據(jù)，要求：1、使用ID選擇符顯示片名“翼”，字體Arial，字號(hào)50px，顏色紅色red；2、使用類選擇符顯示類屬性值為c1的元素，字體Arial，字號(hào)40px，顏色綠色green；3、使用包含選擇符顯示Movie的子元素Director，字體Arial，字號(hào)10px，顏色藍(lán)色blue；4、將標(biāo)記Type、Rating、Review歸為一組顯示，字體Arial，字號(hào)10px，顏色#0e0e0e。任務(wù)3：使用CSS文本屬性任務(wù)3-1：使用顯示屬性display顯示xml任務(wù)3-2：使用字體屬性font顯示xml任務(wù)3-3：設(shè)置XML前景色和背景色任務(wù)3-4：使用文本修飾屬性顯示XML任務(wù)3-1：使用顯示屬性displaydisplay:none：用于隱藏元素，使元素在頁面中不可見。display:block：將元素顯示在塊中，塊級(jí)元素通過換行與其他元素分隔(不同塊級(jí)元素占不同行)。display:inline：元素內(nèi)容緊接在前一元素內(nèi)容之后(與前一元素在同一行)。案例3-1：display屬性及框架CSS文件的使用<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"href="bookFramework.css"?><Book> <title>軟件工程</title> <author>鄧良松</author> <publisher> <name>西安電子科技大學(xué)出版社</name> <address>陜西西安大學(xué)路88號(hào)</address> <phone>lt;/phone> </publisher>

<abstract>本書比較系統(tǒng)全面地介紹了軟件工程n方法、面向?qū)ο箝_發(fā)方法。全書共16章。概述了軟件工程、各種生存周期模型和開發(fā)方法......</abstract> <price>22.2元</price></Book>Test.xmlBook{font-family:Arial,sans-serif;font-size:24px;color:blue;}T1.cssBook{ display:block;}title,abstract,price{ display:block;}author{

display:none;}publisher{ display:inline;}T2.css@importurl("T1.css");@importurl("T2.css");bookFramework.css案例3-1：display屬性及框架CSS文件的使用先設(shè)置一個(gè)框架CSS文件bookFramework.css，在框架文件中使用“@import”指令將外部所需的CSS文件引入到框架文件。采用框架設(shè)計(jì)方式將不同的CSS屬性分文件保存，當(dāng)增加新的CSS屬性時(shí)，不需修改原來的CSS文件，只需建一個(gè)新的CSS文件，并將新文件引用到框架文件即可。任務(wù)3-2：使用字體屬性fontfont-family：指定字體名稱，使用逗號(hào)分隔字體名稱。font-style：設(shè)置字體樣式，normal(正常)、italic(斜體)和oblique(傾斜體)。font-size：設(shè)置字體中典型字符的字高和字寬。font-weight：設(shè)置字體粗細(xì)。line-height：設(shè)置字高。任務(wù)3-3：設(shè)置前景色和背景色color屬性：設(shè)置XML文檔元素的前景色。color屬性值可以是名稱、十進(jìn)制、十六進(jìn)制或百分?jǐn)?shù)RGB的顏色值。background-color屬性：設(shè)置元素內(nèi)容的背景顏色，與color屬性的屬性值設(shè)置方式相同。color:greencolor:#FF00CC(#后的6位數(shù)若兩兩相等，可只寫3位)color:rgb(100％,0,80％)任務(wù)3-4：使用文本修飾屬性1、text-indent屬性：設(shè)置元素中文本的縮進(jìn)。2、text-align屬性：設(shè)置元素中文本的對齊方式。left：左對齊；right：右對齊；center：居中對齊。3、vertical-align屬性：設(shè)置元素內(nèi)容的垂直對齊方式。top：頂對齊；middle：中對齊；bottom：底對齊。4、text-decoration屬性：設(shè)置文本內(nèi)容的特殊效果。line-through：加刪除線；overline：加上劃線；underline：加下劃線；none：默認(rèn)值，不加任何修飾。任務(wù)4：使用CSS容器屬性盒模型：1、在元素周圍增加邊框（border）2、在元素與其邊框之間設(shè)定空格填充（padding，即補(bǔ)白）3、設(shè)置邊框與周圍元素之間的邊距（margins）。任務(wù)4：使用CSS容器屬性任務(wù)4-1：設(shè)置XML頁邊距任務(wù)4-2：設(shè)置XML邊框任務(wù)4-3：補(bǔ)白（空格填充）任務(wù)4-1：設(shè)置XML頁邊距1、margin-top：設(shè)置上頁邊距2、margin-bottom：設(shè)置下頁邊距3、margin-left：設(shè)置左頁邊距4、margin-right：設(shè)置右的頁邊距5、margin：設(shè)置四邊頁邊距任務(wù)4-2：設(shè)置XML邊框設(shè)置邊框線樣式：border-style、border-top-style、border-right-style、border-bottom-style、border-left-style屬性，其值分別為：none、dotted、dashed、solid、double、groove、ridge、inset和outset。設(shè)置邊框線寬度：border-width、border-top-width、border-right-width、border-bottom-width和border-1eft-width五個(gè)屬性。屬性值為thin、medium、thick或絕對長度值。使用絕對長度值時(shí)，不能為負(fù)數(shù)，可以是0。設(shè)置邊框線顏色：border-color、border-top-color、border-right-color、border-bottom-color和border-left-color五個(gè)屬性。任務(wù)4-3：補(bǔ)白（空格填充）指定邊框和內(nèi)部元素的間距，可以使用padding、padding-top、padding-right、padding-bottom和padding-left五個(gè)屬性來指定，屬性值為絕對長度或父元素寬度的百分比。任務(wù)5：使用CSS布局屬性任務(wù)5-1：元素絕對定位和相對定位任務(wù)5-2：設(shè)置元素大小任務(wù)5-3：環(huán)繞文本任務(wù)5-4：插入圖片任務(wù)5-1：絕對定位和相對定位1.絕對定位元素根據(jù)瀏覽器