網(wǎng)絡(luò)應(yīng)用程序設(shè)計(jì)--CSS導(dǎo)論

《網(wǎng)絡(luò)應(yīng)用程序設(shè)計(jì)--CSS導(dǎo)論》由會(huì)員分享，可在線閱讀，更多相關(guān)《網(wǎng)絡(luò)應(yīng)用程序設(shè)計(jì)--CSS導(dǎo)論（38頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,第二級(jí),第三級(jí),第四級(jí),第五級(jí),*,參考:,*,網(wǎng)絡(luò)應(yīng)用程序設(shè)計(jì),-CSS,導(dǎo)論,CSS,導(dǎo)論,段會(huì)川,山東師范大學(xué)信息科學(xué)與工程學(xué)院,2006,年,10,月,目 錄,先決知識(shí),何為,CSS?,CSS,綜合演示,樣式解決了一個(gè)帶有普遍性的問(wèn)題,樣式可以為您節(jié)省很多勞動(dòng),多個(gè)樣式可以級(jí)聯(lián)為一個(gè)樣式,CSS,語(yǔ)法,CSS,語(yǔ)法要點(diǎn),樣式組,類(lèi),(class),選擇器,10/22/2024,2,參考:,目 錄,類(lèi),(class),選擇器,標(biāo)識(shí),(id),選擇器,CSS,注釋,(comment),使用內(nèi)部樣式單,內(nèi)聯(lián)樣式,多重樣式,CSS,背景樣式,

2、CSS,文本樣式,CSS,字體,(font),CSS,邊框,(border),10/22/2024,3,參考:,目 錄,CSS,邊空,(margin),CSS,填充,(padding),CSS,列表,(list),CSS,元素尺寸,(dimension),CSS,分級(jí)定位,(classification),CSS,定位,(positioning),CSS,贗類(lèi),(pseudo-classes),CSS,贗元素,(pseudo-elements),CSS2,媒體類(lèi)型,(media types),CSS,綜合演示,10/22/2024,4,參考:,先決知識(shí),HTML/XHTML,10/22/202

3、4,5,參考:,何為,CSS?,CSS,代表層疊樣式單,(Cascading Style Sheet),也譯作級(jí)聯(lián)樣式單,簡(jiǎn)稱(chēng)為樣式單,樣式用于定義如何顯示,HTML,元素,通常樣式放在樣式單中,樣式被,HTML 4.0,采用是為了解決一個(gè)問(wèn)題,外部樣式單可以為您節(jié)省許多勞動(dòng),外部樣式單存儲(chǔ)在,CSS,文件中,多個(gè)樣式定義可以級(jí)聯(lián)起來(lái)構(gòu)成一個(gè)樣式,10/22/2024,6,參考:,CSS,綜合演示,CSSDemoA.htm,10/22/2024,7,參考:,樣式解決了一個(gè)帶有普遍性的問(wèn)題,設(shè)計(jì),HTML,標(biāo)簽的本意是定義文檔的內(nèi)容,它們本來(lái)想使用諸如,等描述,”,這是一個(gè)標(biāo)題,”,“,這是一個(gè)

4、段落,”,“,這是一個(gè)表格,”,而文檔的外觀由瀏覽器決定,不需要借助于任何的格式化標(biāo)簽,隨著兩種主要的瀏覽器,Netscape,和,IE,不斷地向原來(lái)的,HTML,規(guī)范中增加新的,HTML,標(biāo)簽和屬性,人們發(fā)現(xiàn)創(chuàng)建將,HTML,文檔與其外觀展示清楚地分離開(kāi)來(lái)的站點(diǎn)越來(lái)越困難,為解決這一問(wèn)題,W3C(World Wide Consortium,WWW,聯(lián)盟,),負(fù)責(zé)標(biāo)準(zhǔn)化,HTML,的非盈利性組織,在創(chuàng)建,HTML 4.0,的同時(shí)引入了樣式,目前,所有主流的瀏覽器都支持,CSS,10/22/2024,8,參考:,樣式可以為您節(jié)省很多勞動(dòng),如同,HTML 3.2,中的,標(biāo)簽及其,color,屬性,

5、樣式單定義了,HTML,元素的顯示方式,樣式通常存儲(chǔ)在外部的,.,css,文件中,.,CSS,是,Web,設(shè)計(jì)技術(shù)的一個(gè)重大突破,因?yàn)樗归_(kāi)發(fā)者可以快速地控制多個(gè)的,Web,頁(yè)的樣式和外觀效果,Web,開(kāi)發(fā)者可以為每個(gè),HTML,元素定義樣式,然后將它應(yīng)用到所期望的任何數(shù)量的,Web,頁(yè)上,10/22/2024,9,參考:,多個(gè)樣式可以級(jí)聯(lián)為一個(gè)樣式,樣式單允許將樣式定義在單一的,HTML,元素上,定義在,HTML,網(wǎng)頁(yè)的,head,部分,或定義在一個(gè)外部的,CSS,文件中,一個(gè),HTML,文檔也可以引用多個(gè)外部樣式單,級(jí)聯(lián)次序,:,所有的樣式將按照如下的規(guī)則,”,級(jí)聯(lián),”,為一個(gè)新的,”,虛

6、擬,”,樣式單,其中,4,級(jí)為最高級(jí),高級(jí)的樣式將覆蓋低級(jí)的樣式,瀏覽器默認(rèn)值,外部樣式單,出現(xiàn)在,head,部分的內(nèi)部樣式單,出現(xiàn)在,HTML,元素中的內(nèi)聯(lián)樣式單,10/22/2024,10,參考:,CSS,語(yǔ)法,CSS,語(yǔ)法由三部分組成,選擇器,(selector),參數(shù),(property,也稱(chēng)屬性,),值,(value),selector property:value,選擇器是你要定義樣式的,HTML,元素或標(biāo)簽,參數(shù)是你期望改變的標(biāo)簽屬性,(attribute),值就是你期望參數(shù)要取的值,參數(shù)和值之間用冒號(hào)隔開(kāi),且放在花括號(hào)中,如,:body color:black,10/22/20

7、24,11,參考:,CSS,語(yǔ)法要點(diǎn),如果值包括多個(gè)單詞,則用雙引號(hào)括起來(lái),p font-family:sans serif,多個(gè)參數(shù)間中分號(hào)隔開(kāi),p text-,align:center;color:red,為增強(qiáng)可讀性,你可以使每個(gè)參數(shù)單獨(dú)占用一行,p,text-align:center;,color:black;,font-family:,arial,10/22/2024,12,參考:,樣式組,你可以將多個(gè)選擇器以逗號(hào)隔開(kāi)歸為一組,h1,h2,h3,h4,h5,h6,color:green,10/22/2024,13,參考:,類(lèi),(class),選擇器,使用類(lèi)選擇器你可以為一種,HTML

8、,元素定義不同的樣式,如下例子定義了兩種類(lèi)型的段落,:,右對(duì)齊和居中,p.right,text-align:right,p.center,text-align:center,這兩類(lèi)段落可以如下方式使用,這些文字將右對(duì)齊,.,這些文字將居中,.,10/22/2024,14,參考:,類(lèi),(class),選擇器,可以為一個(gè)元素使用多個(gè)類(lèi),這個(gè)段落使用,”,center”,和,”,bold”,兩個(gè)樣式類(lèi),.,10/22/2024,15,參考:,類(lèi),(class),選擇器,也可以定義通用的樣式類(lèi),.center text-align:center,通用的樣式類(lèi)可以用到所有含指定屬性的元素上,這個(gè)標(biāo)題將居

9、中,這個(gè)段落將居中,.,注意,:,不要取數(shù)字開(kāi)頭的類(lèi)名,10/22/2024,16,參考:,標(biāo)識(shí),(id),選擇器,你可以為,HTML,元素的標(biāo)識(shí),(id),設(shè)定樣式,如果你定義了如下所示的,id,綠色標(biāo)題,綠色段落,則可定義如下的樣式,#green color:green,你也可以直接為特定標(biāo)識(shí)的元素定義樣式,p#para1,text-align:center;,color:red,10/22/2024,17,參考:,CSS,注釋,(comment),注釋已經(jīng)成為計(jì)算機(jī)科學(xué)中重要的文化,CSS,使用,C,格式的注釋語(yǔ)法,/*,定義段落樣式,*,/,p,text-align:center;,/

10、*,為段落定義顏色和字體*,/,color:black;,font-family:,黑體,10/22/2024,18,參考:,使用外部樣式單,外部樣式單需要在,head,部分使用,標(biāo)簽引用,外部樣式單要保存類(lèi)型名為,.,css,的文本文件中,此文件中不能含有,HTML,標(biāo)簽,如,:,hr color:sienna,p margin-left:20px,body background-image:url(images/back40.gif),10/22/2024,19,參考:,使用內(nèi)部樣式單,內(nèi)部樣式單需要在,head,部分使用,標(biāo)簽定義,hr color:sienna,p margin-lef

11、t:20px,body background-image:url(images/back40.gif),10/22/2024,20,參考:,內(nèi)聯(lián)樣式,內(nèi)聯(lián)樣式用,HTML,標(biāo)簽的,style,屬性定義,這是一個(gè)使用內(nèi)聯(lián)樣式的段落,.,內(nèi)聯(lián)樣式使樣式單失去了本來(lái)的意義,因此應(yīng)該盡量避免使用內(nèi)聯(lián)樣式,10/22/2024,21,參考:,多重樣式,如果為,h3,定義了如下的外部樣式,h3 color:red;text-align:left;font-size:8pt,同時(shí)又為其定義了如下的內(nèi)部樣式,h3 text-align:right;font-size:20pt,則網(wǎng)頁(yè)中的,h3,元素最后取的樣

12、式是,:,color:red;text-align:right;font-size:20pt,10/22/2024,22,參考:,CSS,背景樣式,設(shè)置背景顏色,:background-color,參數(shù),BgColor.htm,設(shè)置背景圖片,(,完全平鋪,):background-image,參數(shù),BgImage.htm,設(shè)置背景圖片,(,縱向平鋪,):background-repeat,參數(shù),BgImageY.htm,設(shè)置背景圖片,(,橫向平鋪,):background-repeat,參數(shù),BgImageX.htm,設(shè)置背景圖片,(,指定位置,):background-position,參數(shù)

13、,BgImageP.htm,設(shè)置背景圖片,(,附加,):background-,attachment,參數(shù),BgImageF.htm,設(shè)置背景圖片,(,綜合演示,),BgImageA.htm,10/22/2024,23,參考:,CSS,文本樣式,文本顏色,:color,TextColor.htm,文本背景顏色,:background-color,TextBgColor.htm,文本對(duì)齊,:text-align,TextAlign.htm,文本修飾,:text-decoration,TextDeco.htm,首行縮進(jìn),:text-indent,TextIndent.htm,字母轉(zhuǎn)換,:text-

14、transform,TextLetters.htm,10/22/2024,24,參考:,CSS,字體,(font),字體種類(lèi),:font-family,FontFamily.htm,字體大小,:font-size,FontSize.htm,字體風(fēng)格,:font-style,FontStyle.htm,字體變種,:font-variant,FontVariant.htm,字體重度,:font-weight,FontWeight.htm,綜合字體設(shè)置,FontAll.htm,10/22/2024,25,參考:,CSS,邊框,(border),同時(shí)設(shè)置四側(cè)邊框,:border-style,Borde

15、rFour.htm,為每側(cè)設(shè)置不同的邊框,:border-style,BorderEach.htm,設(shè)置邊框顏色,:border-color,BorderColor.htm,設(shè)置左側(cè)邊框?qū)挾?:border-left-width,BorderWidthLeft.htm,為底邊框設(shè)置各種屬性,:border-bottom,BorderBottomAll.htm,設(shè)置各側(cè)邊框?qū)挾?:border-width,BorderWidthAll.htm,設(shè)置各種邊框?qū)傩?BorderAll.htm,10/22/2024,26,參考:,CSS,邊空,(margin),左邊空,:margin-left,Mar

16、ginLeft.htm,右邊空,:margin-right,MarginRight.htm,上邊空,:margin-top,MarginTop.htm,下邊空,:margin-bottom,MarginBottom.htm,全部邊空,:margin,MarginAll.htm,10/22/2024,27,參考:,CSS,填充,(padding),左填充,:padding-left,PaddingLeft.htm,右填充,:padding-right,PaddingRight.htm,上填充,:padding-top,PaddingTop.htm,下填充,:padding-bottom,PaddingBottom.htm,四側(cè)填充,:padding,PaddingAll.htm,10/22/2024,28,參考:,CSS,列表,(list),無(wú)編號(hào)列表,:list-style-type,ListUnordered.htm,編號(hào)列表,:list-style-type,ListOrdered.htm,圖標(biāo)式無(wú)編號(hào)列表,:list-style-type,ListImage.htm,縮進(jìn)式無(wú)編號(hào)