第12節(jié)css樣式的定義與使用

1、第12節(jié) CSS樣式的定義與使用,武漢紡織大學(xué)傳媒學(xué)院cm.wtu.edu.cn,2024/3/16,1,傳媒學(xué)院,1、回顧概念,樣式（也叫樣式表）行樣式例子武漢既是定義也是使用,2024/3/16,2,傳媒學(xué)院,2、內(nèi)部樣式,內(nèi)部樣式表定義在HTML文件的head部分，該HTML頁(yè)面內(nèi)所有標(biāo)簽都可使用該樣式來(lái)美化其包含的內(nèi)容例子定義（這些樣式代碼一般放在網(wǎng)頁(yè)的head部分）使用舉例此行文字被內(nèi)部的

2、樣式定義為藍(lán)色顯示說(shuō)明標(biāo)簽是用來(lái)表明進(jìn)行樣式定義，其type屬性是指該標(biāo)簽為CSS定義,2024/3/16,3,傳媒學(xué)院,Q：除藍(lán)色，18像素的大小外，還有什么效果？,2、使用DW定義內(nèi)部樣式,開始定義,2024/3/16,4,傳媒學(xué)院,在彈出的CSS規(guī)則定義面板選擇兩個(gè)屬性及取值后面會(huì)詳細(xì)講解怎么使用,2024/3/16,5,傳媒學(xué)院,確定后，DW會(huì)自動(dòng)地將選定的規(guī)則翻譯成CSS代碼放置在網(wǎng)頁(yè)的head部分由dw自動(dòng)創(chuàng)

3、建的css代碼，使用方式和前面的描述一樣如果想修改樣式，可以把光標(biāo)放置在樣式代碼區(qū)域，然后點(diǎn)擊DW的右邊的“編輯樣式”按鈕會(huì)返回CSS規(guī)則定義面板,2024/3/16,6,傳媒學(xué)院,使用css,3、外部樣式,CSS樣式不定義在網(wǎng)頁(yè)中，而是單獨(dú)定義在一個(gè)樣式文件中，網(wǎng)頁(yè)鏈接外部樣式表后就可以使用外部樣式表所定義的CSS樣式了好處：同一個(gè)樣式可以被多個(gè)網(wǎng)頁(yè)使用，而無(wú)需重復(fù)定義定義的方法和內(nèi)部樣式表一樣，只是不需要和隱藏標(biāo)記了例子：比

4、如外部樣式文件style.css文件的內(nèi)容如下 .s1{font-size:18px; color:red}外部樣式文件以.css結(jié)尾,2024/3/16,7,傳媒學(xué)院,外部樣式的使用使用前必須先鏈接外部樣式文件網(wǎng)頁(yè)鏈接外部樣式表文件的語(yǔ)法例子在標(biāo)簽中使用外部樣式和使用內(nèi)部樣式的方法一樣例如Welcome to WTU,2024/3/16,8,傳媒學(xué)院,4、利用DW創(chuàng)建外部樣式表,點(diǎn)擊DW的“新建CSS規(guī)則”按鈕開始

5、創(chuàng)建在彈出的界面選擇“定義在 新建樣式表文件”選項(xiàng)隨后會(huì)彈出一個(gè)界面要求輸入外部樣式表文件的路徑和文件名，完成就會(huì)彈出CSS樣式規(guī)則定義面板,2024/3/16,9,傳媒學(xué)院,設(shè)置CSS規(guī)則后（設(shè)置方式和內(nèi)部樣式的設(shè)置一樣），樣式定義將被保存在外部樣式表文件中；而且會(huì)自動(dòng)增加一個(gè)當(dāng)前網(wǎng)頁(yè)到該樣式表文件的鏈接，而且dw會(huì)自動(dòng)打開該外部樣式文件,,2024/3/16,10,傳媒學(xué)院,5、理解網(wǎng)頁(yè)和外部樣式表文件的關(guān)系,網(wǎng)頁(yè)中放置的是H

6、TML標(biāo)簽和所要呈現(xiàn)的內(nèi)容外部樣式表文件中保存的是CSS樣式的定義網(wǎng)頁(yè)通過(guò)鏈接外部樣式表就可以使用樣式文件中的CSS定義來(lái)美化網(wǎng)頁(yè)這兩個(gè)不同文件的存儲(chǔ)位置要理解如果是要手工書寫網(wǎng)頁(yè)到外部樣式表的鏈接，要注意路徑，在DW中可通過(guò)瀏覽按鈕來(lái)找到外部樣式表文件,2024/3/16,11,傳媒學(xué)院,6、思考下列問(wèn)題,如果已經(jīng)創(chuàng)建了一個(gè)外部樣式表，現(xiàn)在要?jiǎng)?chuàng)建一個(gè)新的CSS規(guī)則，應(yīng)該怎么辦？光標(biāo)在網(wǎng)頁(yè)中時(shí)，如何新建？光標(biāo)在外部樣式表中時(shí)

7、，如何新建？如何修改外部樣式在網(wǎng)頁(yè)中如何修改？在外部樣式表中如何修改？,2024/3/16,12,傳媒學(xué)院,作業(yè)1,使用Dreamweaver創(chuàng)建內(nèi)部樣式，并通過(guò)規(guī)則定義面板定義三個(gè)樣式，1.設(shè)置字體大小為24px，顏色為紅色；2.設(shè)置字體大小為16px，顏色為藍(lán)色；3.設(shè)置字體大小為24px，顏色為白色，背景顏色為綠色。并在font、sup標(biāo)簽中通過(guò)class屬性使用定義好的樣式，達(dá)到如下效果,2024/3/16,13,傳媒學(xué)院