《網(wǎng)絡(luò)應(yīng)用程序設(shè)計--CSS導(dǎo)論》由會員分享，可在線閱讀，更多相關(guān)《網(wǎng)絡(luò)應(yīng)用程序設(shè)計--CSS導(dǎo)論（38頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,第二級,第三級,第四級,第五級,*,參考:,*,網(wǎng)絡(luò)應(yīng)用程序設(shè)計,-CSS,導(dǎo)論,CSS,導(dǎo)論,段會川,山東師范大學(xué)信息科學(xué)與工程學(xué)院,2006,年,10,月,目 錄,先決知識,何為,CSS?,CSS,綜合演示,樣式解決了一個帶有普遍性的問題,樣式可以為您節(jié)省很多勞動,多個樣式可以級聯(lián)為一個樣式,CSS,語法,CSS,語法要點,樣式組,類,(class),選擇器,10/22/2024,2,參考:,目 錄,類,(class),選擇器,標(biāo)識,(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,分級定位,(classification),CSS,定位,(positioning),CSS,贗類,(pseudo-classes),CSS,贗元素,(pseudo-elements),CSS2,媒體類型,(media types),CSS,綜合演示,10/22/2024,4,參考:,先決知識,HTML/XHTML,10/22/202
3、4,5,參考:,何為,CSS?,CSS,代表層疊樣式單,(Cascading Style Sheet),也譯作級聯(lián)樣式單,簡稱為樣式單,樣式用于定義如何顯示,HTML,元素,通常樣式放在樣式單中,樣式被,HTML 4.0,采用是為了解決一個問題,外部樣式單可以為您節(jié)省許多勞動,外部樣式單存儲在,CSS,文件中,多個樣式定義可以級聯(lián)起來構(gòu)成一個樣式,10/22/2024,6,參考:,CSS,綜合演示,CSSDemoA.htm,10/22/2024,7,參考:,樣式解決了一個帶有普遍性的問題,設(shè)計,HTML,標(biāo)簽的本意是定義文檔的內(nèi)容,它們本來想使用諸如,等描述,”,這是一個標(biāo)題,”,“,這是一個
4、段落,”,“,這是一個表格,”,而文檔的外觀由瀏覽器決定,不需要借助于任何的格式化標(biāo)簽,隨著兩種主要的瀏覽器,Netscape,和,IE,不斷地向原來的,HTML,規(guī)范中增加新的,HTML,標(biāo)簽和屬性,人們發(fā)現(xiàn)創(chuàng)建將,HTML,文檔與其外觀展示清楚地分離開來的站點越來越困難,為解決這一問題,W3C(World Wide Consortium,WWW,聯(lián)盟,),負責(zé)標(biāo)準(zhǔn)化,HTML,的非盈利性組織,在創(chuàng)建,HTML 4.0,的同時引入了樣式,目前,所有主流的瀏覽器都支持,CSS,10/22/2024,8,參考:,樣式可以為您節(jié)省很多勞動,如同,HTML 3.2,中的,標(biāo)簽及其,color,屬性,
5、樣式單定義了,HTML,元素的顯示方式,樣式通常存儲在外部的,.,css,文件中,.,CSS,是,Web,設(shè)計技術(shù)的一個重大突破,因為它使開發(fā)者可以快速地控制多個的,Web,頁的樣式和外觀效果,Web,開發(fā)者可以為每個,HTML,元素定義樣式,然后將它應(yīng)用到所期望的任何數(shù)量的,Web,頁上,10/22/2024,9,參考:,多個樣式可以級聯(lián)為一個樣式,樣式單允許將樣式定義在單一的,HTML,元素上,定義在,HTML,網(wǎng)頁的,head,部分,或定義在一個外部的,CSS,文件中,一個,HTML,文檔也可以引用多個外部樣式單,級聯(lián)次序,:,所有的樣式將按照如下的規(guī)則,”,級聯(lián),”,為一個新的,”,虛
6、擬,”,樣式單,其中,4,級為最高級,高級的樣式將覆蓋低級的樣式,瀏覽器默認(rèn)值,外部樣式單,出現(xiàn)在,head,部分的內(nèi)部樣式單,出現(xiàn)在,HTML,元素中的內(nèi)聯(lián)樣式單,10/22/2024,10,參考:,CSS,語法,CSS,語法由三部分組成,選擇器,(selector),參數(shù),(property,也稱屬性,),值,(value),selector property:value,選擇器是你要定義樣式的,HTML,元素或標(biāo)簽,參數(shù)是你期望改變的標(biāo)簽屬性,(attribute),值就是你期望參數(shù)要取的值,參數(shù)和值之間用冒號隔開,且放在花括號中,如,:body color:black,10/22/20
7、24,11,參考:,CSS,語法要點,如果值包括多個單詞,則用雙引號括起來,p font-family:sans serif,多個參數(shù)間中分號隔開,p text-,align:center;color:red,為增強可讀性,你可以使每個參數(shù)單獨占用一行,p,text-align:center;,color:black;,font-family:,arial,10/22/2024,12,參考:,樣式組,你可以將多個選擇器以逗號隔開歸為一組,h1,h2,h3,h4,h5,h6,color:green,10/22/2024,13,參考:,類,(class),選擇器,使用類選擇器你可以為一種,HTML
8、,元素定義不同的樣式,如下例子定義了兩種類型的段落,:,右對齊和居中,p.right,text-align:right,p.center,text-align:center,這兩類段落可以如下方式使用,這些文字將右對齊,.,這些文字將居中,.,10/22/2024,14,參考:,類,(class),選擇器,可以為一個元素使用多個類,這個段落使用,”,center”,和,”,bold”,兩個樣式類,.,10/22/2024,15,參考:,類,(class),選擇器,也可以定義通用的樣式類,.center text-align:center,通用的樣式類可以用到所有含指定屬性的元素上,這個標(biāo)題將居
9、中,這個段落將居中,.,注意,:,不要取數(shù)字開頭的類名,10/22/2024,16,參考:,標(biāo)識,(id),選擇器,你可以為,HTML,元素的標(biāo)識,(id),設(shè)定樣式,如果你定義了如下所示的,id,綠色標(biāo)題,綠色段落,則可定義如下的樣式,#green color:green,你也可以直接為特定標(biāo)識的元素定義樣式,p#para1,text-align:center;,color:red,10/22/2024,17,參考:,CSS,注釋,(comment),注釋已經(jīng)成為計算機科學(xué)中重要的文化,CSS,使用,C,格式的注釋語法,/*,定義段落樣式,*,/,p,text-align:center;,/
10、*,為段落定義顏色和字體*,/,color:black;,font-family:,黑體,10/22/2024,18,參考:,使用外部樣式單,外部樣式單需要在,head,部分使用,標(biāo)簽引用,外部樣式單要保存類型名為,.,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,屬性定義,這是一個使用內(nèi)聯(lián)樣式的段落,.,內(nèi)聯(lián)樣式使樣式單失去了本來的意義,因此應(yīng)該盡量避免使用內(nèi)聯(lián)樣式,10/22/2024,21,參考:,多重樣式,如果為,h3,定義了如下的外部樣式,h3 color:red;text-align:left;font-size:8pt,同時又為其定義了如下的內(nèi)部樣式,h3 text-align:right;font-size:20pt,則網(wǎng)頁中的,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,文本對齊,:text-align,TextAlign.htm,文本修飾,:text-decoration,TextDeco.htm,首行縮進,:text-indent,TextIndent.htm,字母轉(zhuǎn)換,:text-
14、transform,TextLetters.htm,10/22/2024,24,參考:,CSS,字體,(font),字體種類,: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è)置四側(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),無編號列表,:list-style-type,ListUnordered.htm,編號列表,:list-style-type,ListOrdered.htm,圖標(biāo)式無編號列表,:list-style-type,ListImage.htm,縮進式無編號
網(wǎng)絡(luò)應(yīng)用程序設(shè)計--CSS導(dǎo)論
