【正文】 verline 的作用恰好相反，會(huì)在文本的頂端畫一個(gè)上劃線。 實(shí)例 TIY ：控制文本中字母的大小寫 文本裝飾 接下來，我們討論 textdecoration 屬性 ，這是一個(gè)很有意思的屬性，它提供了很多非常有趣的行為。首先，只需寫一個(gè)簡單的規(guī)則來完成這個(gè)修改，而無需修改 h1 元素本身。 作為一個(gè)屬性， texttransform 可能無關(guān)緊要，不過如果您突然決定把所有 h1 元素變?yōu)榇髮懀@個(gè)屬性就很有用。顧名思義， uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫和全小寫字符。輸入的長度值會(huì)使字母之間的間隔增加或減少指定的量： h1 {letterspacing: } h4 {letterspacing: 20px} h1This is header 1/h1 h4This is header 4/h4 實(shí)例 TIY ：規(guī)定字符間距（字母間隔） 字符轉(zhuǎn)換 texttransform 屬性 處理文本的大小寫。 與 wordspacing 屬性一樣， letterspacing 屬性的可取值包括所有長度。} p class=spread This is a paragraph. The spaces between words will be increased. /p p class=tight This is a paragraph. The spaces between words will be decreased. /p 實(shí)例 TIY ：增加或減少單詞間距（字間隔） 注釋： 如需深入理解 CSS 對 “字 ”（ word）的定義，請?jiān)L問 CSS wordspacing 屬性參考頁 。為 wordspacing 設(shè)置一個(gè)負(fù)值，會(huì)把它拉近： {wordspacing: 30px。 wordspacing 屬性接受一個(gè)正長度值或負(fù)長度值。 字間隔 wordspacing 屬性 可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。 需要注意的是，要由用戶代理（而不是 CSS）來確定兩端對齊文本如何拉伸，以填滿父元素左右邊界之間的空間。 然后，調(diào)整單詞和字母間的間隔，使各行的長度恰好相等。 justify 最后一個(gè)水平對齊屬性是 justify。 textalign 不會(huì)控制元素的對齊，而只影響內(nèi)部內(nèi)容。 textalign:center 與 CENTER 您可能會(huì)認(rèn)為 textalign:center 與 CENTER 元素的作用一樣，但實(shí)際上二者大不相同。不出所料， center 會(huì)使每個(gè)文本行在元素中居中。文本在左邊界對齊，右邊界呈鋸齒狀（稱為 “從左到右 ”文本）。 值 left、 right 和 center 會(huì)導(dǎo)致元素中的文本分別左對齊、右對齊和居中。 水平對齊 textalign 是一個(gè)基本的屬性，它 會(huì)影響一個(gè)元素中的 文本行 互相之間的對齊方式。} p {width: 200px。} div pthis is a paragragh/p /div 繼承 textindent 屬性可以繼承，請考慮如下標(biāo)記： divouter {width: 500px。 在下例中，縮進(jìn)值是父元素的 20%，即 100 個(gè)像素： div {width: 500px。 百分?jǐn)?shù)要相對于縮進(jìn)元素父元素的寬度。 paddingleft: 5em。} 不過在為 textindent 設(shè)置負(fù)值時(shí)要當(dāng)心，如果對一個(gè)段落設(shè)置了負(fù)值，那么首行的某些文本可能會(huì)超出瀏覽器窗口的左邊界。 使用負(fù)值 textindent 還可以設(shè)置為負(fù)值。不過，如果一個(gè)塊級元素（比如段落）的首行中有一個(gè)圖像，它會(huì)隨該行的其余文本移動(dòng)。 這個(gè)屬性最常見的用途是將段落的首行縮進(jìn)，下面的規(guī)則會(huì)使所有段落的首行縮進(jìn) 5 em： p {textindent: 5em。 CSS 提供了 textindent 屬性 ，該屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)。 通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進(jìn)行縮進(jìn)，等等。 backgroundrepeat 設(shè)置背景圖像是否及如何重復(fù)。 backgroundimage 把圖像設(shè)置為背景。 backgroundattachment 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。 所有背景屬性在一個(gè)聲明之中 本例演示如何使用簡寫屬性來將所有背景屬性設(shè)置在一個(gè)聲明之中。 如何設(shè)置固定的背景圖像 本例演示如何設(shè)置固定的背景圖像。 如何使用 %來定位背景圖像 本例演示如何使用百分比來在頁面上定位背景圖像。 如何僅顯示一次背景圖像 本例演示如何僅顯示一次背景圖像。 如何在垂直方向重復(fù)背景圖像 本例演示如何垂直地重復(fù)背景圖像。 將圖像設(shè)置為背景 2 本例演示如何為多個(gè)元素同時(shí)設(shè)置背景圖像。 設(shè)置文本的背景顏色 本例顏色如何設(shè)置部分文本的背景顏色。 backgroundattachment 屬性的默認(rèn)值是 scroll，也就是說，在默認(rèn)的情況下，背景會(huì)隨文檔滾動(dòng)。 backgroundrepeat:norepeat。 您可以通過 backgroundattachment 屬性 防止這種滾動(dòng)。 背景關(guān)聯(lián) 如果文檔比較長，那么當(dāng)文檔向下滾動(dòng)時(shí)，背景圖像也會(huì)隨之滾動(dòng)。 } 注意，這一點(diǎn)與百分?jǐn)?shù)值不同，因?yàn)槠浦皇菑囊粋€(gè)左上角到另一個(gè)左上角。 backgroundrepeat:norepeat。/i/39。偏移點(diǎn)是圖像的左上角。這就解釋了背景圖像為什么總是從元素內(nèi)邊距區(qū)的左上角開始平鋪，除非您設(shè)置了不同的位置值。這一點(diǎn)與關(guān)鍵 字類似。 backgroundposition:66% 33%。)。 因此，如果你想把一個(gè)圖像放在水平方向 2/垂直方向 1/3 處，可以這樣聲明： body { backgroundimage:url(39。 如果圖像位于 0% 0%，其左上角將放在元素內(nèi) 邊距區(qū)的左上角。 換句話說，百分?jǐn)?shù)值同時(shí)應(yīng)用于元素和圖像。 backgroundposition:50% 50%。)。假設(shè)你希望用百分?jǐn)?shù)值將圖像在其元素 中居中，這很容易： body { backgroundimage:url(39。 backgroundposition:top。)。 所以，如果希望每個(gè)段落的中部上方出現(xiàn)一個(gè)圖像，只需聲明如下： p { backgroundimage:url(39。 根據(jù)規(guī)范，位置關(guān)鍵字可以按任何順序出現(xiàn)，只要保證不超過兩個(gè)關(guān)鍵字 一個(gè)對應(yīng)水平方向，另一個(gè)對象垂直方向。 關(guān)鍵字 圖像放置關(guān)鍵字最容易理解，其作用如其名稱所表明的。還可以使用長度值，如 100px 或 5cm，最后也可以使用百分?jǐn)?shù)值。首先，可以使用一些關(guān)鍵字： top、 bottom、 left、right 和 center。 backgroundposition:center。)。 下面的例子在 body 元素中將一個(gè)背景圖像居中放置： body { backgroundimage:url(39。 } 如需查看上例的效 果，可以 親自試一試 。請看下面的例子： body { backgroundimage: url(/i/)。 repeatx 和 repeaty 分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)， norepeat 則不允許圖像在任何方向上平鋪。 背景重復(fù) 如果需要在頁面上對背景圖像進(jìn)行平鋪，可以使用 backgroundrepeat 屬性 。 另外還要補(bǔ)充一點(diǎn)， backgroundimage 也不能繼承。} 您甚至可以為行內(nèi)元素設(shè)置背景圖像，下面的例子為一個(gè)鏈接設(shè)置了背景圖像： {backgroundimage: url(/i/)。} 大多數(shù)背景都應(yīng)用到 body 元素，不過并不僅限于此。 backgroundimage 屬性的默認(rèn)值是 none，表示背景上沒有放置任何圖像。也就是說，如果一個(gè)元素沒有指定背景色，那么背景就是透明的，這樣其祖先元素的背景才能可見。 backgroundcolor 不能繼承，其默認(rèn)值是 transparent。 padding: 20px。 這條規(guī)則把元素的背景設(shè)置為灰色： p {backgroundcolor: gray。 背景色 可以使用 backgroundcolor 屬性 為元素設(shè)置背景色。 CSS 背景 CSS 允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。 fontsize: 20pt。 } 假如擁有內(nèi)部樣式表 的這個(gè)頁面同時(shí)與外部樣式表鏈接，那么 h3 得到的樣式是： color: red。 } 而內(nèi)部樣式表擁有針對 h3 選擇器的兩個(gè)屬性： h3 { textalign: right。 textalign: left。 marginleft: 20px This is a paragraph /p 多重樣式 如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來。 Style 屬性可以包含任何 CSS 屬性。請慎用這種方法，例如當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)。} body {backgroundimage: url(images/)。你可以使用 style 標(biāo)簽在文檔頭部定義內(nèi)部樣式表，就像這樣 : head style type=text/css hr {color: sienna。假如你使用 “marginleft: 20 px” 而不是 “marginleft: 20px” ，它僅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。} body {backgroundimage: url(images/)。下面是一個(gè)樣式表文件的例子： hr {color: sienna。文件不能包含任何的 html 標(biāo)簽。 link 標(biāo)簽在（文檔的）頭部： head link rel=stylesheet type=text/css href= / /head 瀏覽器會(huì)從文件 中讀到樣式聲明，并根據(jù)它來格式文檔。在使用外部樣式表的情況下，你可以通過改變一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。 } 如何創(chuàng)建 CSS 如何插入樣式表 當(dāng)讀到一個(gè)樣式表時(shí)，瀏覽器會(huì)根據(jù)它來格式化 HTML 文檔。 display:block。 } input[type=button] { width:120px。 backgroundcolor:yellow。 display:block。適用于由連字符分隔的屬性值： [lang|=en] { color:red。適用于由空格分隔的屬性值： [title~=hello] { color:red。 } 親自試一試 屬性和 值選擇器 下面的例子為 title=W3School 的所有元素設(shè)置樣式： [title=W3School] { border:5px solid blue。 IE6 及更低的版本不支持屬性選擇器。 可以為擁有指定屬性的 HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。這都是由于我們書寫這條規(guī)則的方式，這個(gè)效果被限制于被標(biāo)注為 fancy 的表格單元（即使用 td 元素來選擇 fancy 類）。那些沒有被分配名為 fancy 的類的單元格不會(huì)受這條規(guī)則的影響。 td class=fancy 你可以將類 fancy 分配給任何一個(gè)表 格元素任意多的次數(shù)。 background: 666。 } 在上面這個(gè)例子中，類名為 fancy 的更大的元素內(nèi)部的表格單元都會(huì)以灰色背景顯示橙色文字。 和 id 一樣， class 也可被用作派生選擇器： .fancy td { color: f60。這意味著兩者都將遵守 .center 選擇器中的規(guī)則。 } CSS 類選擇器 在 CSS 中，類選擇器以一個(gè)點(diǎn)號顯示： .center {textalign: center} 在上面的例子中，所有擁有 center 類的 HTML 元素均為居中。老版本的 Windows/IE 瀏覽器可能會(huì)忽略這條規(guī)則，除非你特別地定義這個(gè)選擇器所屬的元素： divsidebar { border: 1px dotted 000。 padding: 10px。 } 在這里，與頁面中的其他 p 元素明顯不同的是， sidebar 內(nèi)的 p 元素得到了特殊的處理，同時(shí)，與頁面中其他所有 h2 元素明顯不同的是， sidebar 中的 h2 元素也得到了不同的特殊處理。 lineheight: 。 fontstyle: italic。 } sidebar h2 { fon