網(wǎng)絡應用程序設計--CSS導論

單擊此處編輯母版標題樣式,單擊此處編輯母版文本樣式,第二級,第三級,第四級,第五級,*,參考:,*,網(wǎng)絡應用程序設計,-CSS,導論,CSS,導論,段會川,山東師范大學信息科學與工程學院,2006,年,10,月,目 錄,先決知識,何為,CSS?,CSS,綜合演示,樣式解決了一個帶有普遍性的問題,樣式可以為您節(jié)省很多勞動,多個樣式可以級聯(lián)為一個樣式,CSS,語法,CSS,語法要點,樣式組,類,(class),選擇器,10/22/2024,2,參考:,目 錄,類,(class),選擇器,標識,(id),選擇器,CSS,注釋,(comment),使用內部樣式單,內聯(lián)樣式,多重樣式,CSS,背景樣式,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/2024,5,參考:,何為,CSS?,CSS,代表層疊樣式單,(Cascading Style Sheet),也譯作級聯(lián)樣式單,簡稱為樣式單,樣式用于定義如何顯示,HTML,元素,通常樣式放在樣式單中,樣式被,HTML 4.0,采用是為了解決一個問題,外部樣式單可以為您節(jié)省許多勞動,外部樣式單存儲在,CSS,文件中,多個樣式定義可以級聯(lián)起來構成一個樣式,10/22/2024,6,參考:,CSS,綜合演示,CSSDemoA.htm,10/22/2024,7,參考:,樣式解決了一個帶有普遍性的問題,設計,HTML,標簽的本意是定義文檔的內容,它們本來想使用諸如,等描述,”,這是一個標題,”,“,這是一個段落,”,“,這是一個表格,”,而文檔的外觀由瀏覽器決定,不需要借助于任何的格式化標簽,隨著兩種主要的瀏覽器,Netscape,和,IE,不斷地向原來的,HTML,規(guī)范中增加新的,HTML,標簽和屬性,人們發(fā)現(xiàn)創(chuàng)建將,HTML,文檔與其外觀展示清楚地分離開來的站點越來越困難,為解決這一問題,W3C(World Wide Consortium,WWW,聯(lián)盟,),負責標準化,HTML,的非盈利性組織,在創(chuàng)建,HTML 4.0,的同時引入了樣式,目前,所有主流的瀏覽器都支持,CSS,10/22/2024,8,參考:,樣式可以為您節(jié)省很多勞動,如同,HTML 3.2,中的,標簽及其,color,屬性,樣式單定義了,HTML,元素的顯示方式,樣式通常存儲在外部的,.,css,文件中,.,CSS,是,Web,設計技術的一個重大突破,因為它使開發(fā)者可以快速地控制多個的,Web,頁的樣式和外觀效果,Web,開發(fā)者可以為每個,HTML,元素定義樣式,然后將它應用到所期望的任何數(shù)量的,Web,頁上,10/22/2024,9,參考:,多個樣式可以級聯(lián)為一個樣式,樣式單允許將樣式定義在單一的,HTML,元素上,定義在,HTML,網(wǎng)頁的,head,部分,或定義在一個外部的,CSS,文件中,一個,HTML,文檔也可以引用多個外部樣式單,級聯(lián)次序,:,所有的樣式將按照如下的規(guī)則,”,級聯(lián),”,為一個新的,”,虛擬,”,樣式單,其中,4,級為最高級,高級的樣式將覆蓋低級的樣式,瀏覽器默認值,外部樣式單,出現(xiàn)在,head,部分的內部樣式單,出現(xiàn)在,HTML,元素中的內聯(lián)樣式單,10/22/2024,10,參考:,CSS,語法,CSS,語法由三部分組成,選擇器,(selector),參數(shù),(property,也稱屬性,),值,(value),selector property:value,選擇器是你要定義樣式的,HTML,元素或標簽,參數(shù)是你期望改變的標簽屬性,(attribute),值就是你期望參數(shù)要取的值,參數(shù)和值之間用冒號隔開,且放在花括號中,如,:body color:black,10/22/2024,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,元素定義不同的樣式,如下例子定義了兩種類型的段落,:,右對齊和居中,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,通用的樣式類可以用到所有含指定屬性的元素上,這個標題將居中,這個段落將居中,.,注意,:,不要取數(shù)字開頭的類名,10/22/2024,16,參考:,標識,(id),選擇器,你可以為,HTML,元素的標識,(id),設定樣式,如果你定義了如下所示的,id,綠色標題,綠色段落,則可定義如下的樣式,#green color:green,你也可以直接為特定標識的元素定義樣式,p#para1,text-align:center;,color:red,10/22/2024,17,參考:,CSS,注釋,(comment),注釋已經(jīng)成為計算機科學中重要的文化,CSS,使用,C,格式的注釋語法,/*,定義段落樣式,*,/,p,text-align:center;,/*,為段落定義顏色和字體*,/,color:black;,font-family:,黑體,10/22/2024,18,參考:,使用外部樣式單,外部樣式單需要在,head,部分使用,標簽引用,外部樣式單要保存類型名為,.,css,的文本文件中,此文件中不能含有,HTML,標簽,如,:,hr color:sienna,p margin-left:20px,body background-image:url(images/back40.gif),10/22/2024,19,參考:,使用內部樣式單,內部樣式單需要在,head,部分使用,標簽定義,hr color:sienna,p margin-left:20px,body background-image:url(images/back40.gif),10/22/2024,20,參考:,內聯(lián)樣式,內聯(lián)樣式用,HTML,標簽的,style,屬性定義,這是一個使用內聯(lián)樣式的段落,.,內聯(lián)樣式使樣式單失去了本來的意義,因此應該盡量避免使用內聯(lián)樣式,10/22/2024,21,參考:,多重樣式,如果為,h3,定義了如下的外部樣式,h3 color:red;text-align:left;font-size:8pt,同時又為其定義了如下的內部樣式,h3 text-align:right;font-size:20pt,則網(wǎng)頁中的,h3,元素最后取的樣式是,:,color:red;text-align:right;font-size:20pt,10/22/2024,22,參考:,CSS,背景樣式,設置背景顏色,:background-color,參數(shù),BgColor.htm,設置背景圖片,(,完全平鋪,):background-image,參數(shù),BgImage.htm,設置背景圖片,(,縱向平鋪,):background-repeat,參數(shù),BgImageY.htm,設置背景圖片,(,橫向平鋪,):background-repeat,參數(shù),BgImageX.htm,設置背景圖片,(,指定位置,):background-position,參數(shù),BgImageP.htm,設置背景圖片,(,附加,):background-,attachment,參數(shù),BgImageF.htm,設置背景圖片,(,綜合演示,),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,字母轉換,:text-transform,TextLetters.htm,10/22/2024,24,參考:,CSS,字體,(font),字體種類,:font-family,FontFamily.htm,字體大小,:font-size,FontSize.htm,字體風格,:font-style,FontStyle.htm,字體變種,:font-variant,FontVariant.htm,字體重度,:font-weight,FontWeight.htm,綜合字體設置,FontAll.htm,10/22/2024,25,參考:,CSS,邊框,(border),同時設置四側邊框,:border-style,BorderFour.htm,為每側設置不同的邊框,:border-style,BorderEach.htm,設置邊框顏色,:border-color,BorderColor.htm,設置左側邊框寬度,:border-left-width,BorderWidthLeft.htm,為底邊框設置各種屬性,:border-bottom,BorderBottomAll.htm,設置各側邊框寬度,:border-width,BorderWidthAll.htm,設置各種邊框屬性,BorderAll.htm,10/22/2024,26,參考:,CSS,邊空,(margin),左邊空,:margin-left,MarginLeft.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,四側填充,:padding,PaddingAll.htm,10/22/2024,28,參考:,CSS,列表,(list),無編號列表,:list-style-type,ListUnordered.htm,編號列表,:list-style-type,ListOrdered.htm,圖標式無編號列表,:list-style-type,ListImage.htm,縮進式無編號