5CSS第一課-添加一些樣式ppt課件

1、*開(kāi)始學(xué)習(xí)開(kāi)始學(xué)習(xí)CSS教師：我們?cè)谘b修房子這是臥室的設(shè)計(jì)bedroom drapes:blue; carpet:wool shag;浴室也需要好好設(shè)計(jì)一下bathroom tile:line white; drapes:pink;*使用使用CSSCSS設(shè)計(jì)設(shè)計(jì)HTMLHTML：pbackground-color:red;你要做的第一件事是選擇你要添加你要做的第一件事是選擇你要添加樣式的元素，比如樣式的元素，比如元素。留意，元素。留意，在在CSSCSS中，元素名稱的兩邊不加中，元素名稱的兩邊不加。接著你應(yīng)指定你所添加樣式的屬性，接著你應(yīng)指定你所添加樣式的屬性，比如說(shuō)比如說(shuō)元素的背景顏色。元素的

2、背景顏色。你要將背景顏色你要將背景顏色設(shè)置為紅色。設(shè)置為紅色。將將元素的所有元素的所有樣式置于樣式置于 內(nèi)。內(nèi)。在屬性和它的值在屬性和它的值之間有一個(gè)冒號(hào)。之間有一個(gè)冒號(hào)。最后加一個(gè)分號(hào)。最后加一個(gè)分號(hào)。我們稱整個(gè)過(guò)程我們稱整個(gè)過(guò)程為一個(gè)規(guī)則。為一個(gè)規(guī)則。*添加更多樣式添加更多樣式p background-color:red;border: 1px solid gray;元素將有一個(gè)元素將有一個(gè)邊框。邊框。寬度為一個(gè)像素，寬度為一個(gè)像素，實(shí)績(jī)，灰色。實(shí)績(jī)，灰色。你要做的就是再添加你要做的就是再添加一個(gè)屬性并給它賦值。一個(gè)屬性并給它賦值。*問(wèn)題：?jiǎn)栴}：*每一個(gè)元素都擁有相同的樣式嗎？或者說(shuō)，我可

3、以把兩個(gè)段落設(shè)置成不同的顏色嗎？*可以在一個(gè)元素上設(shè)置什么屬性呢？*為什么要用另一種語(yǔ)言定義這些樣式，而不用HTML呢？既然我們用HTML編寫(xiě)元素，那為什么不直接用HTML寫(xiě)樣式呢？*在你的在你的HTMLHTML中引入中引入CSSCSSHead First Lounge.為了在為了在HTMLHTML中直接添加中直接添加CSSCSS樣式，必樣式，必須在須在元素里添加樣式開(kāi)始和元素里添加樣式開(kāi)始和結(jié)束標(biāo)記：結(jié)束標(biāo)記：。你的你的CSSCSS規(guī)則放在這個(gè)位置。規(guī)則放在這個(gè)位置。*給茶館網(wǎng)站添加樣式給茶館網(wǎng)站添加樣式 p color:maroon; 用來(lái)改變字體顏色的屬性稱為用來(lái)改變字體顏色的屬性稱為

4、“color”“color”（你也許認(rèn)為應(yīng)該是（你也許認(rèn)為應(yīng)該是 “font-color“font-color或或“text-color”“text-color”，但它不是）。但它不是）。在你的HTML中引入CSS*為標(biāo)題添加樣式為標(biāo)題添加樣式h1 font-family:sans-serif; color: gray;h2 font-family:sans-serif; color: gray;若想要為多個(gè)元素寫(xiě)同一個(gè)規(guī)則，若想要為多個(gè)元素寫(xiě)同一個(gè)規(guī)則，只需要在選擇符之間加逗號(hào)，如只需要在選擇符之間加逗號(hào)，如“h1,h2”“h1,h2”。h1,h2 font-family:sans-seri

5、f; color: gray;p color:maroon;p color:maroon;*給歡迎詞下劃線給歡迎詞下劃線 border-bottom:1px solid black;我們將把下劃設(shè)置成我們將把下劃設(shè)置成1 1像素寬的像素寬的黑線實(shí)體。黑線實(shí)體。*指定只針對(duì)指定只針對(duì)的規(guī)則的規(guī)則h1,h2 font-family:sans-serif; color:gray;h1 border-bottom:1px solid black;p color:maroon;第一個(gè)規(guī)則指定第一個(gè)規(guī)則指定h1h1、h2h2的共同屬性。的共同屬性。第二個(gè)規(guī)則只給第二個(gè)規(guī)則只給h1h1添加另一個(gè)屬性。添加另

6、一個(gè)屬性。*問(wèn)題：?jiǎn)栴}：*這種方法的優(yōu)點(diǎn)是什么呢？對(duì)每個(gè)元素分開(kāi)設(shè)計(jì)，不是更利于我們區(qū)分各個(gè)元素的樣式嗎？*選擇符選擇符我們稱之為選擇符。我們稱之為選擇符。h1 color:gray;h1,h2 color:gray;這個(gè)樣式適用于選這個(gè)樣式適用于選擇符擇符( (此時(shí)，為此時(shí)，為元素元素) )選擇的元素。選擇的元素。另一個(gè)選擇符，這個(gè)樣式適用于另一個(gè)選擇符，這個(gè)樣式適用于元素和元素和元素。元素。*創(chuàng)建創(chuàng)建CSSCSS文件文件h1, h2 font-family: sans-serif; color: gray;h1 border-bottom: 1px solid black;p color:

7、 maroon;你的你的“l(fā)oung.css“l(fā)oung.css文件應(yīng)該像這樣，文件應(yīng)該像這樣，記住，沒(méi)有記住，沒(méi)有標(biāo)志。標(biāo)志。*把把“l(fā)ounge.html“l(fā)ounge.html鏈接到外部樣式表鏈接到外部樣式表 Head First Lounge .這是鏈接到外部樣這是鏈接到外部樣式表的式表的HTMLHTML。這里不需要這里不需要元元素了，已經(jīng)被刪除。素了，已經(jīng)被刪除。*鏈接外部樣式表語(yǔ)法鏈接外部樣式表語(yǔ)法使用使用linklink元素來(lái)鏈元素來(lái)鏈接外部信息。接外部信息。relrel屬性指明屬性指明HTMLHTML文件和你要鏈接的東西之文件和你要鏈接的東西之間的關(guān)系，我們要鏈接到一個(gè)樣式表，

8、因間的關(guān)系，我們要鏈接到一個(gè)樣式表，因此我們將屬性值設(shè)為此我們將屬性值設(shè)為“stylesheet”“stylesheet”。信息類型是信息類型是“text/css”,“text/css”,也就是一個(gè)樣式表。也就是一個(gè)樣式表。樣式表定位于一個(gè)樣式表定位于一個(gè)hrefhref現(xiàn)在我們使用的是相對(duì)現(xiàn)在我們使用的是相對(duì)鏈接，但它可以是一個(gè)完鏈接，但它可以是一個(gè)完整的整的URLURL）。）。LinkLink是一個(gè)空元素。是一個(gè)空元素。*把其它兩個(gè)文件鏈接到外部樣式表把其它兩個(gè)文件鏈接到外部樣式表注意相對(duì)路徑的書(shū)寫(xiě)。*了解繼承了解繼承留意，當(dāng)我們向元素添加 font-faminly屬性時(shí)，存在于元素中的元

9、素的字體也會(huì)受到影響。中的元素從元素繼承了 font-family樣式。如果沒(méi)有繼承，你將不得不為整個(gè)網(wǎng)站里所有段落的每個(gè)行內(nèi)元素添加CSS規(guī)則。*繼承是如何起作用的繼承是如何起作用的如果我們?cè)O(shè)置所有元素字體，這里可以看到所有受它影響的元素。*如果我們把字體屬性上移會(huì)有什么結(jié)果？如果我們把字體屬性上移會(huì)有什么結(jié)果？我們把字體屬性從段落和我們把字體屬性從段落和標(biāo)題移到標(biāo)題移到元素。元素。*繼承的覆蓋繼承的覆蓋通過(guò)把font-family屬性上移到body從而設(shè)置了整個(gè)網(wǎng)頁(yè)的字體。但如果你不想在所有的元素中都使用sans-serif字體呢？比如你想在元素中使用serif字體。但你想要在但你想要在元

10、素中使用元素中使用serifserif字體。你必須用字體。你必須用CSSCSS規(guī)規(guī)則來(lái)覆蓋繼承屬性。則來(lái)覆蓋繼承屬性。body font-family: sans-serif;h1, h2 color: gray;h1 border-bottom: 1px solid black;p color: maroon;em font-family: serif;*問(wèn)題：?jiǎn)栴}：*當(dāng)我覆蓋繼承時(shí)，瀏覽器如何知道應(yīng)該對(duì)元素執(zhí)行哪一條規(guī)則？*我如何知道哪些CSS屬性可被繼承，哪些不能被繼承呢？*CSS里可以寫(xiě)注釋嗎？*類類要把元素添加到一個(gè)類中，只需添加要把元素添加到一個(gè)類中，只需添加一個(gè)帶有類名如一個(gè)帶有

11、類名如“greentea”“greentea”）的）的“class“class屬性。屬性。*創(chuàng)建類選擇符創(chuàng)建類選擇符首先是首先是p p選擇選擇符。符。然后一個(gè)然后一個(gè)“.”“.”來(lái)指定一個(gè)類。來(lái)指定一個(gè)類。最后是類的最后是類的名稱。名稱。這是規(guī)則這是規(guī)則將綠茶將綠茶類里所有段落的文本類里所有段落的文本設(shè)置為綠色設(shè)置為綠色這個(gè)選擇符選擇綠這個(gè)選擇符選擇綠茶類里的所有段落。茶類里的所有段落。*進(jìn)一步了解類進(jìn)一步了解類只需添加另一個(gè)選擇符來(lái)處理綠只需添加另一個(gè)選擇符來(lái)處理綠茶類里的茶類里的?，F(xiàn)在這?，F(xiàn)在這個(gè)規(guī)則將適用于綠茶類里的個(gè)規(guī)則將適用于綠茶類里的元素和元素和元素元素如果你省略所有的元素名稱，而

12、如果你省略所有的元素名稱，而用一個(gè)句點(diǎn)并且后接一個(gè)類名，用一個(gè)句點(diǎn)并且后接一個(gè)類名，那么這個(gè)規(guī)則將會(huì)適用于該類內(nèi)那么這個(gè)規(guī)則將會(huì)適用于該類內(nèi)的所有成員。的所有成員。*一個(gè)元素可以加入多個(gè)類一個(gè)元素可以加入多個(gè)類將每個(gè)類名賦給將每個(gè)類名賦給“class“class屬性值，屬性值，類名之間用一個(gè)空類名之間用一個(gè)空格隔開(kāi)。順序無(wú)關(guān)格隔開(kāi)。順序無(wú)關(guān)緊要。緊要。*應(yīng)用樣式的原則應(yīng)用樣式的原則*首先，是否有選擇符選擇你的元素。首先，是否有選擇符選擇你的元素。*其次，繼承來(lái)的屬性。其次，繼承來(lái)的屬性。*還是沒(méi)有找到，那么使用默認(rèn)值。還是沒(méi)有找到，那么使用默認(rèn)值。*如果有多個(gè)選擇符選擇一個(gè)元素呢？如果有多個(gè)選

13、擇符選擇一個(gè)元素呢？*我們稱之為我們稱之為“沖突沖突”。哪個(gè)規(guī)則能勝出呢？如果。哪個(gè)規(guī)則能勝出呢？如果一個(gè)規(guī)則比另一個(gè)規(guī)則更具體，那它將勝出。一個(gè)規(guī)則比另一個(gè)規(guī)則更具體，那它將勝出。*如果還是無(wú)法確定，則用最靠后的規(guī)則起作用。如果還是無(wú)法確定，則用最靠后的規(guī)則起作用。*舉例舉例這是選擇所有段落元素的規(guī)則。這是選擇所有段落元素的規(guī)則。這條規(guī)則選擇了綠茶類這條規(guī)則選擇了綠茶類的所有成員。此規(guī)則比的所有成員。此規(guī)則比前一條稍微具體點(diǎn)。前一條稍微具體點(diǎn)。這條規(guī)則只選擇了綠茶類這條規(guī)則只選擇了綠茶類的段落。比前一條更具體。的段落。比前一條更具體。這些規(guī)則只選擇了某個(gè)特這些規(guī)則只選擇了某個(gè)特定類里的段落。因此它們定類里的段落。因此它們的具體性與的具體性與p.greenteap.greentea相相同。同。發(fā)生沖突時(shí)，如果規(guī)則的具體性發(fā)生沖突時(shí)，如果規(guī)則的具體性相同，最靠后的規(guī)則起作用。相同，最靠后的規(guī)則起作用。*要點(diǎn)：要點(diǎn)：*CSS中簡(jiǎn)單的表達(dá)式，稱為規(guī)則？*每個(gè)規(guī)則為選定的HTML元素提供樣式。*一個(gè)典型的規(guī)則包括一個(gè)選擇符、若干屬性和屬性值。*選擇符指定對(duì)哪些元素應(yīng)用規(guī)則。*每個(gè)屬性聲明以一個(gè)分號(hào)結(jié)束。*一個(gè)規(guī)則里的所有屬性和屬性值包含在括號(hào)之間。*你可以用元素名作為選擇符來(lái)選擇任意元素。*你可以一次選擇多個(gè)元素，只需要用逗號(hào)把那些元素名隔開(kāi)就可以了。*在HTM