資源描述：
《網(wǎng)頁制作培訓(xùn)教程第課》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、網(wǎng)頁制作培訓(xùn)教程第10課第10課用CSS樣式規(guī)范網(wǎng)頁元素本課要點具體要求本課導(dǎo)讀上機練習(xí)本課要點創(chuàng)建CSS樣式應(yīng)用外部樣式表文件具體要求掌握CSS樣式的創(chuàng)建與應(yīng)用方法熟悉CSS規(guī)則定義中各分類的作用掌握外部樣式表文件的創(chuàng)建方法掌握附加并應(yīng)用外部樣式表文件的方法本課導(dǎo)讀為了操作簡便，在網(wǎng)頁設(shè)計中常用CSS樣式來控制文本、邊框、背景和列表等的樣式，創(chuàng)建的樣式可以反復(fù)調(diào)用。CSS樣式可以嵌入在當(dāng)前文檔的頭部標(biāo)簽中，也可導(dǎo)出為外部樣式表文件應(yīng)用到其他文檔中。104>>.1創(chuàng)建CSS樣式CSS指層疊樣式表，它是CascadingStyleSheet的縮
2、寫。在制作網(wǎng)頁時需要讓整個網(wǎng)站的風(fēng)格統(tǒng)一，但手動設(shè)置每個網(wǎng)頁的格式將會非常麻煩，用CSS樣式能快速完成網(wǎng)頁文本格式的統(tǒng)一，有利于提高工作效率。10>.1創(chuàng)建CSS樣式10>.1>.1知識講解10>.1>.2典型案例——在簡介頁中應(yīng)用CSS樣式10>.1>.1知識講解本節(jié)將認(rèn)識【CSS樣式】面板，介紹CSS樣式的創(chuàng)建及應(yīng)用方法。10>.1>.1知識講解1>.認(rèn)識【CSS樣式】面板2>.創(chuàng)建CSS樣式3>.應(yīng)用CSS樣式1>.認(rèn)識【CSS樣式】面板選擇【窗口】→【CSS樣式】命令或按【Shift+F11】組合鍵，打開【CSS樣式】面板，如下圖所示
3、。2>.創(chuàng)建CSS樣式創(chuàng)建CSS樣式的具體操作如下。（1）在【CSS樣式】面板中單擊按鈕，打開如下圖所示的【新建CSS規(guī)則】對話框，進行相應(yīng)的設(shè)置。2>.創(chuàng)建CSS樣式（2）在【新建CSS規(guī)則】對話框中單擊按鈕或保存樣式表文件后，打開如下圖所示的對話框。2>.創(chuàng)建CSS樣式（3）在【分類】列表框中選擇分類，右側(cè)顯示對應(yīng)的參數(shù)項，進行相應(yīng)的設(shè)置。（4）設(shè)置完成后，單擊按鈕，定義的樣式將顯示在【CSS樣式】面板中。如果要修改樣式，可以單擊【CSS樣式】面板底部的按鈕，打開【CSS規(guī)則定義】對話框；也可單擊或按鈕，在屬性列表框中添加或修改樣式屬性。
4、3>.應(yīng)用CSS樣式CSS樣式的應(yīng)用比較簡單，在窗口中選中要應(yīng)用CSS樣式的對象，在對應(yīng)的【屬性】面板的【樣式】或【類】下拉列表框中選擇需要的樣式即可。10>.1>.2典型案例——在簡介頁中應(yīng)用CSS樣式案例目標(biāo)本案例將對jie1>.html頁面中的文本和鏈接設(shè)置并應(yīng)用CSS樣式，主要練習(xí)自定義CSS樣式和使用選擇器，完成后的效果如下圖所示。10>.1>.2典型案例——在簡介頁中應(yīng)用CSS樣式操作思路：（1）將jie1>.html文檔另存為jie2>.html，以便應(yīng)用樣式。（2）分別新建>.tt1，>.dot，a:link，a:hover，
5、a:visited和a:active樣式。（3）應(yīng)用>.tt1和>.dot樣式。操作步驟請老師參照軟件講解10>.1>.2典型案例——在簡介頁中應(yīng)用CSS樣式案例小結(jié)本案例給jie2>.html文檔應(yīng)用了CSS樣式，主要練習(xí)了自定義CSS樣式和在選中【選擇器類型】欄中的單選按鈕后設(shè)置鏈接及狀態(tài)的樣式。從本案例中可以看出，定義樣式時必須明確所需定義的參數(shù)項，只有這樣才能準(zhǔn)確地對其進行設(shè)置。10>.2應(yīng)用外部樣式表文件外部樣式表文件是指把文檔中將要用到的CSS樣式全部定義，并以文件的形式存儲在站點中，以方便該站點各頁面元素使用。10>.2應(yīng)用外部
6、樣式表文件10>.2>.1知識講解10>.2>.2典型案例——給產(chǎn)品頁添加外部樣式10>.2>.1知識講解本節(jié)主要介紹創(chuàng)建及應(yīng)用外部樣式表文件的方法。10>.2>.1知識講解1>.創(chuàng)建外部樣式表文件2>.附加并應(yīng)用外部樣式表文件1>.創(chuàng)建外部樣式表文件外部樣式表文件有兩種創(chuàng)建方法：一種是直接新建外部樣式表文件，另一種是將當(dāng)前文件中的樣式導(dǎo)出為外部樣式表文件。新建外部樣式表文件的具體操作如下：1>.創(chuàng)建外部樣式表文件（1）在【新建CSS規(guī)則】對話框中，選中單選按鈕，在【名稱】下拉列表框中輸入樣式名稱（這里輸入“>.tt”），并選中下面的單選按鈕
7、。（2）單擊按鈕，打開【保存樣式表文件為】對話框，在【文件名】文本框中輸入新建的樣式表文件名稱（這里輸入“mycss”）。1>.創(chuàng)建外部樣式表文件（3）單擊按鈕，在打開的【>.tt的CSS規(guī)則定義】對話框中按10>.1節(jié)中介紹的樣式定義方法進行設(shè)置，然后單擊按鈕，mycss>.css樣式表文件中的>.tt樣式就顯示在【CSS樣式】面板中了。（4）要在樣式表文件中增加樣式，可打開【新建CSS規(guī)則】對話框，在【定義在】項后的下拉列表框中選擇【mycss】樣式表，并按新建樣式的方法建立其他樣式。1>.創(chuàng)建外部樣式表文件如果要將嵌套在其他文件中的CS
8、S樣式創(chuàng)建為外部樣式表文件，那么可以采用導(dǎo)出的方法，其具體操作如下：（1）打開要導(dǎo)出樣式的文件，選擇【文本】→【CSS樣式】→【導(dǎo)出】命令，打開【導(dǎo)出樣式為CSS文
