CSS第一課-添加一些樣式.ppt

,開始學(xué)習(xí)CSS,教師： Tel：,我們?cè)谘b修房子,這是臥室的設(shè)計(jì) bedroom drapes:blue; carpet:wool shag; ,浴室也需要好好設(shè)計(jì)一下 bathroom tile:line white; drapes:pink; ,使用CSS設(shè)計(jì)HTML：,p background-color:red; ,你要做的第一件事是選擇你要添加樣式的元素，比如元素。注意，在CSS中，元素名稱的兩邊不加。,接著你應(yīng)指定你所添加樣式的屬性，比如說(shuō)元素的背景顏色。,你要將背景顏色設(shè)置為紅色。,將元素的所有樣式置于 內(nèi)。,在屬性和它的值之間有一個(gè)冒號(hào)。,最后加一個(gè)分號(hào)。,我們稱整個(gè)過(guò)程為一個(gè)規(guī)則。,添加更多樣式,p background-color:red; border: 1px solid gray; ,元素將有一個(gè)邊框。,寬度為一個(gè)像素，實(shí)績(jī)，灰色。,你要做的就是再添加一個(gè)屬性并給它賦值。,問(wèn)題：,每一個(gè)元素都擁有相同的樣式嗎？或者說(shuō)，我可以把兩個(gè)段落設(shè)置成不同的顏色嗎？ 可以在一個(gè)元素上設(shè)置什么屬性呢？ 為什么要用另一種語(yǔ)言定義這些樣式，而不用HTML呢？既然我們用HTML編寫元素，那為什么不直接用HTML寫樣式呢？,在你的HTML中引入CSS, Head First Lounge ,為了在HTML中直接添加CSS樣式，必須在元素里添加樣式開始和結(jié)束標(biāo)記：。,你的CSS規(guī)則放在這個(gè)位置。,給茶館網(wǎng)站添加樣式, p color:maroon; ,用來(lái)改變字體顏色的屬性稱為 “color”（你也許認(rèn)為應(yīng)該是 “font-color”或“text-color”，但它不是）。,在你的HTML中引入CSS,為標(biāo)題添加樣式,h1 font-family:sans-serif; color: gray; h2 font-family:sans-serif; color: gray; ,若想要為多個(gè)元素寫同一個(gè)規(guī)則，只需要在選擇符之間加逗號(hào)，如“h1,h2”。,h1,h2 font-family:sans-serif; color: gray; ,p color:maroon; ,p color:maroon; ,給歡迎詞下劃線,border-bottom:1px solid black;,我們將把下劃設(shè)置成1像素寬的黑線實(shí)體。,指定只針對(duì)的規(guī)則,h1,h2 font-family:sans-serif; color:gray; h1 border-bottom:1px solid black; p color:maroon; ,第一個(gè)規(guī)則指定h1、h2的共同屬性。,第二個(gè)規(guī)則只給h1添加另一個(gè)屬性。,問(wèn)題：,這種方法的優(yōu)點(diǎn)是什么呢？對(duì)每個(gè)元素分開設(shè)計(jì)，不是更利于我們區(qū)分各個(gè)元素的樣式嗎？,選擇符,我們稱之為選擇符。,h1 color:gray; h1,h2 color:gray; ,這個(gè)樣式適用于選擇符(此時(shí)，為元素)選擇的元素。,另一個(gè)選擇符，這個(gè)樣式適用于元素和元素。,創(chuàng)建CSS文件,h1, h2 font-family: sans-serif; color: gray; h1 border-bottom: 1px solid black; p color: maroon; ,你的“l(fā)oung.css”文件應(yīng)該像這樣，記住，沒(méi)有標(biāo)記。,把“l(fā)ounge.html”鏈接到外部樣式表, Head First Lounge . . . ,這是鏈接到外部樣式表的HTML。,這里不需要元素了，已經(jīng)被刪除。,鏈接外部樣式表語(yǔ)法,使用link元素來(lái)鏈接外部信息。,rel屬性指明HTML文件和你要鏈接的東西之間的關(guān)系，我們要鏈接到一個(gè)樣式表，因此我們將屬性值設(shè)為“stylesheet”。,信息類型是“text/css”,也就是一個(gè)樣式表。,樣式表定位于一個(gè)href（現(xiàn)在我們使用的是相對(duì)鏈接，但它可以是一個(gè)完整的URL）。,Link是一個(gè)空元素。,把其它兩個(gè)文件鏈接到外部樣式表,注意相對(duì)路徑的書寫。,了解繼承,注意，當(dāng)我們向元素添加 font-faminly屬性時(shí)，存在于元素中的元素的字體也會(huì)受到影響。,中的元素從元素繼承了 font-family樣式。,如果沒(méi)有繼承，你將不得不為整個(gè)網(wǎng)站里所有段落的每個(gè)行內(nèi)元素添加CSS規(guī)則。,繼承是如何起作用的,如果我們?cè)O(shè)置所有元素字體，這里可以看到所有受它影響的元素。,如果我們把字體屬性上移會(huì)有什么結(jié)果？,我們把字體屬性從段落和標(biāo)題移到元素。,繼承的覆蓋,通過(guò)把font-family屬性上移到body從而設(shè)置了整個(gè)網(wǎng)頁(yè)的字體。但如果你不想在所有的元素中都使用sans-serif字體呢？比如你想在元素中使用serif字體。,但你想要在元素中使用serif字體。你必須用CSS規(guī)則來(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)題：,當(dāng)我覆蓋繼承時(shí)，瀏覽器如何知道應(yīng)該對(duì)元素執(zhí)行哪一條規(guī)則？ 我如何知道哪些CSS屬性可被繼承，哪些不能被繼承呢？ CSS里可以寫注釋嗎？,類,要把元素添加到一個(gè)類中，只需添加一個(gè)帶有類名（如“greentea”）的“class”屬性。,創(chuàng)建類選擇符,首先是p選擇符。,然后一個(gè)“.”來(lái)指定一個(gè)類。,最后是類的名稱。,這是規(guī)則將綠茶類里所有段落的文本設(shè)置為綠色,這個(gè)選擇符選擇綠茶類里的所有段落。,進(jìn)一步了解類,只需添加另一個(gè)選擇符來(lái)處理綠茶類里的。現(xiàn)在這個(gè)規(guī)則將適用于綠茶類里的元素和元素,如果你省略所有的元素名稱，而用一個(gè)句點(diǎn)并且后接一個(gè)類名，那么這個(gè)規(guī)則將會(huì)適用于該類內(nèi)的所有成員。,一個(gè)元素可以加入多個(gè)類,將每個(gè)類名賦給“class”屬性值，類名之間用一個(gè)空格隔開。順序無(wú)關(guān)緊要。,應(yīng)用樣式的原則,首先，是否有選擇符選擇你的元素。 其次，繼承來(lái)的屬性。 還是沒(méi)有找到，那么使用默認(rèn)值。 如果有多個(gè)選擇符選擇一個(gè)元素呢？ 我們稱之為“沖突”。哪個(gè)規(guī)則能勝出呢？如果一個(gè)規(guī)則比另一個(gè)規(guī)則更具體，那它將勝出。 如果還是無(wú)法確定，則用最靠后的規(guī)則起作用。,舉例,這是選擇所有段落元素的規(guī)則。,這條規(guī)則選擇了綠茶類的所有成員。此規(guī)則比前一條稍微具體點(diǎn)。,這條規(guī)則只選擇了綠茶類的段落。比前一條更具體。,這些規(guī)則只選擇了某個(gè)特定類里的段落。因此它們的具體性與p.greentea相同。,發(fā)生沖突時(shí)，如果規(guī)則的具體性相同，最靠后的規(guī)則起作用。,要點(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)把那些元素名隔開就可以了。 在HTML中引入一個(gè)樣式的最簡(jiǎn)單的方法是用標(biāo)記。 你應(yīng)當(dāng)給HTML和復(fù)雜的站點(diǎn)鏈接一個(gè)外部樣式表。 元素用來(lái)引入一個(gè)外部樣式表。 許多