1、Page 1ASP.NETASP.NET程序設計程序設計單元二單元二 母版、主題和皮膚母版、主題和皮膚CSS樣式的設計與應用樣式的設計與應用 主講教師：徐占鵬主講教師：徐占鵬2ASP.NETASP.NET程序設計程序設計學習目標學習目標w【知識目標】【知識目標】w熟練掌握熟練掌握CSSCSS的定義和使用方法的定義和使用方法w掌握掌握CSSCSS的常用屬性的常用屬性w 【技能目標】【技能目標】w能夠使用能夠使用CSSCSS統一網站風格統一網站風格3ASP.NETASP.NET程序設計程序設計CSSCSS簡介簡介w隨著Web的越來越盛行，Web設計也越來越趨向于整體與結構化。在早期，出現過不同的瀏

2、覽器中的顯示效果不一致、缺乏標準的支持、HTML代碼結構混亂等等問題。w解決這些問題的方案是使用CSS標準，CSS支持所有現代的瀏覽器，并且提供了一整套統一的格式化屬性，可以應用這些屬性到任何的HTML元素上，比如添加邊框、設置字體等等。CSS技術是Web標準的主要表現層技術，除了設置一些外觀之外，現如今很多符合Web標準的站點都使用CSS來進行頁面的布局。要設計一個標準的Web站點，應該多考慮使用CSS而較少的利用HTML的標簽格式化語法。w w 圖 程序運行結果4ASP.NETASP.NET程序設計程序設計CSSCSS簡介簡介w在ASP.NET中，可以創建三種類型的樣式：w1內聯樣式w內聯

3、樣式直接放到HTML標簽的內部，這種形式的樣式會導致HTML代碼的混亂。內聯樣式示例代碼如下所示。w這行文本顯示為藍色的背景.5ASP.NETASP.NET程序設計程序設計 CSS CSS樣式的設計與應用樣式的設計與應用w2內部樣式表w放置在Web標簽頁的區中的樣式的集合。可以使用來自樣式表的樣式來格式化Web控件。使用內聯樣式，讓格式與內容清楚的分離，并且可以對同一頁面的格式進行多次重用。w3外部樣式表w與內部樣式相似，但是樣式放在一個單獨的文件中，這樣開發人員可以在應用程序的多個頁面上應用相同的樣式。6ASP.NETASP.NET程序設計程序設計 CSS CSS基礎基礎內聯式內聯式w CS

4、S CSS能夠通過編寫樣式控制代碼來進行頁面布局，在編寫相能夠通過編寫樣式控制代碼來進行頁面布局，在編寫相應的應的HTMLHTML標簽時，可以通過標簽時，可以通過StyleStyle屬性進行屬性進行CSSCSS樣式控制。如樣式控制。如w 這是一段文字這是一段文字 w上述代碼使用內聯式進行樣式控制，并將屬性設置為上述代碼使用內聯式進行樣式控制，并將屬性設置為font-font-size:14pxsize:14px，其意義就在于定義文字的大小為，其意義就在于定義文字的大小為14px14px；同樣，；同樣，如果需要定義多個屬性時，可以同寫在一個如果需要定義多個屬性時，可以同寫在一個stylestyl

5、e屬性中，屬性中，示例代碼如下所示。示例代碼如下所示。 7ASP.NETASP.NET程序設計程序設計CSSCSS基礎基礎內聯式內聯式ww w 這是一段文字1w w 這是一段文字2w w 這是一段文字3w w This is My First CSS codew w 這是一段文字5w8ASP.NETASP.NET程序設計程序設計CSSCSS基礎基礎內聯式內聯式w 圖19ASP.NETASP.NET程序設計程序設計CSSCSS基礎基礎內聯式內聯式w上述代碼分別定義了相關屬性來控制樣式，并且都使用內聯式定義樣式，這些CSS的屬性的意義如下所示： w字體名稱屬性font-family）：該屬性設定字

6、體名稱，如Arial,、Tahoma,、Courier等，可以定義字體的名稱。 w字體大小屬性font-size）：該屬性可以設置字體的大小。字體大小的設置可以有多種方式，最常用的就是pt和px。 w字體風格屬性font-style）：該屬性有三個值可選：normal,、italic、oblique、normal是默認值，italic、oblique都是斜體顯示。 10ASP.NETASP.NET程序設計程序設計CSSCSS基礎基礎內聯式內聯式w字體粗細屬性font-weight）：該屬性常用值是normal和bold，normal是默認值，bold是粗體。 w字體變量屬性font-varia

7、nt）：該屬性有兩個值normal和small-caps，normal是默認值。small-caps表示字體將被顯示成大寫。 w字體屬性font）：該屬性是各種字體屬性的一種快捷的綜合寫法。 w顏色(color)：該屬性用來控制字體顏色。 11ASP.NETASP.NET程序設計程序設計CSSCSS基礎基礎嵌入式嵌入式w用內聯式的方法進行樣式控制固然簡單，但是在維護過程中卻是非常的復雜和難以控制。當需要對頁面中的布局進行更改時，則需要對每個頁面的每個標簽的樣式進行更改，這樣無疑增大的工作量，當需要對頁面進行布局時，可以使用嵌入式的方法進行頁面布局，代碼如下：12ASP.NETASP.NET程序

8、設計程序設計CSSCSS基礎基礎嵌入式嵌入式ww w 這是一段文字1w w .font1w font-size: 14px; w .font2w font-size: 14px;w font-weight: bolder; w .font3w font-size: 14px;w font-style: italic;w .font4w w font-size: 14px;w font-variant: small-caps;w w .font5w font-size: 14px;w color: red; w w13ASP.NETASP.NET程序設計程序設計CSSCSS基礎基礎嵌入式嵌入式w

9、w w 這是一段文字1w w 這是一段文字2w w 這是一段文字3w w This is My First CSS codew w 這是一段文字5w14ASP.NETASP.NET程序設計程序設計CSSCSS基礎基礎外聯式外聯式w雖然嵌入式能夠解決單個頁面的樣式問題，但是這樣只能針對單個頁面進行樣式控制，而在很多網站的開發應用中，大量的頁面樣式基本相同，只有少數的頁面不盡相同，所以使用嵌入式還是有不足，這里就可以使用外聯式。使用外聯式，必須創建一個.css文件后綴的文件，并在當前頁面中添加引用，.css頁面代碼如下所示。w.font1 font-size:14px; w.font2 font-

10、size:14px; font-weight:bolder; w.font3 font-size:14px; font-style:italic; w.font4 font-size:14px; font-variant:small-caps; w.font5 font-size:14px; color:red; 15ASP.NETASP.NET程序設計程序設計CSSCSS基礎基礎外聯式外聯式w在.css文件中，只需要定義如head標簽中的style標簽的內容即可，其編寫方法也與內聯式和內嵌式相同。在編寫完成CSS文件后，需要在使用的頁面的head標簽中添加引用，示例代碼如下所示。ww上述代碼

11、添加了一個css.css文件的引用，意在告訴瀏覽器當前頁面的一些樣式可以在css.css中找到并解析。在使用了外聯式后，當前頁面的HTML代碼就能夠變得簡單和整潔，示例代碼如下所示。16ASP.NETASP.NET程序設計程序設計CSSCSS基礎基礎外聯式外聯式www w 這是一段文字1w www w 這是一段文字1w w 這是一段文字2w w 這是一段文字3w w This is My First CSS codew w 這是一段文字5ww17ASP.NETASP.NET程序設計程序設計應用應用CSSCSS常用屬性常用屬性-CSS-CSS背景屬性背景屬性wCSSCSS背景屬性背景屬性wCSS

12、CSS能夠描述背景，包括背景顏色、背景圖片、背景圖片重能夠描述背景，包括背景顏色、背景圖片、背景圖片重復方向等屬性，這些屬性為頁面背景的樣式控制提供了強復方向等屬性，這些屬性為頁面背景的樣式控制提供了強大的支持，這些屬性包括如下所示：大的支持，這些屬性包括如下所示： w背景顏色屬性背景顏色屬性background-colorbackground-color）：該屬性為）：該屬性為HTMLHTML元素元素設定背景顏色。設定背景顏色。 w背景圖片屬性背景圖片屬性background-imagebackground-image）：該屬性為）：該屬性為HTMLHTML元素元素設定背景圖片。設定背景圖片

13、。 w背景重復屬性背景重復屬性background-repeatbackground-repeat）：該屬性和）：該屬性和background-imagebackground-image屬性連在一起使用，決定背景圖片是否屬性連在一起使用，決定背景圖片是否重復。如果只設置重復。如果只設置background-imagebackground-image屬性，沒設置屬性，沒設置background-repeatbackground-repeat屬性，在缺省狀態下，圖片既屬性，在缺省狀態下，圖片既x x軸重復軸重復，又，又y y軸重復。軸重復。 w背景附著屬性背景附著屬性background-atta

14、chmentbackground-attachment）：該屬性和）：該屬性和background-imagebackground-image屬性連在一起使用，決定圖片是跟隨內屬性連在一起使用，決定圖片是跟隨內容滾動，還是固定不動。容滾動，還是固定不動。 w背景位置屬性背景位置屬性background-positionbackground-position）：該屬性和）：該屬性和background-imagebackground-image屬性連在一起使用，決定了背景圖片的屬性連在一起使用，決定了背景圖片的最初位置。最初位置。 18ASP.NETASP.NET程序設計程序設計應用應用CSSC

15、SS常用屬性常用屬性-CSS-CSS背景屬性背景屬性w背景屬性background）：該屬性是設置背景相關屬性的一種快捷的綜合寫法。 w通過這些屬性能夠為網頁背景進行樣式控制，示例代碼如下所示。wbody background-color:green; w當使用background-image屬性設置背景圖片時，還需要使用background-repeat屬性進行循環判斷，示例代碼如下所示。wbody background-image:wurl(bg.jpg); wbackground-repeat:repeat-x; 19ASP.NETASP.NET程序設計程序設計應用應用CSSCSS常用屬

16、性常用屬性-CSS-CSS邊框屬性邊框屬性wCSS還能夠進行邊框的樣式控制，使用CSS能夠靈活的控制邊框，邊框屬性包括有： w 邊框風格屬性border-style）：該屬性用來設定上下左右邊框的風格。 w邊框寬度屬性border-width）：該屬性用來設定上下左右邊框的寬度。 w邊框顏色屬性border-color）：該屬性設置邊框的顏色。 w邊框屬性border）：該屬性是邊框屬性的一個快捷的綜合寫法。 20ASP.NETASP.NET程序設計程序設計應用應用CSSCSS常用屬性常用屬性-CSS-CSS邊框屬性邊框屬性w通過這些屬性能夠控制邊框樣式，示例代碼如下所示。w.mycss border-bottom:1px black dashed; border-top:1px black dashed; border-left:1px black dashed; border-right:1px black dashed; w上述代碼分別設置了邊框的上部分、下部分、左部分、右部