實(shí)驗(yàn)3 CSS樣式表的設(shè)置與應(yīng)用

《實(shí)驗(yàn)3 CSS樣式表的設(shè)置與應(yīng)用》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、《網(wǎng)頁(yè)設(shè)計(jì)制作》上機(jī)實(shí)驗(yàn)實(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種基本選擇器類(lèi)型的CSS樣式。2.掌握以?xún)?nèi)部樣式、外部樣式使用CSS樣式的方式三、實(shí)驗(yàn)內(nèi)容和步驟CSS（CascadingStyleSheet，層疊樣式表）技術(shù)是一種格式化網(wǎng)頁(yè)的標(biāo)準(zhǔn)方式，它通過(guò)設(shè)置CSS屬性使網(wǎng)頁(yè)元素獲得各種不同效果。CSS不是一種程序設(shè)計(jì)語(yǔ)言，而只是一種用于網(wǎng)頁(yè)排版的標(biāo)識(shí)性語(yǔ)言，是對(duì)現(xiàn)有HTML語(yǔ)言功能的補(bǔ)充和擴(kuò)展。CSS的主要功能是通過(guò)對(duì)HTML選擇器進(jìn)行設(shè)定，來(lái)實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)中的

2、字體、字號(hào)、顏色、背景、圖像及其他元素的控制，使網(wǎng)頁(yè)能夠完全按照設(shè)計(jì)者的要求來(lái)顯示。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)。第24頁(yè)共24頁(yè)《網(wǎng)頁(yè)設(shè)計(jì)制作》上機(jī)實(shí)驗(yàn)1在Dreamweaver的

3、首選參數(shù)中設(shè)置代碼提示功能中結(jié)束標(biāo)簽在“鍵入起始標(biāo)簽>后”2熟悉CSS樣式面板CSS樣式面板可以用來(lái)進(jìn)行新建CSS規(guī)則，編輯CSS規(guī)則，刪除CSS規(guī)則以及為網(wǎng)頁(yè)指定外部樣式表等操作。第24頁(yè)共24頁(yè)《網(wǎng)頁(yè)設(shè)計(jì)制作》上機(jī)實(shí)驗(yàn)l“全部”標(biāo)簽顯示當(dāng)前網(wǎng)頁(yè)中使用的使用各種樣式選擇器的全部樣式。雙擊其中的某個(gè)樣式可以打開(kāi)“CSS規(guī)則定義”窗口對(duì)樣式進(jìn)行編輯。l“正在”標(biāo)簽顯示當(dāng)前鼠標(biāo)所在處的網(wǎng)頁(yè)元素具有的CSS屬性及屬性值。可以在窗口的下方點(diǎn)擊某一屬性值進(jìn)行修改，不必打開(kāi)“CSS規(guī)則定義”窗口。在Dreamweaver中新建一個(gè)HTML文件，點(diǎn)擊“新建CSS規(guī)則”按鈕，

4、查看“新建CSS規(guī)則”對(duì)話框中選擇器器類(lèi)型、選擇器名稱(chēng)、選擇器位置的選項(xiàng)。第24頁(yè)共24頁(yè)《網(wǎng)頁(yè)設(shè)計(jì)制作》上機(jī)實(shí)驗(yàn)操作題一：理解樣式表的作用說(shuō)明通過(guò)給網(wǎng)頁(yè)文件添加CSS樣式表文件的引用，改變網(wǎng)頁(yè)元素的格式。1.在Dreamweaver中打開(kāi)pm2.5.html，觀察網(wǎng)頁(yè)的HTML組成以及沒(méi)有附加CSS樣式時(shí)的表現(xiàn)。2.點(diǎn)擊CSS樣式面板的“附加樣式表”按鈕。3.在彈出的“鏈接外部樣式表”對(duì)話框中，通過(guò)“瀏覽…”找到css/pmstyle.css并鏈接到網(wǎng)頁(yè)中。4.觀察網(wǎng)頁(yè)head元素中的變化，會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)中通過(guò)元素把css/pmstyle.css引入

5、到了網(wǎng)頁(yè)中。5.保存文件并在瀏覽器中預(yù)覽。第24頁(yè)共24頁(yè)《網(wǎng)頁(yè)設(shè)計(jì)制作》上機(jī)實(shí)驗(yàn)操作題二：創(chuàng)建CSS樣式說(shuō)明通過(guò)標(biāo)簽選擇器、ID選擇器、類(lèi)選擇器類(lèi)型的樣式定義，掌握在CSS樣式的定義和創(chuàng)建，以及各種選擇器的使用場(chǎng)景。完成后的效果如下：第24頁(yè)共24頁(yè)《網(wǎng)頁(yè)設(shè)計(jì)制作》上機(jī)實(shí)驗(yàn)第24頁(yè)共24頁(yè)《網(wǎng)頁(yè)設(shè)計(jì)制作》上機(jī)實(shí)驗(yàn)在Dreamweaver中打開(kāi)“worldwideweb.html”。2.1定義h1元素的CSS樣式。目的：通過(guò)樣式定義，改變h1元

6、素的默認(rèn)樣式，具有新的背景顏色，文字顏色，文字大小，文字字體。把光標(biāo)放在h1元素上，點(diǎn)擊”CSS樣式”面板的“新建CSS規(guī)則”按鈕，設(shè)置選擇器類(lèi)型為“標(biāo)簽”，選擇器名稱(chēng)為”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

7、;第24頁(yè)共24頁(yè)《網(wǎng)頁(yè)設(shè)計(jì)制作》上機(jī)實(shí)驗(yàn)第24頁(yè)共24頁(yè)《網(wǎng)頁(yè)設(shè)計(jì)制作》上機(jī)實(shí)驗(yàn)在設(shè)置font-family時(shí)，選擇“自定義字體堆?！?，從可用字體列表中選擇字體后，點(diǎn)擊加入選擇的字體。創(chuàng)建完字體堆棧后，從font-family的下拉列表中可以找到這一字體堆棧并選擇。第24頁(yè)共24頁(yè)《網(wǎng)頁(yè)設(shè)計(jì)制作》上機(jī)實(shí)驗(yàn)然后，h1元素應(yīng)該變成：2.2定義blockquote元素的CSS樣式目的：通過(guò)樣式定義，改變blockquote元素的默認(rèn)樣式，具有新的內(nèi)邊距、左邊框、背景顏色。把光標(biāo)放在blockquote元素上，點(diǎn)擊”CSS樣式”面板的“新建CSS規(guī)則”按鈕，設(shè)置選擇

8、器類(lèi)型為“標(biāo)簽”，選擇器名稱(chēng)為”blo