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

1、 本書編委會 編著第第15章章 邊框和邊距邊框和邊距15.1 設(shè)計邊框樣式border-style15.2 調(diào)整邊框?qū)挾萣order-width15.3 設(shè)置邊框顏色border-color15.4 設(shè)置邊框?qū)傩詁order15.5 邊距margin-top /margin-bottom /margin-left/ margin-right/margin15.6 填充padding-toppadding- bottom /padding-left / padding- right /padding15.7 小實例綜合設(shè)置邊框和邊距15.8 習(xí)題HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實

2、例版第2版）HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.1 設(shè)計邊框樣式設(shè)計邊框樣式border-style 基本語法基本語法border-style:樣式取值樣式取值border-top-style:樣式取值樣式取值border-bottom-style:樣式取值樣式取值border-left-style:樣式取值樣式取值border-right-style:樣式取值樣式取值HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.1 設(shè)計邊框樣式設(shè)計邊框樣式border-style 語法說明語法說明HTML/CSS/JavaScript

3、 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.1 設(shè)計邊框樣式設(shè)計邊框樣式border-style 語法說明語法說明 邊框樣式屬性中border-style是一個復(fù)合屬性，其他4個都是單個邊框的樣式屬性，只能取一個值，而復(fù)合屬性border-style可以同時取一到4個值。下面分別說明border-style屬性的4個取值方法： 取一個值：四條邊框均使用這一個值。e:s 取兩個值：上下邊框使用第一個值，左右邊框使用第二個值，兩個值一定要用空格隔開。 取三個值：上邊框使用第一個值，左右邊框使用第二個值，下邊框使用第三個值，取值之間要用空格隔開。 取4個值：四條邊框按照上、右、下、左的順序來調(diào)用取值。取

4、值之間也要用空格隔開。HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.1 設(shè)計邊框樣式設(shè)計邊框樣式border-style 實例代碼HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.1 設(shè)計邊框樣式設(shè)計邊框樣式border-style 接上頁HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.1 設(shè)計邊框樣式設(shè)計邊框樣式border-style 網(wǎng)頁效果HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.1 設(shè)計邊框樣式設(shè)計邊框樣式border-style 實例代碼HTML/CSS/J

5、avaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.1 設(shè)計邊框樣式設(shè)計邊框樣式border-style 接上頁HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.1 設(shè)計邊框樣式設(shè)計邊框樣式border-style 網(wǎng)頁效果HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.2 調(diào)整邊框?qū)挾日{(diào)整邊框?qū)挾萣order-width 基本語法border-width:關(guān)鍵字關(guān)鍵字|長度長度border-top-width:關(guān)鍵字關(guān)鍵字|長度長度border-bottom-width:關(guān)鍵字關(guān)鍵字|長度長度border-right-width

6、:關(guān)鍵字關(guān)鍵字|長度長度border-left-width:關(guān)鍵字關(guān)鍵字|長度長度HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.2 調(diào)整邊框?qū)挾日{(diào)整邊框?qū)挾萣order-width 語法說明邊框?qū)挾葘傩曰菊Z法中的關(guān)鍵字說明 長度包括長度值和長度單位，不可以使用負(fù)數(shù)。長度單位可以使用絕對單位也可使用相對單位，如px、pt、cm等。 基本語法中邊框?qū)挾葘傩詁order-width是一個復(fù)合屬性，可以同時設(shè)置四條邊框的寬度。具體使用方法和邊框樣式的復(fù)合屬性border-style是一樣的，可以參照上一節(jié)關(guān)于border-style的講解。表15-2HTML/CSS/

7、JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.2 調(diào)整邊框?qū)挾日{(diào)整邊框?qū)挾萣order-width 表15-2 邊框?qū)挾葘傩灾嘘P(guān)鍵字說明前往HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.2 調(diào)整邊框?qū)挾日{(diào)整邊框?qū)挾萣order-width 實例代碼HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.2 調(diào)整邊框?qū)挾日{(diào)整邊框?qū)挾萣order-width 接上頁HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.2 調(diào)整邊框?qū)挾日{(diào)整邊框?qū)挾萣order-width 網(wǎng)頁效果HTML/CSS/JavaS

8、cript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.3 設(shè)置邊框顏色設(shè)置邊框顏色border-color 基本語法border-color:顏色關(guān)鍵字顏色關(guān)鍵字|RGB值值border-top-color:顏色關(guān)鍵字顏色關(guān)鍵字|RGB值值border-bottom-color:顏色關(guān)鍵字顏色關(guān)鍵字|RGB值值border-left-color:顏色關(guān)鍵字顏色關(guān)鍵字|RGB值值border-right-color: 顏色關(guān)鍵字顏色關(guān)鍵字|RGB值值HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.3 設(shè)置邊框顏色設(shè)置邊框顏色border-color 語法說明 顏色關(guān)鍵字

9、可使用常用的16個關(guān)鍵字 RGB值使用十六進制的RGB值和RGB函數(shù)值都行。 在使用邊框顏色復(fù)合屬性border-color時，如果只設(shè)置1種顏色，則四條邊框的顏色一樣；設(shè)置2種顏色，則邊框的上下為一個顏色，左右為另一個顏色；設(shè)置3種顏色，邊框的顏色順序為上、左右、下；設(shè)置4中顏色，邊框的顏色順序為上、右、下、左。表15-3HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.3 設(shè)置邊框顏色設(shè)置邊框顏色border-color 表15-3 常用的16個顏色關(guān)鍵字前往HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.3 設(shè)置邊框顏色設(shè)置邊框顏

10、色border-color 實例代碼HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.3 設(shè)置邊框顏色設(shè)置邊框顏色border-color 接上頁HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.3 設(shè)置邊框顏色設(shè)置邊框顏色border-color 網(wǎng)頁效果HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.4 設(shè)置邊框?qū)傩栽O(shè)置邊框?qū)傩詁order 基本語法border:|border-top: |border-right: |border-bottom: |border-left: |HTML/CSS/Java

11、Script 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.4 設(shè)置邊框?qū)傩栽O(shè)置邊框?qū)傩詁order 語法說明 基本語法中每一個屬性都是一個復(fù)合屬性，都可以同時設(shè)置邊框的寬度、樣式和顏色屬性。但是在用該語法定義邊框?qū)傩詴r，每個屬性間必須用空格隔開。 這五個屬性語法中，只有border可以同時設(shè)置四條邊框的屬性。其他的只能設(shè)置單邊框的屬性。HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.4 設(shè)置邊框?qū)傩栽O(shè)置邊框?qū)傩詁order 實例代碼HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.4 設(shè)置邊框?qū)傩栽O(shè)置邊框?qū)傩詁order 接上頁HTML/CS

12、S/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.4 設(shè)置邊框?qū)傩栽O(shè)置邊框?qū)傩詁order 網(wǎng)頁效果HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.5 邊距邊距margin-top /margin-bottom /margin-left/ margin-right/margin 基本語法margin-top:長度長度|百分比百分比|automargin-bottom: 長度長度|百分比百分比|automargin-left: 長度長度|百分比百分比|automargin-left: 長度長度|百分比百分比|automargin: 長度長度|百分比百分

13、比|autoHTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.5 邊距邊距margin-top /margin-bottom /margin-left/ margin-right/margin 語法說明 長度包括長度值和長度單位，長度單位可以使用前面多次提到的絕對單位或相對單位。 百分比是相對于上級元素寬度的百分比，允許使用負(fù)數(shù)。 auto為自動提取邊距值，是默認(rèn)值。 margin復(fù)合屬性和其他復(fù)合屬性的設(shè)置方法是一樣的，也可以取1到4個值來同時設(shè)置邊框周圍的四個邊距。HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.5 邊距邊距marg

14、in-top /margin-bottom /margin-left/ margin-right/margin 實例代碼HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.5 邊距邊距margin-top /margin-bottom /margin-left/ margin-right/margin 網(wǎng)頁效果HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.6 填充填充padding-toppadding- bottom /padding-left / padding- right /padding 基本語法padding-top:長度長

15、度|百分比百分比padding-bottom: 長度長度|百分比百分比padding-left: 長度長度|百分比百分比padding-right: 長度長度|百分比百分比padding: 長度長度|百分比百分比HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.6 填充填充padding-toppadding- bottom /padding-left / padding- right /padding 語法說明 長度包括長度值和長度單位。 百分比是相對于上級元素寬度的百分比，不允許使用負(fù)數(shù)。 填充復(fù)合屬性padding的取值方法，可以參照邊框樣式border-st

16、yle的取值方法。HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.6 填充填充padding-toppadding- bottom /padding-left / padding- right /padding 實例代碼HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.6 填充填充padding-toppadding- bottom /padding-left / padding- right /padding 接上頁HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實例版（第2版）第章1515.6 填充填充padding-toppadding- bottom