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