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

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

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

3、的導(dǎo)航菜單圖圖11.11 無需表格的菜單無需表格的菜單例：例：11-4.html 11.4.2 橫豎自由轉(zhuǎn)換菜單 圖圖11.16 水平菜單水平菜單 例：例：11-5.html 11.5 應(yīng)用滑動(dò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; 讓子菜單和一級(jí)菜單有區(qū)別：ul li ul li hei

5、ght:25px; ul li ul li a background: #666; line-height:24px;q鼠標(biāo)滑過某個(gè)菜單項(xiàng)的時(shí)候，要讓它跟其它項(xiàng)目有所區(qū)別：ul li a:hover background: #666; q讓子菜單隱藏：ul li ul visibility: hidden; q讓鼠標(biāo)滑過有下拉項(xiàng)的時(shí)候，顯示下拉菜單：ul li:hover ul visibility: visible; q可以進(jìn)一步修飾這個(gè)菜單，比如應(yīng)該讓子菜單中的項(xiàng)目在鼠標(biāo)滑過的時(shí)候也變色：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è)置單個(gè)邊框的樣式，而且還可以利用復(fù)合邊框樣式屬性border-style統(tǒng)一設(shè)置四條邊框的樣式?；菊Z法 border-style:樣式取值 border-top-style:樣式取值 border-bottom-style:樣式取值 border-lef

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

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

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

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

11、其中邊框顏色屬性border-color是一個(gè)復(fù)合屬性。語法說明語法說明q在使用邊框顏色復(fù)合屬性border-color時(shí)：q如果只設(shè)置一種顏色，則四條邊框的顏色一樣；q設(shè)置兩種顏色，則邊框的上下為一個(gè)顏色，左右為另一個(gè)顏色；q設(shè)置三種顏色，邊框的顏色順序?yàn)樯稀⒆笥?、下；q設(shè)置四種顏色，邊框的顏色順序?yàn)樯?、右、下、左。q例：15-3-1.html32CSSCSS邊框?qū)傩赃吙驅(qū)傩詑 邊框?qū)傩?border) q 這個(gè)屬性是邊框?qū)傩缘囊粋€(gè)快捷的綜合寫法，它包含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è)置一個(gè)元素在四個(gè)方向上與瀏覽器窗口邊界或上一級(jí)元素的邊界距離；padding:填充：用來控制邊框和其內(nèi)部元素之間的空白距離;CSS的方框?qū)傩?4CSSCSS邊距屬性邊距屬性q 邊距屬性是用來設(shè)置頁面中一個(gè)元素所占空間的邊緣到相鄰元素之間的距離。q 左邊距屬性(margin-left) q 這個(gè)屬性用來設(shè)定左邊距的寬度。示例如下： q .d1margin-left :1cm q 右邊距屬性 (margin-right ) q 這個(gè)屬性用

13、來設(shè)定右邊距的寬度。示例如下：q .d1 margin-right:1cm 35CSSCSS邊距屬性邊距屬性q 上邊距屬性(margin-top) q 這個(gè)屬性用來設(shè)定上邊距的寬度。示例如下：q .d1 margin-top:1cm q 下邊距屬性 (margin-bottom) q 這個(gè)屬性用來設(shè)定下邊距的寬度。示例如下：q .d1margin-bottom:1cm q 邊距屬性(margin) q 這個(gè)屬性是設(shè)定邊距寬度的一個(gè)快捷的綜合寫法，用這個(gè)屬性可以同時(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 這個(gè)屬性用來設(shè)定左間隙的寬度 。示例如下：q .d1padding -left:1cm q 右間隙屬性(padding-right ) q 這個(gè)屬性用來設(shè)定右間隙的寬度。示例如下： q .d1 paddi

15、ng-right:1cm 38CSSCSS間隙屬性間隙屬性q 上間隙屬性(padding-top) q 這個(gè)屬性用來設(shè)定上間隙的寬度。示例如下：q .d1 padding-top:1cm q 下間隙屬性(margin-bottom ) q 這個(gè)屬性用來設(shè)定下間隙的寬度。示例如下：q .d1padding-bottom:1cm q 間隙屬性(padding ) q 這個(gè)屬性是設(shè)定間隙寬度的一個(gè)快捷的綜合寫法 ，用這個(gè)屬性可以同時(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ù)字?jǐn)?shù)字設(shè)置層空間設(shè)置層空間z-indexq語法說明 auto表示子層會(huì)按照父層的屬性顯示。數(shù)字必須是無單位的整數(shù)或負(fù)數(shù)，但一般情況下都取正整數(shù)，所以z-index屬性值為1的層位于最下層。例：12-3-1.html設(shè)置層裁切設(shè)置層裁切clipq基本語法qclip:rect| |auto設(shè)置層裁切設(shè)置層裁切clipq語法說明 auto表示不裁切。 rect的4個(gè)坐標(biāo)值表示所裁切矩形的4個(gè)頂點(diǎn)位置，其中以網(wǎng)頁左上角為坐標(biāo)（0，0），而上、右、下、左這4個(gè)坐標(biāo)值則是以左

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