商務(wù)網(wǎng)頁第20課課件

1、4.7 用CSS設(shè)置元素的邊框與邊距設(shè)置元素的邊框和邊距是非常重要的顯示技巧，巧妙地設(shè)置元素邊框和邊距的寬度、顏色，可以制作出非常美觀的顯示效果。 4.7.1 元素的邊框與邊距容器類元素都有邊框和邊距，邊距又分為外邊距和內(nèi)邊距，邊框與邊距均有上、下、左、右4條邊。一個(gè)容器的邊框與邊距（邊距、邊框足夠?qū)挘┤鐖D4.34所示。在CSS中，外邊距的屬性是margin，內(nèi)邊距的屬性是padding，邊框的屬性是border。運(yùn)用不同的內(nèi)邊距、邊框和外邊距方案，能夠組合出豐富多彩的顯示效果。邊框與邊距的相關(guān)屬性賦值順序都是從上端開始，按照順時(shí)針方向，即“上、右、下、左”的次序分別賦值。如果沒有設(shè)置邊框和邊

2、距，會采用系統(tǒng)默認(rèn)值。系統(tǒng)默認(rèn)邊框?yàn)椤?px”，即沒有邊框，默認(rèn)的邊距為“0px”，即沒有邊距。4.7.2 設(shè)置元素邊框與邊距設(shè)置容器類元素的邊框，需要使用容器類元素標(biāo)簽，及其邊框?qū)傩詁order（或者使用邊框線寬border-width屬性、邊框顏色border-color屬性、邊框類型border-style屬性）。設(shè)置方法為容器類標(biāo)簽 border=線寬屬性值 邊框顏色屬性值 邊框類型屬性值;或者為容器類標(biāo)簽 border-width=線寬屬性值; border-color=邊框顏色屬性值; border-style=邊框類型屬性值; 其中，邊框類型屬性值與表格邊框類型的屬性值的概念是相

3、同的。采用border屬性設(shè)置邊框，只適用于4條邊的屬性值都相同的情況，寫法簡潔；而采用border-width、border-color、border-style屬性設(shè)置邊框，更適用于4條邊的屬性值存在差異的情況。1設(shè)置邊框類型邊框類型有實(shí)線、虛線、雙線等，是設(shè)置邊框效果的重要方面，只有精通邊框類型設(shè)置，才能做出漂亮的邊框效果。每個(gè)元素都有上下左右4條邊框，可以統(tǒng)一設(shè)置或分別設(shè)置。（1）設(shè)置邊框類型（2）統(tǒng)一設(shè)置邊框的寬度、顏色和邊框類型 統(tǒng)一設(shè)置邊框 div border:12px #006600 double; 統(tǒng)一設(shè)置邊框4條邊（3）分別設(shè)置邊框的寬度、顏色和邊框類型如果想把邊框4條邊

4、設(shè)置成不同的寬度、顏色或邊框類型，必須使用border-width、border-color、border-style屬性分別設(shè)置，其賦值順序是上、右、下、左。這3個(gè)屬性賦值比較靈活，可以對其賦1個(gè)數(shù)值，也可以賦2個(gè)數(shù)值、3個(gè)數(shù)值、4個(gè)數(shù)值，分別代表不同的賦值含義。如果僅賦1個(gè)值，代表4條邊均采用這個(gè)數(shù)值；如果賦2個(gè)值，按照上、右的順序取值，即上邊取第1個(gè)數(shù)值，右邊取第2個(gè)數(shù)值。下邊、左邊沒有賦值，取對邊的值；如果賦3個(gè)值，按照上、右、下的順序取值，左邊沒有賦值，取對邊的值；如果賦4個(gè)值，則按照上、右、下、左的順序取值。分別設(shè)置邊框的寬度、顏色和邊框類型的示例分別設(shè)置邊框div height:

5、100px; width:300px; border-width:5px 9px 12px 16px; border-color: #0099FF #CC0099 #000000 #006600 ; border-style: solid dotted dashed double; 分別設(shè)置4條邊框的寬度、顏色和邊框類型也可以使用padding-top、padding-right、padding-bottom、padding-left屬性分別設(shè)置。如果padding只設(shè)置1個(gè)數(shù)值，代表4個(gè)內(nèi)邊距都采用該數(shù)值；如果padding設(shè)置2個(gè)或3個(gè)數(shù)值，按照上、右、下、左的順序依次取值，未被賦值的邊距

6、采用對邊的值；如果設(shè)置了4個(gè)數(shù)值，則按照上、右、下、左的順序依次取值。以文本段落為例，使用CSS設(shè)置段落內(nèi)邊距CSS設(shè)置內(nèi)邊距示例 p border: 5px #FF00CC double; font: 20px 宋體; color: #FFFF00; background-color: #006666; padding:20px 200px 20px 50px; 元素有兩個(gè)邊距：外邊距和內(nèi)邊距。外邊距是指本元素邊框距離外部元素邊框之間的距離，內(nèi)邊距是指本元素邊框到內(nèi)部元素邊框之間的距離。內(nèi)邊距和外邊距都是為了控制頁面的松緊程度而提供的屬性。 3設(shè)置外邊距設(shè)置外邊距主要是設(shè)置元素之間的距離，控

7、制頁面元素緊湊顯示還是松散顯示。也可以同邊框、內(nèi)邊距組合，美化元素的顯示效果。在CSS中設(shè)置外邊距，需要使用容器類元素標(biāo)簽及其外邊距margin屬性，設(shè)置方法為容器類標(biāo)簽 margin:上外邊距 右外邊距 下外邊距 左外邊距; 或者使用margin-top、margin-right、margin-bottom、margin-left屬性分別設(shè)置。設(shè)置外邊距與設(shè)置內(nèi)邊距的實(shí)現(xiàn)方式是相同的，可以對margin賦1個(gè)值、2個(gè)值、3個(gè)值或4個(gè)值，取值方式同設(shè)置內(nèi)邊距。4.7.3 制作文字按鈕綜合范例網(wǎng)頁中的超鏈接如果不做美化處理，就像普通的文本一樣非常單調(diào)（見圖4.39）。如果采用邊框與邊距技術(shù)加以處

8、理，就會出現(xiàn)按鈕形狀的顯示效果（見圖4.40）。按鈕狀的超鏈接非常美觀，普通超鏈接則顯得呆板。那么如何實(shí)現(xiàn)按鈕狀超鏈接呢？主要是利用好外邊距、邊框、內(nèi)邊距的顯示效果，配合鼠標(biāo)指針經(jīng)過與懸停時(shí)的顯示對比效果來實(shí)現(xiàn)的。 按鈕超鏈接 a /*以下是統(tǒng)一設(shè)置超鏈接的初始樣式 */ margin:2px; font-family:宋體; font-size:16px; text-align:center; vertical-align:middle; a:link, a:visited /*設(shè)置超鏈接未訪問、訪問后的顯示狀態(tài)*/ padding:4px 10px 4px 10px; background

9、-color: #CCCCCC; text-decoration: none; color: #0000FF; border-top: 1px solid #EEEEEE; /* 利用邊框顏色搭配 實(shí)現(xiàn)陰影效果 */ border-left: 1px solid #EEEEEE; border-bottom: 1px solid #333333; border-right: 1px solid #333333; a:hover /*設(shè)置鼠標(biāo)指針經(jīng)過時(shí)的超鏈接狀態(tài) */ color: #CC00CC; /* 改變文字顏色 */ padding:6px 8px 2px 12px; /* 利用內(nèi)邊距改變文字顯示位置 */ background-color:#CCC;/* 改變背景色 */ border-top: 1px solid #333333;