CSS樣式表作業(yè)

《CSS樣式表作業(yè)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、CSS樣式作業(yè)作業(yè)須知：首先，在zuoye2文件夾下，新建03.htm，并在網(wǎng)頁(yè)中輸入自己的學(xué)號(hào)和姓名。以下所有操作均在03.htm中完成。作業(yè)完成后，將zuoye2文件夾整體壓縮，登錄遠(yuǎn)程教育網(wǎng)通過(guò)網(wǎng)上提交作業(yè)。最終效果如下圖所示：一、修改網(wǎng)頁(yè)背景可以修改某一對(duì)象的背景，如文本背景、表格背景、或網(wǎng)頁(yè)背景等。背景可以使用顏色，也可以使用圖片。建立網(wǎng)頁(yè)背景：?jiǎn)螕舭粹o，選擇“重定義HTML標(biāo)簽”，再選擇body標(biāo)簽，再選擇合適的背景圖片。（該背景圖片必須以英文命名并存放在zuoye2文件夾下，方便提交作業(yè)）。二.更改超

2、鏈接的樣式不同的超鏈接效果,可以通過(guò)CSS“選擇器類型”中的“高級(jí)（ID、上下文選擇器等）”中進(jìn)行設(shè)置，有四個(gè)選項(xiàng)可供選擇：na:link：未訪問(wèn)的鏈接。na:visited：已訪問(wèn)過(guò)的超鏈接。na:hover：鼠標(biāo)指針移到超鏈接文字上時(shí)的超鏈接。na:active：正在訪問(wèn)的超鏈接。利用CSS樣式更改超鏈接樣式的操作為：l在網(wǎng)頁(yè)中輸入文本“應(yīng)用CSS樣式設(shè)置超鏈接”，選中這段文字，并在屬性面板的鏈接地址處輸入“#”l在CSS樣式面板中，單擊按鈕，打開(kāi)“新建CSS規(guī)則”對(duì)話框，在“選擇器類型”選擇“高級(jí)”，在“選擇

3、器”中選擇“a:link”。l“定義在”選擇“僅對(duì)該文檔”，單擊“確定”，打開(kāi)“a:link的CSS規(guī)則定義”對(duì)話框。l在“類型”分類中，設(shè)置字體：幼圓，顏色：#00CC00，修飾：無(wú)（無(wú)下劃線）。l單擊“確定”按鈕，完成a:link樣式的創(chuàng)建。l重復(fù)以上操作分別設(shè)置：na:visited，字體：華文行楷，顏色：#660033，修飾：無(wú)（無(wú)下劃線）。na:hover：字體：幼圓，顏色：#FF0000，修飾：下劃線。na:active：字體：華文新魏，樣式：斜體，顏色：#0000CC，修飾：下劃線。l保存并在瀏覽器中

4、預(yù)覽網(wǎng)頁(yè)，效果如圖所示。三.改變鼠標(biāo)形狀改變鼠標(biāo)的形狀是應(yīng)用"擴(kuò)展"類別中的光標(biāo)屬性來(lái)設(shè)置的，操作為：l在網(wǎng)頁(yè)中插入一個(gè)如圖所示的表格鼠標(biāo)狀態(tài)手形鼠標(biāo)狀態(tài)十字鼠標(biāo)狀態(tài)文本鼠標(biāo)狀態(tài)等待鼠標(biāo)狀態(tài)幫助l在CSS樣式面板中，單擊按鈕，打開(kāi)“新建CSS規(guī)則”對(duì)話框，如圖所示。l輸入CSS樣式的名稱".mouse1"，“選擇器類型”選擇“類”選項(xiàng)，“定義在”選擇“僅對(duì)該文檔”。l點(diǎn)擊“確定”，打開(kāi)“.mouse1的CSS規(guī)則定義”對(duì)話框，切換到“擴(kuò)展”分類，如圖。l在“視覺(jué)效果”的“光標(biāo)”的下拉列表中選擇“hand”，單擊“確

5、定”按鈕，樣式建立完成。l然后選中表格的第一行，在“在屬性面板”的“樣式”的下拉列表中選擇“mouse1”應(yīng)用。l按照上述方法，分別做.mouse2(十字crosshair)，.mouse3(文本text),.mouse4(等待wait),.mouse5(幫助help)l保存網(wǎng)頁(yè)，在瀏覽器中鼠標(biāo)指向圖像測(cè)試效果。四.應(yīng)用CSS模糊效果濾鏡在網(wǎng)頁(yè)中插入兩幅相同的圖像（該圖片必須以英文命名并存放在zuoye2文件夾下，方便提交作業(yè)）。l在CSS樣式面板中，單擊按鈕，打開(kāi)“新建CSS規(guī)則”對(duì)話框。如圖所示。l名稱中輸入“

6、.blur”，“選擇器類型”選擇“類”，“定義在”選擇“僅對(duì)該文檔”。l設(shè)置完成后，單擊“確定”按鈕，打開(kāi)“.blur的CSS規(guī)則定義”對(duì)話框，切換到“擴(kuò)展”分類。l在“濾鏡”中選擇Blur濾鏡，參數(shù)設(shè)置如下：Blur(Add=true,Direction=135,Strength=20)。l設(shè)置完成后，單擊“確定”，創(chuàng)建的CSS樣式出現(xiàn)在CSS面板。l選中文檔中的右側(cè)圖像，在屬性檢查器的“類”的下拉列表中選擇“blur”。l保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)，效果如圖所示。