Web前端開發(fā)任務(wù)式教程（HTML5+CSS3）（微課版）課件 模塊3、4 表格與表單元素、CSS基本語(yǔ)法

《Web開發(fā)任務(wù)式教程》

模塊3表格與表單元素《Web前端開發(fā)任務(wù)式教程》表格與表單元素本模塊介紹網(wǎng)頁(yè)開發(fā)中的表格與表單元素，表格可用于數(shù)據(jù)統(tǒng)計(jì)和進(jìn)行內(nèi)容布局，表單用于接收用戶的輸入信息，是實(shí)現(xiàn)網(wǎng)頁(yè)功能的基礎(chǔ)。任務(wù)3.1設(shè)計(jì)通訊錄表格任務(wù)3.2設(shè)計(jì)收貨地址表單表格與表單元素學(xué)習(xí)目標(biāo)【知識(shí)目標(biāo)】1）掌握table、tr、td、th等表格元素的屬性及用法。2）掌握f(shuō)orm、input、textarea、下拉列表等表單元素的屬性及用法?！灸芰δ繕?biāo)】1）能夠使用表格元素設(shè)計(jì)數(shù)據(jù)表。2）能夠使用表格元素進(jìn)行內(nèi)容布局。3）能夠使用表單元素獲取用戶的輸入信息?！禬eb前端開發(fā)任務(wù)式教程》通訊錄使用非常普遍，請(qǐng)參考圖3-1設(shè)計(jì)一個(gè)通訊錄表格，要求如下。1）表格頭部顯示“通訊錄”標(biāo)題，在頁(yè)腳匯總通訊錄“總?cè)藬?shù)”。2）表格的序號(hào)、姓名背景顏色相同，電話號(hào)碼是另外一種背景顏色。3）同一個(gè)人的多個(gè)電話號(hào)碼能夠匯總顯示。表格與表單元素任務(wù)3.1設(shè)計(jì)通訊錄表格圖3-1通訊錄表格《Web前端開發(fā)任務(wù)式教程》表格與表單元素3.1.1基本表格元素表格元素table元素定義表格。一個(gè)表格可以包含若干行，tr元素定義表格的行。每一行又可以包含若干列，列又稱為單元格，td元素定義標(biāo)準(zhǔn)單元格。表格的表頭往往具有加粗加黑的格式，th元素定義具有表頭格式的單元格。表格屬性表格常用屬性如表3-1所示。有的屬性，例如border和align可以直接用屬性名進(jìn)行設(shè)置，在表格元素標(biāo)簽開頭中輸入屬性首字母能夠聯(lián)想出屬性名；有的屬性，例如bgcolor，在表格元素標(biāo)簽開頭中輸入屬性首字母不能聯(lián)想出屬性名，推薦通過(guò)style屬性進(jìn)行設(shè)置，style屬性主要設(shè)置元素的外觀樣式?！禬eb前端開發(fā)任務(wù)式教程》表格與表單元素表3-1 表格的屬性《Web前端開發(fā)任務(wù)式教程》屬性名說(shuō)明border設(shè)置表格邊框的寬度，取值為像素值（pixels）border-collapse設(shè)置是否把表格邊框合并為單一的邊框，取值說(shuō)明如下。separate：默認(rèn)值。邊框會(huì)被分開。不會(huì)忽略border-spacing和empty-cells屬性collapse：邊框可能會(huì)合并為一個(gè)單一邊框。忽略border-spacing和empty-cells屬性border-spacing設(shè)置相鄰單元格邊框之間的距離。取值格式為lengthlength，使用px、cm等單位，不允許使用負(fù)值。如果定義兩個(gè)length參數(shù)，那么第1個(gè)設(shè)置水平距離，第2個(gè)設(shè)置垂直距離。如果只定義1個(gè)length參數(shù)，參數(shù)會(huì)拷貝，水平和垂直距離都是這個(gè)值bgcolor設(shè)置表格的背景顏色，支持常用顏色格式，取值說(shuō)明如下。rgb(x,x,x)：顏色函數(shù)#xxxxxx：16進(jìn)制顏色值colorname：顏色名cellpadding設(shè)置單元格邊框與單元內(nèi)容之間的空白，取值為像素值或百分比cellspacing設(shè)置單元格之間的空白，取值為像素值或百分比表格與表單元素續(xù)表《Web前端開發(fā)任務(wù)式教程》屬性名說(shuō)明width設(shè)置表格的寬度，取值為像素值或百分比align設(shè)置表格相對(duì)周圍元素的對(duì)齊方式，取值說(shuō)明如下。left：靠左對(duì)齊center：居中對(duì)齊right：靠右對(duì)齊caption-side設(shè)置表格標(biāo)題的位置，取值說(shuō)明如下。top：默認(rèn)值，把表格標(biāo)題定位在表格之上bottom：把表格標(biāo)題定位在表格之下empty-cells設(shè)置是否顯示表格的空單元格和空單元格的邊框和背景，取值說(shuō)明如下。hide：不在空單元格周圍繪制邊框show：在空單元格周圍繪制邊框，默認(rèn)值table-layout設(shè)置表格單元格、行、列尺寸的計(jì)算方法，取值說(shuō)明如下。automatic：默認(rèn)值，列寬度由單元格內(nèi)容設(shè)定fixed：列寬度由表格寬度和列寬度設(shè)定表格與表單元素【例3-1】用表格元素設(shè)計(jì)一個(gè)標(biāo)準(zhǔn)通訊錄，網(wǎng)頁(yè)顯示效果如圖3-2所示。《Web前端開發(fā)任務(wù)式教程》圖3-2基本通訊錄表格【例3-2】修改例3-1，設(shè)置表格寬度為80%，使表格在網(wǎng)頁(yè)中水平居中對(duì)齊，單元格內(nèi)邊距為15px，單元格邊框?yàn)閷?shí)線，修改后網(wǎng)頁(yè)顯示效果如圖3-3所示。圖3-3 設(shè)置了內(nèi)邊距和寬度的通訊錄表格表格與表單元素3.單元格屬性單元格包括表頭單元格th和內(nèi)容單元格td，是表格的基本組成單位，常用屬性如表3-2所示。表3-2單元格（th/td）的屬性《Web前端開發(fā)任務(wù)式教程》屬性名說(shuō)明align規(guī)定單元格內(nèi)容的水平排列方式，取值說(shuō)明如下。left：靠左對(duì)齊，默認(rèn)值center：居中對(duì)齊right：靠右對(duì)齊justify：分散對(duì)齊char：字符對(duì)齊valign規(guī)定單元格內(nèi)容的垂直排列方式，取值說(shuō)明如下。top：頂部對(duì)齊middle：居中對(duì)齊，默認(rèn)值bottom：底部對(duì)齊baseline：基線對(duì)齊bgcolor規(guī)定表格單元格的背景顏色，支持常用顏色格式，取值說(shuō)明如下。rgb(x,x,x)：顏色函數(shù)#xxxxxx：16進(jìn)制顏色值colorname：顏色名colspan規(guī)定單元格可橫跨的列數(shù)，取值為數(shù)字rowspan規(guī)定單元格可橫跨的行數(shù)，取值為數(shù)字nowrap規(guī)定單元格中的內(nèi)容是否折行，取值為nowrapwidth規(guī)定單元格的寬度，取值為像素值或百分比表格與表單元素4.單元格合并表格單元格可以合并，合并步驟如下。1）根據(jù)需要設(shè)置單元格合并屬性。2）根據(jù)需要合并單元格數(shù)據(jù)。3）刪除被合并掉的單元格?！纠?-3】修改例3-2，用合并單元格行的方式合并單元格同類項(xiàng)，清晰表格的顯示，使網(wǎng)頁(yè)顯示效果如圖3-4所示?！禬eb前端開發(fā)任務(wù)式教程》1）復(fù)制例3-2HTML文件，并重命名為demo3.html。2）設(shè)置表格第2行的第1列和第2列的跨行單元格合并屬性。3）刪除表格第3行被合并的列。圖3-4合并了單元格行的通訊錄表格表格與表單元素【例3-4】修改例3-2，用合并單元格列的方式合并單元格同類項(xiàng)，清晰表格的顯示，使網(wǎng)頁(yè)顯示效果如圖3-5所示?！禬eb前端開發(fā)任務(wù)式教程》1）復(fù)制例3-2HTML文件，并重命名為demo4.html。2）設(shè)置表格第1行的跨列單元格合并屬性。3）設(shè)置表格第4行的跨列單元格合并屬性，并設(shè)置文字居中對(duì)齊，使顯示更為美觀。4）修改表格第2行，將第3行的電話號(hào)碼合并過(guò)來(lái)。5）刪除表格原來(lái)第3行的代碼。圖3-5合并了單元格列的通訊錄表格表格與表單元素3.1.2復(fù)雜表格元素為了使表格結(jié)構(gòu)更為清晰，顯示內(nèi)容更為豐富，還可以使用復(fù)雜表格元素定義表格，包括caption、col、colgroup、thead、tfoot、tbody等元素。元素含義及屬性取值說(shuō)明如表3-3所示。表3-3復(fù)雜表格元素及其屬性《Web前端開發(fā)任務(wù)式教程》元素名元素說(shuō)明元素屬性caption定義表格的標(biāo)題align屬性，規(guī)定標(biāo)題的水平對(duì)齊方式，屬性取值說(shuō)明如下。left：靠左對(duì)齊center：居中對(duì)齊，默認(rèn)值right：靠右對(duì)齊top：頂部對(duì)齊bottom：底部對(duì)齊表格與表單元素續(xù)表《Web前端開發(fā)任務(wù)式教程》元素名元素說(shuō)明元素屬性thead定義表格的表頭align屬性，規(guī)定表頭內(nèi)容的水平對(duì)齊方式，屬性取值說(shuō)明如下。left：靠左對(duì)齊center：居中對(duì)齊，默認(rèn)值right：靠右對(duì)齊justify：分散對(duì)齊char：字符對(duì)齊valign屬性，規(guī)定表頭內(nèi)容的垂直對(duì)齊方，屬性取值說(shuō)明如下。top：頂部對(duì)齊middle：居中對(duì)齊，默認(rèn)值bottom：底部對(duì)齊baseline：基線對(duì)齊tbody定義表格的主體內(nèi)容align和valign屬性，取值及含義同thead元素，水平默認(rèn)值左對(duì)齊，垂直默認(rèn)居中tfoot定義表格的頁(yè)腳align和valign屬性，取值及含義同tbody元素col定義表格的列align和valign屬性，取值及含義同thead元素span屬性，取值為整數(shù)，規(guī)定col元素橫跨的列數(shù)width屬性，取值可以是pixels，%，relative_length，規(guī)定col元素的寬度colgroup定義表格列的分組，能夠?qū)Ρ砀裰械牧羞M(jìn)行組合，方便按列格式化align、valign、span、width屬性，取值及含義同col元素表格與表單元素3.1.3任務(wù)實(shí)現(xiàn)1.技術(shù)分析1）使用復(fù)雜表格元素清晰表格的結(jié)構(gòu)。2）使用colgroup元素對(duì)表格元素進(jìn)行分組，從而能夠按組設(shè)置背景色。2.編碼實(shí)現(xiàn)1）復(fù)制例3-3HTML文件，重命名為task1.html。2）為task1.html文件增加標(biāo)題設(shè)計(jì)，在table元素里嵌套添加caption元素。3）按列設(shè)計(jì)表格的樣式，在table元素里嵌套添加colgroup元素。4）將表頭行放在thead元素內(nèi)，將表格內(nèi)容行放在tbody元素內(nèi)，清晰表格的結(jié)構(gòu)。并設(shè)置表格內(nèi)容行居中對(duì)齊，美化內(nèi)容顯示。5）設(shè)計(jì)表格頁(yè)腳，并放在tfoot元素內(nèi)，將tfoot元素放在table元素內(nèi)?！禬eb前端開發(fā)任務(wù)式教程》電子商務(wù)系統(tǒng)中，新用戶購(gòu)買商品時(shí)都需要填寫收貨地址，請(qǐng)參考圖3-6設(shè)計(jì)一個(gè)收貨地址信息錄入表單，要求如下。1）通過(guò)下拉選擇輸入收貨地址地區(qū)。2）通過(guò)復(fù)選框設(shè)置是否為默認(rèn)地址。3）必填信息前面加紅色星號(hào)。4）表單元素對(duì)齊美觀。表格與表單元素任務(wù)3.2設(shè)計(jì)收貨地址表單圖3-6收貨地址表單《Web前端開發(fā)任務(wù)式教程》表格與表單元素3.2.1form元素表單用于收集用戶的輸入，form元素是表單元素的容器元素，能夠接收表單提交的信息。常用屬性如表3-4所示。表3-4form元素的屬性《Web前端開發(fā)任務(wù)式教程》屬性名說(shuō)明action規(guī)定表單提交時(shí)執(zhí)行的動(dòng)作，往往定義向何處發(fā)送表單數(shù)據(jù)，通常會(huì)發(fā)送到web服務(wù)器上指定的網(wǎng)頁(yè)method規(guī)定表單提交時(shí)所用的HTTP方法，取值說(shuō)明如下。get：默認(rèn)方法，以“名稱/值”對(duì)的形式將表單數(shù)據(jù)追加到URL，表單數(shù)據(jù)在網(wǎng)頁(yè)地址欄中可見，不適合敏感數(shù)據(jù)的的提交，適合少量數(shù)據(jù)的提交，URL的長(zhǎng)度被限制為2048個(gè)字符，適合將結(jié)果添加為書簽的表單提交，使用方便，如Google查詢字符串中包含的數(shù)據(jù)使用這種方式post：將表單數(shù)據(jù)附加在HTTP請(qǐng)求的正文中，大小不受，可用于發(fā)送大量數(shù)據(jù)，數(shù)據(jù)不會(huì)在URL中顯示，安全性更高，但是無(wú)法提交添加了書簽的表單target規(guī)定在何處打開action提交的URL，取值說(shuō)明如下。_blank：在新窗口或選項(xiàng)卡中打開_self：默認(rèn)值，在當(dāng)前窗口中打開_parent：在父框架中打開_top：在窗口的整個(gè)body元素中打開framename：在命名的iframe中打開name規(guī)定表單的名稱novalidate規(guī)定瀏覽器不驗(yàn)證表單表格與表單元素3.2.2input元素input元素用于收集用戶輸入的信息，根據(jù)type屬性值的不同，輸入字段可以是文本字段、復(fù)選框、掩碼后的文本、單選按鈕、按鈕等。input元素的常用屬性如表3-5所示。表3-5input元素的屬性《Web前端開發(fā)任務(wù)式教程》屬性名說(shuō)明checked規(guī)定input元素首次加載時(shí)被選中max定義輸入字段的最大值，需要與“min”屬性配合使用來(lái)創(chuàng)建合法的取值范圍，取值說(shuō)明如下。number：數(shù)字date：日期min規(guī)定輸入字段的最小值，需要與“max”屬性配合使用來(lái)創(chuàng)建合法的取值范圍，取值及含義同max屬性maxlength定義輸入字段的最大字符數(shù)，取值為數(shù)字multiple定義允許元素使用一個(gè)以上的值name定義元素的名稱pattern定義輸入字段值的模式或格式，取值為正則表達(dá)式，如pattern="[0-9]"表示輸入值必須是0到9之間的數(shù)字表格與表單元素續(xù)表《Web前端開發(fā)任務(wù)式教程》屬性名說(shuō)明placeholder定義輸入字段的提示信息readonly規(guī)定輸入字段為只讀字段required規(guī)定輸入字段必須有輸入值type規(guī)定input元素的類型，取值說(shuō)明如下。button：按鈕checkbox：復(fù)選框file：文件hidden：隱藏字段image：圖像password：密碼輸入框radio：?jiǎn)芜x按鈕，同組的單選按鈕“name”屬性值必須相同reset：重置按鈕submit：提交按鈕text：文本字段src定義提交按鈕顯示的圖像URLvalue定義input元素的值size定義輸入字段的寬度，取值為數(shù)字表格與表單元素【例3-5】使用表單元素設(shè)計(jì)一個(gè)顯示效果如圖3-7所示的用戶注冊(cè)網(wǎng)頁(yè)。圖3-7用戶注冊(cè)網(wǎng)頁(yè)《Web前端開發(fā)任務(wù)式教程》表格與表單元素3.2.3下拉列表select元素創(chuàng)建下拉列表，列表中的每一個(gè)選項(xiàng)用option元素定義。select元素的屬性如表3-6所示，option元素的屬性如表3-7所示。表3-6select元素的屬性《Web前端開發(fā)任務(wù)式教程》屬性名說(shuō)明multiple定義可以選擇多個(gè)選項(xiàng)name定義下拉列表的名稱required定義文本區(qū)域必填size定義下拉列表中可見選項(xiàng)的數(shù)目，取值為數(shù)字表3-7option元素的屬性屬性名說(shuō)明disabled定義選項(xiàng)在首次加載時(shí)被禁用label定義使用optgroup元素時(shí)所使用的標(biāo)注selected定義選項(xiàng)首次顯示在列表中時(shí)表現(xiàn)為選中狀態(tài)value定義送往服務(wù)器的選項(xiàng)值表格與表單元素【例3-6】修改例3-5，改用下拉列表選擇性別和興趣愛(ài)好，網(wǎng)頁(yè)顯示效果如圖3-8所示。圖3-8用戶注冊(cè)網(wǎng)頁(yè)的另外一種實(shí)現(xiàn)方式《Web前端開發(fā)任務(wù)式教程》復(fù)制例3-5項(xiàng)目，將其中的HTML文件重命名為demo6.html，修改其中有關(guān)性別和興趣愛(ài)好選擇的代碼。表格與表單元素3.2.4textarea元素textarea元素定義文本域，能夠?qū)崿F(xiàn)文本的多行輸入，較input元素實(shí)現(xiàn)的文本輸入具有可容納無(wú)限數(shù)量文字的特點(diǎn)，文本的默認(rèn)字體是等寬字體（Courier），常用屬性如表3-8所示。表3-8textarea元素的屬性《Web前端開發(fā)任務(wù)式教程》屬性名說(shuō)明cols定義文本區(qū)域的可見寬度，取值為數(shù)字maxlength定義文本區(qū)域的最大字符數(shù)，取值為數(shù)字name定義文本區(qū)域的名稱readonly定義文本區(qū)域只讀required定義文本區(qū)域必填rows定義文本區(qū)域的可見行數(shù)，取值為數(shù)字wrap定義在表單中提交時(shí)，文本區(qū)域中的文字如何換行，取值說(shuō)明如下。soft：默認(rèn)提交值，文字不換行hard：文字換行，包含換行符，這種方式下必須規(guī)定cols屬性表格與表單元素【例3-7】修改例3-5，為用戶注冊(cè)界面增加一個(gè)自我介紹文本區(qū)域，使網(wǎng)頁(yè)顯示效果如圖3-9所示。圖3-9完善的用戶注冊(cè)網(wǎng)頁(yè)《Web前端開發(fā)任務(wù)式教程》復(fù)制例3-5項(xiàng)目，將其中的HTML文件重命名為demo7.html，在頭像圖像元素下面增加自我介紹文本區(qū)域代碼。表格與表單元素3.2.5任務(wù)實(shí)現(xiàn)1.技術(shù)分析1）設(shè)置表單元素input的type屬性值，使表單能夠根據(jù)需要成為文本輸入、多選/單選輸入和提交按鈕。2）使用表格元素對(duì)齊表單顯示。設(shè)計(jì)表格，將表單元素放到表格對(duì)應(yīng)單元格里，實(shí)現(xiàn)對(duì)齊效果。2.編碼實(shí)現(xiàn)1）設(shè)計(jì)收貨地址表單。2）設(shè)計(jì)一個(gè)7行2列的表格，定義表格寬度，將收貨地址信息錄入表單元素放到表格單元格里，利用表格單元格的對(duì)齊實(shí)現(xiàn)元素的對(duì)齊，使收貨地址信息錄入顯示效果滿足對(duì)齊要求?！禬eb前端開發(fā)任務(wù)式教程》表格與表單元素模塊小結(jié)《Web前端開發(fā)任務(wù)式教程》表格與表單元素

《Web開發(fā)任務(wù)式教程》

模塊4CSS語(yǔ)法基礎(chǔ)《Web前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)樣式是網(wǎng)頁(yè)內(nèi)容的表現(xiàn)形式，是網(wǎng)頁(yè)設(shè)計(jì)中非常重要的內(nèi)容。本模塊介紹CSS樣式語(yǔ)法規(guī)則、聲明方式、CSS選擇器和樣式的優(yōu)先級(jí)規(guī)則。任務(wù)4.1規(guī)范海報(bào)樣式設(shè)計(jì)任務(wù)4.2設(shè)計(jì)一個(gè)畫廊任務(wù)4.3規(guī)范家信的顯示格式任務(wù)4.4掌握樣式優(yōu)先級(jí)規(guī)則

CSS語(yǔ)法基礎(chǔ)學(xué)習(xí)目標(biāo)【知識(shí)目標(biāo)】1）掌握CSS樣式定義的基本語(yǔ)法格式和樣式聲明的方式。2）掌握CSS基本、分組、多類名、層級(jí)、偽類、偽元素、屬性選擇器選擇元素的原則。3）掌握樣式聲明的優(yōu)先級(jí)規(guī)則?！灸芰δ繕?biāo)】1）能夠使用CSS選擇器選擇元素。2）能夠基于CSS語(yǔ)法定義元素的樣式。3）能夠基于樣式優(yōu)先級(jí)規(guī)則正確定義元素的樣式?！禬eb前端開發(fā)任務(wù)式教程》層疊樣式表CSS（CascadingStyleSheets）是表現(xiàn)標(biāo)準(zhǔn)，用于說(shuō)明HTML結(jié)構(gòu)在瀏覽器、紙張或其他媒體上的顯示樣式，實(shí)現(xiàn)了HTML結(jié)構(gòu)和表現(xiàn)形式的分離，為樣式重用提供了技術(shù)基礎(chǔ)，符合軟件編程代碼重用的思想，在網(wǎng)頁(yè)設(shè)計(jì)中使用非常廣泛。在任務(wù)2.2中設(shè)計(jì)了電影海報(bào)及其樣式，本任務(wù)使用CSS語(yǔ)法規(guī)則規(guī)范任務(wù)2.2的樣式設(shè)計(jì)，將其中使用style屬性設(shè)置的樣式與元素定義進(jìn)行分離，清晰網(wǎng)頁(yè)的結(jié)構(gòu)。

CSS語(yǔ)法基礎(chǔ)任務(wù)4.1規(guī)范海報(bào)樣式設(shè)計(jì)《Web前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)4.1.1CSS語(yǔ)法規(guī)則1.CSS規(guī)則集CSS規(guī)則集（rule-set）定義元素的樣式，由選擇器和聲明塊組成，如圖4-1所示。1）選擇器篩選需要設(shè)置樣式的HTML元素。圖4-1CSS規(guī)則集2）聲明塊用花括號(hào)括起來(lái)，能夠包含一條或多條樣式聲明語(yǔ)句，語(yǔ)句之間用分號(hào)進(jìn)行分隔。3）一條聲明語(yǔ)句設(shè)置元素的一個(gè)樣式屬性，包括屬性名稱和屬性的合法取值，屬性名稱與屬性取值之間用冒號(hào)進(jìn)行分隔。4）如果是復(fù)合屬性，屬性需要多個(gè)值定義，取值之間用空格進(jìn)行分隔。例如，使用字體復(fù)合屬性font定義粗體、70px大小的、標(biāo)準(zhǔn)型的字體聲明語(yǔ)句為“font:bold70pxnormal;”。5）如果是同一屬性的多種取值，取值之間用逗號(hào)進(jìn)行分隔。例如，使用字體屬性font-family定義1個(gè)主要字體Cambria，再定義1個(gè)備選字體Times的聲明語(yǔ)句為“font-family:Cambria,Times;”?！禬eb前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)4.1.1CSS語(yǔ)法規(guī)則圖4-1CSS規(guī)則集1）篩選h1元素。2）聲明塊中有2條樣式聲明語(yǔ)句，為h1元素定義了2個(gè)樣式。3）第1條聲明語(yǔ)句中，color是屬性名，red是屬性值，定義h1元素的文字顏色為紅色。4）第2條聲明中，font-size是屬性名，14px是屬性值，定義h1元素的字號(hào)為14個(gè)像素。《Web前端開發(fā)任務(wù)式教程》復(fù)合屬性的多個(gè)值之間也用空格進(jìn)行分隔，所以需要特別注意，屬性值與值的單位之間不能有空格，如14個(gè)像素要寫成14px，在14和px之間一定不能有空格。

CSS語(yǔ)法基礎(chǔ)4.1.1CSS語(yǔ)法規(guī)則2.注釋CSS注釋以“/*”開始，以“*/”結(jié)束，書寫格式如下。/*這是一條CSS注釋*/有快捷操作方式。將待注釋內(nèi)容選中，然后同時(shí)按下ctl和斜杠（/）鍵能夠快速注釋選中的內(nèi)容。《Web前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)4.1.2樣式聲明方式1.內(nèi)部樣式表在HTML文件頭部head元素內(nèi)，使用style元素定義的樣式稱為內(nèi)部樣式表。內(nèi)部樣式表僅作用于style元素所在的文件，實(shí)現(xiàn)了樣式與HTML網(wǎng)頁(yè)結(jié)構(gòu)的分離和樣式在單個(gè)文件中的重用，具有閱讀方便和模塊化設(shè)計(jì)的特點(diǎn)，一般在單個(gè)文件需要設(shè)計(jì)樣式時(shí)使用這種模式。style元素一般不設(shè)置或只設(shè)置一個(gè)type屬性，該屬性有唯一一個(gè)取值"text/css"，規(guī)定style元素的內(nèi)容類型。在style元素的內(nèi)部，定義格式化HTML元素的CSS規(guī)則集?！禬eb前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)4.1.2樣式聲明方式2.外部樣式表存放CSS規(guī)則集，且以.css為擴(kuò)展名保存的文件稱為外部樣式表。(1)link元素link元素是一個(gè)空元素，僅包含屬性，只能放在head元素中，可以在head元素中多次出現(xiàn)。一個(gè)link元素只能引用一個(gè)外部樣式表，引用多個(gè)外部樣式表需要添加多個(gè)link元素，元素屬性說(shuō)明如表4-1所示。表4-1link元素的屬性《Web前端開發(fā)任務(wù)式教程》屬性名說(shuō)明href規(guī)定被鏈接文件的位置，取值為URLrel規(guī)定當(dāng)前文件與被鏈接文件之間的關(guān)系，屬性取值舉例及說(shuō)明如下。icon：圖像stylesheet：樣式表type規(guī)定被鏈接文件的MIME類型，鏈接樣式表的取值為text/css

CSS語(yǔ)法基礎(chǔ)(2)@import規(guī)則與link元素一樣，@import規(guī)則也可以引用外部樣式表到HTML文件。但是，二者引入的時(shí)機(jī)不同，link元素在網(wǎng)頁(yè)加載時(shí)引入樣式表，@import規(guī)則在網(wǎng)頁(yè)加載完畢后引入樣式表，不會(huì)有閃爍問(wèn)題。@import規(guī)則是CSS2.1才有的語(yǔ)法，只能在IE5以上瀏覽器才能識(shí)別。@import規(guī)則需要嵌套在style元素中，語(yǔ)法格式如下。<style> @importurl(URL);</style>取值為url函數(shù)，函數(shù)參數(shù)URL定義外部樣式表的路徑。也可以直接使用字符串，語(yǔ)法格式如下。<style> @import"URL";</style>參數(shù)URL同樣定義外部樣式表的路徑?！禬eb前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)3.內(nèi)聯(lián)樣式直接在元素標(biāo)簽開頭中定義的樣式稱為內(nèi)聯(lián)樣式，本書前面使用style屬性定義的元素樣式全部為內(nèi)聯(lián)樣式。這種樣式書寫方式簡(jiǎn)單、直接，但是將元素表現(xiàn)和結(jié)構(gòu)混雜在一起，會(huì)降低網(wǎng)頁(yè)的可閱讀性和破壞模塊化編程的結(jié)構(gòu)，因此，一般不推薦使用。以下代碼使用內(nèi)聯(lián)樣式定義a元素的文字顏色為紅色，不推薦使用。<astyle=“color:red;”>首頁(yè)</a>《Web前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)4.1.3簡(jiǎn)單CSS屬性1.元素的通用CSS屬性表4-2背景與文字顏色屬性《Web前端開發(fā)任務(wù)式教程》屬性名說(shuō)明background-color定義元素的背景顏色，取值說(shuō)明如下。rgb(x,x,x)：顏色函數(shù)#xxxxxx：16進(jìn)制顏色值colorname：顏色名，如red，green，blue，pink……background-image定義元素的背景圖像，取值為url(URL)函數(shù)，參數(shù)URL規(guī)定圖像的路徑color定義元素的文字顏色，取值說(shuō)明同背景色

CSS語(yǔ)法基礎(chǔ)表4-3字體屬性《Web前端開發(fā)任務(wù)式教程》屬性名說(shuō)明font-family設(shè)置文字的字體名稱，如果字體包含一個(gè)以上單詞，字體名稱必須用引號(hào)引起來(lái)，如"TimesNewRoman"；可以包含多個(gè)字體名稱，名稱之間用逗號(hào)進(jìn)行分隔，如"arial,helvetica,sans-serif"font-style設(shè)置文字的字體風(fēng)格，取值說(shuō)明如下。normal：標(biāo)準(zhǔn)字體italic：斜體字oblique：傾斜字，與斜體字非常相似，支持較少font-size設(shè)置文字的字號(hào)，取值為數(shù)值，單位為px或em百分比f(wàn)ont-weight設(shè)置文字的粗細(xì)，取值說(shuō)明如下。normal：默認(rèn)值，標(biāo)準(zhǔn)字體bold：粗體字符bolder：更粗的字符lighter：更細(xì)的字符font字體復(fù)合屬性，在一個(gè)聲明中設(shè)置所有的字體屬性，不同屬性之間用空格進(jìn)行分隔，若設(shè)置多個(gè)備用字體，字體之間用逗號(hào)進(jìn)行分隔

CSS語(yǔ)法基礎(chǔ)表4-4文字的裝飾屬性《Web前端開發(fā)任務(wù)式教程》屬性名說(shuō)明text-indent設(shè)置文字的縮進(jìn)，取值為數(shù)值，單位為px或em百分比text-align設(shè)置文字的水平對(duì)齊方式，取值說(shuō)明如下。left：左對(duì)齊，默認(rèn)對(duì)齊方式，文字從左到右對(duì)齊right：右對(duì)齊，文字從右到左對(duì)齊justify：兩端對(duì)齊text-decoration設(shè)置或刪除文字的裝飾，使文字顯示某種效果，取值說(shuō)明如下。none：默認(rèn)值，去掉文字的裝飾，使顯示普通文字。例如，用于設(shè)置a元素時(shí)，表示去掉a元素的默認(rèn)下劃線underline：給文字添加下劃線overline：給文字添加上劃線line-through：給文字添加穿越線vertical-align設(shè)置文字的垂直對(duì)齊方式，取值說(shuō)明如下。top：頂部對(duì)齊middle：居中對(duì)齊bottom：底部對(duì)齊line-height設(shè)置文字的行高，取值為數(shù)值，單位為px或em百分比。當(dāng)取值與元素高度值相同時(shí)，能夠?qū)崿F(xiàn)文字的垂直居中

CSS語(yǔ)法基礎(chǔ)表4-5元素的大小屬性《Web前端開發(fā)任務(wù)式教程》屬性名說(shuō)明width定義元素的寬度，取值說(shuō)明如下。auto：默認(rèn)，瀏覽器根據(jù)元素內(nèi)容自動(dòng)計(jì)算元素的寬度length：以px、cm等單位定義寬度%：以元素包含塊的百分比定義寬度initial：將元素寬度設(shè)置為默認(rèn)值inherit：規(guī)定元素從父級(jí)繼承寬度height定義元素的高度，取值說(shuō)明同width屬性

CSS語(yǔ)法基礎(chǔ)2.列表元素的CSS屬性（1）列表項(xiàng)標(biāo)志類型list-style-type屬性設(shè)置列表項(xiàng)的標(biāo)志類型，屬性取值說(shuō)明如表4-6所示。表4-6list-style-type屬性《Web前端開發(fā)任務(wù)式教程》屬性值說(shuō)明none無(wú)標(biāo)志disc默認(rèn)值，標(biāo)志是實(shí)心圓circle標(biāo)志是空心圓square標(biāo)志是實(shí)心方塊decimal標(biāo)志是數(shù)字lower-roman標(biāo)志是小寫羅馬數(shù)字(i,ii,iii,iv,v,等)upper-roman標(biāo)志是大寫羅馬數(shù)字(I,II,III,IV,V,等)lower-alpha標(biāo)志是小寫英文字母Themarkerislower-alpha(a,b,c,d,e,等)upper-alpha標(biāo)志是大寫英文字母Themarkerisupper-alpha(A,B,C,D,E,等)

CSS語(yǔ)法基礎(chǔ)（2）列表項(xiàng)圖像標(biāo)志list-style-image屬性設(shè)置列表項(xiàng)的圖像標(biāo)志，語(yǔ)法格式如下。list-style-image:url(URL);參數(shù)URL規(guī)定圖像的路徑。（3）列表項(xiàng)標(biāo)志的位置list-style-position屬性設(shè)置列表項(xiàng)標(biāo)志相對(duì)于列表項(xiàng)內(nèi)容的位置。屬性取值說(shuō)明如表如表4-7所示。表4-7list-style-position屬性《Web前端開發(fā)任務(wù)式教程》屬性值說(shuō)明inside列表項(xiàng)標(biāo)志放置在文字以內(nèi)，且環(huán)繞文字，以標(biāo)志對(duì)齊outside默認(rèn)值。保持列表項(xiàng)標(biāo)志位于文字的左側(cè)。列表項(xiàng)標(biāo)志放置在文字以外，環(huán)繞文字，不以標(biāo)志對(duì)齊inherit定義從父級(jí)繼承l(wèi)ist-style-position屬性的值（4）列表項(xiàng)標(biāo)志簡(jiǎn)寫list-style屬性能夠按照l(shuí)ist-style-type、list-style-position、list-style-image的順序在一個(gè)聲明中設(shè)置列表項(xiàng)的所有屬性，屬性取值之間用空格進(jìn)行分隔。

CSS語(yǔ)法基礎(chǔ)4.1.4簡(jiǎn)單選擇器基本選擇器

表4-8基本選擇器《Web前端開發(fā)任務(wù)式教程》選擇器名說(shuō)明取值實(shí)例元素選擇器根據(jù)元素名稱選擇元素，選擇指定名稱的所有元素，取值為元素名p，選擇所有p元素id選擇器根據(jù)元素的id屬性值選擇元素，由于元素id屬性值具有唯一性，只能選到唯一的一個(gè)元素。取值為井號(hào)（＃）+元素的id屬性值#ld，選擇id屬性值為ld的元素class（類）選擇器根據(jù)class屬性值選擇元素，選擇具有指定class屬性值的所有元素，取值為點(diǎn)號(hào)（.）+class屬性值.lc，選擇所有具有class屬性且屬性值為lc的元素通用選擇器選擇HTML文件的所有元素，取值為星號(hào)（*）

與HTML一樣，CSS也不區(qū)分大小寫，一般使用小寫。但是，class和id選擇器的名稱嚴(yán)格區(qū)分大小寫。

CSS語(yǔ)法基礎(chǔ)【例4-1】用基本選擇器選擇元素，為例2-12增加樣式設(shè)計(jì)，使網(wǎng)頁(yè)顯示效果如圖4-2所示?！禬eb前端開發(fā)任務(wù)式教程》圖4-2基本選擇器與列表元素的CSS屬性

CSS語(yǔ)法基礎(chǔ)【例4-2】用基本選擇器選擇div元素，并為元素設(shè)置樣式，使網(wǎng)頁(yè)顯示效果如圖4-3所示。《Web前端開發(fā)任務(wù)式教程》圖4-3設(shè)置div元素樣式

CSS語(yǔ)法基礎(chǔ)2.分組選擇器如果要將一個(gè)CSS規(guī)則集定義到多個(gè)選擇器上，可以使用分組選擇器。分組選擇器中，選擇器之間用逗號(hào)進(jìn)行分隔，如p,.lc選擇所有p元素和所有具有class屬性且屬性值為lc的元素；又如p,div選擇所有p元素和所有div元素。3.多類名選擇器如果一個(gè)元素要設(shè)置多種類型的樣式，如既要設(shè)置顏色樣式，又要設(shè)置大小樣式，遵循模塊化編程思想，就可以將這兩類樣式分別定義在兩個(gè)CSS規(guī)則集中，并在元素類屬性中同時(shí)使用這兩個(gè)規(guī)則集，實(shí)現(xiàn)模塊化編程。給元素的類屬性賦多個(gè)值稱為多類名選擇器，屬性值之間用空格進(jìn)行分隔。【例4-3】修改例4-2，使用分組選擇器進(jìn)一步優(yōu)化CSS規(guī)則集的定義，使用多類名選擇器進(jìn)一步模塊化規(guī)則集的定義，保持網(wǎng)頁(yè)的顯示效果不變?！禬eb前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)4.1.5任務(wù)實(shí)現(xiàn)1.項(xiàng)目創(chuàng)建與資源準(zhǔn)備復(fù)制任務(wù)2.2的HTML項(xiàng)目，包含名為“開國(guó)大典.jpg”的圖像素材和名為“開國(guó)大典.mp4”的視頻資源。2.CSS樣式設(shè)計(jì)在任務(wù)2.2的HTML文件的head元素添加內(nèi)聯(lián)樣式表元素style，并編寫樣式。1）段落文字使用了同樣的字體和文字對(duì)齊方式，使用元素選擇器。2）有2個(gè)段落使用了首行縮進(jìn)的樣式，使用類選擇器。3）使用id選擇器選擇圖像，設(shè)計(jì)圖像的樣式。3.修改HTML文件1）為img元素增加id屬性。2）去掉p元素的CSS樣式設(shè)計(jì)?！禬eb前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)本任務(wù)使用層級(jí)與偽類選擇器選擇元素，設(shè)計(jì)一個(gè)畫廊。當(dāng)鼠標(biāo)在圖像列表上切換并懸停時(shí)，大圖像切換顯示與對(duì)應(yīng)小圖像的大圖。網(wǎng)頁(yè)顯示效果如圖4-4所示，圖4-4a為鼠標(biāo)懸停于第1個(gè)小圖像時(shí)的顯示效果，圖4-4b為鼠標(biāo)懸停于第3個(gè)小圖像時(shí)的顯示效果?！禬eb前端開發(fā)任務(wù)式教程》圖4-4畫廊a)鼠標(biāo)懸停于第1個(gè)小圖像

b)鼠標(biāo)懸停于第3個(gè)小圖像任務(wù)4.2設(shè)計(jì)一個(gè)畫廊

CSS語(yǔ)法基礎(chǔ)4.2.1層級(jí)選擇器層級(jí)選擇器基于元素之間的層次關(guān)系選擇元素，有4種層級(jí)選擇器，如表4-9所示。表4-9層級(jí)選擇器《Web前端開發(fā)任務(wù)式教程》選擇器名說(shuō)明取值實(shí)例后代選擇器選擇指定元素的所有指定后代元素，兩個(gè)元素之間的層次間隔不限。取值為用空格分隔的選擇器pem，選擇嵌套在p元素內(nèi)的所有em元素子元素選擇器（上下文選擇器）選擇指定元素的所有指定子元素。取值為用大于號(hào)分隔的選擇器p>em，選擇父元素是p的所有em元素相鄰兄弟選擇器（next選擇器）選擇與指定元素相鄰且同級(jí)的指定元素，同級(jí)要求有相同的父元素，相鄰要求緊隨指定元素之后。取值為用加號(hào)分隔的選擇器p+em，選擇所有緊隨p元素之后，且與p有相同父元素的em元素兄弟選擇器（nextAll選擇器）選擇與指定元素同級(jí)，且在指定元素之后的所有指定元素，僅要求與指定元素有相同的父元素，不要求相鄰指定元素。取值為用波浪線分隔的選擇器p~em，選擇在p元素之后，且與p元素有相同父元素的所有em元素在表4-9實(shí)例中，使用的選擇器之所以都是元素選擇器僅是為了說(shuō)明方便之故，并不表示其他選擇器不能使用，如div.box1選擇器選擇類屬性值為box1的，且嵌套在div元素內(nèi)的所有元素。事實(shí)上，所有選擇器，包括后面即將講到的偽類、偽元素、屬性選擇器等都可以在這里使用。

CSS語(yǔ)法基礎(chǔ)【例4-4】用層級(jí)選擇器選擇元素，設(shè)置文本的不同顏色，使網(wǎng)頁(yè)顯示效果如圖4-5所示。圖4-5層級(jí)選擇器選擇元素《Web前端開發(fā)任務(wù)式教程》圖4-6例4-4元素之間的層次關(guān)系使用層級(jí)選擇器時(shí)需要理清元素之間的層次關(guān)系，還需要特別注意，前面選擇器是限定選擇器，起限定作用，選擇的是后面選擇器匹配的元素。這里元素的最終顯示效果用到了樣式的層疊性，在任務(wù)4.4全面介紹。本實(shí)例建議每寫一個(gè)樣式保存調(diào)試一下，以便深刻理解元素之間的層次關(guān)系。

CSS語(yǔ)法基礎(chǔ)4.2.2偽類選擇器偽類選擇器選擇元素的特定狀態(tài)，如鼠標(biāo)懸停、獲得輸入焦點(diǎn)等。語(yǔ)法格式如下。selector:pseudo-class;選擇器后面緊跟元素的狀態(tài)，也即偽類名，選擇器與偽類名之間用冒號(hào)進(jìn)行分隔。偽類名對(duì)大小寫不敏感，推薦使用小寫。1.錨偽類元素有4種訪問(wèn)狀態(tài)，對(duì)應(yīng)有4個(gè)偽類，稱為錨偽類。如表4-10所示。為元素的不同訪問(wèn)狀態(tài)設(shè)置樣式時(shí)，必須遵循一定的次序規(guī)則，否則效果會(huì)無(wú)效。1）:hover必須位于:link和:visited之后；2）:active必須位于:hover之后?！禬eb前端開發(fā)任務(wù)式教程》表4-10錨偽類偽類名說(shuō)明:link元素尚未被被訪問(wèn)過(guò):visited元素已經(jīng)被訪問(wèn)過(guò):hover鼠標(biāo)懸停于元素上方時(shí):active元素被激活的瞬間

CSS語(yǔ)法基礎(chǔ)【例4-5】定義錨偽類，使處于不同狀態(tài)的a元素具有不同的顏色，顯示效果如圖4-8所示。圖4-8a是初始顯示，文字顯示為紅色，圖4-8b是鼠標(biāo)懸停顯示，文字為紫色，圖4-8c是鏈接激活瞬間顯示，文字為藍(lán)色，圖4-8d是鏈接后顯示，文字為綠色。圖4-7錨偽類顯示效果《Web前端開發(fā)任務(wù)式教程》a)訪問(wèn)前a元素文字紅色b)鼠標(biāo)懸停于a元素時(shí)文字紫色c)a元素被激活瞬間文字藍(lán)色d)訪問(wèn)后a元素文字綠色錨偽類是一種非常常用的偽類，例如，div:hover選擇div元素處于鼠標(biāo)懸停的狀態(tài)；又如，.box:hover選擇類屬性值為box的元素處于鼠標(biāo)懸停的狀態(tài)。

CSS語(yǔ)法基礎(chǔ)【例4-6】使用hover偽類設(shè)計(jì)通訊錄樣式，使鼠標(biāo)懸停于通訊錄表格某行時(shí)，表格行的背景顏色變?yōu)辄S色，顯示效果如圖4-8所示。圖4-8使用錨偽類《Web前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)2.其他偽類表4-11常用偽類《Web前端開發(fā)任務(wù)式教程》偽類名說(shuō)明實(shí)例:checked選擇處于選中狀態(tài)的元素input:checked，選擇處于選中狀態(tài)的input元素:disabled選擇處于禁用狀態(tài)的元素input:disabled，選擇處于禁用狀態(tài)的input元素:first-child選擇作為某元素第一個(gè)子元素的元素p:first-child，選擇作為某元素第一個(gè)子元素的p元素:focus選擇獲得焦點(diǎn)的元素input:focus，選擇獲得輸入焦點(diǎn)的input元素:lang(language)選擇lang屬性以指定值開頭的元素p:lang(it)，選擇lang屬性值以“it”開頭的p元素:last-child選擇作為某元素最后一個(gè)子元素的元素p:last-child，選擇作為某元素最后一個(gè)子元素的p元素:nth-child(n)選擇作為某元素第n個(gè)子元素的元素，索引從1開始。參數(shù)還可以取even/odd，表示偶數(shù)/奇數(shù)p:nth-child(2)選擇作為某元素第2個(gè)子元素的p元素:only-child選擇作為某元素唯一子元素的元素p:only-child，選擇作為某元素唯一子元素的p元素:optional選擇不帶“required”屬性的元素input:optional，選擇不帶“required”屬性的input元素:required選擇指定了"required"屬性的元素input:required，選擇指定了"required"屬性的input元素:valid選擇具有有效值的元素input:valid，選擇所有具有有效值的input元素

CSS語(yǔ)法基礎(chǔ)【例4-7】使用focus偽類完善例3-6用戶注冊(cè)網(wǎng)頁(yè)，當(dāng)文本框獲得輸入焦點(diǎn)時(shí)，背景顏色變?yōu)辄S色，顯示效果如圖4-9所示。圖4-9使用focus偽類《Web前端開發(fā)任務(wù)式教程》【例4-8】用偽類做一個(gè)彩色字體顯示，4個(gè)字用3種顏色顯示出來(lái)，顯示效果如圖4-10所示。圖4-10使用child偽類【例4-9】使用偽類選擇器選擇元素，為通訊錄設(shè)置更為友好的顯示樣式，使表格隔行具有不同的背景色。當(dāng)鼠標(biāo)懸停于表格的行時(shí)，行的文字字體加粗、放大，顏色用紅色突顯顯示，以方便用戶查看。網(wǎng)頁(yè)顯示效果如圖4-11所示，圖4-11a為初始顯示效果，圖4-11b為鼠標(biāo)懸停于通訊錄第3行的顯示效果，第3行字體加粗、放大，顏色顯示為紅色突顯色。

CSS語(yǔ)法基礎(chǔ)a)初始顯示效果b)鼠標(biāo)懸停顯示效果圖4-11格式友好的通訊錄表格《Web前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)4.2.3任務(wù)實(shí)現(xiàn)1.項(xiàng)目創(chuàng)建與資源準(zhǔn)備新建HTML項(xiàng)目，在項(xiàng)目img目錄下準(zhǔn)備名為“貴州公路1.png”、“貴州公路2.png”、“貴州公路3.png”、“貴州公路4.png”的4幅圖像素材。2.編寫HTML文件的內(nèi)容結(jié)構(gòu)3.CSS樣式設(shè)計(jì)1）使用偽類選擇器選擇img元素及其鼠標(biāo)懸停狀態(tài)。2）使用層級(jí)選擇器選擇div元素?！禬eb前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)在任務(wù)1.1中，使用HTML文本格式化元素設(shè)計(jì)了一封家信，滿足設(shè)計(jì)要求，但是文字格式非常受局限。本任務(wù)用普通段落元素p重新設(shè)計(jì)家信內(nèi)容結(jié)構(gòu)，用屬性選擇器選擇元素，并設(shè)計(jì)樣式，用偽元素選擇器給家信添加簽名，規(guī)范家信的顯示格式，設(shè)計(jì)好的家信顯示效果如圖4-12所示?！禬eb前端開發(fā)任務(wù)式教程》圖4-12一封家信任務(wù)4.3規(guī)范書信的格式

CSS語(yǔ)法基礎(chǔ)4.3.1偽元素選擇器偽元素選擇器選擇元素的某一部分，如元素的首字母、首行等?；蛘邽樵靥砑右粋€(gè)物理上不存在、但邏輯上存在的內(nèi)容，如在元素之后添加一段文字，一幅圖像，甚至一個(gè)空元素等（在任務(wù)9.1設(shè)計(jì)浮動(dòng)布局上應(yīng)用非常廣泛）。語(yǔ)法格式如下。selector::pseudo-element選擇器后面緊跟偽元素的名稱，為了與偽類相區(qū)別，選擇器與偽元素之間通常用兩個(gè)冒號(hào)進(jìn)行分隔，也可以與偽類一樣，用一個(gè)冒號(hào)進(jìn)行分隔。偽元素一共有5個(gè)，如表4-12所示?！禬eb前端開發(fā)任務(wù)式教程》表4-12偽元素選擇器偽元素名說(shuō)明實(shí)例::after在某元素之后插入內(nèi)容p::after，在p元素之后插入內(nèi)容::before在某元素之前插入內(nèi)容p::before，在p元素之前插入內(nèi)容::first-letter選擇某元素的首字母p::first-letter，選擇p元素的首字母::first-line選擇某元素的首行p::first-line，選擇p元素的首行::selection選擇用戶選擇的元素部分p::selection，選擇p元素中用戶選擇的部分

CSS語(yǔ)法基礎(chǔ)【例4-10】使用偽元素選擇器設(shè)計(jì)段落的樣式，使段落首字母用超大號(hào)紅色字體突出顯示，顯示效果如圖4-13所示。圖4-13偽元素選擇器設(shè)計(jì)段落首字母樣式《Web前端開發(fā)任務(wù)式教程》【例4-11】修改例4-11，增加偽元素選擇器，使選中的文字紅色顯示，并增加灰色背景色，顯示效果更為突出，如圖4-14所示。圖4-14偽元素選擇器設(shè)計(jì)選中文字的樣式

CSS語(yǔ)法基礎(chǔ)【例4-12】使用偽元素選擇器在段落的結(jié)尾黏貼一張圖像，使顯示效果如圖4-15所示。圖4-15偽元素選擇器為段落增加內(nèi)容《Web前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)4.3.2屬性選擇器1.基本語(yǔ)法：屬性選擇器基于特定的屬性或?qū)傩灾颠x擇元素，如表4-13所示。表4-13屬性選擇器《Web前端開發(fā)任務(wù)式教程》選擇器語(yǔ)法說(shuō)明實(shí)例[attribute]選擇帶有某屬性的元素[target]，選擇帶有target屬性的元素[attribute=value]選擇具有某指定屬性值的元素[target=_blank]，選擇帶有target屬性，且屬性值為“_blank”的元素[attribute~=value]選擇屬性值中包含指定單詞的元素，單詞要求獨(dú)立，且不能有連字符[title~=flower]，選擇帶有title屬性，且屬性值中包含“flower”一詞的元素，“flower”是一個(gè)單獨(dú)的單詞，與其他詞之間用空格分隔，不能有連字符。如title="my-flower"或title="flowers"都不是符合要求的元素，title="flower"、title="summerflower"和title="flowernew"是符合要求的元素[attribute|=value]選擇屬性值以某單詞開頭的元素，單詞獨(dú)立，可以有連字符[lang|=en]，選擇帶有l(wèi)ang屬性，且lang屬性值以“en”開頭的元素，值必須是完整或單獨(dú)的單詞，如lang="en"或者后跟連字符的，如lang="en-text"是符合要求的元素[attribute^=value]選擇屬性值以指定字符串開頭的元素a[href^="https"]，選擇帶有href屬性，且href屬性值以“https”開頭的a元素[attribute$=value]選擇屬性值以指定字符串結(jié)尾的元素a[href$=".pdf"]，選擇帶有href屬性，且href屬性值以“.pdf”結(jié)尾的a元素[attribute*=value]選擇屬性值中包含指定字符串的元素a[href*="w3school"]，選擇href屬性值中包含子串“w3school”的a元素

CSS語(yǔ)法基礎(chǔ)【例4-13】用屬性選擇器選擇元素，設(shè)置元素共有的和個(gè)性的樣式，使顯示效果如圖4-16所示。圖4-16指定class屬性值的選擇器《Web前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)【例4-14】使用屬性選擇器選擇元素，為例2-13的元素設(shè)置樣式，使顯示效果如圖4-17所示。圖4-17指定href屬性值的選擇器《Web前端開發(fā)任務(wù)式教程》【例4-15】用屬性選擇器修改例4-2，使修改后網(wǎng)頁(yè)顯示效果不變。

CSS語(yǔ)法基礎(chǔ)2.屬性選擇器的書寫格式class和id是元素的通用標(biāo)準(zhǔn)屬性，類和id選擇器是選擇屬性值等于指定值的元素，針對(duì)這兩類選擇器，書寫格式比較靈活，例如div[class=“box”]往往也寫作div.box，div[id="box"]也可以寫作div#box。【例4-16】修改例4-15選擇器的書寫格式，使修改后網(wǎng)頁(yè)顯示效果不變。《Web前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)4.3.3任務(wù)實(shí)現(xiàn)1.項(xiàng)目創(chuàng)建與資源準(zhǔn)備復(fù)制任務(wù)1.1的HTML項(xiàng)目，包含名為“簽名.jpg”的圖像素材。2.修改HTML文件的結(jié)構(gòu)1）去掉格式化元素，全部替換為段落元素。2）為段落元素增加屬性，從而能夠應(yīng)用屬性選擇器定義的樣式。3.CSS樣式設(shè)計(jì)在任務(wù)1.1的HTML文件的head元素添加內(nèi)聯(lián)樣式表元素style，并編寫樣式。1）使用屬性和偽元素選擇器選擇家信的抬頭稱呼內(nèi)容。2）使用id屬性選擇器選擇第2個(gè)P元素。3）使用class屬性選擇器選擇需要右對(duì)齊的P元素。4）使用偽類選擇器選擇包含簽名的p元素，然后使用after偽元素選擇器在其后面插入圖像元素?！禬eb前端開發(fā)任務(wù)式教程》

CSS語(yǔ)法基礎(chǔ)當(dāng)元素的同一個(gè)屬性被多次賦值時(shí)，就會(huì)發(fā)生樣式?jīng)_突。瀏覽器在解析HTML文件時(shí)會(huì)根據(jù)文件流從上到下逐行解析并顯示，所以，沖突解決的最基本原則是軟件賦值基本規(guī)范，也即后賦的值覆蓋前面賦的值，元素顯示最后賦值的效果。同時(shí)，還遵循一些特有的樣式優(yōu)先級(jí)規(guī)則，本任務(wù)通過(guò)8個(gè)示例詳細(xì)進(jìn)行剖析?！禬eb前端開發(fā)任務(wù)式教程》任務(wù)4.4掌握樣式優(yōu)先級(jí)規(guī)則

CSS語(yǔ)法基礎(chǔ)4.4.1聲明方式的優(yōu)先級(jí)有3種聲明元素樣式的方式，瀏覽器還有默認(rèn)的元素樣式設(shè)置，各種樣式的優(yōu)先級(jí)如表4-14所示。《Web前端開發(fā)任務(wù)式教程》表4-14樣式聲明方式優(yōu)先級(jí)基本規(guī)則樣式聲明方式優(yōu)先級(jí)瀏覽器默認(rèn)樣式1外部樣式表2內(nèi)部樣式表2內(nèi)聯(lián)樣式3表4-14為每種樣式定義了一個(gè)優(yōu)先級(jí)數(shù)值，數(shù)字3擁有最高的優(yōu)先級(jí)，也即內(nèi)聯(lián)樣式優(yōu)先級(jí)最高，內(nèi)部和外部樣式表優(yōu)先級(jí)相同，瀏覽器默認(rèn)設(shè)置的樣式優(yōu)先級(jí)最低?！纠?-17】用三種方式為p元素定義顏色樣式，查看網(wǎng)頁(yè)的顯示效果，體會(huì)樣式聲明的優(yōu)先級(jí)?！纠?-18】修改例4-17，去掉p元素的內(nèi)聯(lián)樣式定義，查看網(wǎng)頁(yè)的顯示效果，體會(huì)樣式聲明的優(yōu)先級(jí)。【例4-19】修改例4-18，交換link元素和style元素的位置，查看網(wǎng)頁(yè)的顯示效果，體會(huì)樣式聲明的優(yōu)先級(jí)。

CSS語(yǔ)法基礎(chǔ)4.4.2樣式的三大特性1.繼承性繼承性是指后代元素繼承祖先元素的樣式，遵循就近繼承的原則。也即子元素繼承父元素的樣式，繼承不到才進(jìn)一步上溯繼承祖先元素的樣式。合理使用繼承可以有效重用代碼，降低CSS樣式的復(fù)雜性。文字相關(guān)的屬性，如字體、字號(hào)、顏色、行距等都具有繼承性，可以統(tǒng)一在body元素中設(shè)置，通過(guò)繼承影響網(wǎng)頁(yè)中的所有文字，使網(wǎng)頁(yè)具有統(tǒng)一的風(fēng)格。但是，并不是所有的CSS屬性都可以繼承，有些屬性如內(nèi)邊距、邊框、外邊距、元素尺寸等與塊元素相關(guān)的屬性就不具有繼承性，無(wú)法通過(guò)繼承來(lái)統(tǒng)一設(shè)置?！禬eb前端開發(fā)任務(wù)式教程》圖4-19樣式的繼承性【例4-20】用樣式的繼承性為p元素和h1元素設(shè)置顏色屬性值為紅色，使網(wǎng)頁(yè)顯示效果如圖4-19所示，文字全部紅色顯示?！纠?-21】修改例4-20，為p元素和h1元素增加父級(jí)和祖先元素，并設(shè)置各自的顏色屬性，保存網(wǎng)頁(yè)查看效果，體會(huì)樣式的繼承性原則。

CSS語(yǔ)法基礎(chǔ)2.特殊性特殊性針對(duì)選擇器而言，在內(nèi)部和外部樣式表中，可以用不同類型的選擇器選擇元素，這時(shí)，樣式的優(yōu)先級(jí)遵循CSS權(quán)重計(jì)算的原則，稱為樣式的特殊性。用一個(gè)4位的數(shù)字串（CSS2中是3位數(shù)字串），按4個(gè)級(jí)別表示樣式的權(quán)重，值從左到右，左邊的優(yōu)先級(jí)最大，一級(jí)大于一級(jí)，級(jí)與級(jí)之間沒(méi)有進(jìn)制關(guān)系，級(jí)別之間不可超越。具體定義如表4-15所示。表4-15樣式權(quán)重計(jì)算表《Web前端開發(fā)任務(wù)式教程》選擇器樣式權(quán)重值優(yōu)先級(jí)元素選擇器0,0,0,11類、偽類、偽元素、屬性選擇器0,0,1,02id選擇器0,1,0,03為每類選擇器定義了一個(gè)優(yōu)先級(jí)數(shù)值，數(shù)字3擁有最高的優(yōu)先級(jí)。表4-16樣式權(quán)重計(jì)算算例選擇器實(shí)例權(quán)重值優(yōu)先級(jí)divulli0,0,0,31a:hover0,0,1,12.nava0,0,1,12.navulli0,0,1,23#nava0,1,0,14

CSS語(yǔ)法基礎(chǔ)【例4-22】已知HTML文件代碼如下，保存網(wǎng)頁(yè)，查看并分析網(wǎng)頁(yè)顯示效果，體會(huì)樣式的特殊性原則。<style>/*特殊性值為0,0,0,3優(yōu)先級(jí)值為2，其次低*/bodydivp{ font-style:italic}/*特殊性