第7章 使用CSS設(shè)置XML樣式.ppt_第1頁
第7章 使用CSS設(shè)置XML樣式.ppt_第2頁
第7章 使用CSS設(shè)置XML樣式.ppt_第3頁
第7章 使用CSS設(shè)置XML樣式.ppt_第4頁
第7章 使用CSS設(shè)置XML樣式.ppt_第5頁
已閱讀5頁,還剩50頁未讀, 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)

文檔簡介

1、,第7章 使用CSS設(shè)置XML樣式,7.1 CSS簡介 7.2 選擇元素(常用元素選擇符) 7.3 樣式繼承與級聯(lián)順序 7.4 CSS中的注釋 7.5 CSS屬性 (掌握常用樣式屬性的設(shè)置),7.1 CSS簡介 -7.1.1 CSS的基本知識,XML 文檔的特點是將數(shù)據(jù)和數(shù)據(jù)的樣式進行了分離,XML文檔側(cè)重于數(shù)據(jù)的存儲和傳輸,數(shù)據(jù)的顯示需通過其它的技術(shù)來實現(xiàn),即樣式表。 樣式表(StyleSheet)是一種專門描述結(jié)構(gòu)文檔表現(xiàn)方式的文檔,是用于(增強)控制網(wǎng)頁樣式一種標記性語言。是一組規(guī)則,既可以描述這些文檔如何在屏幕上顯示,也可以描述它們的打印效果,甚至聲音效果。,XML關(guān)于文檔瀏覽的基本思

2、想是將數(shù)據(jù)與數(shù)據(jù)的顯示樣式分別定義。這樣,XML格式文檔不會重蹈某些HTML文檔結(jié)構(gòu)混雜、內(nèi)容繁亂的覆轍。 XML的編寫者也可以集中精力于數(shù)據(jù)本身,而不受顯示方式的細枝末節(jié)的影響。 樣式描述與數(shù)據(jù)描述相分離,顯示細節(jié)的描述和修改并不影響文檔中的數(shù)據(jù)及其內(nèi)在結(jié)構(gòu)。 一個樣式表也可以應(yīng)用于多個文檔,僅僅改變一個樣式表文件就可以改變數(shù)百個網(wǎng)頁的外觀.,樣式表的主要優(yōu)點,XML為用戶提供了兩種樣式表: (1)CSS(Cascading Style Sheets,級聯(lián)樣式表亦稱層疊樣式表) 當一個文檔的兩種或多種樣式發(fā)生矛盾時,執(zhí)行的效果要按照“層疊規(guī)則”來判斷。即如果標記的樣式定義發(fā)生沖突時,最近標記

3、的樣式定義將生效。 (2)XSL(eXtensible Stylesheet Language,可擴展樣式表語言 實現(xiàn)不同標記語言之間的轉(zhuǎn)換以及與各種應(yīng)用程序之間的數(shù)據(jù)交換。XSL當前的主要應(yīng)用是將XML文檔代碼轉(zhuǎn)變成HTML代碼,實現(xiàn)XML文檔在IE中的顯示。,7.1 CSS簡介 -7.1.1 CSS的基本知識,一個CSS樣式表就是一組規(guī)則。每個規(guī)則給出此規(guī)則所適用的元素名稱,和一組適用于此元素具體屬性的值。 例如:【例7-1(b)】顯示圖書信息表的CSS文檔。,7.1.2 CSS樣式表的創(chuàng)建與應(yīng)用,【例7-1(a)】圖書信息表的XML文檔。 計算機網(wǎng)絡(luò)教程 計算機 謝希仁 西游記 文學 吳

4、承恩 ,7.1.2 CSS樣式表的創(chuàng)建與應(yīng)用,【例7-1(b)】顯示圖書信息表的CSS文檔。 例7-1.css charset GB2312; book display:block; font-size:15pt; color:red; title display:block; text-align:center; background-color:#ffffbb; font-family: 楷體_GB2312; font-size:30pt; color:blue; type,author display:block;,charset規(guī)則用來指定樣式表使用的 字符集。要設(shè)置漢字字體必須有該

5、指令,否則全部為瀏覽器默認字體。,注意:添加charset后,在CSS中 雖然可以出現(xiàn)中文,但仍然不能 使用中文的XML元素名稱。,CSS樣式表由樣式規(guī)則組成, 以告訴瀏覽器怎樣去呈現(xiàn)文檔. CSS文檔對大小寫不敏感,鏈接CSS和XML文檔,CSS作為獨立的文本文檔,使用時必須和獨立的DTD一樣,通過指令和相應(yīng)的XML文檔關(guān)聯(lián)起來. 語法格式為: 說明: :該語句為處理指令,該指令告訴解析器顯示該XML文檔時使用后面屬性中指定的樣式表。 type屬性:指定采用的樣式文件的類型,對CSS樣式表來說,其值為text/css,對XSL樣式表來說,其值為text/xsl。 href屬性:指定所引用的樣

6、式表的URL。 絕對路徑: 相對路徑: ,鏈接CSS和XML文檔,語法格式為: 說明: 如果引用的CSS文件的路徑無效,找不到引用的CSS文檔,或調(diào)用的是空白的CSS文檔,IE等多數(shù)瀏覽器會以樹狀顯示源XML文檔。 問:元素中的類別和作者為什么是紅色的? 提示:如果XML文檔中有一個標記沒有定義樣式,則該標記將使用它的父標記樣式,這種機制稱為樣式的繼承。,將樣式語句嵌入到XML文件當中,【例7-1(c)】使用內(nèi)部樣式指令圖書信息表的XML文檔。 文件名:例7-1(c).xml charset GB2312; book display:block; font-size:30pt; title d

7、isplay:block; text-align:center; background-color:#ffffbb; font-family: 華文行楷; font-size:30pt; color:blue; typedisplay:block;font-family: 黑體 計算機網(wǎng)絡(luò)教程 計算機 謝希仁 ,可以綜合使用上面兩種方法給XML 文檔添加樣式,當所添加的樣式中有些規(guī)則發(fā)生矛盾時,以內(nèi)部方法定義的為主。,在CSS文檔中也可以引用其它獨立的CSS文檔。 引用的語法為: import url (另一個CSS的URL ) ; url():可選 import url(print.css)

8、; import print.css; URL可以是本地或網(wǎng)絡(luò)上的相對路徑或絕對路徑: import 指令注意事項:,7.1.3 在CSS中引用其它的CSS文檔,import 指令注意事項: 1) import 指令必須放在CSS文檔的開頭,即在此之前不能有其它規(guī)則 2) import 指令中的“;”不能少 3)如果被引用的樣式表中的格式與引用者中的格式?jīng)_突,則以引用者中的格式優(yōu)先 4)如果引用的多個外部樣式表中的格式?jīng)_突,則優(yōu)先順序即按引用的先后順序,使用import指令,使用import指令,例 import示例.xml 軟件學院 信管072 姚俊楠 ,例 importschool.css

9、 school display:block; font-size:20pt; color:blue; margin-top:40px ,例 importclass.css import url(importschool.css); Class display:block; Name display:block; font-size:30pt; color:red; ,使用多個樣式文件,例 import示例.xml 軟件學院 信管072 姚俊楠 ,例樣式文件1.css school display:block; font-size:20pt; color:blue; margin-top:40p

10、x ,例樣式文件2.css Class display:block; Name display:block; font-size:30pt; color:red; ,7.2 CSS樣式規(guī)則,CSS的主要功能是將某些指定的規(guī)則應(yīng)用于文檔中同一類型的元素。 定義CSS樣式規(guī)則的語法為: 選擇符屬性1: 屬性值1 ;屬性2: 屬性值2 選擇符:可以是多個元素以及其它與元素內(nèi)容相關(guān)(CLASS或ID )的特殊選擇符。 屬性:控制元素呈現(xiàn)樣式的特性,如顯示屬性、字體屬性等等。,book display:block; font-size:15pt; color:red;,7.2.1 成組選擇符,1. 成組

11、選擇符可以把一個規(guī)則同時應(yīng)用于多個元素,各元素用逗號隔開。 例如: title,type,author display: block; 2. 在CSS中,可以為同一個元素指定多個規(guī)則。 例如:,name,authordisplay:block namefont-size:20pt; font-family:宋體,7.2.2 偽元素,偽元素(pseudo-element)是指將文檔中通常不能作為獨立元素來看待的部分作為元素來對待。常用的有兩種偽元素:元素的第一行和首字母。 1首行偽元素 首行偽元素是在元素名后加上“first-line”來選擇,以創(chuàng)建只適用于此元素第一行的規(guī)則。例如,下列規(guī)則定義

12、title元素的首行以粗體顯示: title:first-line font-weight: bold; font-style 首行是實際顯示時的元素文本的第一行。 2首字符偽元素 首字符偽元素是用來選擇一個元素的首字符, 通常用來將元素的首字符顯示為下沉的大寫字母效果。例如: title:first-letter font-size: 200%; vertical-align: text-top ,7.2.2 偽元素-首行偽元素,例 firstline.css book display:block; font-size:20pt; Book:first-line text-decoratio

13、n:underline;color:green;display:block price,pubdatedisplay:block; color:blue;,例 firstline.xml XML語言及應(yīng)用 華拴平 19.00 2006-01-01 ,7.2.3 偽類 CSS中的偽類包括first-child、:link、:visited、:active、:hover、 :focus等,可以用來設(shè)置超鏈接等相關(guān)效果。 7.2.4 CLASS屬性 使用CLASS屬性(偽類)為相同元素的不同內(nèi)容指定不同的格式。 例: 7-2.xml 7-2.css,使用CLASS屬性(偽類)來為相同元素的不同內(nèi)容指

14、定不同的格式。 01信管1班 200120101,季慧奇,女,1985-1-2 200120104,王燕萍,女,1983-6-7 01網(wǎng)絡(luò)1班 200120525,張明淵,男,1984-3-27 200120526,旺建文,女,1983-5-31 在CSS中按下列格式來識別的不同對象: 元素名.CLASS屬性 例: 7-2.xml 7-2.css banji.x2font-weight:bold;color:red; text-align:center; banji.x1font-size:32pt; font-weight:bold;,ID屬性和CLASS屬性一樣,用于選擇同一元素的不同對象

15、。將7-2.xml文檔中的CLASS用ID替換,也可以達到同樣的顯示效果。但在CSS中使用ID屬性選擇元素對象時使用如下格式: 例如可以使用: 使ID屬性值為x2的“班級”元素的字體放大2倍,粗體顯示。 XML允許同時為元素設(shè)置CLASS和ID屬性來設(shè)置特殊格式,同時使用而沖突時,以ID屬性設(shè)置的格式優(yōu)先。,元素名#ID屬性的屬性值,banji#x2font-size:200%; font-weight:bold;,7.2.5 ID屬性,例: 7-2(1).xml 7-2(1).css,7.2.7 STYLE屬性,使用元素的STYLE屬性可以將特定元素樣式直接應(yīng)用在一個特定的元素上。這種樣式設(shè)

16、置方式也稱為“內(nèi)聯(lián)樣式”(inline)。 具體格式為: 例如: 20070814102 張沙沙 女 當STYLE屬性的樣式與CSS樣式表中的樣式?jīng)_突時,則STYLE屬性中的樣式優(yōu)先,這稱為“就近優(yōu)先”原則。,7.3 樣式繼承與級聯(lián)順序,樣式繼承 如果XML文檔中有一個標記沒有定義樣式,則該標記將使用它的父標記樣式,這種機制稱為樣式的繼承。因此,不要求為XML文檔中各元素的每個可能的屬性明確地定義規(guī)則。如果從父元素那里沒有繼承任何值,就使用默認值。 例如:沒有指定子元素的字號、顏色等屬性,則該元素將繼承其父元素的屬性,不被繼承的屬性一般有背景、邊框等。 級聯(lián)順序 即如果標記的樣式定義發(fā)生沖突時

17、,最近標記的樣式定義將生效。 如:父元素 、子元素本身也定義規(guī)則,7.4 CSS中的注釋,和其他程序設(shè)計語言一樣,在CSS樣式表中也可以包含注釋。前面已多次用到,CSS注釋使用“/*/”符號將注釋內(nèi)容括起來。 注釋不能嵌套。如下列段落使用了注釋語句: /* 有注釋的樣式表段落 */ book color: red; /*文字為紅色 */ font-family:隸書; /* 字體為隸書 */ 注意:IE瀏覽器對注釋支持不是太好,特別是中文注釋,很可能導致格式設(shè)置無效。,7.5 CSS中的常用屬性和屬性值,CSS的規(guī)則通過屬性和屬性值來設(shè)定。 屬性用來指定元素某一方面的特性,屬性值則指定該特性的

18、具體特征,如字體、字號等。 屬性名稱都是關(guān)鍵字:如font-size、font-family、display等等。 CSS中屬性多種多樣,但屬性值可大致分為4類: 1)關(guān)鍵字 2)顏色 3)URL 4)長度,屬性值,CSS中有些屬性值可以用關(guān)鍵字來設(shè)置。 如text-align : left | right | center | justify font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller等等。,1. 關(guān)鍵字,屬性值,使用顏色值的屬性主要有: col

19、or、background-color、border-color。 設(shè)置顏色值的方式有: 1)顏色名稱-16種 div color: red; p background-color: silver white,blue,green,navy(海藍),purple(紫色),2. 顏色值,屬性值,2)rgb ( R , G , B ) R :紅色值。正整數(shù) | 百分數(shù) G :綠色值。正整數(shù) | 百分數(shù) B :藍色值。正整數(shù) | 百分數(shù) 正整數(shù)值的取值范圍為:0 - 255。 百分數(shù)值的取值范圍為:0.0% - 100.0%。 超出范圍的數(shù)值將被截至其最接近的取值極限。并非所有瀏覽器都支持使用百分數(shù)

20、值。,2. 顏色值,div color: rgb(132,20,180); div color: rgb(12%,200,50%); ,3)#RRGGBB RR :紅色值。十六進制正整數(shù) GG :綠色值。十六進制正整數(shù) BB :藍色值。十六進制正整數(shù) 取值范圍為:00 FF 參數(shù)必須是兩位數(shù)。對于只有一位的,應(yīng)在前面補零 如果每個參數(shù)各自在兩位上的數(shù)字都相同,那么本單位也可縮寫為 #RGB 的方式,例如:#FF8800 可以縮寫為 #F80 見顏色表,2. 顏色值,div color: #FF0000; div color: #F00; ,CSS中的屬性和屬性值,屬性值,CSS中的backgr

21、ound-image、list-style-image、list-style的屬性值為URL,URL可以是本地或網(wǎng)絡(luò)的絕對或相對路徑 URL值可以不加引號 如果需要,URL值可以放在單引號或雙引號中,3. URL值,background-image : none | url ( url ),code background-image: url(comet.jpg); blockquote background-image: url(c:InetPubMyPixscomet.jpg); br background-image: url(http:/F ,CSS中的屬性和屬性值,CSS中的長度屬性

22、用得較多,如字號、行距、字間距、寬度、長度等等。 長度屬性值可以按絕對長度和相對長度賦值。 (1)絕對長度單位 (Word等),4. 長度屬性值及其單位,div font-size : 0.75pc; div font-size : 9pt; ,CSS中的屬性和屬性值,(2)相對長度單位在不同的輸出設(shè)備之間的比例較好,如監(jiān)視器和打印機。,4. 長度屬性值及其單位,div font-size : 1.2em; div font-size : 1.2ex; div font-size : 200%; ,CSS的常用屬性 p140-150,顯示屬性(display):用來設(shè)置元素的顯示方式。 字體屬

23、性(font):字體屬性用來設(shè)置文本的字體、字號、樣式、筆劃粗細等,CSS1支持五種基本的字體屬性:font-family、font-style、font-variant、font-weight和font-size。 顏色屬性(color):設(shè)置文本的顏色。 背景屬性(background):用于為元素內(nèi)容的背景設(shè)置一種顏色或一幅圖像。 設(shè)置文本屬性(Text):文本其它格式,文字間隔,文本水平對齊方式等。 邊框?qū)傩裕╞order):邊框線的大小,邊距等,CSS的常用屬性 p140,display屬性用來設(shè)置元素的顯示方式。 display屬性的4個屬性: none:用于隱藏元素,不顯示任何信

24、息。 block:表示所要顯示的信息要獨占一行(即成為一個段落)。 inline:所要顯示的信息緊接著前一元素內(nèi)容。 list-item:以列表方式顯示。 CSS1中默認值為block,CSS2中默認值為inline。 display屬性是不能被繼承的,如果父元素被隱藏,子元素又沒有設(shè)定display屬性,則子元素不會被隱藏,而是以默認方式被顯示。,一、 設(shè)置display屬性,list-item,1)list-style-type 列表項目符號類型 studentdisplay:list-item;list-style-type:circle;,一、 設(shè)置display屬性,2) list-

25、style-image: 列表項目符號圖標,以指定的圖片作為列表符號 list-style-image : none | url ( url ) book display:list-item; list-style-position:outside; list-style-image:url(qq.gif); color:green; font-size:30pt; text-align:left; ,一、 設(shè)置display屬性,3) list-style-position 設(shè)置列表項標記如何根據(jù)文本排列。 list-style-position : outside | inside out

26、side :默認值。列表項目標記放置在文本塊以外,且環(huán)繞文本不根據(jù)標記對齊 inside :列表項目標記放置在文本塊以內(nèi),且環(huán)繞文本根據(jù)標記對齊,一、 設(shè)置display屬性,4) list-style 該屬性為復合屬性,用簡潔的方式來設(shè)定list-item上述3個屬性值 list-style : list-style-type list-style-position list-style-image 默認值為:disc outside none 例:book display:list-item; list-style:none inside url(qq.gif),CSS的常用屬性,1. 設(shè)

27、置頁邊距的屬性有: margin-top、margn-bottom、margn-left、margn-right和margn。 例、/*上、下、左、右頁邊距都是2cm,二者等價*/ book margin:2cm 2cm 2cm 2cm book margin:2cm /*上面二者語句等價*/ 2. 設(shè)置邊框線的屬性Border-style,默認值為none(無邊框線) 另外,其值為:dotted、dashed、solid、double、groove、ridge、inset、outset,二、設(shè)置邊框?qū)傩?CSS的常用屬性,3. 設(shè)置邊框線寬度 border-width : medium |

28、thin | thick | length border-top-width : medium | thin | thick | length border-right-width : medium | thin | thick | length border-bottom-width : medium | thin | thick | length border-left-width : medium | thin | thick | length medium :默認值。默認寬度;thin :小于默認寬度 thick :大于默認寬度; length :長度值。不可為負值。 book bor

29、der-style: solid; border-width: thin; book display: block; border-style: solid; border-width: 10px; ,二、設(shè)置邊框?qū)傩?CSS的常用屬性,4.設(shè)置邊框線顏色,共有5種屬性( border-color、border-top-color、border-bottom-color、border-left-color) border-color : color border-top-color : color border-right-color : color border-bottom-color :

30、 color border-left-color : color body border-top-color: red; border-bottom-color: RGB(223, 94, 77); border-right-color: red; border-left-color: black;,二、設(shè)置邊框?qū)傩?CSS1支持6種字體屬性: 1. font-family 設(shè)置文本的字體名稱序列。 font-family : name 默認值為 Times New Roman,三、設(shè)置字體屬性,student font-family:宋體;,三、 設(shè)置字體屬性,2. font-style 設(shè)

31、置字體樣式。 font-style : normal | italic | oblique normal :默認值。正常的字體 italic :斜體。 oblique :傾斜的字體,p font-style: normal; p font-style: italic; p font-style: oblique; ,CSS的常用屬性,3. font-size font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length,三、 設(shè)置字體屬性,p fo

32、nt-style: normal; p font-size: 12px; p font-size: xx-larger; p font-size: 20%; 指相對于父元素而言,CSS的常用屬性,4. font-weight 設(shè)置對象中的文本字體的粗細 font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal :默認值。正常的字體。相當于 400 。聲明此值將取消之前任何設(shè)置 bold :粗體。相當于 700 。也相當于 b 對象的作用

33、bolder :比 normal 粗 lighter :比 normal細,三、 設(shè)置字體屬性,CSS的常用屬性,5. font-variant 設(shè)置對象中的文本是否為大寫字母。 font-variant : normal | small-caps normal :默認值。正常的字體 small-caps :用大寫字母字體代替文本中的小寫字母,三、 設(shè)置字體屬性,SN font-variant: small-caps; ,CSS的常用屬性,5. line-height 設(shè)置行高, line-height : normal | length normal :默認值。默認行高 length :百分

34、數(shù) | 由浮點數(shù)字和單位標識符組成的長度值,其百分比取值是基于字體的高度尺寸。,三、 設(shè)置字體屬性,CSS的常用屬性,6. font 該屬性為復合屬性,用簡潔的方式來設(shè)定上述各屬性值 font : font-style | font-variant | font-weight | font-size | line-height | font-family 參數(shù)必須按照如上的排列順序。每個參數(shù)僅允許有一個值。忽略的將使用其參數(shù)對應(yīng)的獨立屬性的默認值。 默認值為: normal normal normal medium normal Times New Roman,三、 設(shè)置字體屬性,p font

35、: italic small-caps 600 12pt/18pt 宋體; H1 font: 15pt/17pt bold Arial normal ,四、 設(shè)置顏色和背景屬性,設(shè)置color屬性 book color: red; 設(shè)置背景屬性 bookcolor: red; background-color:green; 用于為元素內(nèi)容的背景設(shè)置一種顏色或一幅圖像。 1. background-color:設(shè)置背景顏色,同color 2. background-image:設(shè)置背景圖片, 例、namebackground-image:url(zhaolin.jpg); 3. backgrou

36、nd-repeat:設(shè)置對象的背景圖像是否及如何鋪排 banjibackground-image:url(qq.gif); background-repeat:repeat-x; background-color:red;,3. background-repeat 設(shè)置對象的背景圖像是否及如何鋪排,必須先指定對象的背景圖像( background-image )。 background-repeat : repeat | no-repeat | repeat-x | repeat-y repeat :默認值。背景圖像在縱向和橫向上平鋪 no-repeat :背景圖像不平鋪 repeat-x :背景圖像僅在橫向上平鋪 repeat-y :背景圖像僅在縱向上平鋪,4. background-position 設(shè)置對象的背景圖像位置。必須先指定 background-image 屬性。 background-position : length | length background-position : position | position length :百分數(shù) | 由浮點數(shù)字和單位標識符組成的長度值 position :top | center | bottom | left | center | right 默認值為: 0% 0%(左上角) 如果

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論