第15章邊框和邊距HTMLCSSJavaScript標(biāo)準(zhǔn)教程實(shí)例版第2版PPT課件

1、15.1 設(shè)計(jì)邊框樣式border-style 基本語法border-style:樣式取值border-top-style:樣式取值border-bottom-style:樣式取值border-left-style:樣式取值border-right-style:樣式取值第1頁/共39頁15.1 設(shè)計(jì)邊框樣式border-style 語法說明第2頁/共39頁15.1 設(shè)計(jì)邊框樣式border-style 語法說明 邊框樣式屬性中border-style是一個復(fù)合屬性，其他4個都是單個邊框的樣式屬性，只能取一個值，而復(fù)合屬性border-style可以同時取一到4個值。下面分別說明border-s

2、tyle屬性的4個取值方法： 取一個值：四條邊框均使用這一個值。e:s 取兩個值：上下邊框使用第一個值，左右邊框使用第二個值，兩個值一定要用空格隔開。 取三個值：上邊框使用第一個值，左右邊框使用第二個值，下邊框使用第三個值，取值之間要用空格隔開。 取4個值：四條邊框按照上、右、下、左的順序來調(diào)用取值。取值之間也要用空格隔開。第3頁/共39頁15.1 設(shè)計(jì)邊框樣式border-style 實(shí)例代碼第4頁/共39頁15.1 設(shè)計(jì)邊框樣式border-style 接上頁第5頁/共39頁15.1 設(shè)計(jì)邊框樣式border-style 網(wǎng)頁效果第6頁/共39頁15.1 設(shè)計(jì)邊框樣式border-styl

3、e 實(shí)例代碼第7頁/共39頁15.1 設(shè)計(jì)邊框樣式border-style 接上頁第8頁/共39頁15.1 設(shè)計(jì)邊框樣式border-style 網(wǎng)頁效果第9頁/共39頁15.2 調(diào)整邊框?qū)挾萣order-width 基本語法border-width:關(guān)鍵字|長度border-top-width:關(guān)鍵字|長度border-bottom-width:關(guān)鍵字|長度border-right-width:關(guān)鍵字|長度border-left-width:關(guān)鍵字|長度第10頁/共39頁15.2 調(diào)整邊框?qū)挾萣order-width 語法說明邊框?qū)挾葘傩曰菊Z法中的關(guān)鍵字說明 長度包括長度值和長度單位，不可

4、以使用負(fù)數(shù)。長度單位可以使用絕對單位也可使用相對單位，如px、pt、cm等。 基本語法中邊框?qū)挾葘傩詁order-width是一個復(fù)合屬性，可以同時設(shè)置四條邊框的寬度。具體使用方法和邊框樣式的復(fù)合屬性border-style是一樣的，可以參照上一節(jié)關(guān)于border-style的講解。表15-2第11頁/共39頁15.2 調(diào)整邊框?qū)挾萣order-width 表15-2 邊框?qū)挾葘傩灾嘘P(guān)鍵字說明返回第12頁/共39頁15.2 調(diào)整邊框?qū)挾萣order-width 實(shí)例代碼第13頁/共39頁15.2 調(diào)整邊框?qū)挾萣order-width 接上頁第14頁/共39頁15.2 調(diào)整邊框?qū)挾萣order-

5、width 網(wǎng)頁效果第15頁/共39頁15.3 設(shè)置邊框顏色border-color 基本語法border-color:顏色關(guān)鍵字|RGB值border-top-color:顏色關(guān)鍵字|RGB值border-bottom-color:顏色關(guān)鍵字|RGB值border-left-color:顏色關(guān)鍵字|RGB值border-right-color: 顏色關(guān)鍵字|RGB值第16頁/共39頁15.3 設(shè)置邊框顏色border-color 語法說明 顏色關(guān)鍵字可使用常用的16個關(guān)鍵字 RGB值使用十六進(jìn)制的RGB值和RGB函數(shù)值都行。 在使用邊框顏色復(fù)合屬性border-color時，如果只設(shè)置1種顏

6、色，則四條邊框的顏色一樣；設(shè)置2種顏色，則邊框的上下為一個顏色，左右為另一個顏色；設(shè)置3種顏色，邊框的顏色順序?yàn)樯稀⒆笥?、下；設(shè)置4中顏色，邊框的顏色順序?yàn)樯稀⒂?、下、左。?5-3第17頁/共39頁15.3 設(shè)置邊框顏色border-color 表15-3 常用的16個顏色關(guān)鍵字返回第18頁/共39頁15.3 設(shè)置邊框顏色border-color 實(shí)例代碼第19頁/共39頁15.3 設(shè)置邊框顏色border-color 接上頁第20頁/共39頁15.3 設(shè)置邊框顏色border-color 網(wǎng)頁效果第21頁/共39頁15.4 設(shè)置邊框?qū)傩詁order 基本語法border:|border-t

7、op: |border-right: |border-bottom: |border-left: |第22頁/共39頁15.4 設(shè)置邊框?qū)傩詁order 語法說明 基本語法中每一個屬性都是一個復(fù)合屬性，都可以同時設(shè)置邊框的寬度、樣式和顏色屬性。但是在用該語法定義邊框?qū)傩詴r，每個屬性間必須用空格隔開。 這五個屬性語法中，只有border可以同時設(shè)置四條邊框的屬性。其他的只能設(shè)置單邊框的屬性。第23頁/共39頁15.4 設(shè)置邊框?qū)傩詁order 實(shí)例代碼第24頁/共39頁15.4 設(shè)置邊框?qū)傩詁order 接上頁第25頁/共39頁15.4 設(shè)置邊框?qū)傩詁order 網(wǎng)頁效果第26頁/共39頁15.

8、5 邊距margin-top /margin-bottom /margin-left/ margin-right/margin 基本語法margin-top:長度|百分比|automargin-bottom: 長度|百分比|automargin-left: 長度|百分比|automargin-left: 長度|百分比|automargin: 長度|百分比|auto第27頁/共39頁15.5 邊距margin-top /margin-bottom /margin-left/ margin-right/margin 語法說明 長度包括長度值和長度單位，長度單位可以使用前面多次提到的絕對單位或相對單

9、位。 百分比是相對于上級元素寬度的百分比，允許使用負(fù)數(shù)。 auto為自動提取邊距值，是默認(rèn)值。 margin復(fù)合屬性和其他復(fù)合屬性的設(shè)置方法是一樣的，也可以取1到4個值來同時設(shè)置邊框周圍的四個邊距。第28頁/共39頁15.5 邊距margin-top /margin-bottom /margin-left/ margin-right/margin 實(shí)例代碼第29頁/共39頁15.5 邊距margin-top /margin-bottom /margin-left/ margin-right/margin 網(wǎng)頁效果第30頁/共39頁15.6 填充padding-toppadding- botto

10、m /padding-left / padding- right /padding 基本語法padding-top:長度|百分比padding-bottom: 長度|百分比padding-left: 長度|百分比padding-right: 長度|百分比padding: 長度|百分比第31頁/共39頁15.6 填充padding-toppadding- bottom /padding-left / padding- right /padding 語法說明 長度包括長度值和長度單位。 百分比是相對于上級元素寬度的百分比，不允許使用負(fù)數(shù)。 填充復(fù)合屬性padding的取值方法，可以參照邊框樣式border-style的取值方法。第32頁/共39頁15.6 填充padding-toppadding- bottom /padding-left / padding- right /padding 實(shí)例代碼第33頁/共39頁15.6 填充padding-toppadding- bottom /padding-left / padding- right /padding 接上頁第34頁/共39頁15.6 填充padding-toppadding-