第十二章CSS設(shè)置表格與表單

1、第十一章，第十二章 屬屬 性性說說 明明a:link超鏈接的普通樣式，即正常瀏覽狀態(tài)的樣式超鏈接的普通樣式，即正常瀏覽狀態(tài)的樣式a:visited被點擊過的超鏈接的樣式被點擊過的超鏈接的樣式a:hover鼠標指針經(jīng)過超鏈接時的樣式鼠標指針經(jīng)過超鏈接時的樣式a:active在超鏈接上點擊時，即在超鏈接上點擊時，即“當前激活當前激活”時超鏈時超鏈接的樣式接的樣式q 例：11-1.htmlq 例：11-2.html表表11.1可制作動態(tài)效果的可制作動態(tài)效果的CSS偽類別屬性偽類別屬性11.2 11.2 控制鼠標指針控制鼠標指針表表11.2 cursor定制的鼠標指針效果定制的鼠標指針效果11.3 列

2、表的樣式qlist-style-type 列表的符號qlist-style-image 將項目符號顯示成圖片qlist-style-position 調(diào)整列表位置list-style-type 列表的符號list-style-image 將項目符號顯示成圖片qlist-style-image:url(圖片)q例：11-3.htmllist-style-position 調(diào)整列表位置qlist-style-position:outside|inside outside表示列表符號不向內(nèi)縮進，是列表的默認屬性值。 inside表示列表符號向內(nèi)縮進。q例：例：20-1-3.html11.4 創(chuàng)建簡單

3、的導(dǎo)航菜單圖圖11.11 無需表格的菜單無需表格的菜單例：例：11-4.html 11.4.2 橫豎自由轉(zhuǎn)換菜單 圖圖11.16 水平菜單水平菜單 例：例：11-5.html 11.5 應(yīng)用滑動門技術(shù)的玻璃效果菜單圖圖11.18 玻璃效果的菜單玻璃效果的菜單例：例：11-6.html 首先是菜單的XHTML代碼： 菜單一 菜單二 子菜單一 子菜單二 子菜單三 菜單三 菜單四 子菜單一 子菜單二 子菜單三 菜單五設(shè)置列表，變成橫向：ul margin: 0px; padding: 0px; ul li float: left; font: 0.9em Arial, Helvetica, sans

4、-serif; height: 30px; width: 100px; list-style: none; 美化菜單：ul li a color: #FFF; text-decoration: none; line-height: 29px; width: 100px; margin: 0px; padding: 0px 0px 0px 8px; display: block; border-right: solid 1px #ccc; border-bottom:solid 1px #ccc; background: #808080; 讓子菜單和一級菜單有區(qū)別：ul li ul li hei

5、ght:25px; ul li ul li a background: #666; line-height:24px;q鼠標滑過某個菜單項的時候，要讓它跟其它項目有所區(qū)別：ul li a:hover background: #666; q讓子菜單隱藏：ul li ul visibility: hidden; q讓鼠標滑過有下拉項的時候，顯示下拉菜單：ul li:hover ul visibility: visible; q可以進一步修飾這個菜單，比如應(yīng)該讓子菜單中的項目在鼠標滑過的時候也變色：ul li ul li a:hover background: #333; qIe6不支持純css編寫

6、的下拉菜單。qbehavior: url(csshover3.htc); 2112.1 表格設(shè)置 屬 性CSS名稱說說 明明邊框?qū)傩?用于表單元素) border-style邊框樣式border-width邊框?qū)挾?border-color邊框顏色 border綜合在CSS中，為了設(shè)置邊框的外觀，提供了邊框樣式屬性。利用邊框樣式屬性不僅可以設(shè)置單個邊框的樣式，而且還可以利用復(fù)合邊框樣式屬性border-style統(tǒng)一設(shè)置四條邊框的樣式。基本語法 border-style:樣式取值 border-top-style:樣式取值 border-bottom-style:樣式取值 border-lef

7、t-style:樣式取值 border-right-style:樣式取值border-style邊框樣式屬性取值說明邊框樣式屬性取值說明樣式的取值樣式的取值說明說明none不顯示邊框，為默認值dotted點線dashed虛線，也可成為短線solid實線double雙直線groove凹形線ridge凸形線inset嵌入式outset嵌出式q邊框樣式屬性中border-style是一個復(fù)合屬性，其他4個都是單個邊框的樣式屬性，只能取一個值，而復(fù)合屬性border-style可以同時取1到4個值分別說明分別說明border-styleborder-style屬性的四個取值屬性的四個取值方法：方法：q

8、取一個值：四條邊框均使用這一個值。q取兩個值：上下邊框使用第一個值，左右邊框使用第二個值，兩個值一定要用空格隔開。q取三個值：上邊框使用第一個值，左右邊框使用第二個值，下邊框使用第三個值，取值之間要用空格隔開。q取四個值：四條邊框按照上、右、下、左的順序來調(diào)用取值。取值之間也要用空格隔開。例：15-1-1.html，15-1-2.html調(diào)整邊框?qū)挾日{(diào)整邊框?qū)挾萹在CSS中，利用邊框?qū)挾葘傩詠砜刂七吙虻膶挾?，一共可用的有五個屬性,分別是: 上邊框?qū)挾葘傩詁order-top-width, 下邊框?qū)挾葘傩詁order-bottom-width, 左邊框?qū)挾葘傩詁order-left-width,

9、 右邊框?qū)挾葘傩詁order-right-width 邊框?qū)挾葘傩詁order-width.其中邊框?qū)挾葘傩詁order-width是一個復(fù)合屬性，可以用來統(tǒng)一設(shè)置四條邊的寬度?；菊Z法基本語法qBorder-width:關(guān)鍵字、長度qBorder-top-width:關(guān)鍵字、長度qBorder-bottom-width:關(guān)鍵字、長度qBorder-right-width:關(guān)鍵字、長度qBorder-left-width:關(guān)鍵字、長度語法說明語法說明q邊框?qū)挾葘傩曰菊Z法中的關(guān)鍵字說明見表：關(guān)鍵字關(guān)鍵字說明說明thin細邊框medium中等邊框，是默認值thick粗邊框語法說明語法說明q長度包

10、括長度值和長度單位，不可以使用負數(shù)。長度單位可以使用絕對單位也可以使用相對單位。q基本語法中邊框?qū)挾葘傩詁order-width是一個復(fù)合屬性，可以同時設(shè)置四條邊框的寬度。q例：15-2-1.html15.3 15.3 設(shè)置邊框顏色設(shè)置邊框顏色q設(shè)置邊框的顏色，同樣可以選擇設(shè)置單條邊框的顏色，或是統(tǒng)一設(shè)置四條邊框的顏色。所以可以選用的邊框顏色屬性也有五個：上邊框顏色屬性border-top-color；下邊框顏色屬性border-bottom-color；左邊框顏色屬性border-left-color；右邊框顏色屬性border-right-color；邊框顏色屬性border-color.

11、其中邊框顏色屬性border-color是一個復(fù)合屬性。語法說明語法說明q在使用邊框顏色復(fù)合屬性border-color時：q如果只設(shè)置一種顏色，則四條邊框的顏色一樣；q設(shè)置兩種顏色，則邊框的上下為一個顏色，左右為另一個顏色；q設(shè)置三種顏色，邊框的顏色順序為上、左右、下；q設(shè)置四種顏色，邊框的顏色順序為上、右、下、左。q例：15-3-1.html32CSSCSS邊框?qū)傩赃吙驅(qū)傩詑 邊框?qū)傩?border) q 這個屬性是邊框?qū)傩缘囊粋€快捷的綜合寫法，它包含border-width, border -style和border-color。q .d1 border:5px solid gray;

12、q 例：15-4-1.html33/50q在CSS中，我們還可以設(shè)置方框樣式屬性。利用方框框樣式屬性可以設(shè)置如下一些屬性：q基本語法margin:邊界：用來設(shè)置設(shè)置一個元素在四個方向上與瀏覽器窗口邊界或上一級元素的邊界距離；padding:填充：用來控制邊框和其內(nèi)部元素之間的空白距離;CSS的方框?qū)傩?4CSSCSS邊距屬性邊距屬性q 邊距屬性是用來設(shè)置頁面中一個元素所占空間的邊緣到相鄰元素之間的距離。q 左邊距屬性(margin-left) q 這個屬性用來設(shè)定左邊距的寬度。示例如下： q .d1margin-left :1cm q 右邊距屬性 (margin-right ) q 這個屬性用

13、來設(shè)定右邊距的寬度。示例如下：q .d1 margin-right:1cm 35CSSCSS邊距屬性邊距屬性q 上邊距屬性(margin-top) q 這個屬性用來設(shè)定上邊距的寬度。示例如下：q .d1 margin-top:1cm q 下邊距屬性 (margin-bottom) q 這個屬性用來設(shè)定下邊距的寬度。示例如下：q .d1margin-bottom:1cm q 邊距屬性(margin) q 這個屬性是設(shè)定邊距寬度的一個快捷的綜合寫法，用這個屬性可以同時設(shè)定上下左右邊距屬性。 36CSSCSS邊距屬性邊距屬性q 你可以為上下左右邊距設(shè)置相同的寬度 。示例入下：q .d1 margin

14、:1cm q 你也可以分別設(shè)置邊距，順序 是上，右，下，左。示例如下： q .d1 margin:1cm 2cm 3cm 4cmq 上面的代碼表示 ，上邊距為1cm，右邊距為2cm，下邊距為3cm，左邊距為4cm。 q 例：15-5-1.html37CSSCSS間隙屬性間隙屬性q 間隙屬性(padding)是用來設(shè)置元素內(nèi)容到元素邊界的距離。 q 左間隙屬性(padding-left ) q 這個屬性用來設(shè)定左間隙的寬度 。示例如下：q .d1padding -left:1cm q 右間隙屬性(padding-right ) q 這個屬性用來設(shè)定右間隙的寬度。示例如下： q .d1 paddi

15、ng-right:1cm 38CSSCSS間隙屬性間隙屬性q 上間隙屬性(padding-top) q 這個屬性用來設(shè)定上間隙的寬度。示例如下：q .d1 padding-top:1cm q 下間隙屬性(margin-bottom ) q 這個屬性用來設(shè)定下間隙的寬度。示例如下：q .d1padding-bottom:1cm q 間隙屬性(padding ) q 這個屬性是設(shè)定間隙寬度的一個快捷的綜合寫法 ，用這個屬性可以同時設(shè)定上下左右間隙屬性。 39CSSCSS間隙屬性間隙屬性q 你可以為上下左右間隙設(shè)置相同的寬度。示例入下 ：q .d1 padding:1cm q 你也可以分別設(shè)置間隙，

16、順序是上，右，下，左。示例如下： q .d1 padding:1cm 2cm 3cm 4cmq 上面的代碼表示，上間隙為1cm，右間隙為2cm，下間隙為3cm，左間隙為4cm。 q 例15-6-1.htmlq 例15-7-1.htmlqborder-collapse:collapse;qtable-layout:fixed;q書例：12-7.htmlq書例：12-8.htmlq書例：12-12.htmlq書例：18-10.htmlCSS層層q設(shè)置層空間設(shè)置層空間z-indexq 設(shè)置層裁切設(shè)置層裁切clipq設(shè)置層大小設(shè)置層大小度來度來width、heightq 設(shè)置層溢出設(shè)置層溢出overf

17、low5 設(shè)置層可見設(shè)置層可見visibility設(shè)置層空間設(shè)置層空間z-indexq基本語法基本語法qz-index:auto|數(shù)字數(shù)字設(shè)置層空間設(shè)置層空間z-indexq語法說明 auto表示子層會按照父層的屬性顯示。數(shù)字必須是無單位的整數(shù)或負數(shù)，但一般情況下都取正整數(shù)，所以z-index屬性值為1的層位于最下層。例：12-3-1.html設(shè)置層裁切設(shè)置層裁切clipq基本語法qclip:rect| |auto設(shè)置層裁切設(shè)置層裁切clipq語法說明 auto表示不裁切。 rect的4個坐標值表示所裁切矩形的4個頂點位置，其中以網(wǎng)頁左上角為坐標（0，0），而上、右、下、左這4個坐標值則是以左

18、上角為參照點計算的。而且任意一個坐標值都可由auto來代替，表示該邊不裁切。例：20-3-2.html設(shè)置層大小設(shè)置層大小度來度來width、heightq基本語法qwidth:auto|長度長度 qheight:auto|長度長度設(shè)置層大小設(shè)置層大小度來度來width、heightq語法說明q width表示的是寬度，而height表示的是高度。q auto表示自動設(shè)置長度。q 長度包括長度值和單位。q 長度也可使用相對值中的百分比。例：20-3-3.html設(shè)置層大小設(shè)置層大小度來度來width、heightq注意q對于每個層在設(shè)置層大小時，其中只能設(shè)置寬度和高度中的一個值，另一個值則自動獲得。如果兩個值都設(shè)置了，則還要同時設(shè)置層溢出屬性overflow。設(shè)置層溢出設(shè)置層溢出overflowq基本語法qoverflow: visible/hidden/scroll/auto設(shè)置層溢出設(shè)置層溢出overflowq語法說明 visible