資源描述：
《實(shí)驗(yàn)3CSS樣式表的設(shè)置與應(yīng)用.docx》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、實(shí)驗(yàn)3CSS樣式表的設(shè)置與應(yīng)用一、實(shí)驗(yàn)?zāi)康?．掌握CSS樣式的作用2．掌握CSS樣式的創(chuàng)建和使用二、實(shí)驗(yàn)要求1.掌握使用CSS樣式面板創(chuàng)建4種基本選擇器類型的CSS樣式。2.掌握以內(nèi)部樣式、外部樣式使用CSS樣式的方式三、實(shí)驗(yàn)內(nèi)容和步驟CSS（CascadingStyleSheet，層疊樣式表）技術(shù)是一種格式化網(wǎng)頁的標(biāo)準(zhǔn)方式，它通過設(shè)置CSS屬性使網(wǎng)頁元素獲得各種不同效果。CSS不是一種程序設(shè)計(jì)語言，而只是一種用于網(wǎng)頁排版的標(biāo)識性語言，是對現(xiàn)有HTML語言功能的補(bǔ)充和擴(kuò)展。CSS的主要功能是通過對HTML選擇器進(jìn)行設(shè)定，來
2、實(shí)現(xiàn)對網(wǎng)頁中的字體、字號、顏色、背景、圖像及其他元素的控制，使網(wǎng)頁能夠完全按照設(shè)計(jì)者的要求來顯示。CSS的定義由三部分構(gòu)成：選擇符selector、屬性property和屬性值value。其基本格式如下：selector{propertyl:valuel;property2:value2;……}其中selector（選擇符）表示需要應(yīng)用樣式的內(nèi)容，property表示由CSS標(biāo)準(zhǔn)定義的樣式屬性，value表示樣式屬性的值。準(zhǔn)備工作1以解壓縮后的“實(shí)驗(yàn)3”文件夾為根文件夾，在Dreamweaver中建立站點(diǎn)。1在Dreamw
3、eaver的首選參數(shù)中設(shè)置代碼提示功能中結(jié)束標(biāo)簽在“鍵入起始標(biāo)簽>后”2熟悉CSS樣式面板CSS樣式面板可以用來進(jìn)行新建CSS規(guī)則，編輯CSS規(guī)則，刪除CSS規(guī)則以及為網(wǎng)頁指定外部樣式表等操作。l“全部”標(biāo)簽顯示當(dāng)前網(wǎng)頁中使用的使用各種樣式選擇器的全部樣式。雙擊其中的某個(gè)樣式可以打開“CSS規(guī)則定義”窗口對樣式進(jìn)行編輯。l“正在”標(biāo)簽顯示當(dāng)前鼠標(biāo)所在處的網(wǎng)頁元素具有的CSS屬性及屬性值?？梢栽诖翱诘南路近c(diǎn)擊某一屬性值進(jìn)行修改，不必打開“CSS規(guī)則定義”窗口。在Dreamweaver中新建一個(gè)HTML文件，點(diǎn)擊“新建CSS規(guī)
4、則”按鈕，查看“新建CSS規(guī)則”對話框中選擇器器類型、選擇器名稱、選擇器位置的選項(xiàng)。操作題一：理解樣式表的作用說明通過給網(wǎng)頁文件添加CSS樣式表文件的引用，改變網(wǎng)頁元素的格式。1.在Dreamweaver中打開pm2.5.html，觀察網(wǎng)頁的HTML組成以及沒有附加CSS樣式時(shí)的表現(xiàn)。2.點(diǎn)擊CSS樣式面板的“附加樣式表”按鈕。3.在彈出的“鏈接外部樣式表”對話框中，通過“瀏覽…”找到css/pmstyle.css并鏈接到網(wǎng)頁中。4.觀察網(wǎng)頁head元素中的變化，會發(fā)現(xiàn)網(wǎng)頁中通過元素把css/pmstyle.c
5、ss引入到了網(wǎng)頁中。5.保存文件并在瀏覽器中預(yù)覽。操作題二：創(chuàng)建CSS樣式說明通過標(biāo)簽選擇器、ID選擇器、類選擇器類型的樣式定義，掌握在CSS樣式的定義和創(chuàng)建，以及各種選擇器的使用場景。完成后的效果如下：在Dreamweaver中打開“worldwideweb.html”。2.1定義h1元素的CSS樣式。目的：通過樣式定義，改變h1元素的默認(rèn)樣式，具有新的背景顏色，文字顏色，文字大小，文字字體。把光標(biāo)放在h
6、1元素上，點(diǎn)擊”CSS樣式”面板的“新建CSS規(guī)則”按鈕，設(shè)置選擇器類型為“標(biāo)簽”，選擇器名稱為”h1”，并點(diǎn)擊確定按鈕:在“CSS規(guī)則定義”窗口設(shè)置如下屬性：font-size:64px;font-family:"微軟雅黑","黑體","宋體";background-color:#69F;color:#FFF;text-align:center;padding-top:50px;padding-right:0px;padding-bottom:50px;padding-left:0px;在設(shè)置font-family時(shí)，選
7、擇“自定義字體堆?！?，從可用字體列表中選擇字體后，點(diǎn)擊加入選擇的字體。創(chuàng)建完字體堆棧后，從font-family的下拉列表中可以找到這一字體堆棧并選擇。然后，h1元素應(yīng)該變成：2.2定義blockquote元素的CSS樣式目的：通過樣式定義，改變blockquote元素的默認(rèn)樣式，具有新的內(nèi)邊距、左邊框、背景顏色。把光標(biāo)放在blockquote元素上，點(diǎn)擊”CSS樣式”面板的“新建CSS規(guī)則”按鈕，設(shè)置選擇器類型為“標(biāo)簽”，選擇器名稱為”blockquote”，并點(diǎn)擊確定按鈕。在“CSS規(guī)則定義”窗口設(shè)置如下屬性：back
8、ground-color:#EEE;border-left-width:10px;border-left-style:solid;border-left-color:#666;請觀察代碼視圖中的CSS樣式，可以看到Dreamweaver在自動生成CSS樣式時(shí)默認(rèn)不會采用簡寫形式，因此CSS代碼會比較多，
