【正文】 erif。沒問題。 } CSS 派生選擇器 派生選擇器 通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式，你可以使標(biāo)記更加簡潔。通過合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔。這是因?yàn)? strong 元素位于 li 元素內(nèi)。 } h2 { color: red。 下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色： red {color:red。 /p p id=green這個段落是綠色。 sidebar p { fontstyle: italic。這個元素很可能是 div 或者是表格單元，盡管它也可能是一個表格或者其他塊級元素。 margintop: 。 margin: 0。 單獨(dú)的選擇器 id 選擇器即使不被用來創(chuàng)建派生選擇器，它也可以獨(dú)立發(fā)揮作用： sidebar { border: 1px dotted 000。 padding: 10px。 h1 class=center This heading will be centeraligned /h1 p class=center This paragraph will also be centeraligned. /p 注意： 類名的第一個字符不能使用數(shù)字！它無法在 Mozilla 或 Firefox 中起作用。（名為 fancy 的更大的元素可能是一個表格或者一個 div） 元素也可以基于它們的類而被選擇： { color: f60。那些以 fancy 標(biāo)注的單元格都會是帶有灰色背景的橙色。 CSS 屬性選擇器 對帶有指定屬性的 HTML 元素設(shè)置樣式。 屬性選擇器 下面的例子為帶有 title 屬性的所有元素設(shè)置樣式： [title] { color:red。 } 親自試一試 下面的例子為帶有包含指定值的 lang 屬性的所有元素設(shè)置樣式。 marginbottom:10px。 marginleft:35px。插入樣式表的方法有三種： 外部樣式表 當(dāng)樣式需要應(yīng)用于很多頁面時，外部樣式表將是理想的選擇。 外部樣式表可以在任何文本編輯器中進(jìn)行編輯。} p {marginleft: 20px。 內(nèi)部樣式表 當(dāng)單個文檔需要特殊的樣式時，就應(yīng)該使用內(nèi)部樣式表。} /style /head 內(nèi)聯(lián)樣式 由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會損失掉樣式表的許多優(yōu)勢。本例展示如何改變段落的顏色和左外邊距： p style=color: sienna。 fontsize: 8pt。 textalign: right。 CSS 在這方面的能力遠(yuǎn)遠(yuǎn)在 HTML 之上。} 如果您希望背景色從元素中的文本向外少有延伸，只需增加一些內(nèi)邊距： p {backgroundcolor: gray。 transparent 有 “透明 ”之意。 如果需要設(shè)置一個背景圖像，必須為這個屬性設(shè)置一個 URL 值： body {backgroundimage: url(/i/)。} 如需查看上述例子的效果，可以 親自試一試 ！ 理論上講，甚至可以向 textareas 和 select 等替換元素的背景應(yīng)用圖像，不過并不是所有用戶代理都能很好地處理這種情況。 屬性值 repeat 導(dǎo)致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。 backgroundrepeat: repeaty。/i/39。 } 為 backgroundposition 屬性提供值有很多方法。不同類型的值對于背景圖像的放置稍 有差異。 如果只出現(xiàn)一個關(guān)鍵字，則認(rèn)為另一個關(guān)鍵字是 center。 backgroundrepeat:norepeat。/i/39。 } 這會導(dǎo)致圖像適當(dāng)放置，其中心與其元素的中心對齊。如果圖像位置是 100% 100%，會使圖像的右下角放在右邊距的右下角。 backgroundrepeat:norepeat。 backgroundposition 的默認(rèn)值是 0% 0%，在功能上相當(dāng)于 top left。 比如，如果設(shè)置值為 50px 100px，圖像的左上角將在元素內(nèi)邊距區(qū)左上角向右 50 像素、向下 100 像素的位置上： body { backgroundimage:url(39。 backgroundposition:50px 100px。當(dāng)文檔滾動到超過圖像的位置時，圖像就會消失。 backgroundattachment:fixed } 如需查看上例的效果，可以 親自試一試 。 將圖像設(shè)置為背景 本例演示如何將圖像設(shè)置為背景。 如何在水平方向重復(fù)背景圖像 本例演示如何水平地重復(fù)背景圖像。 如何使用像素來定位背景圖像 本例演示如何使用像素來在頁面上定位背景圖像。 CSS 背景屬性 屬性 描述 background 簡寫屬性，作用是將背景屬性設(shè)置在一個聲明中。 backgroundposition 設(shè)置背景圖像的起始位置。 縮進(jìn)文本 把 Web 頁面上的段落的第一行縮進(jìn)，這是一種最常用的文本格式化效果。} 注意： 一般來說，可以為所有塊級元素應(yīng)用 textindent，但無法將該屬性應(yīng)用于行內(nèi)元素，圖像之類的替換元素上也無法應(yīng)用 textindent 屬性。利用這種技術(shù)，可以實(shí)現(xiàn)很多有趣的效果，比如 “懸掛縮進(jìn) ”，即第一行懸掛在元素中余下部分的左 邊： p {textindent: 5em。} 使用百分比值 textindent 可以使用所有長度單位，包括百分比值。} p {textindent: 20%。} div id=outer div id=innersome text. some text. some text. pthis is a paragragh./p /div /div 以上標(biāo)記中的段落也會縮進(jìn) 50 像素，這是因?yàn)檫@個段落繼承了 id 為 inner 的 div 元素的縮進(jìn)值。 西方語言都是從左向右讀，所有 textalign 的默認(rèn)值是 left。 提示： 將塊級元素或表 元素居中，要通過在這些元素上適當(dāng)?shù)卦O(shè)置左、右外邊距來實(shí)現(xiàn)。元素本身不會從一段移到另一端，只是其中的文本受影響。您也許已經(jīng)注意到了，兩端對齊文本在打印領(lǐng)域很常見。其默認(rèn)值 normal 與設(shè)置值為 0 是一樣的。} {wordspacing: 。默認(rèn)關(guān)鍵字是 normal（這與 letterspacing:0 相同）。最后， capitalize 只對每個單詞的首字母大寫。其次，如果您以后決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改。值 linethrough 則在文本中間畫一個貫穿線，等價(jià)于 HTML 中的 S 和 strike 元素。例如，鏈接默認(rèn)地會有下劃線。如果希望所有超鏈接既有下劃線，又有上劃線，則規(guī)則如下： a:link a:visited {textdecoration: underline overline。} 對于給定的規(guī)則，所有 class 為 stricken 的 h2 元素都只有一個貫穿線裝飾，而沒有下劃線和上劃線，因?yàn)? textdecoration 值會替換而不是累積起來 。所以給定以下標(biāo)記，它在 Web 瀏覽器中顯示時，各個字之間只會顯示一個空格，同時忽略元素中的換行： pThis paragraph has many spaces in it./p 可以用以下聲明顯式地設(shè)置這種默認(rèn)行為： p {whitespace: normal。 如果 whitespace 屬性的值為 pre，瀏覽器將會注意額外的空格，甚至回車。在 CSS 中使用 nowrap 非常類似于 HTML 4 中用 td nowrap 將一個表單元格設(shè)置為不能換行，不過 whitespace 值可以應(yīng)用到任何元素。如果設(shè)置為這個值，源文本中的行分隔符以及生成的行分隔符也會保留。不過，并不是所有語言都如此。 注釋： 對于行內(nèi)元素，只有當(dāng) unicodebidi 屬性 設(shè)置為 embed 或 bidioverride 時才會應(yīng)用 direction 屬性。 CSS 文本實(shí)例： 設(shè)置文本顏色 本例演示如何設(shè)置文本的顏色。 使用像素值設(shè)置行間距 本例演示如何使用像素值來設(shè)置段落中的行間距。 縮進(jìn)文本 本例演示如何縮進(jìn)文本首行。 CSS 文本屬性 屬性 描述 color 設(shè)置文本顏色 direction 設(shè)置文本方向。 textdecoration 向文本添加修飾。 texttransform 控制元素中的字母。 CSS 字體 CSS 字體屬性定義文本的字體系列、大小、加粗、風(fēng)格（如斜體）和變形（如小型大寫字母）。} 親自試一試 這樣用戶代理就會從 sansserif 字體系列中選擇一個字體（如 Helvetica），并將其應(yīng)用到 body 元素。} 親自試一試 這樣的規(guī)則同時會產(chǎn)生另外一個問題，如果用戶代理上沒有安裝 Geia 字體，就只能使用用戶代理的默認(rèn)字體來顯示 h1 元素。 因此，我們建議在所有 fontfamily 規(guī)則中都提供一個通用字體系列。New Century Schoolbook39。} 親自試一試 根據(jù)這個列表，用戶代理會按所列的順序查找這些字體。 單引號或雙引號都可以接受。New York39。} {fontstyle:italic。 斜體（ italic）是一種簡單的字體風(fēng)格，對每個字母的結(jié)構(gòu)有一些小改動，來反映變化的外觀。 小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母采用不同大小的大寫字母。 關(guān)鍵字 100 ~ 900 為字體指定了 9 級加粗度。與此相反，關(guān)鍵詞 lighter 會導(dǎo)致瀏覽器將加粗度下 移而不是上移。} 親自試一試 字體大小 fontsize 屬性 設(shè)置文本的大小。 fontsize 值可以是絕對或相對值。} p {fontsize:14px。 W3C 推薦使用 em 尺寸單位。 瀏覽器中默認(rèn)的文本大小是 16 像素。} /* 40px/16= */ p {fontsize:。在重設(shè)文本大小時，會比正常的尺寸更大或更小。} p {fontsize:。 設(shè)置字體尺寸 本例演示如何設(shè)置字體尺寸。 所有字體屬性在一個聲明之內(nèi) 本例演示如何使用簡寫屬性將字體屬性設(shè)置在一個聲明之內(nèi)。 fontsize 設(shè)置字體的尺寸。（ 已刪除該屬性。 CSS 列表 CSS 列表屬性允許你放置、改變列表項(xiàng)標(biāo)志，或者將圖像作為列表項(xiàng)標(biāo)志。 列表類型 要影響列表的樣式，最簡單（同時支持最充分）的辦法就是改變其標(biāo)志類型。 列表項(xiàng)圖像 有時，常規(guī)的標(biāo)志是不夠的。 簡寫列表樣式 為簡單起見，可以將以上 3 個列表樣式屬性合并為一個方便的屬 性： liststyle，就像這樣： li {liststyle : url() square inside} liststyle 的值可以按任何順序列出，而且這些值都可以忽略。 所有的列表樣式類型 本例演示在 CSS 中所有不同類型的列表項(xiàng)標(biāo)記。 CSS 列表屬性 (list) 屬性 描述 liststyle 簡寫屬性。 liststyletype 設(shè)置列表項(xiàng)標(biāo)志的類型。 } 親自試一試 請注意，上例中的表格具有雙線條邊框。 } table,th, td { border: 1px solid black。 } 親自試一試 表格文本對齊 textalign 和 verticalalign 屬性設(shè)置表格中文本的對齊方式。 } 親自試一試 表格內(nèi)邊距 如需控制表格中內(nèi)容與邊框的距離，請為 td 和 th 元素設(shè)置 padding 屬性： td { padding:15px。 } 親自試一試 CSS Table 屬性 屬性 描述 bordercollapse 設(shè)置是否把表格邊框合并為單一的邊框。 tablelayout 設(shè)置顯示單元、行和列的算法。 設(shè)置表格標(biāo)題的位置 本例演示如何 定位表格的標(biāo)題。 設(shè)置輪廓的顏色 本例演示如何設(shè)置輪廓的顏色。 屬性 描述 CSS outline 在一個聲明中設(shè)置所有的輪廓屬性。 2 CSS 框模型概述 CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、 內(nèi)邊距 、 邊框 和 外邊距 的方式。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會遮擋其后的任何元素?？梢酝ㄟ^將元素的 margin 和 padding 設(shè)置為零來覆蓋這些瀏覽器樣式