2、CSS樣式

阿新 • • 發佈：2019-04-06

eas dir 列表樣式 marker ner under rap text 字符

一、CSS ID 選擇器：

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來定義。

下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：

#red {color:red;}
#green {color:green;}

下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。

<p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色。</p>

註意：id 屬性只能在每個 HTML 文檔中出現一次。

ID選擇器和派生選擇器

在現代布局中，ID選擇器常常用於建立派生選擇器。

二、CSS類選擇器

在 CSS 中，類選擇器以一個點號顯示：

.center {text-align: center}

在上面的例子中，所有擁有 center 類的 HTML 元素均為居中。

在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規則。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center" 
>
This paragraph will also be center-aligned.
</p>

註意：類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。

和 id 一樣，class 也可被用作派生選擇器：

.fancy td {
	color: #f60;
	background: #666;
	}

在上面這個例子中，類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是一個表格或者一個 div）

元素也可以基於它們的類而被選擇：

td.fancy {
	color: #f60;
	background: #666;
	}

在上面的例子中，類名為 fancy 的表格單元將是帶有灰色背景的橙色。

<td class="fancy">

你可以將類 fancy 分配給任何一個表格元素任意多的次數。那些以 fancy 標註的單元格都會是帶有灰色背景的橙色。那些沒有被分配名為 fancy 的類的單元格不會受這條規則的影響。還有一點值得註意，class 為 fancy 的段落也不會是帶有灰色背景的橙色，當然，任何其他被標註為 fancy 的元素也不會受這條規則的影響。這都是由於我們書寫這條規則的方式，這個效果被限制於被標註為 fancy 的表格單元（即使用 td 元素來選擇 fancy 類）。

3、樣式

如何插入樣式表

當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文檔。插入樣式表的方法有三種：

外部樣式表

當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。<link> 標簽在（文檔的）頭部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

瀏覽器會從文件 mystyle.css 中讀到樣式聲明，並根據它來格式文檔。

外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標簽。樣式表應該以 .css 擴展名進行保存。下面是一個樣式表文件的例子：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

不要在屬性值與單位之間留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它僅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。

內部樣式表

當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表，就像這樣:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

內聯樣式

由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。

要使用內聯樣式，你需要在相關的標簽內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

多重樣式

如果某些屬性在不同的樣式表中被同樣的選擇器定義，那麽屬性值將從更具體的樣式表中被繼承過來。

例如，外部樣式表擁有針對 h3 選擇器的三個屬性：

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

而內部樣式表擁有針對 h3 選擇器的兩個屬性：

h3 {
  text-align: right; 
  font-size: 20pt;
  }

假如擁有內部樣式表的這個頁面同時與外部樣式表鏈接，那麽 h3 得到的樣式是：

color: red; 
text-align: right; 
font-size: 20pt;

即顏色屬性將被繼承於外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內部樣式表中的規則取代。

4、背景

背景色

可以使用 background-color 屬性為元素設置背景色。這個屬性接受任何合法的顏色值。

這條規則把元素的背景設置為灰色：

p {}

如果您希望背景色從元素中的文本向外少有延伸，只需增加一些內邊距：

p { padding: 20px;}

如需查看本例的效果，可以親自試一試！

可以為所有元素設置背景色，這包括 body 一直到 em 和 a 等行內元素。

background-color 不能繼承，其默認值是 transparent。transparent 有“透明”之意。也就是說，如果一個元素沒有指定背景色，那麽背景就是透明的，這樣其祖先元素的背景才能可見。

背景圖像

要把圖像放入背景，需要使用 background-image 屬性。background-image 屬性的默認值是 none，表示背景上沒有放置任何圖像。

如果需要設置一個背景圖像，必須為這個屬性設置一個 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

大多數背景都應用到 body 元素，不過並不僅限於此。

下面例子為一個段落應用了一個背景，而不會對文檔的其他部分應用背景：

p.flower {background-image: url(/i/eg_bg_03.gif);}

您甚至可以為行內元素設置背景圖像，下面的例子為一個鏈接設置了背景圖像：

a.radio {background-image: url(/i/eg_bg_07.gif);}

如需查看上述例子的效果，可以親自試一試！

理論上講，甚至可以向 textareas 和 select 等替換元素的背景應用圖像，不過並不是所有用戶代理都能很好地處理這種情況。

另外還要補充一點，background-image 也不能繼承。事實上，所有背景屬性都不能繼承。

背景重復

如果需要在頁面上對背景圖像進行平鋪，可以使用 background-repeat 屬性。

屬性值 repeat 導致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導致圖像只在水平或垂直方向上重復，no-repeat 則不允許圖像在任何方向上平鋪。

默認地，背景圖像將從一個元素的左上角開始。請看下面的例子：

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

如需查看上例的效果，可以親自試一試。

背景定位

可以利用 background-position 屬性改變圖像在背景中的位置。

下面的例子在 body 元素中將一個背景圖像居中放置：

body
  { 
    background-image:url(‘/i/eg_bg_03.gif‘);
    background-repeat:no-repeat;
    background-position:center;
  }

為 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right 和 center。通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，如 100px 或 5cm，最後也可以使用百分數值。不同類型的值對於背景圖像的放置稍有差異。

關鍵字

圖像放置關鍵字最容易理解，其作用如其名稱所表明的。例如，top right 使圖像放置在元素內邊距區的右上角。

根據規範，位置關鍵字可以按任何順序出現，只要保證不超過兩個關鍵字 - 一個對應水平方向，另一個對應垂直方向。

如果只出現一個關鍵字，則認為另一個關鍵字是 center。

所以，如果希望每個段落的中部上方出現一個圖像，只需聲明如下：

p
  { 
    background-image:url(‘bgimg.gif‘);
    background-repeat:no-repeat;
    background-position:top;
  }

下面是等價的位置關鍵字：

單一關鍵字	等價的關鍵字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

百分數值

百分數值的表現方式更為復雜。假設你希望用百分數值將圖像在其元素中居中，這很容易：

body
  { 
    background-image:url(‘/i/eg_bg_03.gif‘);
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

這會導致圖像適當放置，其中心與其元素的中心對齊。換句話說，百分數值同時應用於元素和圖像。也就是說，圖像中描述為 50% 50% 的點（中心點）與元素中描述為 50% 50% 的點（中心點）對齊。

如果圖像位於 0% 0%，其左上角將放在元素內邊距區的左上角。如果圖像位置是 100% 100%，會使圖像的右下角放在右邊距的右下角。

因此，如果你想把一個圖像放在水平方向 2/3、垂直方向 1/3 處，可以這樣聲明：

body
  { 
    background-image:url(‘/i/eg_bg_03.gif‘);
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

如果只提供一個百分數值，所提供的這個值將用作水平值，垂直值將假設為 50%。這一點與關鍵字類似。

background-position 的默認值是 0% 0%，在功能上相當於 top left。這就解釋了背景圖像為什麽總是從元素內邊距區的左上角開始平鋪，除非您設置了不同的位置值。

長度值

長度值解釋的是元素內邊距區左上角的偏移。偏移點是圖像的左上角。

比如，如果設置值為 50px 100px，圖像的左上角將在元素內邊距區左上角向右 50 像素、向下 100 像素的位置上：

body
  { 
    background-image:url(‘/i/eg_bg_03.gif‘);
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

註意，這一點與百分數值不同，因為偏移只是從一個左上角到另一個左上角。也就是說，圖像的左上角與 background-position 聲明中的指定的點對齊。

背景關聯

如果文檔比較長，那麽當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。

您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性，可以聲明圖像相對於可視區是固定的（fixed），因此不會受到滾動的影響：

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

如需查看上例的效果，可以親自試一試。

background-attachment 屬性的默認值是 scroll，也就是說，在默認的情況下，背景會隨文檔滾動。

5、css文本

CSS 文本屬性可定義文本的外觀。

通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。

縮進文本

把 Web 頁面上的段落的第一行縮進，這是一種最常用的文本格式化效果。

CSS 提供了 text-indent 屬性，該屬性可以方便地實現文本縮進。

通過使用 text-indent 屬性，所有元素的第一行都可以縮進一個給定的長度，甚至該長度可以是負值。

這個屬性最常見的用途是將段落的首行縮進，下面的規則會使所有段落的首行縮進 5 em：

p {text-indent: 5em;}

註意：一般來說，可以為所有塊級元素應用 text-indent，但無法將該屬性應用於行內元素，圖像之類的替換元素上也無法應用 text-indent 屬性。不過，如果一個塊級元素（比如段落）的首行中有一個圖像，它會隨該行的其余文本移動。

提示：如果想把一個行內元素的第一行“縮進”，可以用左內邊距或外邊距創造這種效果。

使用負值

text-indent 還可以設置為負值。利用這種技術，可以實現很多有趣的效果，比如“懸掛縮進”，即第一行懸掛在元素中余下部分的左邊：

p {text-indent: -5em;}

不過在為 text-indent 設置負值時要當心，如果對一個段落設置了負值，那麽首行的某些文本可能會超出瀏覽器窗口的左邊界。為了避免出現這種顯示問題，建議針對負縮進再設置一個外邊距或一些內邊距：

p {text-indent: -5em; padding-left: 5em;}

使用百分比值

text-indent 可以使用所有長度單位，包括百分比值。

百分數要相對於縮進元素父元素的寬度。換句話說，如果將縮進值設置為 20%，所影響元素的第一行會縮進其父元素寬度的 20%。

在下例中，縮進值是父元素的 20%，即 100 個像素：

div {width: 500px;}
p {text-indent: 20%;}

<div>
<p>this is a paragragh</p>
</div>

繼承

text-indent 屬性可以繼承，請考慮如下標記：

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}

<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

以上標記中的段落也會縮進 50 像素，這是因為這個段落繼承了 id 為 inner 的 div 元素的縮進值。

水平對齊

text-align 是一個基本的屬性，它會影響一個元素中的文本行互相之間的對齊方式。它的前 3 個值相當直接，不過第 4 個和第 5 個則略有些復雜。

值 left、right 和 center 會導致元素中的文本分別左對齊、右對齊和居中。

西方語言都是從左向右讀，所有 text-align 的默認值是 left。文本在左邊界對齊，右邊界呈鋸齒狀（稱為“從左到右”文本）。對於希伯來語和阿拉伯語之類的的語言，text-align 則默認為 right，因為這些語言從右向左讀。不出所料，center 會使每個文本行在元素中居中。

提示：將塊級元素或表元素居中，要通過在這些元素上適當地設置左、右外邊距來實現。

text-align:center 與 <CENTER>

您可能會認為 text-align:center 與 <CENTER> 元素的作用一樣，但實際上二者大不相同。

<CENTER> 不僅影響文本，還會把整個元素居中。text-align 不會控制元素的對齊，而只影響內部內容。元素本身不會從一段移到另一端，只是其中的文本受影響。

justify

最後一個水平對齊屬性是 justify。

在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。然後，調整單詞和字母間的間隔，使各行的長度恰好相等。您也許已經註意到了，兩端對齊文本在打印領域很常見。

需要註意的是，要由用戶代理（而不是 CSS）來確定兩端對齊文本如何拉伸，以填滿父元素左右邊界之間的空間。如需了解詳情，請參閱 CSS text-align 屬性參考頁。

字間隔

word-spacing 屬性可以改變字（單詞）之間的標準間隔。其默認值 normal 與設置值為 0 是一樣的。

word-spacing 屬性接受一個正長度值或負長度值。如果提供一個正長度值，那麽字之間的間隔就會增加。為 word-spacing 設置一個負值，會把它拉近：

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

<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>

實例 TIY ：增加或減少單詞間距（字間隔）

註釋：如需深入理解 CSS 對“字”（word）的定義，請訪問 CSS word-spacing 屬性參考頁。

字母間隔

letter-spacing 屬性與 word-spacing 的區別在於，字母間隔修改的是字符或字母之間的間隔。

與 word-spacing 屬性一樣，letter-spacing 屬性的可取值包括所有長度。默認關鍵字是 normal（這與 letter-spacing:0 相同）。輸入的長度值會使字母之間的間隔增加或減少指定的量：

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

<h1>This is header 1</h1>
<h4>This is header 4</h4>

實例 TIY ：規定字符間距（字母間隔）

字符轉換

text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：

none
uppercase
lowercase
capitalize

默認值 none 對文本不做任何改動，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉換為全大寫和全小寫字符。最後，capitalize 只對每個單詞的首字母大寫。

作為一個屬性，text-transform 可能無關緊要，不過如果您突然決定把所有 h1 元素變為大寫，這個屬性就很有用。不必單獨地修改所有 h1 元素的內容，只需使用 text-transform 為你完成這個修改：

h1 {text-transform: uppercase}

使用 text-transform 有兩方面的好處。首先，只需寫一個簡單的規則來完成這個修改，而無需修改 h1 元素本身。其次，如果您以後決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改。

實例 TIY ：控制文本中字母的大小寫

文本裝飾

接下來，我們討論 text-decoration 屬性，這是一個很有意思的屬性，它提供了很多非常有趣的行為。

text-decoration 有 5 個值：

none
underline
overline
line-through
blink

不出所料，underline 會對元素加下劃線，就像 HTML 中的 U 元素一樣。overline 的作用恰好相反，會在文本的頂端畫一個上劃線。值 line-through 則在文本中間畫一個貫穿線，等價於 HTML 中的 S 和 strike 元素。blink 會讓文本閃爍，類似於 Netscape 支持的頗招非議的 blink 標記。

none 值會關閉原本應用到一個元素上的所有裝飾。通常，無裝飾的文本是默認外觀，但也不總是這樣。例如，鏈接默認地會有下劃線。如果您希望去掉超鏈接的下劃線，可以使用以下 CSS 來做到這一點：

a {text-decoration: none;}

註意：如果顯式地用這樣一個規則去掉鏈接的下劃線，那麽錨與正常文本之間在視覺上的唯一差別就是顏色（至少默認是這樣的，不過也不能完全保證其顏色肯定有區別）。

還可以在一個規則中結合多種裝飾。如果希望所有超鏈接既有下劃線，又有上劃線，則規則如下：

a:link a:visited {text-decoration: underline overline;}

不過要註意的是，如果兩個不同的裝飾都與同一元素匹配，勝出規則的值會完全取代另一個值。請考慮以下的規則：

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

對於給定的規則，所有 class 為 stricken 的 h2 元素都只有一個貫穿線裝飾，而沒有下劃線和上劃線，因為 text-decoration 值會替換而不是累積起來。

處理空白符

white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。

通過使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。從某種程度上講，默認的 XHTML 處理已經完成了空白符處理：它會把所有空白符合並為一個空格。所以給定以下標記，它在 Web 瀏覽器中顯示時，各個字之間只會顯示一個空格，同時忽略元素中的換行：

<p>This     paragraph has    many
    spaces           in it.</p>

可以用以下聲明顯式地設置這種默認行為：

p {white-space: normal;}

上面的規則告訴瀏覽器按照平常的做法去處理：丟掉多余的空白符。如果給定這個值，換行字符（回車）會轉換為空格，一行中多個空格的序列也會轉換為一個空格。

實例 TIY ：white-space: normal

值 pre

不過，如果將 white-space 設置為 pre，受這個屬性影響的元素中，空白符的處理就有所不同，其行為就像 XHTML 的 pre 元素一樣；空白符不會被忽略。

如果 white-space 屬性的值為 pre，瀏覽器將會註意額外的空格，甚至回車。在這個方面，而且僅在這個方面，任何元素都可以相當於一個 pre 元素。

實例 TIY ：white-space: pre

註意：經測試，IE 7 以及更早版本的瀏覽器不支持該值，因此請使用非 IE 的瀏覽器來查看上面的實例。

值 nowrap

與之相對的值是 nowrap，它會防止元素中的文本換行，除非使用了一個 br 元素。在 CSS 中使用 nowrap 非常類似於 HTML 4 中用 <td nowrap> 將一個表單元格設置為不能換行，不過 white-space 值可以應用到任何元素。

實例 TIY ：white-space: nowrap

值 pre-wrap 和 pre-line

CSS2.1 引入了值 pre-wrap 和 pre-line，這在以前版本的 CSS 中是沒有的。這些值的作用是允許創作人員更好地控制空白符處理。

如果元素的 white-space 設置為 pre-wrap，那麽該元素中的文本會保留空白符序列，但是文本行會正常地換行。如果設置為這個值，源文本中的行分隔符以及生成的行分隔符也會保留。pre-line 與 pre-wrap 相反，會像正常文本中一樣合並空白符序列，但保留換行符。

實例 TIY ：white-space: pre-wrap

實例 TIY ：white-space: pre-line

註意：我們在 IE7 和 FireFox2.0 瀏覽器中測試了上面的兩個實例，但是結果是，值 pre-wrap 和 pre-line 都沒有得到很好的支持。

總結

下面的表格總結了 white-space 屬性的行為：

值	空白符	換行符	自動換行
pre-line	合並	保留	允許
normal	合並	忽略	允許
nowrap	合並	忽略	不允許
pre	保留	保留	不允許
pre-wrap	保留	保留	允許

文本方向

如果您閱讀的是英文書籍，就會從左到右、從上到下地閱讀，這就是英文的流方向。不過，並不是所有語言都如此。我們知道古漢語就是從右到左來閱讀的，當然還包括希伯來語和阿拉伯語等等。CSS2 引入了一個屬性來描述其方向性。

direction 屬性影響塊級元素中文本的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及兩端對齊元素中最後一行的位置。

註釋：對於行內元素，只有當 unicode-bidi 屬性設置為 embed 或 bidi-override 時才會應用 direction 屬性。

direction 屬性有兩個值：ltr 和 rtl。大多數情況下，默認值是 ltr，顯示從左到右的文本。如果顯示從右到左的文本，應使用值 rtl

6、CSS鏈接

設置鏈接的樣式

能夠設置鏈接樣式的 CSS 屬性有很多種（例如 color, font-family, background 等等）。

鏈接的特殊性在於能夠根據它們所處的狀態來設置它們的樣式。

鏈接的四種狀態：

a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標指針位於鏈接的上方
a:active - 鏈接被點擊的時刻

實例

a:link {color:#FF0000;}		/* 未被訪問的鏈接 */
a:visited {color:#00FF00;}	/* 已被訪問的鏈接 */
a:hover {color:#FF00FF;}	/* 鼠標指針移動到鏈接上 */
a:active {color:#0000FF;}	/* 正在被點擊的鏈接 */

親自試一試

當為鏈接的不同狀態設置樣式時，請按照以下次序規則：

a:hover 必須位於 a:link 和 a:visited 之後
a:active 必須位於 a:hover 之後

常見的鏈接樣式

在上面的例子中，鏈接根據其狀態改變顏色。

讓我們看看其他幾種常見的設置鏈接樣式的方法：

文本修飾

text-decoration 屬性大多用於去掉鏈接中的下劃線：

實例

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

親自試一試

背景色

background-color 屬性規定鏈接的背景色：

實例

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

7、CSS 列表

從某種意義上講，不是描述性的文本的任何內容都可以認為是列表。人口普查、太陽系、家譜、參觀菜單，甚至你的所有朋友都可以表示為一個列表或者是列表的列表。

由於列表如此多樣，這使得列表相當重要，所以說，CSS 中列表樣式不太豐富確實是一大憾事。

列表類型

要影響列表的樣式，最簡單（同時支持最充分）的辦法就是改變其標誌類型。

例如，在一個無序列表中，列表項的標誌 (marker) 是出現在各列表項旁邊的圓點。在有序列表中，標誌可能是字母、數字或另外某種計數體系中的一個符號。

要修改用於列表項的標誌類型，可以使用屬性 list-style-type：

ul {list-style-type : square}

上面的聲明把無序列表中的列表項標誌設置為方塊。

列表項圖像

有時，常規的標誌是不夠的。你可能想對各標誌使用一個圖像，這可以利用 list-style-image 屬性做到：

ul li {list-style-image : url(xxx.gif)}

只需要簡單地使用一個 url() 值，就可以使用圖像作為標誌。

列表標誌位置

CSS2.1 可以確定標誌出現在列表項內容之外還是內容內部。這是利用 list-style-position 完成的。

簡寫列表樣式

為簡單起見，可以將以上 3 個列表樣式屬性合並為一個方便的屬性：list-style，就像這樣：

li {list-style : url(example.gif) square inside}

list-style 的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個值，其它的就會填入其默認值。

2、CSS樣式

eas dir 列表樣式 marker ner under rap text 字符一、CSS ID 選擇器： id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來定義。下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色

2、CSS樣式

如何插入樣式表

外部樣式表

內部樣式表

內聯樣式

多重樣式

背景色

背景圖像

背景重復

背景定位

關鍵字

百分數值

長度值

背景關聯

縮進文本

使用負值

使用百分比值

繼承

水平對齊

text-align:center 與 <CENTER>

justify

字間隔

字母間隔

字符轉換

文本裝飾

處理空白符

值 pre

值 nowrap

值 pre-wrap 和 pre-line

總結

文本方向

設置鏈接的樣式

實例

常見的鏈接樣式

文本修飾

實例

背景色

實例

7、CSS 列表

列表類型

列表項圖像

列表標誌位置

簡寫列表樣式

相關推薦