CSS樣式表模板表單的應(yīng)用

《CSS樣式表模板表單的應(yīng)用》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、第4章CSS樣式表、模板、表單4.1CSS4.2模板4.3表單北京化工大學(xué)北方學(xué)院信息學(xué)院教研室樣式是預(yù)先定義好的、格式化文檔的工具。本節(jié)中介紹的層疊樣式表（CascadingStyleSheets,以下簡稱CSS樣式表）是由W3C（WordWideWebConsortium）組織批準(zhǔn)的一種網(wǎng)頁元素定義規(guī)則，是一種可以對網(wǎng)頁文檔內(nèi)容進(jìn)行精確格式化控制的工具。利用CSS樣式表可自動格式化網(wǎng)頁文檔，可將CSS樣式表直接存儲在網(wǎng)頁文檔中，也可以將CSS樣式表定義在網(wǎng)頁文檔之外，然后將它鏈接到多個文檔中。當(dāng)

2、CSS樣式表被修改后，使用CSS樣式表的網(wǎng)頁文檔格式也都將自動更新。CSS樣式表能夠控制大多數(shù)常用的文本格式屬性，如字體、尺寸、對齊方式等，還可以控制位置、特殊效果、鼠標(biāo)翻轉(zhuǎn)等很多HTML樣式不能控制的屬性4.1.1層疊樣式表概述北京化工大學(xué)北方學(xué)院信息學(xué)院教研室在Dreamweaver8中，選擇【窗口】

3、【CSS樣式】命令，或者按組合鍵Shift+F11，也可以單擊【屬性】面板的【CSS】按鈕，就可以打開【CSS樣式】面板，如圖7-1所示。使用【CSS樣式】面板可以完成查看、創(chuàng)建、編輯和刪除CSS

4、樣式的操作，并且可以將外部樣式表附加到當(dāng)前網(wǎng)頁文檔，完成格式化網(wǎng)頁文檔的操作。在【CSS樣式】面板下方左下角有【類別】視圖、【列表】視圖和【設(shè)置屬性】視圖3個按鈕，右下角有4個對CSS樣式進(jìn)行操作的按鈕，這些按鈕的作用如下。4.1.2層疊樣式表的創(chuàng)建與編輯北京化工大學(xué)北方學(xué)院信息學(xué)院教研室圖4-1【CSS樣式】面板北京化工大學(xué)北方學(xué)院信息學(xué)院教研室【類別】視圖：Dreamweaver支持的CSS屬性分為8個類別，字體、背景、區(qū)塊、邊框、方框、列表、定位和擴(kuò)展。每個類別的屬性都包含在一個列表中，可以

5、單擊類別名稱旁邊的加號或減號按鈕，展開或折疊這個類別?！玖斜怼恳晥D：按字母順序顯示Dreamweaver所支持的所有CSS屬性?！驹O(shè)置屬性】視圖：僅顯示那些已設(shè)置的CSS屬性。附加樣式：單擊此按鈕，可選擇一個外部樣式表文件，并將其鏈接或?qū)氲疆?dāng)前文檔。新建樣式：單擊此按鈕，可打開新建樣式對話框，新建一個樣式。編輯樣式：單擊此按鈕，可打開編輯樣式對話框，編輯制定的樣式。刪除樣式：選中列表中的樣式后，單擊此按鈕可刪除該樣式。北京化工大學(xué)北方學(xué)院信息學(xué)院教研室新建一個CSS樣式，該樣式的存放方式有3種。

6、如果僅作用于當(dāng)前網(wǎng)頁文檔的CSS樣式，則與網(wǎng)頁文件一起保存。存放在某個已建好的外部CSS樣式表文件中。應(yīng)先附加該樣式表文件，然后將新建的CSS樣式存放其中。存放在一個新建的CSS樣式表文件中。應(yīng)先新建該樣式表文件，然后將新建的CSS樣式存放其中。4.1.3創(chuàng)建層疊樣式和層疊樣式表北京化工大學(xué)北方學(xué)院信息學(xué)院教研室在【CSS樣式】面板中，設(shè)計者可以創(chuàng)建CSS樣式，在一個CSS樣式表文件中可以包含一個或多個CSS樣式。創(chuàng)建CSS樣式和CSS樣式表的操作步驟如下：（1）選擇【窗口】

7、【CSS樣式】命令

8、，打開【CSS樣式】面板。（2）單擊【CSS樣式】面板右上角的快捷菜單按鈕，在彈出的快捷菜單中,選擇【新建樣式】命令，或單擊浮動面板右下方的【新建樣式】按鈕，打開【新建CSS規(guī)則】對話框，如圖4-2所示。北京化工大學(xué)北方學(xué)院信息學(xué)院教研室圖4-2【新建CSS規(guī)則】對話框北京化工大學(xué)北方學(xué)院信息學(xué)院教研室（3）在【選擇器類型】選項組中，選擇要定制的CSS樣式類型單選項。該選項組中3個選項的意義如下：選中【類（可應(yīng)用于任何標(biāo)簽）】單選項后，可在【名稱】下拉列表框中輸入樣式的名稱，該名稱必須以“.”開始，

9、確認(rèn)后便可以創(chuàng)建一個應(yīng)用于文本范圍和選擇區(qū)域的Class屬性的樣式。選中【標(biāo)簽（重新定義定義特定標(biāo)簽的外觀）】單選項后，則可在【標(biāo)簽】下拉列表框中輸入一個HTML標(biāo)記，或從下拉列表框中選擇一個標(biāo)記，這樣便可以重新定義定制的HTML標(biāo)記的格式，如圖4-3所示。北京化工大學(xué)北方學(xué)院信息學(xué)院教研室圖4-3選擇重定義HTML標(biāo)簽后的對話框北京化工大學(xué)北方學(xué)院信息學(xué)院教研室選中【高級(ID、偽類選擇器等)】單選項后，則可為特殊的標(biāo)簽組合或含有特定ID屬性的標(biāo)簽定義樣式。在【選擇器】文本框中輸入一個選擇器的標(biāo)簽

10、，或從【選擇器】下拉列表中選擇一個標(biāo)簽，如圖7-4所示。如果要創(chuàng)建一個新樣式，應(yīng)選中【類（可應(yīng)用于任何標(biāo)簽）】單選項后，在【名稱】下拉列表框中輸入新樣式的名稱。（4）在【定義在】選項組的下拉列表中，選擇當(dāng)前要創(chuàng)建的CSS樣式定義在那個樣式表文件中?？梢允嵌x在新的樣式表文件中，也可以是將CSS樣式定義在某個已經(jīng)創(chuàng)建好的樣式表文件中。北京化工大學(xué)北方學(xué)院信息學(xué)院教研室圖4-4選擇【使用CSS選擇器】后的對話框北京化工大學(xué)北方學(xué)院信息學(xué)院教研室若要創(chuàng)建僅僅作用于當(dāng)前文檔的