【正文】 isstrongblue/strong./h2 CSS id 選擇器 id 選擇器 id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。 /li /ol 在上面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字，無需為 strong 元素定義特別的 class 或 id，代碼更加簡潔。 fontweight: normal。在 CSS2 中，它們稱為派生選擇器，但是無論你如何稱呼它們，它們的作用都是相同的。 } td, ul, ol, ul, li, dl, dt, dd { fontfamily: Verdana, sansserif。這么做雖然會(huì)浪費(fèi) 一些用戶的帶寬，但是如果需要對 Netscape 4 用戶進(jìn)行支持，就不得不這么做。我們又該如 何是好呢？ 友善地對待 Netscape 4 幸運(yùn)地是，你可以通過使用我們稱為 Be Kind to Netscape 4 的冗余法則來處理舊式瀏覽器無法理解繼承的問題。并且在大部分的現(xiàn)代瀏覽器中，也確實(shí)是這樣的?？纯聪旅孢@條規(guī)則： body { fontfamily: Verdana, sansserif。所有的標(biāo)題元素都是綠色的。不過存在一個(gè)例外：如果涉及到與 HTML 文檔一起工作的話， class 和 id 名稱對大小寫是敏感的。 margin: 0。 fontfamily: arial。就像這樣： p {textalign:center。} 多重聲明： 提示： 如果要定義不止一個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分開。 } 請注意，當(dāng)使用 RGB 百分比時(shí)，即使當(dāng)值為 0 時(shí)也要寫百分比符號(hào)。 值的不同寫法和單位 除了英文單詞 red，我們還可以使用十六進(jìn)制的顏色值 ff0000： p { color: ff0000。 在這個(gè)例子中， h1 是選擇器， color 和 fontsize 是屬性， red 和 14px 是值。 屬性（ property）是您希望設(shè)置的樣式屬性（ style attribute）。 selector {declaration1。甚至可以在同一個(gè) HTML 文檔內(nèi)部引用多個(gè)外部樣式表。作為網(wǎng)站開發(fā)者，你能夠?yàn)槊總€(gè) HTML 元素定義樣式，并將之應(yīng)用于你希望的任意多的頁面中。 樣式表極大地提高了工作效率 樣式表定義如何顯示 HTML 元素，就像 HTML 的字體標(biāo)簽和顏色屬性所起的作用那樣。同時(shí)文檔布局由瀏覽器來完成，而不使用任何的格式化標(biāo)簽。CSS 基礎(chǔ) ? CSS 教程 ? CSS 簡介 ? CSS 基礎(chǔ)語法 ? CSS 高級(jí)語法 ? CSS 派生選擇器 ? CSS id 選擇器 ? CSS 類選擇器 ? CSS 屬性選擇器 ? CSS 創(chuàng)建 CSS 樣式 ? CSS 背景 ? CSS 文本 ? CSS 字體 ? CSS 列表 ? CSS 表格 ? CSS 輪廓 CSS 框模型 ? CSS 框模型概述 ? CSS 內(nèi)邊距 ? CSS 邊框 ? CSS 外邊距 ? CSS 外邊距合并 CSS 定位 ? CSS 定位概述 ? CSS 相對定位 ? CSS 絕對定位 ? CSS 浮動(dòng) CSS 選擇器 ? CSS 元素選擇器 ? CSS 選擇器分組 ? CSS 類選擇器詳解 ? CSS ID 選擇器詳解 ? CSS 屬性選擇器詳解 ? CSS 后代選擇器 ? CSS 子元素選擇器 ? CSS 相鄰兄弟選擇器 ? CSS 偽類 ? CSS 偽元素 CSS 高級(jí) ? CSS 尺寸 ? CSS 分類 ? CSS 媒介類型 ? CSS 注意事項(xiàng) ? CSS 總結(jié) CSS 實(shí)例 ? CSS 實(shí)例 參考手冊 ? CSS2 參考手冊 ? CSS2 打印 ? CSS2 聽覺 ? CSS2 單位 CSS 測驗(yàn) ? CSS 測驗(yàn) CSS 簡介 需要具備的基礎(chǔ)知識(shí) 在繼續(xù)學(xué)習(xí)之前，你需要對下面的知識(shí)有基本的了解： ? HTML ? XHTML 如果你希望首先學(xué)習(xí)這些項(xiàng)目，請?jiān)? 首頁 訪問相關(guān)教程。 由于兩種主要的瀏覽器（ Netscape 和 Inter Explorer）不斷地將新的 HTML 標(biāo)簽和屬性（比如字體標(biāo)簽和顏色屬性）添加到 HTML 規(guī)范中，創(chuàng)建文檔內(nèi)容清晰地獨(dú)立于文檔表現(xiàn)層的站點(diǎn)變得越來越困難。樣式通常 保存在外部的 .css 文件中。如需進(jìn)行全局的更新，只需簡單地改變樣式，然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。 層疊次序 當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)，會(huì)使用哪個(gè)樣式呢？ 一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。 declaration2。每個(gè)屬性有一個(gè)值。 h1 {color:red。 } 為了節(jié)約字節(jié)，我們可以使用 CSS 的縮寫形式： p { color: f00。但是在其他的情況下就不需要這么做了。下面的例子展示出如何定義一個(gè)紅色文字的居中段落。 color:red。 } 空格和大小寫 大多數(shù)樣式表包含不止一條規(guī)則，而大多數(shù)規(guī)則包含不止一個(gè)聲明。 padding: 0。 CSS 高級(jí)語法 選擇器的分組 你可以對選擇器進(jìn)行分組，這樣，被分組的選擇器就可以分享相同的聲明。 h1,h2,h3,h4,h5,h6 { color: green。 } 根據(jù)上面這條規(guī)則，站點(diǎn)的 body 元素將使用 Verdana 字體（假如訪問者的系統(tǒng)中存在該字體的話）。 但是在那個(gè)瀏覽器大戰(zhàn)的血腥年代里，這種情況就未必會(huì)發(fā)生，那時(shí)候?qū)?biāo)準(zhǔn)的支持并不是企業(yè)的優(yōu)先選擇。 body { fontfamily: Verdana, sansserif。 繼承是一個(gè)詛咒嗎？ 如果你不希望 Verdana, sansserif 字體被所有的子元素繼承，又該怎么做呢？比方說，你希望段落的字體是 Times。 } p { fontfamily: Times, Times New Roman, serif。 派生選擇器允許你根據(jù)文檔的上下文關(guān)系來確定某個(gè)標(biāo)簽的樣式。 } 請注意標(biāo)記為 strong 的藍(lán)色代碼的上下文關(guān)系： pstrong我是粗體字，不是斜體字，因?yàn)槲也辉诹?表當(dāng)中，所以這個(gè)規(guī)則對我不起作用/strong/p ol listrong我是斜體字。 再看看下面的 CSS 規(guī)則： strong { color: red。 id 選擇器以 來定義。 p id=red這個(gè)段落是紅色。 id 選擇器和派生選擇器 在現(xiàn)代布局中， id 選擇器常常用于建立派生選擇器。 } 上面的樣式只會(huì)應(yīng)用于出現(xiàn)在 id 是 sidebar 的元素內(nèi)的段落。 textalign: right。 fontstyle: italic。 } 在這里，與頁面中的其他 p 元素明顯不同的是， sidebar 內(nèi)的 p 元素得到了特殊的處理，同時(shí)，與頁面中其他所有 h2 元素明顯不同的是， sidebar 中的 h2 元素也得到了不同的特殊處理。老版本的 Windows/IE 瀏覽器可能會(huì)忽略這條規(guī)則，除非你特別地定義這個(gè)選擇器所屬的元素： divsidebar { border: 1px dotted 000。這意味著兩者都將遵守 .center 選擇器中的規(guī)則。 } 在上面這個(gè)例子中，類名為 fancy 的更大的元素內(nèi)部的表格單元都會(huì)以灰色背景顯示橙色文字。 td class=fancy 你可以將類 fancy 分配給任何一個(gè)表 格元素任意多的次數(shù)。這都是由于我們書寫這條規(guī)則的方式，這個(gè)效果被限制于被標(biāo)注為 fancy 的表格單元（即使用 td 元素來選擇 fancy 類）。 IE6 及更低的版本不支持屬性選擇器。適用于由空格分隔的屬性值： [title~=hello] { color:red。 display:block。 } input[type=button] { width:120px。 } 如何創(chuàng)建 CSS 如何插入樣式表 當(dāng)讀到一個(gè)樣式表時(shí)，瀏覽器會(huì)根據(jù)它來格式化 HTML 文檔。 link 標(biāo)簽在（文檔的）頭部： head link rel=stylesheet type=text/css href= / /head 瀏覽器會(huì)從文件 中讀到樣式聲明，并根據(jù)它來格式文檔。下面是一個(gè)樣式表文件的例子： hr {color: sienna。假如你使用 “marginleft: 20 px” 而不是 “marginleft: 20px” ，它僅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。} body {backgroundimage: url(images/)。 Style 屬性可以包含任何 CSS 屬性。 textalign: left。 } 假如擁有內(nèi)部樣式表 的這個(gè)頁面同時(shí)與外部樣式表鏈接，那么 h3 得到的樣式是： color: red。 CSS 背景 CSS 允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。 這條規(guī)則把元素的背景設(shè)置為灰色： p {backgroundcolor: gray。 backgroundcolor 不能繼承，其默認(rèn)值是 transparent。 backgroundimage 屬性的默認(rèn)值是 none，表示背景上沒有放置任何圖像。} 您甚至可以為行內(nèi)元素設(shè)置背景圖像，下面的例子為一個(gè)鏈接設(shè)置了背景圖像： {backgroundimage: url(/i/)。 背景重復(fù) 如果需要在頁面上對背景圖像進(jìn)行平鋪，可以使用 backgroundrepeat 屬性 。請看下面的例子： body { backgroundimage: url(/i/)。 下面的例子在 body 元素中將一個(gè)背景圖像居中放置： body { backgroundimage:url(39。 backgroundposition:center。還可以使用長度值，如 100px 或 5cm，最后也可以使用百分?jǐn)?shù)值。 根據(jù)規(guī)范，位置關(guān)鍵字可以按任何順序出現(xiàn)，只要保證不超過兩個(gè)關(guān)鍵字 一個(gè)對應(yīng)水平方向，另一個(gè)對象垂直方向。)。假設(shè)你希望用百分?jǐn)?shù)值將圖像在其元素 中居中，這很容易： body { backgroundimage:url(39。 backgroundposition:50% 50%。 如果圖像位于 0% 0%，其左上角將放在元素內(nèi) 邊距區(qū)的左上角。)。這一點(diǎn)與關(guān)鍵 字類似。偏移點(diǎn)是圖像的左上角。 backgroundrepeat:norepeat。 背景關(guān)聯(lián) 如果文檔比較長，那么當(dāng)文檔向下滾動(dòng)時(shí)，背景圖像也會(huì)隨之滾動(dòng)。 backgroundrepeat:norepeat。 設(shè)置文本的背景顏色 本例顏色如何設(shè)置部分文本的背景顏色。 如何在垂直方向重復(fù)背景圖像 本例演示如何垂直地重復(fù)背景圖像。 如何使用 %來定位背景圖像 本例演示如何使用百分比來在頁面上定位背景圖像。 所有背景屬性在一個(gè)聲明之中 本例演示如何使用簡寫屬性來將所有背景屬性設(shè)置在一個(gè)聲明之中。 backgroundimage 把圖像設(shè)置為背景。 通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進(jìn)行縮進(jìn)，等等。 這個(gè)屬性最常見的用途是將段落的首行縮進(jìn)，下面的規(guī)則會(huì)使所有段落的首行縮進(jìn) 5 em： p {textindent: 5em。 使用負(fù)值 textindent 還可以設(shè)置為負(fù)值。 paddingleft: 5em。 在下例中，縮進(jìn)值是父元素的 20%，即 100 個(gè)像素： div {width: 500px。} p {width: 200px。 值 left、 right 和 center 會(huì)導(dǎo)致元素中的文本分別左對齊、右對齊和居中。不出所料， center 會(huì)使每個(gè)文本行在元素中居中。 textalign 不會(huì)控制元素的對齊，而只影響內(nèi)部內(nèi)容。 然后，調(diào)整單詞和字母間的間隔，使各行的長度恰好相等。 字間隔 wordspacing 屬性 可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。為 wordspacing 設(shè)置一個(gè)負(fù)值，會(huì)把它拉近： {wordspacing: 30px。 與 wordspacing 屬性一樣， letterspac