《電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作》 課件 項(xiàng)目3、4 表單標(biāo)簽的使用、CSS 基礎(chǔ)知識(shí)

03表單標(biāo)簽的使用153任務(wù)1制作網(wǎng)易郵箱注冊(cè)網(wǎng)頁(yè)任務(wù)2制作電子產(chǎn)品調(diào)查問(wèn)卷網(wǎng)頁(yè)154制作網(wǎng)易郵箱注冊(cè)網(wǎng)頁(yè)任務(wù)1155●1.了解表單的組成及作用?！?.了解創(chuàng)建表單的基本語(yǔ)法格式?！?.掌握表單相關(guān)標(biāo)簽的用法?！?.熟練運(yùn)用表單控件制作網(wǎng)頁(yè)。156本任務(wù)主要利用form表單的文本輸入框、密碼框等控件來(lái)制作完成網(wǎng)易郵箱注冊(cè)網(wǎng)頁(yè)，如圖所示。157網(wǎng)易郵箱注冊(cè)網(wǎng)頁(yè)效果158步驟一：分析上圖，網(wǎng)易郵箱注冊(cè)網(wǎng)頁(yè)分為四個(gè)板塊，對(duì)應(yīng)為四組表格標(biāo)簽，其中第三個(gè)表格需要嵌套子表格。首先寫(xiě)第一個(gè)表格，表格的寬度為962像素，居于瀏覽器中間，表格包含1行2列，第一列的內(nèi)容是一張寬392像素、高38像素的圖片，第二列的內(nèi)容為文字信息“幫助”。代碼如圖所示。159此時(shí)網(wǎng)頁(yè)效果如圖所示。第一個(gè)表格網(wǎng)頁(yè)效果第一個(gè)表格代碼160步驟二：接著寫(xiě)第二個(gè)表格，表格的寬度為962像素，居于瀏覽器中間，表格包含1行1列，唯一列的內(nèi)容為一張寬962像素、高53像素的圖片。第二個(gè)表格網(wǎng)頁(yè)效果第二個(gè)表格代碼此時(shí)網(wǎng)頁(yè)的效果如圖所示。161步驟三：接著寫(xiě)第三個(gè)表格，表格的寬度為962像素，居于瀏覽器中間，表格包含1行1列，唯一列嵌入一個(gè)form表單，表單中嵌入一個(gè)子表格，子表格的寬度也為962像素，子表格包含4行1列，第一行、第三行、第四行的單元格填入相應(yīng)的文字信息，第二行的單元格保持為空。代碼如圖所示。162第三個(gè)表格整體框架代碼163第三個(gè)表格整體框架代碼164此時(shí)整體框架頁(yè)面效果如圖所示。整體框架頁(yè)面效果165步驟四：找到在步驟三中創(chuàng)建的子表格，分別在第二行、第四行、第六行、第八行的空單元格中編寫(xiě)對(duì)應(yīng)的標(biāo)簽代碼。代碼如圖所示。標(biāo)簽代碼a）第二行代碼b）第四行代碼c）第六行代碼d）第八行代碼166標(biāo)簽代碼a）第二行代碼b）第四行代碼c）第六行代碼d）第八行代碼167標(biāo)簽代碼a）第二行代碼b）第四行代碼c）第六行代碼d）第八行代碼168標(biāo)簽代碼a）第二行代碼b）第四行代碼c）第六行代碼d）第八行代碼169此時(shí)網(wǎng)頁(yè)效果如圖所示。創(chuàng)建賬號(hào)代碼170步驟五：最后寫(xiě)第四個(gè)表格，表格的寬度為962像素，居于瀏覽器中間，單元格內(nèi)容與單元格邊沿距離為8，單元格間距為0。表格包含1行1列，唯一列居中，代碼如圖所示。第四個(gè)表格代碼171一、認(rèn)識(shí)表單對(duì)于表單，讀者可能比較陌生，其實(shí)它們?cè)诨ヂ?lián)網(wǎng)上隨處可見(jiàn)。在html中，一個(gè)完整的表單通常由表單控件（也被稱為表單元素）、提示信息和表單域三個(gè)部分構(gòu)成，通常看到的登錄注冊(cè)頁(yè)面都是由表單完成的。表單用于搜集不同類型的用戶輸入。172為了更好地理解表單的構(gòu)成，下面來(lái)創(chuàng)建一個(gè)完整的表單，表單結(jié)構(gòu)代碼如圖所示。表單結(jié)構(gòu)代碼表單結(jié)構(gòu)效果運(yùn)行圖中的代碼，此時(shí)網(wǎng)頁(yè)效果如圖所示。173二、創(chuàng)建表單在html中，<form></form>被用于定義表單域，即<form>為表單開(kāi)始，</form>為表單結(jié)束。所有的表單元素都要放置在其中。創(chuàng)建表單的基本語(yǔ)法代碼如圖所示。創(chuàng)建表單的基本語(yǔ)法代碼174在上面的語(yǔ)法中，action、method和name為表單標(biāo)簽form的常用屬性，具體見(jiàn)表。form標(biāo)簽的屬性及含義175三、認(rèn)識(shí)表單控件1.input控件input控件是表單元素中用得最多的一種元素，通常網(wǎng)頁(yè)中的單行文本輸入框、單選框、復(fù)選框、提交按鈕、重置按鈕等都是通過(guò)input控件定義的，其基本語(yǔ)法格式如下。input控件的type屬性為其最基本的屬性，根據(jù)其type屬性的取值不同，可輸入不同形式的數(shù)據(jù)，達(dá)到客戶端與服務(wù)器之間真正交互、溝通的目的。除了type屬性之外，input控件還可以定義很多其他的屬性，具體見(jiàn)表。176input控件的屬性、屬性值及描述177表中所列出的為input控件的常用屬性，下面通過(guò)一個(gè)案例來(lái)演示它們的使用方法和效果，如圖所示。input控件代碼1178運(yùn)行圖中的代碼，效果如圖所示。input控件效果179為了使初學(xué)者更好地理解不同的input控件類型，下面對(duì)它們做一個(gè)簡(jiǎn)單的介紹。（1）單行文本輸入框<inputtype="text"/>單行文本輸入框常用來(lái)輸入簡(jiǎn)短的信息，如用戶名、賬號(hào)、證件號(hào)碼等，常用的屬性有name、value、maxlength。（2）密碼輸入框<inputtype="password"/>密碼輸入框用來(lái)輸入密碼，其內(nèi)容將以“*”的形式顯示。180（3）單選框<inputtype="radio"/>單選框用于單項(xiàng)選擇，如選擇性別、是否操作等。需要注意的是，在定義單選框時(shí)，必須為同一組中的選項(xiàng)指定相同的name值，這樣“單選”才會(huì)生效。此外，可以對(duì)單選框應(yīng)用checked屬性，指定默認(rèn)選中項(xiàng)。（4）普通按鈕<inputtype="button"/>普通按鈕常常配合JavaScript腳本語(yǔ)言使用，初學(xué)者了解即可。（5）復(fù)選框<inputtype="checkbox">復(fù)選框允許用戶在一定數(shù)目的選擇中選取一個(gè)或多個(gè)選項(xiàng)。復(fù)選框能夠進(jìn)行內(nèi)容的多項(xiàng)選擇，顯示形式一般為一個(gè)方框。181（6）提交按鈕<inputtype="submit"/>提交按鈕是表單中的核心控件，用戶完成信息的輸入后，一般都需要單擊提交按鈕才能完成表單數(shù)據(jù)的提交?？梢詫?duì)其應(yīng)用value屬性，改變提交按鈕上的默認(rèn)文本。（7）重置按鈕<inputtype="reset"/>當(dāng)用戶輸入的信息有誤時(shí)，可單擊重置按鈕取消已輸入的所有表單信息。可以對(duì)其應(yīng)用value屬性，改變重置按鈕上的默認(rèn)文本。182（8）圖片按鈕<inputtype="image"/>圖片按鈕與普通按鈕在功能上基本相同，只是它用圖像替代了默認(rèn)的按鈕，外觀上更加美觀。需要注意的是，必須為其定義src屬性，以指定圖像的URL路徑。（9）隱藏域<inputtype="hidden"/>隱藏域?qū)τ谟脩羰遣豢梢?jiàn)的，通常用于后臺(tái)的程序，初學(xué)者了解即可。（10）文件域<inputtype="?le"/>當(dāng)單擊文件域時(shí)，頁(yè)面中將出現(xiàn)一個(gè)文本框和一個(gè)“瀏覽”按鈕，用戶可以通過(guò)填寫(xiě)文件路徑或直接瀏覽選擇文件的方式，將文件提交給后臺(tái)服務(wù)器。1832.textarea控件當(dāng)定義input控件的type屬性值為text時(shí)，可以創(chuàng)建一個(gè)單行文本輸入框。但是，如果需要輸入大量的信息，單行文本輸入框就不再適用，為此html語(yǔ)言提供了textarea控件。通過(guò)textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語(yǔ)法格式如下。184在上面的語(yǔ)法格式中，cols和rows為textarea控件必須設(shè)置的屬性，其中cols用來(lái)定義多行文本輸入框中每行的字符數(shù)，rows用來(lái)定義多行文本輸入框中顯示的行數(shù)，它們的取值均為正整數(shù)。下面通過(guò)一個(gè)案例來(lái)學(xué)習(xí)textarea控件的用法，如圖所示。textarea控件代碼185在上圖中，通過(guò)textarea控件定義了一個(gè)多行文本輸入框，并對(duì)其應(yīng)用cols和rows屬性來(lái)設(shè)置多行文本輸入框每行中的字符數(shù)和顯示的行數(shù)。在多行文本輸入框下面，通過(guò)將input控件的type屬性值設(shè)置為“submit”，定義了一個(gè)提交按鈕。運(yùn)行上圖中的代碼，效果如圖所示。textarea控件效果制作電子產(chǎn)品調(diào)查問(wèn)卷網(wǎng)頁(yè)任務(wù)2

186●1.熟悉select控件的應(yīng)用。●2.熟練使用表單控件制作多項(xiàng)選擇表單網(wǎng)頁(yè)。187表單控件為表單的核心內(nèi)容，它允許用戶在表單中輸入內(nèi)容。不同的表單控件具有不同的功能，如密碼輸入框、文本輸入框、下拉列表、復(fù)選框等，只有掌握了這些控件的使用方法，才能正確地創(chuàng)建表單。188189本任務(wù)主要利用表單控件的文本輸入框、下拉列表框、單選框、復(fù)選框等控件，將多種控件組合在一起，制作出電子產(chǎn)品調(diào)查問(wèn)卷網(wǎng)頁(yè)，如圖所示。電子產(chǎn)品調(diào)查問(wèn)卷網(wǎng)頁(yè)190步驟一：根據(jù)分析，制作電子產(chǎn)品調(diào)查問(wèn)卷網(wǎng)頁(yè)分為兩步，首先插入左側(cè)的問(wèn)題信息，然后插入右側(cè)的表單控件。在p標(biāo)簽中先放入文字內(nèi)容，代碼如圖所示。191左側(cè)問(wèn)題信息代碼192效果如圖所示。左側(cè)問(wèn)題信息效果193步驟二：在上圖中，前三個(gè)表單輸入框（如姓名、購(gòu)買日期、電子郵件地址）是用了文本框和下拉列表框表單控件，每年有12個(gè)月，所以第一個(gè)下拉列表框中設(shè)置了12個(gè)option選項(xiàng)，每月最多有31天，所以第二個(gè)下拉列表框中設(shè)置了31個(gè)option選項(xiàng)，代碼如圖所示。前三個(gè)表單輸入框源碼194前三個(gè)表單輸入框源碼195此時(shí)網(wǎng)頁(yè)效果如圖所示。前三個(gè)表單輸入框網(wǎng)頁(yè)效果196步驟三：在上圖中，后三個(gè)表單輸入框所用的是單選框、復(fù)選框、多行文本輸入框表單控件，這里要注意，兩個(gè)單選框radio的name屬性要設(shè)置為相同的值，否則單選功能效果會(huì)失效。多個(gè)復(fù)選框checkbox的name屬性也要設(shè)置為相同的值，否則提交到服務(wù)器的數(shù)據(jù)會(huì)出現(xiàn)異常，代碼如圖所示。197后三個(gè)表單輸入框代碼198瀏覽網(wǎng)頁(yè)時(shí)，經(jīng)常會(huì)看到包含多個(gè)選項(xiàng)的下拉列表，例如，選擇所在的城市、出生年月、興趣愛(ài)好等。圖所示即為一個(gè)下拉列表，當(dāng)單擊下拉箭頭時(shí)，會(huì)出現(xiàn)一個(gè)選擇列表。在html中，要想制作出圖所示的下拉列表，就需要使用select下拉列表控件，如圖所示。下列列表下拉列表控件199使用select控件定義下拉列表的基本語(yǔ)法格式如下。在上面的語(yǔ)法中，<select></select>用于在表單中添加一個(gè)下拉列表，<option></option>嵌套在<select></select>中，用于定義下拉列表中的具體選項(xiàng)，每對(duì)<select></select>中至少應(yīng)包含一對(duì)<option></option>。200在html中，可以為<select>和<option>應(yīng)用屬性，以改變下拉列表的外觀顯示效果和選中項(xiàng)，具體見(jiàn)表。select控件和option標(biāo)簽的常用屬性及描述201下面通過(guò)一個(gè)案例來(lái)演示幾種不同的下拉列表效果，如圖所示。select.html202運(yùn)行上圖中的代碼，效果如圖所示。下拉列表效果04CSS基礎(chǔ)知識(shí)203任務(wù)1制作開(kāi)心餐廳網(wǎng)頁(yè)任務(wù)2制作課程介紹網(wǎng)頁(yè)204制作開(kāi)心餐廳網(wǎng)頁(yè)任務(wù)1205●1.掌握CSS的基本語(yǔ)法?！?.了解在html中引入CSS樣式表的方式。●3.熟悉CSS常用的選擇器。206本任務(wù)主要使用html定義網(wǎng)頁(yè)的結(jié)構(gòu)，用CSS樣式來(lái)制作完成開(kāi)心餐廳網(wǎng)頁(yè)。開(kāi)心餐廳網(wǎng)頁(yè)效果如圖所示。207開(kāi)心餐廳網(wǎng)頁(yè)效果208步驟一：在項(xiàng)目下新建html文件，在p標(biāo)簽中加入4張圖片和文字內(nèi)容，并使用width屬性和height屬性為圖片設(shè)置寬度和高度，p標(biāo)簽內(nèi)的文字內(nèi)容需要換行的地方使用br標(biāo)簽換行，標(biāo)題文字使用h2標(biāo)簽環(huán)繞，代碼如圖所示。209不加樣式開(kāi)心餐廳網(wǎng)頁(yè)代碼210不加樣式開(kāi)心餐廳網(wǎng)頁(yè)代碼211不加樣式開(kāi)心餐廳網(wǎng)頁(yè)代碼212此時(shí)網(wǎng)頁(yè)效果如圖所示。不加樣式開(kāi)心餐廳網(wǎng)頁(yè)效果213步驟二：接下來(lái)要新建一個(gè)CSS外部樣式表，對(duì)網(wǎng)頁(yè)的文字內(nèi)容進(jìn)行樣式設(shè)置。首先設(shè)置p標(biāo)簽中的文字字體大小為12像素，接著設(shè)置h2標(biāo)簽中的文字字體大小為18像素，顏色為紅色，然后使用類選擇器.green、.blue將其中兩個(gè)不同段落中的文字顏色分別設(shè)置為綠色和藍(lán)色，最后使用id選擇器#?rst將第一處標(biāo)題文字設(shè)置為24像素，顏色為綠色。CSS代碼如圖所示。外部樣式表代碼214步驟三：開(kāi)心餐廳網(wǎng)頁(yè)通過(guò)使用link標(biāo)簽引入CSS外部樣式表，link標(biāo)簽一般放置在網(wǎng)頁(yè)文檔的head標(biāo)簽內(nèi)，當(dāng)前外部樣式表的文件命名為style.css。通過(guò)href屬性設(shè)置好文件路徑后，網(wǎng)頁(yè)文件就能夠成功引入CSS外部樣式表，代碼如圖所示。引入外部樣式表與標(biāo)簽命名代碼215CSS（cascadingstylesheet）中文稱為層疊樣式表，其文件擴(kuò)展名為.css。CSS是用于增強(qiáng)或控制網(wǎng)頁(yè)樣式，并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。引用樣式表的目的是將“網(wǎng)頁(yè)結(jié)構(gòu)代碼”和“網(wǎng)頁(yè)樣式風(fēng)格代碼”分離開(kāi)，從而使網(wǎng)頁(yè)設(shè)計(jì)者可以對(duì)網(wǎng)頁(yè)布局進(jìn)行更多的控制。利用樣式表，可以將整個(gè)站點(diǎn)上的所有網(wǎng)頁(yè)都指向某個(gè)CSS文件，然后設(shè)計(jì)者只需要修改CSS文件中的某一行，整個(gè)網(wǎng)站上對(duì)應(yīng)的樣式就都會(huì)隨之發(fā)生變化。216一、CSS樣式規(guī)則使用CSS對(duì)網(wǎng)頁(yè)進(jìn)行修飾，首先需要了解CSS樣式規(guī)則，其基本語(yǔ)法格式如下。在上述樣式規(guī)則中，選擇器用于指定CSS樣式作用的html對(duì)象，大括號(hào){}內(nèi)是對(duì)該對(duì)象設(shè)置具體樣式。217初學(xué)者在書(shū)寫(xiě)CSS樣式時(shí)，除了要遵循CSS樣式規(guī)則外，還需要注意以下幾個(gè)問(wèn)題。1.CSS樣式中的選擇器嚴(yán)格區(qū)分大小寫(xiě)，屬性和屬性值不區(qū)分大小寫(xiě)，按照書(shū)寫(xiě)習(xí)慣一般將選擇器、屬性和屬性值都采用小寫(xiě)的形式。2.如果屬性值由多個(gè)單詞組成且中間包含空格，則必須為這個(gè)屬性值加上英文狀態(tài)下的雙引號(hào)。3.為了提高代碼的可讀性，書(shū)寫(xiě)CSS代碼時(shí)，通常會(huì)加上CSS注釋。4.在CSS代碼中，空格是不被解析的，大括號(hào)以及分號(hào)前后的空格可有可無(wú)。因此，可以使用空格鍵、Tab鍵、回車鍵等對(duì)樣式代碼進(jìn)行排版，以提高代碼的可讀性。218二、引入CSS樣式表1.行內(nèi)式行內(nèi)式是通過(guò)標(biāo)簽的style屬性設(shè)置元素的樣式，其基本語(yǔ)法格式如下。語(yǔ)法中style是標(biāo)簽的屬性，實(shí)際上任何html標(biāo)簽都擁有style屬性，用來(lái)設(shè)置行內(nèi)式，其中屬性和屬性值的書(shū)寫(xiě)規(guī)范與CSS樣式規(guī)則相同。行內(nèi)式只對(duì)其所在的標(biāo)簽及嵌套在其中的子標(biāo)簽起作用。219下面通過(guò)一個(gè)案例來(lái)演示使用行內(nèi)式引入CSS樣式的方法，如圖所示。在圖中，通過(guò)使用行內(nèi)式CSS樣式，分別設(shè)置兩個(gè)p標(biāo)簽的字號(hào)和顏色。行內(nèi)式代碼220此時(shí)網(wǎng)頁(yè)效果如圖所示。通過(guò)上圖可以看出，行內(nèi)式也是通過(guò)標(biāo)簽的style屬性來(lái)控制樣式的，并沒(méi)有做到結(jié)構(gòu)與表現(xiàn)的分離，所以一般很少使用。通常，只有在樣式規(guī)則較少且只在該元素上使用一次，或者需要臨時(shí)修改某個(gè)樣式規(guī)則時(shí)使用。行內(nèi)式網(wǎng)頁(yè)效果2212.內(nèi)嵌式內(nèi)嵌式是將CSS代碼集中寫(xiě)在html文檔的head頭部標(biāo)簽中，并且用style標(biāo)簽定義，其基本語(yǔ)法格式如圖所示。在該語(yǔ)法中，style標(biāo)簽一般位于head標(biāo)簽中的title標(biāo)簽之后，也可以把它放在html文檔的任何地方。內(nèi)嵌式代碼222下面通過(guò)一個(gè)案例來(lái)演示內(nèi)嵌式CSS樣式的用法，如圖所示。內(nèi)嵌式代碼223此時(shí)網(wǎng)頁(yè)效果如圖所示。內(nèi)嵌式CSS樣式只對(duì)其所在的html頁(yè)面產(chǎn)生作用，因此，當(dāng)網(wǎng)站是一個(gè)單網(wǎng)頁(yè)時(shí)，使用內(nèi)嵌式是個(gè)不錯(cuò)的選擇。當(dāng)網(wǎng)站是由多個(gè)網(wǎng)頁(yè)組成時(shí)，不建議使用這種方式，因?yàn)榇藭r(shí)采用內(nèi)嵌式會(huì)使CSS代碼產(chǎn)生大量冗余。內(nèi)嵌式網(wǎng)頁(yè)效果2243.外部式外部式是將所有的樣式放在一個(gè)或多個(gè)以“CSS”為擴(kuò)展名的外部樣式表文件中，通過(guò)link標(biāo)簽將外部樣式表文件引入到html文檔中，其基本語(yǔ)法格式如下。225在該語(yǔ)法中，link標(biāo)簽需要放在頭部標(biāo)簽head中，同時(shí)設(shè)置link標(biāo)簽的相關(guān)屬性，具體如下。（1）href：定義外部樣式表文件的URL。（2）type：定義所鏈接文檔的類型，指定為“text/css”，表示鏈接的外部文件為CSS樣式表。（3）rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件。226三、CSS常用的選擇器根據(jù)選擇器類型不同，CSS選擇器可分為基礎(chǔ)選擇器和復(fù)合選擇器?；A(chǔ)選擇器是由單個(gè)選擇器組成的，包括標(biāo)簽選擇器、類選擇器、多類名選擇器、id選擇器和通配符選擇器。而復(fù)合選擇器可以更準(zhǔn)確、更高效地選擇目標(biāo)元素（標(biāo)簽）。復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器通過(guò)不同的方式組合而成的。常用的復(fù)合選擇器包括交集選擇器、并集選擇器、后代選擇器、偽類選擇器等。2271.標(biāo)簽選擇器標(biāo)簽選擇器是指用html標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁(yè)面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式。其基本語(yǔ)法格式如下。該語(yǔ)法中，所有的html標(biāo)簽名都可以作為標(biāo)簽選擇器，例如body、h1、p、strong等。用標(biāo)簽選擇器定義的樣式對(duì)頁(yè)面中該類型的所有標(biāo)簽都產(chǎn)生效果。2282.類選擇器類選擇器使用“.”（英文點(diǎn)號(hào)）表示，后面緊跟類名，其基本語(yǔ)法格式如下。該語(yǔ)法中類名即為html元素的class屬性值，大多數(shù)html元素都可以定義class屬性。類選擇器最大的優(yōu)勢(shì)是可以為網(wǎng)頁(yè)元素對(duì)象定義單獨(dú)或相同的樣式。229下面通過(guò)一個(gè)案例來(lái)學(xué)習(xí)類選擇器的應(yīng)用，如圖所示。類選擇器代碼230在上圖中，對(duì)h2標(biāo)題標(biāo)簽應(yīng)用class="red"，通過(guò)類選擇器設(shè)置文本顏色為紅色。對(duì)第一個(gè)p段落標(biāo)簽應(yīng)用class="green"，將其文本顏色設(shè)置為綠色。對(duì)第二個(gè)p段落標(biāo)簽應(yīng)用class="font22"，通過(guò)類選擇器設(shè)置文本字號(hào)為22像素。此時(shí)網(wǎng)頁(yè)效果如圖所示。類選擇器效果2313.多類名選擇器在多類名選擇器中，一個(gè)標(biāo)簽的class值中可能包含多個(gè)類名，每個(gè)類名之間用空格分開(kāi)。在使用場(chǎng)景中通常把多個(gè)標(biāo)簽相同的樣式放在一個(gè)類中定義，獨(dú)有的樣式用其他類分開(kāi)定義，使用時(shí)將標(biāo)簽的class值設(shè)置為多個(gè)類名組合來(lái)達(dá)到聚合不同樣式集的目的，其基本語(yǔ)法格式如下。232這里的語(yǔ)法格式是在標(biāo)簽中的書(shū)寫(xiě)，在CSS中跟類選擇器的寫(xiě)法相似。多類選擇器代碼233在上圖中，對(duì)兩個(gè)p段落標(biāo)簽分別進(jìn)行了多個(gè)名字的命名，對(duì)類名red設(shè)置文本顏色為紅色，此時(shí)兩行文本變?yōu)榧t色。對(duì)類名font2設(shè)置上畫(huà)線，對(duì)類名bold設(shè)置下畫(huà)線，然后單獨(dú)將類名為redbold的文本設(shè)置字體加粗。此時(shí)頁(yè)面的顯示效果如圖所示。多類名選擇器效果2344.id選擇器id選擇器使用“#”表示，后面緊跟id名，其基本語(yǔ)法格式如下。該語(yǔ)法中，id名即為html元素的id屬性值，大多數(shù)html元素都可以定義id屬性，網(wǎng)頁(yè)元素的id值是唯一的，同一個(gè)網(wǎng)頁(yè)中的id值不能重復(fù)。235下面通過(guò)一個(gè)案例來(lái)學(xué)習(xí)id選擇器的使用，如圖所示。id選擇器代碼2365.交集選擇器交集選擇器就是在兩個(gè)標(biāo)簽相交的部分，也就是交集修改格式。交集選擇器可以與id選擇器和類選擇器共同使用。其基本語(yǔ)法格式如下。6.并集選擇器如果某些選擇器定義的樣式完全相同或部分相同，就可以利用并集選擇器，并集選擇器是各選擇器通過(guò)英文逗號(hào)（,）連接而成的，任何形式的選擇器都可以作為并集選擇器的一部分。其基本語(yǔ)法格式如下。2377.通配符選擇器通配符選擇器用“*”號(hào)表示，它是作用范圍最廣的選擇器，能匹配頁(yè)面中所有元素。其基本語(yǔ)法格式如下。8.后代選擇器后代選擇器用于選擇一個(gè)元素的后代元素，它使用空格分隔兩個(gè)元素。其基本語(yǔ)法格式如下。238除了上述講解到的標(biāo)簽選擇器、類選擇器、多類名選擇器、id選擇器、交集選擇器、并集選擇器、通配符選擇器、后代選擇器之外，后面的項(xiàng)目中還會(huì)使用到偽類選擇器，待后面詳細(xì)講解。內(nèi)嵌式選擇器的優(yōu)先級(jí)（1000）>id選擇器的優(yōu)先級(jí)（100）>類選擇器和偽類選擇器的優(yōu)先級(jí)（10）>元素選擇器的優(yōu)先級(jí)（1）>通配符選擇器的優(yōu)先級(jí)（0），即內(nèi)嵌式選擇器優(yōu)先級(jí)最高，其次是id選擇器，以此類推，優(yōu)先級(jí)最小的為通配符選擇器。制作課程介紹網(wǎng)頁(yè)任務(wù)2

239●1.熟練掌握CSS字體樣式的設(shè)置?！?.熟練掌握CSS文本外觀的設(shè)置?！?.熟練掌握CSS背景顏色的設(shè)置?！?.熟練掌握div標(biāo)簽和span標(biāo)簽的用法。240學(xué)習(xí)html時(shí)，可以使用文本標(biāo)簽及其屬性控制文本的顯示樣式，但是這種方式比較煩瑣且不利于代碼的共享和移植。為此，CSS提供了相應(yīng)的文本樣式屬性，可以更輕松方便地控制文本樣式。241242本任務(wù)主要講解如何通過(guò)CSS字體樣式屬性、CSS文本外觀屬性、CSS背景顏色屬性對(duì)Android課程介紹網(wǎng)頁(yè)進(jìn)行美化。本任務(wù)制作的Android課程介紹網(wǎng)頁(yè)使用了line-height屬性對(duì)文本的行間距進(jìn)行設(shè)置，使用了color屬性對(duì)文本的顏色進(jìn)行設(shè)置，使用了background-color屬性對(duì)該網(wǎng)頁(yè)中元素的背景顏色進(jìn)行設(shè)置。Android課程介紹網(wǎng)頁(yè)效果如圖所示。Android課程介紹網(wǎng)頁(yè)效果243步驟一：在項(xiàng)目下新建html文件，在body中定義整個(gè)頁(yè)面的結(jié)構(gòu)，一個(gè)div標(biāo)簽中包含兩個(gè)p標(biāo)簽和兩個(gè)子div標(biāo)簽，兩個(gè)p標(biāo)簽中分別放入兩個(gè)課程標(biāo)題圖片，兩個(gè)div標(biāo)簽中分別放入兩段課程文字內(nèi)容，代碼如圖所示。244添加標(biāo)簽并輸入內(nèi)容245步驟二：給需要設(shè)置樣式的標(biāo)簽設(shè)置id屬性值和class屬性值，注意取名字的時(shí)候盡量使用英文，且具有真實(shí)意義。代碼如圖所示。引入外部樣式表和標(biāo)簽定義選擇器246引入外部樣式表和標(biāo)簽定義選擇器247運(yùn)行上圖中的代碼，效果如圖所示。設(shè)置相關(guān)屬性值248步驟三：在CSS文件中設(shè)置Android課程介紹網(wǎng)頁(yè)中元素的樣式屬性，這里多處用到了后代選擇器，后代選擇器可以選擇某元素下所有的子元素，在后代選擇器中，規(guī)則左邊的選擇器一端包括兩個(gè)或多個(gè)用空格分隔的選擇器。每個(gè)空格結(jié)合符可以解釋為“……作為……的后代”，但是要求必須從右向左讀選擇器。代碼如圖所示。249設(shè)置樣式屬性250設(shè)置樣式屬性251步驟四：在head標(biāo)簽中使用“<linkhref="css/course.css"rel="stylesheet"type="text/css"/>”引入外部樣式表，運(yùn)行html代碼，加入樣式屬性效果如圖所示。Android課程介紹網(wǎng)頁(yè)效果252一、CSS字體樣式屬性1.font-sizefont-size屬性用于設(shè)置字號(hào)，該屬性值可以使用相對(duì)長(zhǎng)度單位，也可以使用絕對(duì)長(zhǎng)度單位，具體見(jiàn)表。其中，相對(duì)長(zhǎng)度單位比較常用，推薦使用像素單位px；絕對(duì)長(zhǎng)度單位使用較少。253CSS長(zhǎng)度單位及說(shuō)明2542.font-familyfont-family屬性用于設(shè)置字體。網(wǎng)頁(yè)中常用的字體有宋體、微軟雅黑、黑體等，例如，將網(wǎng)頁(yè)中所有段落文本的字體設(shè)置為宋體，可以使用圖所示的CSS樣式代碼。設(shè)置字體255使用font-family設(shè)置字體時(shí)，需要注意以下幾點(diǎn)。（1）各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開(kāi)。（2）中文字體需要加英文狀態(tài)下的引號(hào)，英文字體一般不需要加引號(hào)。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前，如圖所示。（3）如果字體名中包含空格、#、￥等符號(hào)，則該字體必須加英文狀態(tài)下的單引號(hào)或雙引號(hào)，如圖所示。（4）盡量使用系統(tǒng)默認(rèn)字體，以保證網(wǎng)頁(yè)在任何用戶的瀏覽器中都能正確顯示。256設(shè)置字體書(shū)寫(xiě)方式加英文狀態(tài)引號(hào)2573.font-weightfont-weight屬性用于定義字體的粗細(xì)，其屬性值及其描述見(jiàn)表。在實(shí)際工作中，常用的font-weight屬性值為normal和bold。font-weight的屬性值及其描述2584.font-variantfont-variant屬性用于設(shè)置變體（字體變化），一般用于定義小型大寫(xiě)字母，僅對(duì)英文字符有效。其可用屬性值如下。（1）normal：默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體。（2）small-caps：瀏覽器會(huì)顯示小型大寫(xiě)的字體，即所有的小寫(xiě)字母均會(huì)轉(zhuǎn)換為大寫(xiě)。但是所有使用小型大寫(xiě)字體的字母與其余文本相比，其字體尺寸更小。2595.font-stylefont-style屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下。（1）normal：默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式。（2）italic：瀏覽器會(huì)顯示斜體的字體樣式。（3）oblique：瀏覽器會(huì)顯示傾斜的字體樣式。其中italic和oblique都用于定義斜體，兩者在顯示效果上并沒(méi)有本質(zhì)區(qū)別，但實(shí)際工作中常使用italic。2606.fontfont屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置，其基本語(yǔ)法格式如下。使用font屬性時(shí)，必須按上面語(yǔ)法格式中的順序書(shū)寫(xiě)，各個(gè)屬性以空格隔開(kāi)，其應(yīng)用示例如圖所示。綜合設(shè)置字體樣式261下面使用font屬性對(duì)字體樣式進(jìn)行綜合設(shè)置，如圖所示。font屬性代碼262在上圖中定義了兩個(gè)段落，同時(shí)使用font屬性分別對(duì)它們進(jìn)行相應(yīng)的設(shè)置。其中，由于第二個(gè)段落省略了font-family屬性，這時(shí)font屬性不起作用。運(yùn)行上圖中的代碼，效果如圖所示。使用font屬性綜合設(shè)置字體樣式263二、CSS文本外觀屬性1.colorcolor屬性用于定義文本的顏色，其取值方式有如下三種。（1）預(yù)定義的顏色值，如red、green、blue等。（2）十六進(jìn)制，如#FF0000、#FF6600、#29D794等。實(shí)際工作中，十六進(jìn)制是最常用的定義顏色的方式。（3）RGB代碼，如紅色可以表示為rgb（255，0，0）或rgb（100%，0%，0%）。2642.letter-spacingletter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白。其屬性值可為不同單位的值，允許使用負(fù)值，默認(rèn)值為normal。3.line-heightline-height屬性用于設(shè)置行間距，所謂行間距就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px、相對(duì)值em和百分比%，實(shí)際工作中使用最多的是像素px和相對(duì)值em。2654.text-transformtext-transform屬性用于轉(zhuǎn)換英文字符的大小寫(xiě)，其可用屬性值如下。（1）none：不轉(zhuǎn)換（默認(rèn)值）。（2）capitalize：首字母大寫(xiě)。（3）uppercase：全部字符轉(zhuǎn)換為大寫(xiě)。（4）lowercase：全部字符轉(zhuǎn)換為小寫(xiě)。2665.text-decorationtext-decoration屬性用于設(shè)置文本的下畫(huà)線、上畫(huà)線、刪除線等裝飾效果，其可用屬性值如下。（1）none：沒(méi)有裝飾（正常文本默認(rèn)值）。（2）underline：下畫(huà)線。（3）overline：上畫(huà)線。（4）line-through：刪除線。text-decoration后可以賦多個(gè)值，用于給文本添加多種顯示效果，例如，若需要文字同時(shí)有下畫(huà)線和刪除線效果，就可以將underline和line-through同時(shí)賦給text-decoration。2676.text-a