1、第二章 設計Web頁面,要創(chuàng)建漂亮、格式統一的頁面，需要使用某種方法來改變頁面元素在瀏覽器中的表現。 最常使用的方法是使用CSS（Cascading Style Sheet，層次樣式表）,本章內容：,為什么要使用CSS CSS語言簡介及如何編寫CSS 在VWD中使用CSS,.1 為什么要使用CSS,從Internet出現開始，Web頁面主要由文本和圖像構成。文本使用純HTML格式化，如用標記加粗，用標記設置字體格式。如： Good afternoon , Class! ,HTML格式化頁面存在的問題,HTML提供的樣式化頁面的選項很有限 數據和格式混合在一起 HTML不容易在用戶瀏覽頁面時動態(tài)

2、修改格式 頁面中的附加標記大大增加了頁面的大小,2.2 CSS簡介, CssDemo h1 font-size:20px; color:Green; pcolor:Blue; font-style:italic; .RightAligned text-align:right; Welcome to this CSS Demo page CSS makes it super easy to style your pages. With little code, you can quickly change the looks of a page. ,一、種常見的選擇器格式,1）Universal

3、選擇器 * font-family：Arial； 適用于頁面的所有元素，可用來進行全局設置，比如全頁字體。,種常見的選擇器格式,2）Type選擇器 h1 color: Green; font-size: 36px; 指向某種特定類型的HTML元素。Type選擇器不區(qū)分大小寫，因此所設定的格式可用于H1或h1類型。,種常見的選擇器格式,3）ID選擇器 #IntroText font-style: italic; ID選擇器以“#”為前綴，指向具有特定ID的HTML元素。ID選擇器區(qū)分大小寫，要保證ID屬性和選擇器總使用一致的大小寫。 例：下面第一行將會顯示斜體： I am italic beca

4、use i have the right ID I am NOT italic,種常見的選擇器格式,4）Class選擇器 .HighLight font-weight: bold; color:Red; Class選擇器以“.”為前綴，指向具有特定Class的HTML元素。當需要賦予若干不相關的元素相同格式時，使用這個選擇器就非常方便。Class選擇器也區(qū)分大小寫。 例：下面兩行中class為HighLight的文字會應用上面的設置： HELLO,GOOD Afternoon! Please send a mail to me.,組合和合并選擇器,1）CSS允許組合多個選擇器，用逗號將它們隔開

5、 h1,h2,h3,h4 color:Blue; p,#BodyText,.HighLight background-color:Gray; ,組合和合并選擇器,2）CSS還允許為同時滿足多個條件（選擇器）的HTML設置格式，此時這多個選擇器間用空格隔開 p .HighLight font-size:32px ; ,二、常見的CSS屬性,1、顏色(color)和背景(background)屬性 1) color屬性 color：Red; 2) background屬性 該CSS屬性是一個復合屬性，由五個屬性組成： 背景顏色(background-color)屬性 背景圖片(background

6、-image)屬性 背景位置(background-position)屬性 背景重復(background-repeat)屬性 背景附著(background-attachment)屬性:該CSS屬性用來設定背景圖片是否隨文檔一起滾動。,常見的CSS屬性,2、字體(font)屬性 字體名稱(font-family)屬性 字體大小(font-size)屬性 字體風格(font-style)屬性:該CSS屬性用來設定字體風格是斜體，或是正常等 字體濃淡(font-weight)屬性: 字體變量(font-variant)屬性:設定字體是正常顯示，還是以小型大寫字母顯示。,常見的CSS屬性,3、布局

7、(Layout) 邊框(border)屬性: 其中border-width用來設定邊框寬度。border-color屬性設定邊框顏色。border-style屬性設定邊框風格。border-collapse屬性設定表格的行和列的邊框是合并成單邊框，還是分別有各自的邊框。 外部邊距(margin)屬性: margin-top, margin-right, margin-bottom, margin-left分別用來設定上、右、下、左邊距的寬度。 內部邊距(padding)屬性:,Margin,Border,Padding,一個例子,假設有下面的CSS和HTML代碼： .MyDiv width:2

8、00px; padding:10px; border:2px solid Blue; 思考：Div標記所在位置會出現一個藍色邊框的矩形，請問這個矩形的長是多少？,常見的CSS屬性,4、其他 顯示(display)屬性: 設置元素的顯示方式，若設置display：none；元素將不顯示，而且不占用屏幕空間。 浮動(float)屬性: 設置元素在頁面上浮動。如float:right; 可見性(visibility)屬性: Visibility：hidden則元素不可見。占用空間，好像在那里，只是完全透明。,三、外部、內嵌和內聯樣式表,CSS可以有3種定義形式，并且對應不同的頁面引用形式。 1）外部

9、CSS定義一個或多個外部CSS文件，在頁面中通過下面的語句，將CSS文件嵌入頁面文件。 ,外部、內嵌和內聯樣式表,2）內嵌CSS 寫在頁面文件標記之間。 CssDemo h1 font-size:20px; color:Green; p color:Blue; font-style:italic; 在body中，通過相應的type、Id或Class來應用這些樣式。,外部、內嵌和內聯樣式表,3）內聯CSS style直接寫在中特定的位置。 This is a text on a black backgroud. 此時當然不再需要選擇器.,外部、內嵌和內聯樣式表,比較： 一般來說，外部樣式表優(yōu)于內

10、嵌樣式表，而內嵌樣式表又優(yōu)于內聯樣式表。 外部CSS可以通過多個頁面的引用，設定整個站點的外觀； 當然，在某些情況下使用后兩種CSS也是完全可以接受的。,各種樣式表互相覆蓋的問題,若同一個頁面文件中,有多個樣式表對同一選擇器進行了定義，則屬性值最終由誰決定呢？ 由最后定義的那個選擇器決定。 假設 中有語句如下，styles.css文件中定義 h1 color:Red;： h1 color:Green; 則最終標記中文字顏色為Red。若將link一句移到前面，則顏色變?yōu)镚reen。,CSS通常會否決HTML元素上的屬性,假設有引用的CSS文件或HEAD中有以下定義： img height:100

11、px; width:100px; 在BODY中有 瀏覽器中顯示的圖片為100px*100px,2.3 在VWD中使用CSS,Style Sheet toolbar CSS工具欄 Add Style Rule 添加規(guī)則 Style Builder 可視化編輯屬性 CSS Properties CSS屬性面板 Manage Styles 管理樣式面板 Apply Styles 應用樣式面板,例子,新建一個CSS文件，命名為style1.css，寫入一些規(guī)則，并應用于頁面： * font-family: Arial; #mainContent a color: #0000FF; text-decor

12、ation: underline; font-style: italic; ,#mainContent a:hover text-decoration: underline; color: #FF0000; font-family: Times New Roman , Times, serif; #mainContent a:visited text-decoration: underline; color: #800080; font-family: serif; font-style: italic; ,小結,CSS樣式化ASPX和HTML Web頁面最重要的語言，它可以用來最小化頁面膨脹

13、、提供對頁面外觀最好的控制，有助于創(chuàng)建加載更快且更容易維護的Web站點。 課后請查看一下你常去的網頁的源文件，了解它們的CSS設置，并自己仿照做一下。,練習,使用外部樣式表優(yōu)于內嵌式樣式表的地方主要是什么？ 寫一個CSS規(guī)則，將站點中所有的一級標題的外觀設為：標題使用Arial字體；藍色；18像素；上邊框和左邊框為黃色細邊。 在下面兩個規(guī)則中，哪個的可重用性更好，為什么？ #MainContent border: 1px solid #0000FF; #BoxWithBorders border: 1px solid #0000FF;,Reference key,外部樣式表最大的優(yōu)點是它可以應用于整個站點。 規(guī)則如下： h1 border-