《web前端技術(shù)》課件-第六章

Web前端技術(shù)簽到掃碼下載文旌課堂APP掃碼簽到簽到方式教師通過“文旌課堂APP”生成簽到二維碼，并設(shè)置簽到時(shí)間，學(xué)生通過“文旌課堂APP”掃描“簽到二維碼”進(jìn)行簽到。

CSS3的常用屬性第六章HTML5提供了多種多樣的元素，用于構(gòu)建網(wǎng)頁結(jié)構(gòu)，充實(shí)網(wǎng)頁內(nèi)容，但是單獨(dú)使用HTML5制作的網(wǎng)頁，視覺效果單調(diào)，缺乏美觀度，此時(shí)就體現(xiàn)出CSS3的重要性。CSS3提供了大量的屬性用于設(shè)置不同元素的樣式，從而提升網(wǎng)頁的整體效果，以滿足人們對(duì)網(wǎng)頁美觀度的要求。本章將對(duì)CSS3提供的常用屬性進(jìn)行詳細(xì)介紹。章節(jié)導(dǎo)讀掌握設(shè)置字體樣式和文本格式的相關(guān)屬性。掌握設(shè)置網(wǎng)頁圖像和背景樣式的相關(guān)屬性。掌握設(shè)置列表、超鏈接、表格和表單樣式的相關(guān)屬性。學(xué)習(xí)目標(biāo)學(xué)習(xí)CSS3的常用屬性，增加知識(shí)儲(chǔ)備，鍛煉思維能力。體驗(yàn)豐富的案例，養(yǎng)成理論與實(shí)踐相結(jié)合的良好習(xí)慣。

感受國(guó)家強(qiáng)大，增強(qiáng)民族自豪感，提升民族自信心。素質(zhì)目標(biāo)第六章CSS的常用屬性/章節(jié)導(dǎo)航/6.1文本屬性6.2圖像屬性實(shí)戰(zhàn)演練——美化“金企鵝教育”主頁“精品圖書”模塊6.3列表屬性實(shí)戰(zhàn)演練——美化“金企鵝教育”主頁“教育資訊”模塊6.4

超鏈接屬性實(shí)戰(zhàn)演練——美化“金企鵝教育”網(wǎng)站主頁的導(dǎo)航欄6.5表格屬性實(shí)戰(zhàn)演練——美化“云課堂”頁面的“精品課程”模塊6.6

表單屬性實(shí)戰(zhàn)演練——美化“金企鵝教育”網(wǎng)站的登錄頁面文本屬性6.1文本是網(wǎng)頁設(shè)計(jì)最基礎(chǔ)的部分，合理的文本設(shè)計(jì)不僅可以傳達(dá)信息，還可以使頁面更加美觀。在CSS3中，可以使用文本屬性設(shè)置字體的樣式、文本的格式等。6.1文本屬性6.1.1設(shè)置字體樣式CSS3提供了多個(gè)設(shè)置字體樣式的屬性，包括字體類型、字體大小、字體粗細(xì)、字體風(fēng)格和字體顏色等。在CSS3中，使用font-family屬性設(shè)置文本的字體類型（也可直接使用font屬性），具體格式為：其中，name表示字體名稱。當(dāng)字體名稱為英文時(shí)，直接標(biāo)明即可，如“font-family:Arial;”;當(dāng)字體名稱為中文或包含空格、#、$等符號(hào)的英文時(shí)，需要用英文雙引號(hào)標(biāo)明，如“font-family:"宋體";”或“font-family:"TimesNewRoman";”font-family屬性可以同時(shí)指定多個(gè)字體。當(dāng)指定多個(gè)字體時(shí)，需要將字體名稱按照優(yōu)先順序排列，各字體名稱之間用英文逗號(hào)隔開，如“font-family:"宋體","楷體";”。若指定的多個(gè)字體中含有英文字體名稱，則必須將英文字體名稱放置在中文字體名稱之前，如“font-family:Arial,"宋體","楷體";”。1．字體類型font-family:name;6.1文本屬性超鏈接CSS3提供了5個(gè)通用字體作為備用字體，用于替換無法正常顯示的類似字體，它們分別為serif（襯線字體）、sans-serif（無襯線字體）、cursive（草體）、fantasy（奇異字體）和monospace（等寬字體）。TUOZHANYUEDU拓展閱讀超鏈接6.1文本屬性CSS3中，使用font-size屬性設(shè)置文本的字體大小，具體格式為：其中，length最常用，表示某個(gè)固定值（單位是px、em或pt等）；百分?jǐn)?shù)（如10%）表示基于父元素或默認(rèn)值的一個(gè)百分比值；關(guān)鍵字包括表示絕對(duì)字體大小的屬性值xx-small、x-small、small、large、x-large、xx-large（按字體大小從小到大排列）和根據(jù)父元素的字體大小進(jìn)行變化的相對(duì)字體大小larger（增大）、smaller（減?。?．字體大小font-size:length|百分?jǐn)?shù)|關(guān)鍵字；6.1文本屬性超鏈接在CSS3中，有許多屬性接受長(zhǎng)度值，如font-size、width、margin等。長(zhǎng)度是一個(gè)后面跟著長(zhǎng)度單位的值，如10px、2em等。長(zhǎng)度分為絕對(duì)長(zhǎng)度和相對(duì)長(zhǎng)度。絕對(duì)長(zhǎng)度是固定的，用任何一個(gè)絕對(duì)長(zhǎng)度表示的長(zhǎng)度都將恰好顯示為這個(gè)尺寸。常見的絕對(duì)長(zhǎng)度單位有cm（厘米）、mm（毫米）、in（英寸）、px（像素）、pt（點(diǎn)）、pc（派卡）。TIANZHUANJIAWA添磚加瓦6.1文本屬性超鏈接相對(duì)長(zhǎng)度規(guī)定相對(duì)于另一個(gè)長(zhǎng)度屬性的長(zhǎng)度。相對(duì)長(zhǎng)度在不同渲染介質(zhì)之間縮放表現(xiàn)得更好。其中，視口（Viewport）就是瀏覽器窗口的尺寸。TIANZHUANJIAWA添磚加瓦6.1文本屬性在CSS3中，使用font-weight屬性設(shè)置文本的字體粗細(xì)，具體格式為：其中，normal是默認(rèn)值，表示正常粗細(xì)的字體，相當(dāng)于400；bold表示粗體，相當(dāng)于700，等同于<b>標(biāo)簽的效果；bolder與lighter表示相對(duì)粗細(xì)，它們根據(jù)父元素的字體粗細(xì)而加粗或減細(xì)；number取值包括100、200、300、400、500、600、700、800、900，它們分別表示字體的粗細(xì)程度。3．字體粗細(xì)font-weight:normal|bold|bolder|lighter|number;6.1文本屬性超鏈接在Windows系統(tǒng)的編輯器中，文本的默認(rèn)字體為“微軟雅黑”，在該系統(tǒng)環(huán)境下為文本設(shè)置font-weight屬性時(shí)，頁面中的字體粗細(xì)可能并未更改，這是因?yàn)椤拔④浹藕凇弊煮w只支持400與700兩種字體粗細(xì)效果，當(dāng)設(shè)置為其他值時(shí)它會(huì)自動(dòng)替換成這兩種效果。Gaoshoudianbo高手點(diǎn)撥6.1文本屬性在CSS3中，使用font-style屬性設(shè)置文本的字體風(fēng)格，具體格式為：其中，normal是默認(rèn)值，表示正常字體；italic表示斜體字；oblique表示傾斜的字體，用于將沒有斜體屬性的字體傾斜。4．字體風(fēng)格font-style:normal|italic|oblique;6.1文本屬性在CSS3中，使用color屬性設(shè)置文本的字體顏色，具體格式為：5．字體顏色color:color;6.1文本屬性5．字體顏色6.1文本屬性想一想思考：red（紅）、white（白色）、#ff0000、rgb(255,0,0)等都是以什么形式表示顏色的？超鏈接在實(shí)際應(yīng)用中，只有那些常見的顏色，如紅色、白色、黑色等會(huì)使用英文單詞表示，其他顏色更多是使用十六進(jìn)制數(shù)或RGB值表示。TISHI提示超鏈接6.1文本屬性

p{font-family:"宋體"; /*設(shè)置字體類型為宋體*/

font-size:20px;

/*設(shè)置字體大小為20px*/

font-weight:bold;

/*設(shè)置字體粗細(xì)為粗體*/

font-style:italic;

/*設(shè)置字體風(fēng)格為斜體字*/

color:#008000;

/*設(shè)置字體顏色為#008000*/}【例6-1】

設(shè)置文本的字體樣式，包括字體的類型、大小、粗細(xì)、風(fēng)格、顏色等（以下提供部分代碼），頁面效果如圖所示。6.1文本屬性【例6-1】

設(shè)置文本的字體樣式，包括字體的類型、大小、粗細(xì)、風(fēng)格、顏色等（以下提供部分代碼），頁面效果如圖所示。P6.1文本屬性設(shè)置文本字體樣式后的頁面效果6.1文本屬性6.1.2設(shè)置文本格式CSS3不僅提供了設(shè)置字體樣式的屬性，還提供了很多設(shè)置文本格式的屬性，包括首行縮進(jìn)、水平對(duì)齊、文本修飾、省略標(biāo)記、間距、行距、自動(dòng)換行和空白符處理等。在CSS3中，使用text-indent屬性設(shè)置文本首行字符的縮進(jìn)距離，具體格式為：其中，length是最常用的屬性值，表示以px、em或pt為單位的具體數(shù)值，默認(rèn)值為0；

%表示相對(duì)于父元素寬度的百分比。1．首行縮進(jìn)text-indent:length|%;6.1文本屬性在CSS3中，使用text-align屬性設(shè)置文本的水平對(duì)齊方式，具體格式為：2．水平對(duì)齊text-align:left|right|center|justify;6.1文本屬性在CSS3中，使用text-decoration屬性設(shè)置添加到文本的修飾，具體格式為：3．文本修飾text-decoration:none|underline|overline|line-through;

HTML5中還可以使用<u>標(biāo)簽標(biāo)記下畫線效果，但不常使用。TISHI提示6.1文本屬性在CSS3中，使用text-overflow屬性設(shè)置文本內(nèi)容超出容器邊界（文本溢出）時(shí)省略標(biāo)記的樣式，具體格式為：其中，clip是默認(rèn)值，表示在文本溢出時(shí)不顯示省略標(biāo)記，在容器邊界位置直接截?cái)啵?/p>

ellipsis表示在文本溢出時(shí)顯示省略標(biāo)記“…”。4．省略標(biāo)記text-overflow:clip|ellipsis;6.1文本屬性間距包括字符間距和字間距，字符間距是指字母之間的空白，字間距是指單詞之間的空白。在CSS3中，使用letter-spacing屬性設(shè)置字符間距，使用word-spacing屬性設(shè)置字間距，具體格式為：其中，normal是默認(rèn)值，表示0；length表示以px、em或pt為單位的具體數(shù)值，可以為負(fù)值。5．間距l(xiāng)etter-spacing:normal|length;word-spacing:normal|length;超鏈接對(duì)于設(shè)置了字間距的文本，瀏覽器會(huì)以文本中的空格為基準(zhǔn)調(diào)節(jié)單詞的間距。需要注意的是，使用連字符的單詞會(huì)被視為一個(gè)單詞，連續(xù)的漢字不被視為單詞，只有漢字之間用空格隔開時(shí)，被分開的漢字才被視為單詞。TISHI提示超鏈接6.1文本屬性6.1文本屬性在CSS3中，使用line-height屬性設(shè)置文本的行高，具體格式為：6．行高line-height:normal|number|length|%;

行高的屬性值小于100%時(shí)，將產(chǎn)生文本重疊效果，屬性值為0時(shí)表示沒有行高，即完全重疊。TISHI提示6.1文本屬性在CSS3中，使用word-break屬性設(shè)置文本的自動(dòng)換行方式，具體格式為：7．自動(dòng)換行word-break:normal|break-all|keep-all;6.1文本屬性默認(rèn)情況下，瀏覽器在遇到多個(gè)空格時(shí)會(huì)將它們壓縮為一個(gè)空格，其他空白符也將自動(dòng)忽略。當(dāng)需要顯示空白符時(shí)，可以使用white-space屬性設(shè)置瀏覽器對(duì)空白符的識(shí)別方式，具體格式為：8．空白符處理white-space:normal|nowrap|pre|pre-line|pre-wrap;h1{text-align:center; /*設(shè)置文本水平對(duì)齊方式為居中*/}p{text-indent:2em; /*設(shè)置文本首行縮進(jìn)為2個(gè)字符*/ line-height:2; /*設(shè)置文本的行高為2*/ word-break:normal; /*設(shè)置文本自動(dòng)換行為瀏覽器默認(rèn)的換行規(guī)則*/}.p1{text-decoration:underline; /*設(shè)置文本修飾為下畫線效果*/}.p2{letter-spacing:1em; /*設(shè)置字符間距為1個(gè)字符*/ word-spacing:normal; /*設(shè)置字間距為默認(rèn)值*/}.p3{width:960px; overflow:hidden; /*規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的*/ border:solid1pxblack; /*設(shè)置元素的邊框樣式*/ white-space:nowrap; /*設(shè)置瀏覽器對(duì)空白符的識(shí)別方式為壓縮空白符，文本不換行*/ text-overflow:ellipsis; /*設(shè)置文本溢出時(shí)顯示省略標(biāo)記“…”*/}【例5-2】

設(shè)置文本格式，包括首行縮進(jìn)、水平對(duì)齊、文本修飾、省略標(biāo)記等（以下提供部分代碼）。6.1文本屬性【例5-2】

頁面效果如圖所示。設(shè)置文本格式后的頁面效果pp1p2p36.1文本屬性超鏈接在CSS3中，使用overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素邊框時(shí)的處理方式，具體格式為：zISHITUOZHAN知識(shí)拓展overflow:visible|hidden|scroll|auto;6.1文本屬性圖像屬性6.2CSS3不僅可以設(shè)置網(wǎng)頁中文本的樣式，還可以設(shè)置網(wǎng)頁圖像和背景的樣式，從而進(jìn)一步豐富和完善網(wǎng)頁顯示效果。6.2圖像屬性6.2.1

設(shè)置網(wǎng)頁圖像CSS3提供的屬性可以設(shè)置網(wǎng)頁圖像的大小、邊框樣式、不透明度、圓角樣式和陰影樣式等。1．圖像大小在CSS3中，使用width和height屬性設(shè)置圖像的寬和高，屬性值為數(shù)字（單位為px）。例如，使用標(biāo)簽選擇器設(shè)置圖像的大小，代碼如下：img{width:200px;height:150px}超鏈接若只設(shè)置圖像的寬度或高度，瀏覽器會(huì)自動(dòng)調(diào)整橫縱比，以保證圖像寬高比不變，避免圖像變形。若同時(shí)設(shè)置圖像的寬度和高度，就一定要注意圖形的寬高比，否則圖像可能會(huì)變形。TISHI提示超鏈接6.2圖像屬性網(wǎng)頁中的圖像元素默認(rèn)是沒有邊框的，但CSS3提供的屬性可以設(shè)置邊框的樣式，包括寬度、風(fēng)格和顏色。（1）邊框?qū)挾?。在CSS3中，使用border-width屬性設(shè)置邊框?qū)挾龋唧w格式為：2．邊框樣式border-width:width[width][width][width];

6.2圖像屬性

border-width屬性值取1個(gè)值時(shí)，表示四個(gè)方向的邊框?qū)挾纫粯?。例如?/p>

border-width屬性值取2個(gè)值時(shí)，第一個(gè)值設(shè)置上、下邊框的寬度，第二個(gè)值設(shè)置左、右邊框的寬度。例如：2．邊框樣式border-width:2px;/*設(shè)置四個(gè)方向的邊框?qū)挾葹?px*/border-width:2px3px;/*設(shè)置上、下邊框的寬度為2px，左、右邊框的寬度為3px*/6.2圖像屬性

border-width屬性值取3個(gè)值時(shí)，第一個(gè)值設(shè)置上邊框的寬度，第二個(gè)值設(shè)置左、右邊框的寬度，第三個(gè)值設(shè)置下邊框的寬度。例如：

border-width屬性值取4個(gè)值時(shí)，按順時(shí)針方向依次設(shè)置上、右、下、左邊框的寬度。例如：2．邊框樣式border-width:2px3px4px;/*設(shè)置上邊框的寬度為2px，左、右邊框的寬度3px，下邊框的寬度為4px*/border-width:2px3px4px5px;/*設(shè)置上、右、下、左邊框的寬度分別為2px、3px、4px、5px*/6.2圖像屬性（2）邊框風(fēng)格。在CSS3中，使用border-style屬性設(shè)置邊框風(fēng)格，具體格式為：屬性值可取1～4個(gè)值，各個(gè)值之間使用空格分隔。不同的取值個(gè)數(shù)對(duì)應(yīng)的屬性值含義與邊框?qū)挾戎械念愃啤?．邊框樣式border-style:style[style][style][style];6.2圖像屬性（3）邊框顏色。在CSS3中，使用border-color屬性設(shè)置邊框顏色，具體格式為：其中，color表示設(shè)置的具體顏色，設(shè)置方法與字體顏色的設(shè)置方法相同。屬性值可取1～4個(gè)值，各個(gè)值之間使用空格分隔。不同的取值個(gè)數(shù)對(duì)應(yīng)的屬性值含義與邊框?qū)挾戎械念愃?，此處不再贅述?．邊框樣式border-color:color[color][color][color];6.2圖像屬性此外，在CSS3中，使用border屬性可以在一個(gè)聲明中統(tǒng)一設(shè)置邊框的寬度、風(fēng)格和顏色，具體格式為：例如，設(shè)置圖像邊框的寬度為2px，風(fēng)格為單實(shí)線，顏色為黑色，代碼如下：2．邊框樣式border:邊框?qū)挾冗吙蝻L(fēng)格邊框顏色;img{border:2pxsolidblack;}6.2圖像屬性超鏈接圖像元素包括4個(gè)方向的邊框，所以在設(shè)置邊框的樣式時(shí)既可以使用一條樣式代碼設(shè)置4個(gè)方向的邊框，如“border-width:2px;”設(shè)置4個(gè)方向的邊框?qū)挾染鶠?px，也可以針對(duì)每個(gè)方向分別使用一條樣式代碼進(jìn)行設(shè)置，如“border-bottom-width:2px;”設(shè)置下邊框的邊框?qū)挾葹?px。因此，設(shè)置邊框樣式的屬性都存在兩類，即border-width和border-方向-width；border-style和border-方向-style；border-color和border-方向-color；border和border-方向。其中，“方向”可取的值有top（上）、right（右）、bottom（下）、left（左）。zhISHITUOZHAN知識(shí)拓展超鏈接6.2圖像屬性在CSS3中，使用opacity屬性設(shè)置不透明度，具體格式為：它的取值范圍為0～1，數(shù)值越高透明度越低，0表示完全透明，1表示完全不透明。3．不透明度opacity:0～1;6.2圖像屬性在CSS3中，使用border-radius屬性設(shè)置圓角樣式，具體格式為：其中，value表示圓角的樣式，取值有l(wèi)ength，表示以px為單位的具體數(shù)值，不可為負(fù)值，用于定義圓角的形狀；%，表示以百分比定義圓角的形狀。屬性值可取1～4個(gè)值，各個(gè)值之間使用空格分隔。取值個(gè)數(shù)不一樣，屬性值的含義也不一樣。4．圓角樣式border-radius:value[value][value][value];6.2圖像屬性

border-radius屬性值取1個(gè)值時(shí)，表示統(tǒng)一設(shè)置4個(gè)圓角。

border-radius屬性值取2個(gè)值時(shí)，第一個(gè)值設(shè)置左上角與右下角，第二個(gè)值設(shè)置右上角與左下角。

border-radius屬性值取3個(gè)值時(shí)，第一個(gè)值設(shè)置左上角，第二個(gè)值設(shè)置右上角與左下角，第三個(gè)值設(shè)置右下角。

border-radius屬性值取4個(gè)值時(shí)，按順時(shí)針方向依次設(shè)置左上角、右上角、右下角、左下角。此外，border-radius屬性值可以為兩組，兩組值之間用“/”隔開，第一組表示水平方向的圓角，第二組表示垂直方向的圓角，每組值的含義與上文類似。4．圓角樣式6.2圖像屬性超鏈接為了分別設(shè)置4個(gè)頂角的圓角樣式，border-radius屬性和邊框樣式屬性類似，派生了4個(gè)子屬性。zhISHITUOZHAN知識(shí)拓展6.2圖像屬性在CSS3中，使用box-shadow屬性給框添加一個(gè)或多個(gè)陰影樣式，具體格式為：此外，這些值除h-shadow與v-shadow之外都可以省略。使用該屬性向框添加多個(gè)陰影樣式時(shí)，不同的樣式之間用逗號(hào)分隔。5．陰影樣式box-shadow:h-shadowv-shadowblurspreadcolorinset[,h-shadowv-shadowblurspreadcolorinset];6.2圖像屬性img{width:300px; /*設(shè)置元素寬度為300px*/ border:2pxsolidblack; /*設(shè)置元素邊框?qū)挾葹?px、風(fēng)格為單實(shí)線、顏色為黑色*/}.y1{opacity:0.3;/*設(shè)置元素不透明度為0.3*/}.y2{border-width:8px6px; /*設(shè)置元素上、下邊框?qū)挾葹?px，左、右邊框?qū)挾葹?px*/ border-style:double; /*設(shè)置元素邊框風(fēng)格為雙實(shí)線*/ border-color:#acacac; /*設(shè)置元素邊框顏色為#acacac*/}.y3{box-shadow:15px13px5px2px#550000,30px25px5px5px#b4b4b4; /*設(shè)置兩個(gè)元素陰影樣式，包括水平陰影的位置、垂直陰影的位置、模糊距離、陰影的尺寸，以及陰影的顏色*/ border-radius:50px/100px; /*設(shè)置兩組圓角樣式值*/}【例6-3】設(shè)置網(wǎng)頁圖像的樣式，包括圖像大小、邊框樣式、不透明度、圓角樣式、陰影樣式等（以下提供部分代碼）。6.2圖像屬性【例6-3】頁面效果如圖所示。6.2圖像屬性設(shè)置網(wǎng)頁圖像樣式后的頁面效果超鏈接本節(jié)介紹的有關(guān)圖像樣式的屬性可應(yīng)用于HTML5中的大多數(shù)塊級(jí)元素，如用于設(shè)置視頻元素的大小、邊框、圓角、陰影等樣式。此外，若要將這些樣式應(yīng)用于行內(nèi)元素，則需要使用display屬性修改元素的類型，。zhISHITUOZHAN知識(shí)拓展6.2圖像屬性為了提高網(wǎng)頁的美觀度，設(shè)計(jì)者常使用美麗的顏色或圖像設(shè)置網(wǎng)頁的背景。CSS3提供的屬性可以設(shè)置網(wǎng)頁的背景顏色、背景圖像、背景圖像的顯示方式、背景圖像的起始位置和背景圖像的固定方式等。6.2.2設(shè)置網(wǎng)頁背景6.2圖像屬性1．背景顏色在CSS3中，使用background-color屬性設(shè)置背景顏色，具體格式為：其中，屬性值transparent是默認(rèn)值，表示背景顏色為透明；color表示設(shè)置的背景顏色，其設(shè)置方法與字體顏色的設(shè)置方法相同。background-color:transparent|color;

6.2圖像屬性2．背景圖像在CSS3中，使用background-image屬性設(shè)置背景圖像，具體格式為：其中，none是默認(rèn)值，表示不顯示背景圖像；url(圖像地址)表示背景圖像的地址。background-image:none|url(圖像地址);6.2圖像屬性在CSS3中，使用background-repeat屬性設(shè)置背景圖像的顯示方式，具體格式為：background-repeat:repeat|repeat-x|repeat-y|no-repeat|round|space;3．背景圖像的顯示方式6.2圖像屬性4．背景圖像的起始位置在CSS3中，可以使用background-position屬性設(shè)置背景圖像的起始位置，具體格式為：其中，屬性值可以使用表示上、下、左、中、右方向的關(guān)鍵字表示，也可以使用相對(duì)于0%0%或00頂點(diǎn)的水平和垂直兩個(gè)方向的偏移量表示，而且屬性值都是使用兩個(gè)值表示，這兩個(gè)值之間使用空格分隔，它們的說明如表所示。background-position:位置關(guān)鍵字|偏移量;6.2圖像屬性4．背景圖像的起始位置表

background-position的屬性值及說明屬性值說明位置關(guān)鍵字lefttop（左上角）第一個(gè)值是水平位置，第二個(gè)值是垂直位置；默認(rèn)值為lefttop；如果僅規(guī)定了一個(gè)關(guān)鍵詞，那么另一個(gè)值默認(rèn)為center。leftcenter（靠左居中）leftbottom（左下角）centertop（居中靠上）centercenter（水平垂直居中）centerbottom（居中靠下）righttop（右上角）rightcenter（靠右居中）rightbottom（右下角）6.2圖像屬性4．背景圖像的起始位置續(xù)表

background-position的屬性值及說明屬性值說明偏移量x%y%第一個(gè)值是水平位置，第二個(gè)值是垂直位置；x%表示相對(duì)于元素的寬度和背景圖片寬度之差的百分?jǐn)?shù)，y%表示相對(duì)于元素的寬度和背景圖片高度之差的百分?jǐn)?shù)；默認(rèn)值為0%0%（左上角）；如果僅規(guī)定了一個(gè)值，那么另一個(gè)值默認(rèn)為50%xposypos第一個(gè)值是水平位置，第二個(gè)值是垂直位置；xposypos表示相對(duì)于左上角的數(shù)值，xpos為正值時(shí)，表示從左向右移動(dòng)，反之表示從右向左移動(dòng)；ypos為正值時(shí)，表示從上向下移動(dòng)，反之表示從下向上移動(dòng)；默認(rèn)值為00（左上角），單位為px或em；如果僅規(guī)定了一個(gè)值，那么另一個(gè)值默認(rèn)為50%6.2圖像屬性5．背景圖像的固定方式在CSS3中，使用background-attachment屬性設(shè)置背景圖像是否固定或隨著頁面的其余部分滾動(dòng)，具體格式為：其中，scroll是默認(rèn)值，表示背景圖像相對(duì)于元素固定，也就是說背景圖片隨著頁面的滾動(dòng)而滾動(dòng)；fixed表示背景圖像相對(duì)于瀏覽器窗體固定，也就是說背景圖像不會(huì)隨著頁面的滾動(dòng)而滾動(dòng)；local表示背景圖像相對(duì)于元素內(nèi)容固定，也就是說背景圖像會(huì)隨著元素內(nèi)容的滾動(dòng)而滾動(dòng)。background-attachment:scroll|fixed|local;超鏈接CSS3中，使用background屬性可以在一個(gè)聲明中設(shè)置所有的背景屬性，具體格式為：其中，屬性值中必須至少包含背景顏色或背景圖像，其余值根據(jù)需要選擇是否使用；不同的值之間使用空格分隔。zhISHITUOZHAN知識(shí)拓展6.2圖像屬性background:background-colorbackground-image[background-repeatbackground-positionbackground-attachment];body{background-image:url(img/6-4.jpg);

background-repeat:round;

background-position:lefttop;

background-attachment:fixed;}h1{text-align:center;

font-family:"楷體";

background-color:#acacac;}【例6-4】

設(shè)置網(wǎng)頁背景的樣式，包括背景顏色、背景圖像、顯示方式等（以下提供部分代碼），頁面效果如圖所示。設(shè)置網(wǎng)頁背景樣式后的頁面效果6.2圖像屬性超鏈接6.2圖像屬性超鏈接為紀(jì)念北京奧運(yùn)會(huì)成功舉辦，國(guó)務(wù)院批準(zhǔn)從2009年起，將每年8月8日設(shè)置為“全民健身日”。2014年10月，我國(guó)將全民健身上升為國(guó)家戰(zhàn)略，并謀劃和推動(dòng)全民健身事業(yè)，把全民健身作為全面建成小康社會(huì)的重要組成部分，更好地發(fā)揮全民健身在實(shí)現(xiàn)中華民族偉大復(fù)興中國(guó)夢(mèng)中的積極作用。2021年8月8日是我國(guó)第13個(gè)全民健身日。習(xí)近平總書記指出，全民健身是全體人民增強(qiáng)體魄、健康生活的基礎(chǔ)和保障，人民身體健康是全面建成小康社會(huì)的重要內(nèi)涵，是每一個(gè)人成長(zhǎng)和實(shí)現(xiàn)幸福生活的重要基礎(chǔ)。從應(yīng)運(yùn)而生的健康愿景到深入人心的國(guó)家戰(zhàn)略，全民健身的發(fā)展與普及，讓更多中國(guó)人身體壯起來、精神強(qiáng)起來。面對(duì)新冠肺炎疫情大考，科學(xué)健身對(duì)提高身體素質(zhì)、增強(qiáng)抗疫信心發(fā)揮著重要作用，讓中國(guó)邁向全面小康的步伐更加堅(jiān)定。從個(gè)人來說，想要更好地投身到中華民族的偉大復(fù)興中，必須要有一個(gè)健康的體魄。因此，我們應(yīng)該響應(yīng)號(hào)召，積極參與到全民健身中。旗幟引領(lǐng)超鏈接在第3章的實(shí)戰(zhàn)演練中已經(jīng)介紹過如何使用文本和圖像類標(biāo)簽制作“金企鵝教育”主頁的“精品圖書”模塊，這里介紹如何美化該模塊?！阑敖鹌簌Z教育”主頁“精品圖書”模塊實(shí)戰(zhàn)演練WEB掃一掃超鏈接步驟1

在HBuilderX中導(dǎo)入本書配套素材“素材與案例\第6章\實(shí)戰(zhàn)演練\6.2\JinqieProject”文件夾，然后打開“index.css”文檔?！阑敖鹌簌Z教育”主頁“精品圖書”模塊實(shí)戰(zhàn)演練WEB超鏈接步驟2

設(shè)置“精品圖書”模塊容器的樣式。在“index.css”文檔中添加以下代碼，使用選擇器#main_book設(shè)置樣式，頁面效果如圖所示?！阑敖鹌簌Z教育”主頁“精品圖書”模塊實(shí)戰(zhàn)演練WEB設(shè)置“精品圖書”模塊容器樣式后的頁面效果#main_book{height:420px;

overflow:hidden;

background:url("img/book_bg.png")50%no-repeat#F9F9F9;

padding-bottom:100px;

/*設(shè)置元素的下內(nèi)邊距（底部空白）為100px*/}超鏈接步驟3

設(shè)置“精品圖書”標(biāo)題的樣式。在“index.css”文檔中添加以下代碼，使用選擇器.book_title、.book_title>h3等設(shè)置樣式?！阑敖鹌簌Z教育”主頁“精品圖書”模塊實(shí)戰(zhàn)演練WEB.book_title{width:1200px;

height:auto;

margin:40pxauto;

/*設(shè)置元素的外邊距*/

font-size:30px;

font-weight:bold;

text-align:center;}.book_title>h3{color:#9BDBC6;}.book_titleh3>i{color:#CFE3DE;}.book_title>h4{width:210px;

border-bottom:1pxsolid#009C78;

/*設(shè)置下邊框的寬度、樣式和顏色*/

position:relative;

/*規(guī)定元素的定位類型為相對(duì)定位*/

padding:0px0px20px;

/*設(shè)置元素的內(nèi)邊距*/超鏈接步驟3

設(shè)置“精品圖書”標(biāo)題的樣式。在“index.css”文檔中添加以下代碼，使用選擇器.book_title、.book_title>h3等設(shè)置樣式。——美化“金企鵝教育”主頁“精品圖書”模塊實(shí)戰(zhàn)演練WEB

margin:auto;

color:#009C78;}.book_title>h4::before{content:'';

width:40px;

height:4px;

border-radius:2px;

background-color:#009C78;

position:absolute;

/*規(guī)定元素的定位類型為絕對(duì)定位*/

bottom:0px;

left:87px;}超鏈接步驟3

頁面效果如圖所示?！阑敖鹌簌Z教育”主頁“精品圖書”模塊實(shí)戰(zhàn)演練WEB設(shè)置“精品圖書”標(biāo)題樣式后的頁面效果超鏈接步驟4

設(shè)置圖書展示的樣式。在“index.css”文檔中添加以下代碼，使用選擇器.book_show、.book_showimg等設(shè)置樣式，此時(shí)即可獲得該模塊最終的頁面效果，如圖所示?！阑敖鹌簌Z教育”主頁“精品圖書”模塊實(shí)戰(zhàn)演練WEB

.book_show{width:300px;height:310px;}

.book_showimg{margin-bottom:20px;

/*設(shè)置元素的下外邊距*/}

.book_showstrong{color:#FF0000;

margin-right:20px;

/*設(shè)置元素的右外邊距*/}超鏈接步驟4

設(shè)置圖書展示的樣式。在“index.css”文檔中添加以下代碼，使用選擇器.book_show、.book_showimg等設(shè)置樣式，此時(shí)即可獲得該模塊最終的頁面效果，如圖所示?！阑敖鹌簌Z教育”主頁“精品圖書”模塊實(shí)戰(zhàn)演練WEB“精品圖書”模塊最終的頁面效果超鏈接列舉的案例中難免會(huì)用到還未講解的CSS3屬性，書中先通過代碼注釋的方式簡(jiǎn)單介紹這些屬性，以供讀者了解，后面的章節(jié)中會(huì)詳細(xì)地對(duì)它們進(jìn)行講解。TISHI提示超鏈接——美化“金企鵝教育”主頁“精品圖書”模塊實(shí)戰(zhàn)演練WEB列表屬性6.3為了更好地控制列表的樣式，CSS3提供了一些屬性，用于設(shè)置列表中列表項(xiàng)的項(xiàng)目符號(hào)類型、位置和圖像等。（1）在CSS3中，使用list-style-type屬性設(shè)置項(xiàng)目符號(hào)的類型，具體格式為：其中，屬性值有多種，常見的屬性值及說明如表所示。6.3列表屬性list-style-type:屬性值;屬性值說明屬性值說明none無項(xiàng)目符號(hào)lower-alpha小寫英文字母disc實(shí)心圓（默認(rèn)值）upper-alpha大寫英文字母circle空心圓lower-roman小寫羅馬數(shù)字square實(shí)心方塊upper-roman大寫羅馬數(shù)字decimal阿拉伯?dāng)?shù)字cjk-ideographic中文數(shù)字

表

list-style-type的屬性值及說明（2）在CSS3中，使用list-style-position屬性設(shè)置項(xiàng)目符號(hào)的位置，具體格式為：其中，outside是默認(rèn)值，表示項(xiàng)目符號(hào)位于文本的左側(cè)，且放置在文本以外，環(huán)繞文本不根據(jù)項(xiàng)目符號(hào)的位置對(duì)齊；inside表示項(xiàng)目符號(hào)放置在文本以內(nèi)，環(huán)繞文本根據(jù)項(xiàng)目符號(hào)的位置對(duì)齊。（3）在CSS3中，使用list-style-image屬性設(shè)置自定義圖像文件為項(xiàng)目符號(hào)，具體格式為：其中，none是默認(rèn)值，表示無自定義項(xiàng)目符號(hào)；url(圖像地址)表示圖像文件的地址。6.3列表屬性list-style-position:outside|inside;

list-style-image:none|url(圖像地址);在實(shí)際應(yīng)用中，list-style-type和list-style常用來取消列表的默認(rèn)樣式。（4）在CSS3中，使用list-style屬性可以在一個(gè)聲明中設(shè)置所有的列表屬性，具體格式為：其中，屬性值中不同值之間用空格分隔。6.3列表屬性list-style:list-style-typelist-style-positionlist-style-image;

zISHITUOZHAN知識(shí)拓展【例6-5】

設(shè)置列表的樣式，包括列表項(xiàng)的項(xiàng)目符號(hào)類型、位置和圖片等（以下提供部分代碼），頁面效果如圖所示。設(shè)置列表樣式后的頁面效果li{

list-style-position:inside;/*設(shè)置項(xiàng)目符號(hào)的位置為放置在文本以內(nèi)*/

list-style-image:url(img/6-5.png);/*設(shè)置自定義圖像文件為項(xiàng)目符號(hào)*/}6.3列表屬性超鏈接在第3章的實(shí)戰(zhàn)演練中已經(jīng)介紹過如何使用無序列表制作“金企鵝教育”主頁“教育資訊”模塊，這里介紹如何美化該模塊。——美化“金企鵝教育”主頁“教育資訊”模塊實(shí)戰(zhàn)演練WEB掃一掃超鏈接步驟1

在HBuilderX中導(dǎo)入本書配套素材“素材與案例\第6章\實(shí)戰(zhàn)演練\6.3\JinqieProject”文件夾，然后打開“index.css”文檔?！阑敖鹌簌Z教育”主頁“教育資訊”模塊實(shí)戰(zhàn)演練WEB超鏈接步驟2

設(shè)置“教育資訊”模塊容器的樣式。在“index.css”文檔中添加以下代碼，使用選擇器.information設(shè)置樣式，頁面效果如圖所示。——美化“金企鵝教育”主頁“教育資訊”模塊實(shí)戰(zhàn)演練WEB設(shè)置“教育資訊”模塊容器樣式后的頁面效果.information{width:450px;height:400px;overflow:hidden;margin-top:40px;

/*設(shè)置元素的上外邊距*/}超鏈接步驟3

設(shè)置“教育資訊”標(biāo)題的樣式。在“index.css”文檔中添加以下代碼，使用選擇器.information_title、.information_title>a等設(shè)置樣式，頁面效果如圖所示。——美化“金企鵝教育”主頁“教育資訊”模塊實(shí)戰(zhàn)演練WEB.information_title{width:450px;

height:46px;

line-height:46px;

text-align:center;

background-color:#16CA82;

position:relative;

overflow:hidden;

font-size:18px;

font-weight:bold;

color:#ffffff;}.information_title>a{font-size:16px;

color:#ffffff;

position:absolute;

right:15px;}設(shè)置“教育資訊”標(biāo)題樣式后的頁面效果超鏈接步驟4

設(shè)置“教育資訊”列表的樣式。在“index.css”文檔中添加以下代碼，使用選擇器.information_show、.information_showli等設(shè)置樣式，此時(shí)即可獲得該模塊最終的頁面效果。——美化“金企鵝教育”主頁“教育資訊”模塊實(shí)戰(zhàn)演練WEB.information_show{width:448px;

height:350px;

border:1pxsolid#e3e3e3;}.information_showli{

list-style:noneinsideurl(img/information_1.png);

background:url("img/nav_4.png")96%50%no-repeat;

padding:0px20px0px15px;

border-bottom:1pxsolid#e3e3e3;

line-height:43px;

color:#333333;

text-align:left;

font-size:15px;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;}.information_showli:hover{color:#16CA82;}超鏈接步驟4

如圖所示?！阑敖鹌簌Z教育”主頁“教育資訊”模塊實(shí)戰(zhàn)演練WEB“教育資訊”模塊最終的頁面效果超鏈接屬性6.4在網(wǎng)頁中，超鏈接載體中的文本默認(rèn)具有下畫線效果，且訪問前字體顏色為藍(lán)色；訪問時(shí)字體顏色為紅色；訪問后字體顏色為紫色。此外，當(dāng)鼠標(biāo)指針移動(dòng)至超鏈接上時(shí)，鼠標(biāo)指針就會(huì)變成手形。為了適合當(dāng)前頁面的風(fēng)格，一般在制作網(wǎng)頁時(shí)都需要重新設(shè)置超鏈接的樣式，甚至需要重新設(shè)置鼠標(biāo)的樣式。6.4超鏈接屬性6.4.1設(shè)置超鏈接樣式設(shè)置超鏈接的樣式就是設(shè)置超鏈接載體的樣式，超鏈接的載體可以是文本、圖像或內(nèi)容塊等。要想設(shè)置超鏈接訪問前、訪問后、鼠標(biāo)指針經(jīng)過時(shí)和訪問時(shí)的樣式，需要使用5.3.3節(jié)中介紹的4種動(dòng)態(tài)偽類選擇器，包括“:link”“:visited”“:hover”“:active”。超鏈接同時(shí)設(shè)置多個(gè)狀態(tài)樣式時(shí)，需要按照如上順序設(shè)置，一般不可調(diào)換。這4種狀態(tài)并不一定都要設(shè)置，可根據(jù)實(shí)際情況進(jìn)行調(diào)整。TISHI提示6.4超鏈接屬性超鏈接同時(shí)使用“:link”“:visited”“:hover”和“:active”設(shè)置超鏈接的樣式時(shí)，“:hover”必須定義在“:link”和“:visited”之后，否則“:hover”選擇器設(shè)置的樣式將無法顯示；“:active”必須定義在“:hover”之后，否則“:active”選擇器設(shè)置的樣式將無法顯示。Gaoshoudianbo高手點(diǎn)撥6.4超鏈接屬性/*設(shè)置超鏈接訪問前的字體顏色，去除下畫線效果*/.a1:link{color:#000000;text-decoration:none;}/*設(shè)置超鏈接訪問后的字體顏色*/.a1:visited{color:#717799;}/*設(shè)置鼠標(biāo)指針移動(dòng)至超鏈接上時(shí)的字體大小，添加下畫線效果*/.a1:hover{font-size:1.1em;text-decoration:underline;}/*設(shè)置超鏈接訪問時(shí)的字體大小、字體顏色*/.a1:active{font-size:1em;color:#9ca8c8;}/*設(shè)置鼠標(biāo)指針移動(dòng)至超鏈接上時(shí)圖像的透明度*/.a2:hover{opacity:0.6;}【例6-6】設(shè)置超鏈接的樣式（以下提供部分代碼）。6.4超鏈接屬性【例6-6】頁面效果如圖所示。訪問前訪問前鼠標(biāo)指針移動(dòng)至超鏈接上訪問時(shí)訪問后鼠標(biāo)指針移動(dòng)至超鏈接上訪問后設(shè)置超鏈接樣式后的頁面效果6.4超鏈接屬性2021年6月25日，拉薩到林芝鐵路開通運(yùn)營(yíng)，拉薩至林芝最快3小時(shí)29分可達(dá)，復(fù)興號(hào)高原內(nèi)電雙源動(dòng)車組同步投入運(yùn)營(yíng)。這意味著，我國(guó)自主研發(fā)的“復(fù)興號(hào)”高鐵列車組歷史性實(shí)現(xiàn)31個(gè)省區(qū)市全覆蓋，中國(guó)速度再次震驚世界。訪問后自信中國(guó)6.4超鏈接屬性

默認(rèn)狀態(tài)下，鼠標(biāo)指針顯示為箭頭，當(dāng)鼠標(biāo)指針經(jīng)過超鏈接時(shí)顯示為手形。在CSS3中，使用cursor屬性可以設(shè)置鼠標(biāo)指針在指定元素上的樣式，具體格式為：其中，屬性值表示瀏覽器自帶的鼠標(biāo)指針樣式，其說明如表所示；“url(圖像地址),屬性值”表示除了使用瀏覽器自帶的鼠標(biāo)指針樣式外，自定義的鼠標(biāo)指針樣式。6.4.2設(shè)置鼠標(biāo)樣式6.4超鏈接屬性cursor:屬性值|url(圖像地址),屬性值;6.4.2設(shè)置鼠標(biāo)樣式6.4超鏈接屬性表

cursor的屬性值及說明屬性值說明顯示樣式auto基于上下文決定應(yīng)該顯示什么指針樣式—default基于平臺(tái)的默認(rèn)指針樣式pointer指示超鏈接的指針樣式text指示文本的指針樣式wait指示程序正忙的指針樣式help指示可用的幫助的指針樣式move指示某對(duì)象可被移動(dòng)的指針樣式crosshair呈十字線的指針樣式

6.4.2設(shè)置鼠標(biāo)樣式6.4超鏈接屬性表

cursor的屬性值及說明屬性值說明顯示樣式e-resize或w-resize指示矩形框的邊緣可被向右（東）或向左（西）移動(dòng)的指針樣式ne-resize或sw-resize指示矩形框的邊緣可被向上及向右（北/東）或向下及向左（南/西）移動(dòng)的指針樣式nw-resize或se-resize指示矩形框的邊緣可被向上及向左（北/西）或向下及向右（南/東）移動(dòng)的指針樣式n-resize或s-resize指示矩形框的邊緣可被向上（北）或向下（南）移動(dòng)的指針樣式

<p>請(qǐng)把鼠標(biāo)移動(dòng)到單詞上，可以看到鼠標(biāo)指針發(fā)生變化：</p>

<spanstyle="cursor:auto">Auto</span><br/>

<spanstyle="cursor:default">Default</span><br/>

<spanstyle="cursor:pointer">Pointer</span><br/>

<spanstyle="cursor:text">text</span><br/>

<spanstyle="cursor:wait">wait</span><br/>

<spanstyle="cursor:help">help</span><br/>

<spanstyle="cursor:move">Move</span><br/>

<spanstyle="cursor:crosshair">Crosshair</span><br/>

<spanstyle="cursor:e-resize">e-resize和</span>

<spanstyle="cursor:w-resize">w-resize</span><br/>

<spanstyle="cursor:ne-resize">ne-resize和</span>

<spanstyle="cursor:sw-resize">sw-resize</span><br/>

<spanstyle="cursor:nw-resize">nw-resize和</span>

<spanstyle="cursor:se-resize">se-resize</span><br/>

<spanstyle="cursor:n-resize">n-resize和</span>

<spanstyle="cursor:s-resize">s-resize</span>【例6-7】設(shè)置鼠標(biāo)指針的樣式（以下提供部分代碼），頁面效果如圖所示。設(shè)置鼠標(biāo)指針樣式后的頁面效果6.4超鏈接屬性超鏈接在第4章的實(shí)戰(zhàn)演練中已經(jīng)介紹過如何使用無序列表和超鏈接制作“金企鵝教育”主頁導(dǎo)航欄，這里介紹如何美化該導(dǎo)航欄?！阑敖鹌簌Z教育”網(wǎng)站主頁的導(dǎo)航欄實(shí)戰(zhàn)演練WEB掃一掃超鏈接步驟1

在HBuilderX中導(dǎo)入本書配套素材“素材與案例\第6章\實(shí)戰(zhàn)演練\6.4\JinqieProject”文件夾，然后打開“index.css”文檔?！阑敖鹌簌Z教育”網(wǎng)站主頁的導(dǎo)航欄實(shí)戰(zhàn)演練WEB超鏈接步驟2

設(shè)置網(wǎng)頁中常用及通用的樣式。在“index.css”文檔的開頭處添加以下代碼，使用選擇器a、.a_mouse設(shè)置網(wǎng)頁中所有超鏈接標(biāo)簽和鼠標(biāo)類的樣式。——美化“金企鵝教育”網(wǎng)站主頁的導(dǎo)航欄實(shí)戰(zhàn)演練WEBa{text-decoration:none;}/*設(shè)置網(wǎng)頁中所有超鏈接標(biāo)簽的樣式*/.a_mouse{cursor:pointer;}/*設(shè)置鼠標(biāo)類的樣式*/超鏈接步驟3

“設(shè)置導(dǎo)航欄容器的樣式。在“index.css”文檔中添加以下代碼，使用選擇器#index_nav設(shè)置樣式，頁面效果如圖所示。——美化“金企鵝教育”網(wǎng)站主頁的導(dǎo)航欄實(shí)戰(zhàn)演練WEB設(shè)置導(dǎo)航欄容器樣式后的頁面效果#index_nav{width:1200px;height:90px;margin:0auto;user-select:none;/*規(guī)定不能選取元素中的文本*/}超鏈接步驟4

設(shè)置導(dǎo)航欄中導(dǎo)航列表的樣式。在“index.css”文檔中添加以下代碼，使用選擇器.nav_ula、.nav_ulli.active:before、.nav_ula:hover,.nav_ulli.actives設(shè)置樣式，此時(shí)即可獲得導(dǎo)航欄最終的頁面效果?！阑敖鹌簌Z教育”網(wǎng)站主頁的導(dǎo)航欄實(shí)戰(zhàn)演練WEB.nav_ula{color:#333333;

font-size:20px;

font-weight:bold;

line-height:80px;

margin:5px35px;

float:left;/*設(shè)置向左浮動(dòng)*/

user-select:none;

position:relative;}.nav_ulli.active:before{content:'';

width:2px;

height:30px;

background-color:#c1c1c1;

border-radius:50%;

position:absolute;

left:-35px;

top:26px;}.nav_ula:hover,.nav_ulli.actives{color:#16CA82;}超鏈接步驟4

如圖所示。——美化“金企鵝教育”網(wǎng)站主頁的導(dǎo)航欄實(shí)戰(zhàn)演練WEB導(dǎo)航欄最終的頁面效果超鏈接CSS3中，使用user-select屬性規(guī)定是否能選取元素的文本，具體格式為：其中，auto是默認(rèn)值，表示若瀏覽器允許，則可以選取文本；none表示文本不可被用戶選?。籺ext表示文本可被用戶選??；all表示單擊選取文本，而不是雙擊。zhISHITUOZHAN知識(shí)拓展user-select:auto|none|text|all;

——美化“金企鵝教育”網(wǎng)站主頁的導(dǎo)航欄實(shí)戰(zhàn)演練WEB表格屬性6.5為了制作風(fēng)格統(tǒng)一的頁面效果，常常需要重新設(shè)置網(wǎng)頁中表格的樣式。CSS3提供了一些屬性，專門用于設(shè)置表格標(biāo)題位置、合并表格邊框、單元格的間距、是否顯示空單元格、表格的顯示規(guī)則等。（1）在CSS3中，使用caption-side屬性設(shè)置表格標(biāo)題的顯示位置，具體格式為：其中，top是默認(rèn)值，表示標(biāo)題顯示在表格上方；bottom表示標(biāo)題顯示在表格下方。（2）在CSS3中，使用border-collapse屬性設(shè)置是否將表格邊框合并為單一的邊框，具體格式為：其中，separate是默認(rèn)值，表示邊框會(huì)被分開；collapse表示盡可能將表格邊框合并為單一的邊框。6.5表格屬性caption-side:top|bottom;border-collapse:separate|collapse;（3）在CSS3中，使用border-spacing屬性設(shè)置相鄰單元格的邊框間的距離（即單元格的間距），具體格式為：其中，length表示相鄰單元格的邊框間的距離，使用px、cm等單位，不允許使用負(fù)值。若定義一個(gè)length值，表示設(shè)置的是水平和垂直間距；若定義兩個(gè)length值，表示第一個(gè)值設(shè)置水平間距，第二個(gè)設(shè)置垂直間距。（4）在CSS3中，使用empty-cells屬性設(shè)置是否顯示表格中的空單元格，具體格式為：其中，show是默認(rèn)值，表示在空單元格周圍繪制邊框，即顯示空單元格；hide表示不在空單元格周圍繪制邊框，即不顯示空單元格。6.5表格屬性border-spacing:length[length];empty-cells:show|hide;（5）在CSS3中，使用table-layout屬性設(shè)置顯示表格單元格、行、列的算法規(guī)則，具體格式為：其中，auto是默認(rèn)值，表示列寬由單元格內(nèi)容設(shè)定；fixed表示列寬由表格寬度和列寬度設(shè)定。除了上述這些屬性外，CSS3中的其他屬性對(duì)于表格一樣適用。6.5表格屬性table-layout:auto|fixed;table{caption-side:bottom;

/*設(shè)置表格標(biāo)題顯示在表格下方*/

border-collapse:separate;

/*設(shè)置表格邊框會(huì)被分開*/

border-spacing:10px;

/*設(shè)置相鄰單元格的邊框間的距離為10px*/

empty-cells:hide;

/*設(shè)置不在表格的空單元格周圍繪制邊框*/

text-align:center;

border:solid1px#414141;}th,td{table-layout:fixed;

/*設(shè)置列寬由表格寬度和列寬度設(shè)定*/

width:100px;

border:solid1px#414141;}【例6-8】

制作高中課程表，設(shè)置表格的樣式，包括表格標(biāo)題位置、合并表格邊框、單元格的間距、是否顯示空單元格、表格的顯示規(guī)則等（以下提供部分代碼）。6.5表格屬性【例6-8】

頁面效果如圖所示。設(shè)置表格樣式后的頁面效果6.5表格屬性超鏈接在第4章的實(shí)戰(zhàn)演練中已經(jīng)介紹過如何使用表格制作“云課堂”頁面的“精品課程”模塊，這里介紹如何美化該模塊?！阑霸普n堂”頁面的“精品課程”模塊實(shí)戰(zhàn)演練WEB掃一掃超鏈接步驟1

HBuilderX中導(dǎo)入本書配套素材“素材與案例\第6章\實(shí)戰(zhàn)演練\6.5\JinqieProject”文件夾，然后打開“course.css”文檔。——美化“云課堂”頁面的“精品課程”模塊實(shí)戰(zhàn)演練WEB步驟2

設(shè)置“精品課程”模塊容器的樣式。在“course.css”文檔中添加以下代碼，使用選擇器#main_course設(shè)置樣式?！阑霸普n堂”頁面的“精品課程”模塊實(shí)戰(zhàn)演練WEB#main_course{height:420px;

overflow:hidden;

background:url("img/book_bg.png")50%no-repeat#F9F9F9;

padding-bottom:100px;

margin-top:40px;}步驟2

頁面效果如圖所示?！阑霸普n堂”頁面的“精品課程”模塊實(shí)戰(zhàn)演練WEB設(shè)置“精品課程”模塊容器樣式后的頁面效果超鏈接步驟3

設(shè)置“精品課程”標(biāo)題的樣式。該標(biāo)題樣式與“金企鵝教育”主頁中“精品圖書”標(biāo)題的樣式相同，因此可參考“精品圖書”標(biāo)題的樣式代碼，在“course.css”文檔中使用選擇器.course_title、.course_title>h3等設(shè)置“精品課程”標(biāo)題的樣式，頁面效果如圖所示?！阑霸普n堂”頁面的“精品課程”模塊實(shí)戰(zhàn)演練WEB設(shè)置“精品課程”標(biāo)題樣式后的頁面效果超鏈接步驟4

設(shè)置“精品課程”表格的樣式。在“course.css”文檔中添加以下代碼，使用選擇器table、th、td等設(shè)置樣式，此時(shí)即可獲得該模塊最終的頁面效果，如圖所示?！阑霸普n堂”頁面的“精品課程”模塊實(shí)戰(zhàn)演練WEBtable{width:1180px;

border-collapse:collapse;

margin:0auto;}th{font-family:"隸書";

font-size:40px;

color:#009C78;

border:solid1px#b9b9b9;}td{font-size:20px;

color:#434343;

height:40px;

border:solid1px#b9b9b9;}tdstrong{color:#d30000;margin-right:20px;}tddel{color:#c2c2c2;font-size:15px;}“精品課程”模塊最終的頁面效果表單屬性6.6表單及其控件的默認(rèn)樣式無法滿足用戶對(duì)頁面效果的要求，因此為了制作更加美觀的頁面效果，常常需要重新設(shè)置頁面中表單及其控件的樣式。在CSS3中，除了部分專門適用于某種元素的屬性外，其他屬性都可以用于設(shè)置表單及其控件的樣式。6.6表格屬性form{width:350px;

height:170px;

background-color:#d8d8d8;

border:3pxdouble#1f1f1f;

border-radius:10px;

line-height:30px;

text-align:center;}formp{font-weight:bold;font-size:1.2em;color:#565640;}input.in_id{

background:#ffffffurl(img/id.png)no-repeat2%center;

}input.in_pw{

background:#ffffffurl(img/pw.png)no-repeat2%center;

}【例6-9】

制作用戶登錄表單，設(shè)置表單的樣式（以下提供部分代碼），頁面效果如圖所示。設(shè)置表單樣式后的頁面效果6.6表格屬性超鏈接表單控件的背景顏色默認(rèn)為白色，為其設(shè)置背景圖像后，背景顏色將默認(rèn)繼承表單域的顏色，所以一般在設(shè)置背景圖像時(shí)也需要設(shè)置背景顏色。TISHI提示6.6表格屬性表單控件的種類有很多，如文本框、單選鈕、復(fù)選框等，由于這些表單控件的默認(rèn)樣式單一，無法滿足網(wǎng)頁設(shè)計(jì)的需求，因此需要使用CSS3提供的屬性設(shè)置它們的樣式。設(shè)置表單控件獲得焦點(diǎn)時(shí)的樣式需要使用“:focus”選擇器。設(shè)置單選鈕和復(fù)選框的樣式時(shí)，可以先將它們隱藏，再通過設(shè)置其提示信息的樣式來實(shí)現(xiàn)單選鈕與復(fù)選框的功能。此時(shí)就需要使用偽類選擇器“:checked”匹配選中的單選鈕或復(fù)選框，接著搭配使用其他選擇器匹配選中的單選鈕或復(fù)選框的提示信息，然后設(shè)置相應(yīng)提示信息的樣式，就可以通過提示信息的樣式變化提醒用戶選擇了哪個(gè)選項(xiàng)，從而在隱藏單選鈕或復(fù)選框的同時(shí)不影響使用它們的功能。6.6.2設(shè)置表單控件的樣式6.6表格屬性

form{width:450px; margin:0auto; /*設(shè)置外邊距*/ line-height:40px; /*設(shè)置行高*/ border:dashed3px#8e9bc6; /*設(shè)置邊框*/ border-radius:20px; /*設(shè)置圓角*/ background-color:#eff4ff; /*設(shè)置背景顏色*/}formh1{text-align:center; /*設(shè)置文本水平對(duì)齊方式*/ color:#363651; /*設(shè)置字體顏色*/}formlabel{font-size:1.2em; /*設(shè)置字體大小*/ font-weight:bold; /*設(shè)置字體粗細(xì)*/ color:#55557f;}formp{text-indent:4em; /*設(shè)置文本首行縮進(jìn)*/}【例6-10】制作基本信息表單，設(shè)置表單及其控件的樣式，包括單行文本框獲得焦點(diǎn)時(shí)的樣式，以及單選鈕與復(fù)選框的樣式。6.6表格屬性input[type="text"]{width:200px; height:20px; border:solid1px#8e9bc6; margin-left:15px; /*設(shè)置左外邊距*/}input[type="text"]:focus{border:solid2px#55557f;}input[type="radio"],input[type="checkbox"]{display:none;}input[type="radio"]+label,input[type="checkbox"]+label{ color:#55557f; border:solid2px#b5c5fc; border-radius:10px; background-color:#b0a2ca; padding:0px15px; /*設(shè)置內(nèi)邊距*/ margin-left:15px;}【例6-10】制作基本信息表單，設(shè)置表單及其控件的樣式，包括單行文本框獲得焦點(diǎn)時(shí)的樣式，以及單選鈕與復(fù)選框的樣式。6.6表格屬性input[type="radio"]:checked+label,input[type="checkbox"]:checked+label{color:#fcffee; background-color:#99b4ff;} divinput{width:120px;height:30px; color:#f5f5f5; font-size:1.1em; font-weight:bold; border:double2px#b5c5fc; border-radius:10px; background-color:#7f7591; display:inline-block; /*設(shè)置元素顯示類型*/ margin:0px50px20px50px;}【例6-10】制作基本信息表單，設(shè)置表單及其控件的樣式，包括單行文本框獲得焦點(diǎn)時(shí)的樣式，以及單選鈕與復(fù)選框的樣式。6.6表格屬性【例6-10】頁面效果如圖所示。6.6表格屬性設(shè)置表單及其控件樣式后的頁面效果選中復(fù)選框選中單選鈕獲得焦點(diǎn)超鏈接在第4章的實(shí)戰(zhàn)演練中已經(jīng)介紹過如何使用表單制作“金企鵝教育”網(wǎng)站登錄頁面的登錄注冊(cè)模塊，這里介紹如何美化該模塊?！阑敖鹌簌Z教育”網(wǎng)站的登錄頁面實(shí)戰(zhàn)演練WEB掃一掃超鏈接步驟1

在HBuilderX中導(dǎo)入本書配套素材“素材與案例\第6章\實(shí)戰(zhàn)演練\6.6\JinqieProject”文件夾，然后打開“l(fā)ogin.css”文檔。——美化“金企鵝教育”網(wǎng)站的登錄頁面實(shí)戰(zhàn)演練WEB步驟2

設(shè)置登錄注冊(cè)模塊容器的樣式。在“l(fā)ogin.css”文檔中添加以下代