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

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