資源描述：
《實(shí)驗(yàn)3 層疊樣式表css的應(yīng)用劉財(cái)進(jìn)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。
1、實(shí)驗(yàn)3層疊樣式表CSS的應(yīng)用姓名：劉財(cái)進(jìn)學(xué)號(hào)：6100411185班級(jí)：網(wǎng)工111班一、實(shí)驗(yàn)?zāi)康?、掌握頁面加載CSS的三種方式；2、掌握CSS美化頁面的技巧；3、了解運(yùn)用CSS統(tǒng)一站點(diǎn)風(fēng)格的技巧；4、掌握使用Frontpage或者Dreamweaver制作以及應(yīng)用CSS的技術(shù)。二、實(shí)驗(yàn)內(nèi)容1、頁面加載CSS的三種方式。通過制作一個(gè)網(wǎng)頁，其中用到三種CSS的加載方式，來掌握頁面應(yīng)用CSS的技術(shù)。2、應(yīng)用CSS美化網(wǎng)頁統(tǒng)一站點(diǎn)風(fēng)格。制作兩種風(fēng)格的樣式表，一種應(yīng)用到站點(diǎn)主頁，一種應(yīng)用到站點(diǎn)欄目頁面。三、實(shí)驗(yàn)要求1、實(shí)驗(yàn)前簡(jiǎn)單
2、設(shè)計(jì)出網(wǎng)站頁面的色彩風(fēng)格，要求主頁使用一種風(fēng)格，其它子欄目使用另一種風(fēng)格，并圍繞所設(shè)定的風(fēng)格，準(zhǔn)備所需的素材；2、理解外部樣式表、嵌入式樣式表以及內(nèi)聯(lián)式樣式的概念；3、本實(shí)驗(yàn)建立在實(shí)驗(yàn)二的基礎(chǔ)上，必須事先將實(shí)驗(yàn)二制作的站點(diǎn)頁面準(zhǔn)備妥當(dāng)。四、實(shí)驗(yàn)環(huán)境硬件環(huán)境：PC微機(jī)軟件環(huán)境：Windows操作系統(tǒng)、文本編輯器（Notepad、editplus等）或者Frontpage或者Dreamweaver五、實(shí)驗(yàn)步驟1、進(jìn)入XXX_yy站點(diǎn)目錄，創(chuàng)建test子目錄。2、在test子目錄下，新建一個(gè)頁面css3.htm，在該頁面中插入
3、一個(gè)3行1列的表格，其中表格的第一行輸入文字“應(yīng)用外部樣式”，第二行輸入文字“應(yīng)用嵌入式樣式”，第三行輸入文字“應(yīng)用內(nèi)聯(lián)式樣式”。3、在test子目錄下，新建一個(gè)外部樣式表文件style.css，該樣式表中定義一個(gè)名為firststyle的類選擇符，其樣式為字體黑體、24磅、色彩#CC0000、段落格式居中、背景色#ECECEC。將css3.htm頁面中表格第一行單元格應(yīng)用style.css外部樣式表中的樣式firststyle。1、接下來在css3.htm頁面中加入嵌入式樣式表，該樣式表中定義一個(gè)名為secondsty
4、le的類選擇符，其樣式可以參照firststyle來自行設(shè)計(jì)，但注意不能一樣。將css3.htm頁面中表格第二行的單元格應(yīng)用嵌入式樣式表中的樣式secondstyle；2、最后，對(duì)于css3.htm頁面中表格第三行的單元格應(yīng)用內(nèi)聯(lián)式樣式，其樣式參照前面自行設(shè)計(jì)，但注意不能一樣。圖3-1css3.htm參考效果圖3、在XXX_yy站點(diǎn)目錄下，將準(zhǔn)備好的素材拷貝到images子目錄。4、打開站點(diǎn)主頁index.htm，在頁面中加入嵌入式樣式表，樣式表中定義的內(nèi)容必須包括網(wǎng)頁的背景色、背景圖片（可選）和前景色，表格單元格的各種
5、樣式定義，超鏈接不同狀態(tài)時(shí)的樣式，其它樣式（如滾動(dòng)條）依據(jù)自己喜好選擇，所定義的樣式則依據(jù)所設(shè)計(jì)的主頁風(fēng)格，最后根據(jù)需要修改部分頁面代碼，使得頁面能夠應(yīng)用這些樣式。5、新建一個(gè)外部樣式表文件cata.css，該樣式表將依據(jù)所設(shè)計(jì)的欄目頁面風(fēng)格來定義樣式，樣式表所要定義的內(nèi)容參照上一條中的規(guī)定，并最終將該樣式應(yīng)用于各個(gè)欄目頁面。6、瀏覽主頁、欄目頁面，觀察結(jié)果。六、實(shí)驗(yàn)代碼css3.htm代碼：樣式</p><p>6、表的應(yīng)用.secondstyle{font-family:"隸書";font-size:36pt;color:blue;text-align:left;background-color:#FFFF00;}應(yīng)用外部樣式7、tr>
應(yīng)用嵌入式樣式
應(yīng)用內(nèi)聯(lián)式樣式
