CSS樣式制作動(dòng)感文字

《CSS樣式制作動(dòng)感文字》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、課堂講解上機(jī)實(shí)戰(zhàn)第11課CSS樣式課堂講解CSS樣式簡(jiǎn)介創(chuàng)建CSS樣式設(shè)置CSS樣式管理CSS樣式應(yīng)用CSS濾鏡效果擴(kuò)展的CSS支持CSS樣式簡(jiǎn)介CSS（CascadingStyleSheets）樣式又叫層疊樣式，使用它可以對(duì)網(wǎng)頁中的布局元素，如表格、字體、顏色、背景、鏈接效果和其他圖文效果實(shí)現(xiàn)更加精確的控制。CSS樣式不僅可以在一個(gè)頁面中使用，而且可以用于其他多個(gè)頁面。創(chuàng)建CSS樣式自定義CSS樣式HTML標(biāo)簽樣式CSS選擇器樣式自定義CSS樣式自定義CSS樣式可以對(duì)任何文本塊或文本區(qū)域進(jìn)行且需要用戶手動(dòng)進(jìn)行應(yīng)用。HTML標(biāo)簽樣式該樣式是對(duì)現(xiàn)有的

2、HTML標(biāo)記進(jìn)行重新定義，當(dāng)創(chuàng)建或改變?cè)摌邮綍r(shí)，所有應(yīng)用了該樣式的文本格式都會(huì)自動(dòng)更新。CSS選擇器樣式該樣式是對(duì)某些特定的標(biāo)記組合進(jìn)行重新定義，如所有包含了特定ID屬性的標(biāo)記，設(shè)置完成此樣式后Dreamweaver會(huì)自動(dòng)應(yīng)用該樣式。設(shè)置CSS樣式類型設(shè)置背景設(shè)置區(qū)塊設(shè)置方框設(shè)置邊框設(shè)置列表設(shè)置定位設(shè)置擴(kuò)展設(shè)置類型設(shè)置背景設(shè)置“背景”設(shè)置包括設(shè)置背景顏色、選擇背景圖像、設(shè)置背景圖像是否重復(fù)及重復(fù)的方式、背景圖像是否滾動(dòng)、背景圖像相對(duì)于應(yīng)用樣式元素的位置。區(qū)塊設(shè)置“區(qū)塊”指網(wǎng)頁中文本、圖像和層等替代元素，主要用于控制塊中元素的間距和對(duì)齊方式等。方框設(shè)

3、置“方框”設(shè)置可以定義控制元素在頁面上的放置方式和屬性等。邊框設(shè)置“邊框”設(shè)置包括定義元素周圍邊框的樣式、寬度及顏色等。列表設(shè)置“列表”設(shè)置主要用于控制列表內(nèi)各項(xiàng)元素的屬性，如項(xiàng)目符號(hào)類型、項(xiàng)目符號(hào)圖像和項(xiàng)目符號(hào)位置。定位設(shè)置“定位”設(shè)置主要用于控制網(wǎng)頁元素，特別是層的位置。擴(kuò)展設(shè)置“擴(kuò)展”設(shè)置主要用于為打印的頁面設(shè)置分頁和為網(wǎng)頁元素設(shè)置視覺效果。管理CSS樣式修改CSS樣式刪除CSS樣式復(fù)制CSS樣式重命名層疊樣式應(yīng)用CSS樣式表自定義CSS樣式的應(yīng)用鏈接外部CSS樣式修改CSS樣式創(chuàng)建層疊樣式后，可以修改樣式中的某些參數(shù)。刪除CSS樣式在“CS

4、S樣式”面板中，選擇要?jiǎng)h除的樣式名稱。單擊面板底部的“刪除”按鈕即可將樣式刪除。復(fù)制CSS樣式復(fù)制一個(gè)已經(jīng)創(chuàng)建完成的CSS樣式，再對(duì)其參數(shù)進(jìn)行修改，即可創(chuàng)建一個(gè)全新的CSS樣式，這樣可以提高工作效率。重命名層疊樣式自定義CSS樣式的應(yīng)用在CSS樣式中的HTML標(biāo)簽樣式和CSS選擇器樣式是自動(dòng)應(yīng)用的，只有自定義層疊樣式需要用戶手動(dòng)操作。鏈接外部CSS樣式通過鏈接外部CSS樣式可將其他網(wǎng)頁中的樣式應(yīng)用到當(dāng)前網(wǎng)頁中。應(yīng)用CSS濾鏡效果CSS濾鏡是CSS的一個(gè)擴(kuò)展，能把可視化的濾鏡和轉(zhuǎn)換效果添加到一個(gè)標(biāo)準(zhǔn)的HTML元素上，使應(yīng)用樣式的對(duì)象產(chǎn)生模糊、反轉(zhuǎn)、發(fā)

5、光等特殊效果。在Dreamweaver8中，可直接在對(duì)話框中添加濾鏡的參數(shù)，而不用編寫復(fù)雜的代碼。應(yīng)用CSS濾鏡效果1.打開網(wǎng)頁文檔。2.執(zhí)行文本/CSS樣式/新建命令。3.打開“新建CSS規(guī)則”對(duì)話框，在對(duì)話框中“選擇器類型”設(shè)置為“類”，在“名稱”下拉列表中輸入.gy，“定義在”設(shè)置為“僅對(duì)該文檔?！?.單擊“確定”按鈕，打開“.gy的CSS規(guī)則定義”對(duì)話框，在對(duì)話框中的“分類”列表框中選擇“擴(kuò)展”選項(xiàng)，在“濾鏡”下拉列表中選擇GLOW(Color=?,strength=?)選項(xiàng)。應(yīng)用CSS濾鏡效果5.將選項(xiàng)中Color設(shè)置為#CC3300，S

6、trength設(shè)置為150。6.單擊“確定”按鈕，新建樣式。選中要應(yīng)用樣式的文字所在的單元格，在“屬性”面板中的“樣式”下拉列表中選中新建的樣式。Color設(shè)置邊緣光暈的顏色，可以是顏色英文名稱或以十六進(jìn)制數(shù)設(shè)定；Strength設(shè)置邊緣光暈的強(qiáng)度大小，設(shè)置從1到255，數(shù)值越大強(qiáng)度越大。應(yīng)用CSS濾鏡效果Dreamweaver中CSS濾鏡只能應(yīng)用于有局域限制的對(duì)象，如表格、單元格、圖片等，而不能直接用于文字，所以要將需要增加特效的文字事先放在表格中，然后讓表格應(yīng)用CSS樣式，從而使文字產(chǎn)生特殊效果。應(yīng)用CSS濾鏡效果Shadow濾鏡可以使文字產(chǎn)生

7、陰影效果。1.打開網(wǎng)頁文檔。2.執(zhí)行文本/CSS樣式/新建命令。3.打開“新建CSS規(guī)則”對(duì)話框，在對(duì)話框中“選擇器類型”設(shè)置為“類”，在“名稱”下拉列表中輸入.yy，“定義在”設(shè)置為“僅對(duì)該文檔。”4.單擊“確定”按鈕，打開“.yy的CSS規(guī)則定義”對(duì)話框，在對(duì)話框中的“分類”列表框中選擇“擴(kuò)展”選項(xiàng)，在“濾鏡”下拉列表中選擇Shadow(Color=?,Direction=?)選項(xiàng)。應(yīng)用CSS濾鏡效果5.將選項(xiàng)中Color設(shè)置為#FF0000，Direction設(shè)置為120。6.單擊“確定”按鈕，新建樣式。選中要應(yīng)用樣式的文字所在的單元格，在“

8、屬性”面板中的“樣式”下拉列表中選中新建的樣式。Shadow濾鏡可以使文字產(chǎn)生陰影效果。Shadow濾鏡的格式Shadow