《HTML+CSS+JavaScript網(wǎng)頁設(shè)計教程》課件-5. 第三章 CSS（二）

目錄CONTENTS第一章網(wǎng)頁設(shè)計綜述第二章HTML語言第三章CSS第四章JavaScript第五章網(wǎng)頁設(shè)計綜合案例03第三章CSSCSS是指層疊樣式表，其英文全稱為CascadingStyleSheets。CSS提供了多種豐富的樣式，并且可以對HTML元素進行精確控制，使用CSS可以實現(xiàn)網(wǎng)頁內(nèi)容和表現(xiàn)形式的分離，使得網(wǎng)站的設(shè)計風格更加靈活、精細，兼容性和可維護性也得到保證。使用CSS技術(shù)，可以替代某些圖片才能實現(xiàn)的效果，從而減少頁面中圖片的使用數(shù)量，這樣用戶在訪問網(wǎng)站時需要下載的內(nèi)容會更少，頁面加載的速度就會更快。3.1CSS基礎(chǔ)3.2引用CSS樣式3.3CSS選擇器3.4CSS文本樣式目錄3.5盒子模型（BoxModel）3.6背景屬性3.7繼承、層疊和優(yōu)先級3.8浮動與定位3.9仿騰訊網(wǎng)的頂部實現(xiàn)案例3.5盒子模型（BoxModel）盒子模型是CSS控制頁面元素的一個重要概念，是進行網(wǎng)頁布局的基礎(chǔ)。3.5.1盒子模型概述盒子模型，顧名思義，就是一個盒子。盒子可以用來裝東西，有長、寬、高，盒子本身也有厚度。頁面上的盒模型我們可以理解為，從盒子頂部俯視所得的一個平面圖，盒子里裝的東西，相當于盒模型的內(nèi)容（content）；東西與盒子之間的空隙，理解為盒模型的內(nèi)邊距（padding）；盒子本身的厚度，就是盒模型的邊框（border）；盒子外與其他盒子之間的間隔，就是盒子的外邊距（margin）。盒子模型如下圖所示：內(nèi)容內(nèi)邊距邊框外邊距在盒子模型中，所有頁面中的元素都被看作一個個盒子，他們占據(jù)一定的頁面空間，在其中放著特定內(nèi)容?？赏ㄟ^調(diào)整盒子的邊距和間距等參數(shù)來調(diào)節(jié)盒子的位置及大小。元素的外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、內(nèi)容（content）就構(gòu)成了CSS盒模型。3.5.2盒子模型的相關(guān)屬性1.盒子的寬和高在默認情況下，盒子的大小會隨著其中的內(nèi)容來調(diào)整。在使用CSS進行網(wǎng)頁布局時，需要使用width和height兩個屬性對盒子的寬度和高度進行設(shè)置。width和height屬性的取值采用相對取值，實際工作中通常使用像素值。2.盒子的邊框在CSS中，可以使用邊框相關(guān)的屬性對一個盒子邊框的樣式、寬度、顏色等有關(guān)屬性進行設(shè)計。常用的邊框相關(guān)屬性如下表所示：樣式屬性作用常用取值boder-style設(shè)置邊框樣式none:無邊框、solid:單實線、dashed：虛線、dotted：點劃線、double：雙實線boder-width設(shè)置邊框?qū)挾认袼貫閱挝坏膶挾戎礲oder-color設(shè)置邊框顏色#rrggbb等方式表示的顏色值（1）邊框樣式屬性：border-styleboder-style屬性用于分別設(shè)置盒子模型四個邊框的樣式，其語法格式為：border-style:上邊框[右邊框下邊框左邊框];使用boders-style設(shè)置邊框樣式時，可以根據(jù)需要靈活使用這四個值：只設(shè)置一個值：則表示四個邊框使用同一樣式；設(shè)置兩個值：第一個值表示上、下邊框樣式，第二個值表示左右邊框的樣式；設(shè)置三個值：第一個值表示上邊框樣式，第二個值表示左右邊框的樣式，第三個值表示下邊框的樣式；設(shè)置四個值：分別表示上、

右、下、左四個邊框的樣式；（2）邊框?qū)挾葘傩裕篵order-widthborder-width屬性用于設(shè)置邊框的寬度，其基本語法為：border-width:上邊框[右邊框下邊框左邊框];這四個取值的含義，與boder-style屬性的四個取值的含義一樣。（3）邊框顏色屬性：border-colorborder-color屬性用于設(shè)置邊框的顏色，其基本語法為：border-color:上邊框[右邊框下邊框左邊框];這四個取值的含義，也與boder-style屬性的四個取值的含義一樣。（4）綜合設(shè)置邊框的樣式、寬度和顏色屬性雖然使用boder-style、boder-width、border-color可以靈活地對盒子模型的四個邊框樣式、寬度和顏色進行分別設(shè)置，但這樣寫的CSS代碼非常繁瑣。為了簡化對邊框樣式的設(shè)置，CSS提供了精簡的邊框樣式設(shè)置方法，其基本語法為：border:邊框?qū)挾冗吙驑邮竭吙蝾伾?在具體使用過程中，也可以通過使用border-top、border-bottom、border-left、border-right這四個屬性分別對上、下、左、右這四個邊框的寬度、樣式和顏色進行設(shè)置。3.5.3盒子的內(nèi)邊距（padding）盒子模型中的內(nèi)邊距，是指盒子的內(nèi)容和邊框之間的距離。內(nèi)邊距的設(shè)置，可以通過padding-top(上內(nèi)邊距)、padding-right（右內(nèi)邊距）、padding-bottom（下內(nèi)邊距）、padding-left（左內(nèi)邊距）這四個屬性分別進行設(shè)置。也可以使用padding這個簡寫屬性，同時設(shè)置邊框4個方向的內(nèi)邊距：指定1個值時，表示4個方向的內(nèi)邊距都一樣。指定2個值時，第一個值設(shè)置上、下內(nèi)邊距，第二個值設(shè)置左、右內(nèi)邊距。指定3個值時，第一個值設(shè)置上內(nèi)邊距，第二個值設(shè)置左、右內(nèi)邊距，第三個值設(shè)置下內(nèi)邊距。指定4個值時，各個值按順時針方向依次設(shè)置上、右、下、左內(nèi)邊距。在實際的網(wǎng)頁設(shè)計中，要注意，設(shè)置了盒子模型的內(nèi)邊距（padding）和邊框（border）之后，盒子寬、高的計算，要把填充的內(nèi)邊距和邊框都計算在內(nèi)，即盒子的寬度等于盒子自身的寬度加上盒子的左內(nèi)邊距、右內(nèi)邊距、左邊框和右邊框的寬度，盒子的高度等于盒子自身的高度加上盒子的上內(nèi)邊距、下內(nèi)邊距、上邊框和下邊框的高度。3.5.4盒子的外邊距（margin）盒子的外邊距，用于設(shè)置盒子和外部元素之間的邊距。和內(nèi)邊距一樣，可以使用上外邊距（margin-top）、右外邊距（margin-right）、下外邊距（margin-bottom）和左外邊距（margin-left）這四個屬性分別設(shè)置，也可以使用maring這個屬性統(tǒng)一設(shè)置四個外邊距的大小。

我們將body元素的margin屬性設(shè)置為0px，表示網(wǎng)頁元素距離瀏覽器窗口的上、下、左、右邊距的值都為0。此時該div的邊框就會緊貼著瀏覽器窗口的上邊和左邊了。在實際的網(wǎng)頁設(shè)計中，將一個盒子的上下margin設(shè)置為0，左右margin設(shè)置為“auto”，可以實現(xiàn)盒子水平居中效果。3.6背景屬性通過設(shè)置網(wǎng)頁的背景，可以讓我們設(shè)計的網(wǎng)頁變得更加豐富多彩。例如，在特定的節(jié)日，可以把網(wǎng)頁背景設(shè)置為喜慶的圖片，這樣網(wǎng)站的效果會更突出。在實際的網(wǎng)頁設(shè)計過程當中，也可以通過設(shè)置背景圖片的方式，將HTML默認的列表元素前面的圖案換成我們自己設(shè)計的圖片。與背景相關(guān)的CSS屬性主要有設(shè)置背景顏色、設(shè)置背景圖片以及背景圖片定位等相關(guān)屬性。3.6.1設(shè)置背景顏色使用background-color屬性來設(shè)置元素的背景顏色，可以使用英文的顏色名，#rrggbb十六進制表示的顏色值，rgb（red,green,blue）等方式來設(shè)置元素的背景顏色。這種顏色是純色，會填充元素的內(nèi)容、內(nèi)邊距和邊框區(qū)域，擴展到元素邊框的外邊界（但不包括外邊距）。3.6.2設(shè)置背景圖片使用background-image、background-repeat和background-position這三個屬性，可以分別設(shè)置背景圖片的URL地址、背景圖片重復的方式、背景圖片的位置等內(nèi)容。1.背景圖片的引用：background-imagebackground-image屬性描述了元素引用背景圖像的URL地址。其語法格式為：background-image:url("圖像文件的url地址");注意：所指定的圖像文件URL地址，一般使用相對地址的表示方式。默認情況下，背景圖像進行平鋪重復顯示，以覆蓋整個元素實體的背景。2.背景圖片的重復方式：background-repeatbackground-repeat屬性用于設(shè)置背景圖片是否重復，以及如何重復的方式，其語法格式為：background-repeat:repeat|repeat-x|repeat-y|no-repeat這四個取值的含義為：屬性值含義repeat默認值。背景圖像將在垂直方向和水平方向重復。repeat-x背景圖像將在水平方向重復。repeat-y背景圖像將在垂直方向重復。no-repeat背景圖像不重復，僅顯示一次。3.背景圖片的位置：background-positionbackground-position屬性用于設(shè)置背景圖像的位置，可以對背景圖像在對象中的位置實現(xiàn)精確控制。其語法格式為：background-position:xposypos|x%y%|xy背景圖像在對象中的位置可以采用三種方式進行定位：（1）xposypos：表示使用預定義的關(guān)鍵字定位，xpos表示水平方向的定位，取值為：left|center|right，分別表示左對齊|水平居中|右對齊。Ypos表示垂直方向定位，取值為top|center|bottom，分別表示靠上|垂直居中|靠下。xpos為left表示圖像的左邊與對象的左邊對齊，為right表示圖像的右邊和對象的右邊對齊；

ypos為top表示圖像的頂部和對象的頂部對齊，為bottom表示圖像的底部和對象的底部對齊；

xpos、ypos等于center表示圖像在水平和垂直方向的中心，和對象在水平和垂直方向的中心對齊。

（2）x%y%：表示使用百分比定位，是將圖像本身（x%,y%）的那個點，與背景區(qū)域的（x%,y%）的那個點重合。最終得到背景圖像起始位置坐標的計算公式為：x=(對象的寬度-圖像的寬度)*x%;y=(對象的高度-圖像的高度)*y%;使用百分比定位，要使背景圖像居中，只需把背景圖像的位置設(shè)置為50%50%即可。（3）xy：表示使用長度值定位，是將背景圖像的左上角，放置在對象的背景區(qū)域中（x,y）所指定的位置，即x,y定義的是背景圖像的左上角，相對于背景區(qū)域左上角的偏移量。偏移量長度可以是正值，也可以是負值。x為正值表示向右偏移，負值表示向左偏移；y為正值表示向下偏移，負值表示向上偏移。背景圖像發(fā)生移動后，就有可能超出對象的背景區(qū)域。此時，超出的部分將不會顯示，只會顯示落入背景區(qū)域的部分。3.7繼承、層疊和優(yōu)先級使用CSS來設(shè)置元素樣式時，需要先使用選擇器來選擇要作用的對象。當有多個選擇器作用在一個元素上時，哪個規(guī)則最終會應(yīng)用到元素上？在CSS中，是通過層疊機制來控制的，這也和樣式繼承(元素從其父元素那里獲得屬性值)有關(guān)。一個網(wǎng)頁元素的最終樣式可以在行內(nèi)、內(nèi)聯(lián)和外部等多個地方定義，它們以復雜的形式相互影響（層疊）。這些復雜的相互作用使CSS變得非常強大，但也使其非常難于調(diào)試和理解。需要理解CSS優(yōu)先級才能在復雜的網(wǎng)頁設(shè)計中，知道樣式的最終作用效果。3.7.1繼承CSS樣式具有繼承性，所謂的繼承性，就是給某些元素設(shè)置樣式時，后代元素也會自動繼承父類的樣式。這叫CSS的繼承性。比如color屬性設(shè)置字體顏色，后代自動繼承。CSS的繼承特性，一定程度上簡化了代碼的操作。在CSS中，不是所有的屬性都可以繼承,只有以color/font-/text-/line開頭的屬性才可以繼承。

繼承不僅是兒子才可以繼承,只要是后代就可以繼承。3.7.2層疊和優(yōu)先級正如CSS的中文名字：層疊樣式表蘊含的意義那樣，層疊是CSS中一個重要的特性。在CSS中，層疊有兩個含義：一是當多個選擇器作用到同一個對象時，如果設(shè)置的是不同的樣式，則會有疊加效果。

在CSS中，層疊的第二個含義就是CSS處理沖突的能力：當同一個元素被兩個選擇器選中，并且給同一個標簽設(shè)置相同的屬性時,CSS會根據(jù)選擇器的權(quán)重決定使用哪一個選擇器。權(quán)重低的選擇器效果會被權(quán)重高的選擇器效果覆蓋（層疊）。CSS選擇器的權(quán)重是這樣規(guī)定的：標簽選擇器的權(quán)重為1，類選擇器的權(quán)重為10，ID選擇器的權(quán)重為100。而繼承的權(quán)重最低，可以理解為繼承的權(quán)重為0.1。如果作用于同一個網(wǎng)頁元素的兩個選擇器權(quán)重相同，那么在后面設(shè)置的樣式，會覆蓋掉前面設(shè)置的樣式。這也就容易理解我們前面學習到的，網(wǎng)頁文件中使用樣式表的三種方式：行內(nèi)樣式、內(nèi)部樣式、外部樣式，它們之間的優(yōu)先級了：行內(nèi)樣式（內(nèi)聯(lián)樣式表）>內(nèi)部樣式（嵌入樣式表）>外部樣式（外部樣式文件）。CSS定義了一個!important命令，該命令被賦予最大的優(yōu)先級。也就是說不管權(quán)重如何、樣式的位置遠近如何，!important都具有最大的優(yōu)先級。!important命令在使用時，必須位于屬性值和分號之間，否則無效。

例如：

#header{

color:red!important;

}

3.8浮動與定位3.8.1浮動（float）網(wǎng)頁中的元素，在瀏覽器中顯示的時候，是按照標準流的方式進行布局的，也就是說按照網(wǎng)頁文件中HTML標簽編寫的順序依次從上到下，從左到右排列，塊元素占一行，行內(nèi)元素在一行之內(nèi)從左到右排列，先寫的先排列，后寫的排在后面，每個盒子都占據(jù)自己的位置。依次顯示在瀏覽器中

在網(wǎng)頁設(shè)計過程中，希望將多個塊級元素在一行內(nèi)顯示，這時就要使用浮動樣式了。浮動樣式的基本語法是：float:left|right|none分別表示：左浮動、右浮動和不浮動，默認情況下元素是不浮動的，即按照標準的文檔流在瀏覽器中顯示。浮動就是網(wǎng)頁元素脫離了原來的標準文檔流，實現(xiàn)向左或者向右移動，直到該元素的外邊框碰到父元素的邊框或者另外一個浮動元素的邊框為止。

雖然浮動可以讓網(wǎng)頁元素實現(xiàn)較為靈活的布局，但是浮動也會帶來一些副作用。

例如下面這段代碼中，定義了一個父級div，其中包含了兩個子級div，在沒有浮動的時候，顯示效果。

而當兩個子元素div設(shè)置為了左浮動（float：left）之后，因為子元素浮動之后，父級元素沒有內(nèi)容，無法撐起來，所以就縮成了一條細線。在實際的網(wǎng)頁設(shè)計中，我們需要避免這種因為子元素浮動而導致父級元素“塌陷”的情況，這時候就要用的清除浮動樣式來實現(xiàn)，其語法格式為：clear:right|left|both分別表示清除右浮動、清除左浮動、清除左右浮動的作用。

我們可以在最后一個子元素的后面加一個空的div，將它的樣式屬性clear設(shè)置為both來解決這個問題?；蛘咭部梢詫⒏讣壴氐膐verflow屬性設(shè)置為hidden來解決該問題。3.8.2定位當一個網(wǎng)頁元素設(shè)置了浮動樣式，脫離了標準的文檔流后，要將其放在在網(wǎng)頁的指定位置，就需要用到定位相關(guān)技術(shù)。在CSS中，設(shè)置網(wǎng)頁元素的位置通過兩個步驟來實現(xiàn)：首先，使用position屬性來設(shè)置定位的方式；然后，使用top、left、right或者bottom屬性來設(shè)置元素的具體位置，或者偏移量。1.position屬性position屬性用于設(shè)定網(wǎng)頁元素的定位類型，其基本的語法格式為： position: