資源描述：
《網(wǎng)頁(yè)設(shè)計(jì)與制作ppt高職 第9章 在網(wǎng)頁(yè)中應(yīng)用CSS樣式.ppt》由會(huì)員上傳分享，免費(fèi)在線(xiàn)閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。
1、第9章在網(wǎng)頁(yè)中應(yīng)用CSS樣式CSS樣式簡(jiǎn)介任務(wù)1創(chuàng)建CSS樣式任務(wù)2設(shè)置CSS樣式任務(wù)3管理CSS樣式任務(wù)4應(yīng)用CSS高級(jí)樣式任務(wù)5本章導(dǎo)讀要?jiǎng)?chuàng)建一個(gè)漂亮的網(wǎng)頁(yè)，掌握設(shè)置CSS樣式是必不可少的，CSS樣式可以實(shí)現(xiàn)網(wǎng)頁(yè)中幾乎所有的樣式效果。CSS樣式簡(jiǎn)介創(chuàng)建CSS樣式設(shè)置CSS樣式管理CSS樣式應(yīng)用CSS高級(jí)樣式能力目標(biāo)任務(wù)1CSS樣式簡(jiǎn)介CSS是CascadingStyleSheets的縮寫(xiě)，中文譯作“層疊樣式表”，簡(jiǎn)稱(chēng)樣式表。CSS樣式可以精確地控制頁(yè)面中每個(gè)元素的字體樣式、背景、排列方式、區(qū)域尺寸和邊框等；CSS樣式還能夠簡(jiǎn)化網(wǎng)頁(yè)
2、代碼格式，使得下載顯示的速度加快。應(yīng)用外部鏈接樣式表，可以一次完成多個(gè)頁(yè)面中網(wǎng)頁(yè)內(nèi)容的顯示樣式修改，極大地減少了用戶(hù)的重復(fù)勞動(dòng)量。任務(wù)2創(chuàng)建CSS樣式Dreamweaver提供的樣式表編輯功能可以讓用戶(hù)輕松地進(jìn)行復(fù)雜的樣式設(shè)置，創(chuàng)建出適用的樣式表。創(chuàng)建樣式表有兩種方法，一種是通過(guò)“CSS樣式”面板創(chuàng)建，另一種是執(zhí)行菜單命令創(chuàng)建樣式表。階段1執(zhí)行菜單命令創(chuàng)建樣式表（1）選擇“窗口→CSS樣式”命令，打開(kāi)“CSS樣式”面板，然后選擇“文本→CSS樣式→新建”命令。（2）在打開(kāi)的對(duì)話(huà)框的“選擇器類(lèi)型”中選擇“類(lèi)”單選按鈕，在“名稱(chēng)”文本框中
3、輸入自定義樣式表名稱(chēng)。（3）在“定義在”選項(xiàng)中，可以選擇新建樣式表的作用類(lèi)型，是獨(dú)立的“新建樣式表文件”，還是只對(duì)當(dāng)前網(wǎng)頁(yè)效果設(shè)置有作用的“僅對(duì)該文檔”，然后單擊“確定”按鈕。（4）在打開(kāi)的“.style1的CSS規(guī)則定義”對(duì)話(huà)框中進(jìn)行各選項(xiàng)的設(shè)置后，單擊“確定”按鈕。（5）在“CSS樣式”面板中可以看到新創(chuàng)建好的樣式表。階段2使用CSS面板創(chuàng)建樣式表（1）選擇“窗口→CSS樣式”命令，打開(kāi)“CSS樣式”面板，然后單擊“新建CSS規(guī)則”按鈕。（2）在打開(kāi)的對(duì)話(huà)框的“選擇器類(lèi)型”中選擇“類(lèi)”單選按鈕，在“名稱(chēng)”文本框中輸入自定義樣式表名
4、稱(chēng)。（3）在“定義在”選項(xiàng)中，可以選擇新建樣式表的作用類(lèi)型，是獨(dú)立的“新建樣式表文件”，還是只對(duì)當(dāng)前網(wǎng)頁(yè)效果設(shè)置有作用的“僅對(duì)該文檔”，然后單擊“確定”按鈕。（4）在打開(kāi)的“.style1的CSS規(guī)則定義”對(duì)話(huà)框中進(jìn)行各選項(xiàng)的設(shè)置后，單擊“確定”按鈕。（5）在“CSS樣式”面板中可以看到新創(chuàng)建好的樣式表。任務(wù)3設(shè)置CSS樣式只有對(duì)CSS樣式的詳細(xì)設(shè)置進(jìn)行全面的認(rèn)識(shí)，然后掌握利用CSS樣式表在網(wǎng)頁(yè)中進(jìn)行各種效果設(shè)置的具體方法，才能很好地使用CSS樣式來(lái)美化網(wǎng)頁(yè)。階段1設(shè)置類(lèi)型（1）選擇“文本→CSS命令→新建”命令，打開(kāi)“新建CSS規(guī)則
5、”對(duì)話(huà)框，在其中新建一個(gè)CSS規(guī)則。（2）設(shè)置好新建CSS樣式表的規(guī)則屬性后，單擊“確定”按鈕，打開(kāi)新建CSS樣式表的規(guī)則定義設(shè)置對(duì)話(huà)框。字體：在其下拉列表中，選擇要設(shè)置的字體。大?。涸谄湎吕斜碇?，可以選擇字體的大小，也可以在文本框中輸入字體大小。樣式：設(shè)置字體的樣式，有正常、斜體和斜偏體3種選擇。行高：設(shè)置一個(gè)段落中每行字的行間距。粗細(xì)：設(shè)置字體的粗細(xì)。變體：設(shè)置字體的特殊輸入，有正常和小型大寫(xiě)字母兩種。大小寫(xiě)：設(shè)置字母的大小寫(xiě)。修飾：設(shè)置字體的效果，為其添加下劃線(xiàn)、上劃線(xiàn)等。顏色：設(shè)置字體顏色。（3）選擇需要的選項(xiàng)進(jìn)行設(shè)置，例如
6、在“字體”中選擇“宋體”，字體大小為12像素，行高為1.5倍行高，修飾為“無(wú)”，顏色為“#666666”。（4）單擊“確定”按鈕，即可完成“類(lèi)型”的設(shè)置。階段2設(shè)置背景（1）選擇“文本→CSS命令→新建”命令，打開(kāi)“新建CSS規(guī)則”對(duì)話(huà)框，在其中新建一個(gè)CSS規(guī)則。（2）設(shè)置好新建CSS樣式表的規(guī)則屬性后，單擊“確定”按鈕，打開(kāi)新建CSS樣式表的規(guī)則定義設(shè)置對(duì)話(huà)框，在“分類(lèi)”列表中選擇“背景”選項(xiàng)。背景顏色：在背景顏色中，設(shè)置一種顏色作為背景色背景圖像：添加背景圖像的路徑。重復(fù)：有不重復(fù)、重復(fù)、橫向重復(fù)和縱向重復(fù)4個(gè)選項(xiàng)，分別用于表示
7、背景圖像的鋪設(shè)方式。附件：有固定和滾動(dòng)兩個(gè)選項(xiàng)。選擇“固定”背景位置固定，選擇“滾動(dòng)”背景可以跟隨內(nèi)容滾動(dòng)。水平位置：設(shè)置背景圖像在水平方向的位置。垂直位置：設(shè)置背景圖像在垂直方向的位置。（3）選擇需要的選項(xiàng)進(jìn)行設(shè)置，這里在背景顏色框中設(shè)置顏色為“#CCCCCC”。（4）單擊“確定”按鈕，即可完成“背景”樣式的設(shè)置。階段3設(shè)置區(qū)塊（1）選擇“文本→CSS命令→新建”命令，打開(kāi)“新建CSS規(guī)則”對(duì)話(huà)框，在其中新建一個(gè)CSS規(guī)則。（2）設(shè)置好新建CSS樣式表的規(guī)則屬性后，單擊“確定”按鈕，打開(kāi)新建CSS樣式表的規(guī)則定義設(shè)置對(duì)話(huà)框，在“分類(lèi)
8、”列表中選擇“區(qū)塊”選項(xiàng)。單詞間距：設(shè)置單詞之間的間距。字母間距：設(shè)置字母或字符的間距，如果要減小字符間距，需要輸入一個(gè)負(fù)值。垂直對(duì)齊：指定元素的垂直對(duì)齊方式，有“基線(xiàn)下標(biāo)、上標(biāo)、頂部、文本頂對(duì)齊、中線(xiàn)對(duì)齊、底部和文本底
