《CSS網站佈局實錄》學習筆記（四）

第四章 CSS網站元素設計

4.1 網站導航

　　網站導航是網站中最重要的元素。從形式上看，網站導航主要分橫向導航、縱向導航、下拉及多級菜單導航燈3種常見形式。

• 橫向導航：做爲門戶網站的設計而言，主導航通常採用橫向導航。
• 縱向導航：縱向導航更傾向於表達產品的分類。
• 下拉導航：主要用於功能複雜的網站。

　　總的來講，導航的核心目標就是設計一個簡單、快捷的操做入口，幫助用戶快速地到達網站中的 內容。這裏將使用CSS來對這3種常見的導航進行設計。

4.1.1 橫向導航

　　假設目前有6個頻道，若是用傳統的表格式佈局的導航製做，則須要設計一個具備一行就列的表格，而後再每一個單元格<td></td>標籤中插入導航文字，再讓每一個單元格的文本居中。實現代碼以下：

 1 [html]
 2 
 3 <table width="740" height="24" border="0" cellpadding="0" cellspacing="0" b    gcolor="#FFFFFF">
 4     <tr align="center">
 5         <td bgcolor="#ececec"><a href="#">首頁</a></td>
 6         <td bgcolor="#ececec"><a href="#">文章</a></td>
 7         <td bgcolor="#ececec"><a href="#">參考</a></td>
 8         <td bgcolor="#ececec"><a href="#">Blog</a></td>
 9         <td bgcolor="#ececec"><a href="#">論壇</a></td>
10         <td bgcolor="#ececec"><a href="#">聯繫</a></td>
11     </tr>
12 </table>

　　能夠看到，設定了表格的寬高，並把邊框邊距都設置爲0，以便隱藏表格線，而後讓每一個單元格中的文字居中對齊。

　　再來看一下如何使用CSS來設計一樣的導航系統。XHTML代碼以下：

1 <ul id="nav">
2     <li><a href="#" id="current">首頁</a></li>
3     <li><a href="#">文章</a></li>
4     <li><a href="#">參考</a></li>
5     <li><a href="#">Blog</a></li>
6     <li><a href="#">論壇</a></li>
7     <li><a href="#">聯繫</a></li>
8 </ul>

　　這段代碼使用了ul元素（無序列表）。ul是CSS佈局中使用得較爲普遍的元素之一，主要是用來描述列表型內容，每一個<ul></ul>表示其中的內容爲一個列表塊，塊中的每一條列表數據則用<li></li>來描述。ul默認樣式是加上了圓點項目序號，並且默認形式爲從上至下排列。CSS代碼以下：

 1 [css]
 2 
 3 #nav {
 4    height: 26px;
 5     border-bottom: 2px solid #2788da;
 6 }
 7  
 8 #nav li {
 9     float: left;
10 }
11    
12 #nav li a {
13     color: #000000;
14     text-decoration: none;
15     padding-top: 4px;
16     display: block;
17     width: 97px;
18     height: 22px;
19     text-align: center;
20     background-color: #ececec;
21     margin-left: 2px;
22 }
23  
24 #nav li a#current {
25     background-color:#2788da;
26     color: #ffffff;
27 }
28  
29 #nav li a: hover {
30     backgroud-color: #bbbbbb;
31     color: #FFFFFF;
32 }

　　給#nav添加一個border-bottom屬性，用來指示元素的下邊框。經過這樣的設置，ul標籤就擁有了2px帶色彩的下邊框。

　　#nav li指定了float: left;屬性使得列表中的每個列表項再也不遵循其默認的從上至下的排序方式。如同div的float:left;同樣，它也是經過浮動定位的原理，使得自身向左浮動，從而使下一個對象貼近該對象的右邊。最終全部的li都具備向左浮動的特性，從而造成了橫向排列的形式。

　　導航的關鍵在於，a連接對象的樣式控制。這裏使用#nav li a {}給li下的每個a連接對象編寫了樣式。

　　display: block;使得a連接對象的顯示方式由一段文本改變爲一個塊狀對象，就和div的特性相同。默認狀態下，div就是一個塊狀對象，而默認狀態下的a連接對象只顯示爲一個普通文本。使用display: block;屬性後，a連接對象就能像div和其餘元素同樣成爲一個塊狀對象(block)。

　　display屬性是CSS中對對象顯示模式操做的一個屬性，主要用於改變對象的顯示方式。在CSS中，全部對象都有本身默認的顯示方式。好比a與span等對象，他們默認爲一種行間內聯對象，顯示時不會影響其餘任何對象。當應用span後，span後面的內容會自動排在span的右邊，就像一段一段文本；而div這類對象的默認顯示爲塊狀對象，默認狀態下便佔據一行的空間，就像一個方塊顯示在頁面中。

　　a: hover{}鼠標上移。當用戶鼠標移動到導航的某個頻道時，能夠看到效果。

注：上述代碼要注意XHTML中元素間的CSS屬性繼承關係，即繼承中的優先權。

　　對比一下使用表格佈局與CSS佈局在簡單導航上的優劣：

	表格佈局	CSS佈局
元素控制	定位較困難	使用padding、margin等屬性，精確控制到1px像素
代碼量及重用性	量大，幾乎不可重用	代碼至關簡潔，不帶任何樣式，一次CSS樣式代碼
可維護性	工做重複、枯燥、繁瑣	只需修改一次CSS樣式代碼，隨處可用

　　雖然前面已經完成了標籤式導航，可是方塊狀的導航彷佛並不能順應如今的設計潮流。下面進行改善：

　　首先考慮去掉單一的方塊狀背景元素，使用帶色彩的圓角標籤來完成。CSS代碼以下：

 1 [css]
 2 
 3 body {
 4     background-color: #000000;
 5 }
 6 
 7 #nav {
 8     height: 26px;
 9     border-bottom: 2px solid #FFFFFF;
10     list-style: none;
11 }
12 
13 #nav li {
14     float: left;
15     font-size: 14px;
16     font-weight: bold;
17 }
18 
19 #nav li a {
20     color: #FFFFFF;
21     text-decoration: none;
22     padding-top: 7px;
23     display: block;
24     width: 97px;
25     height: 19px;
26     text-align: center;
27     background-image: url(img/normal.gif);
28     margin-left: 2px;
29 }
30 
31 #nav li a: hover {
32     background-image: url(img/hover.gif);
33     color: #FFFFFF;
34 }
35 
36 #nav li a#current {
37     background-image: url(img/active.gif);
38     color: #000000;
39 }

　　這裏已經去掉了背景色的設定，並給頁面body標籤加上了深色背景，a對象被放置了3張透明的gif圖片，分別爲normal.gif、hover.gif、active.gif。分別用於表示普通、鼠標上移、當前頁3種交互狀態，並從新設定了導航中文字的字體及a對象的邊距高度等元素，使其可以適應背景圖片。

4.1.2 縱向導航

　　所謂縱向導航就是把網站導航放置在網頁左邊或者右邊的、從上至下排列的一種導航形式。XHTML代碼以下：

 1 <div id="category">
 2     <h1>CSS</h1>
 3         <h2>CSS入門</h2>
 4         <h2>CSS進階</h2>
 5         <h2>CSS高級</h2>
 6     <h1>WebUI<h1>
 7         <h2>理論知識</h2>
 8         <h2>實戰應用</h2>
 9         <h2>高級技巧</h2>
10     <h1>DOM</h1>
11         <h2>DOM入門</h2>
12         <h2>DOM應用</h2>
13         <h2>DOM與瀏覽器</h2>
14     <h1>XHTML</h1>
15         <h2>XHTML參考手冊</h2>
16         <h2>XHTML論壇</h2>
17 </div>

　　此次採用的標籤是div+h1+h2的形式，先使用div標籤來設定一個導航的結構區域。在這個區域中，再使用h1來做二級分類的標題，而且還使用h2來作二級分類下面的細節內容。下面來看CSS代碼：　　

 1 [css]
 2 
 3 #category {
 4     width: 100px;
 5     border-color: #c5c6c4;
 6     border-style: solid;
 7     border-width: 0px 1px 1px 1px;
 8 }
 9 
10 #category h1, #category h2 {
11     margin: 0px;
12     padding: 4px;
13     font-size: 12px;
14 }
15 
16 #category h1 {
17     border-top: 1px solid #c5c6c4;
18     background-color: #f4f4f4;
19 }
20 
21 #category h2 {
22     font-weight: normal;
23 }

　　上述代碼中，對#category的border-width分別設置了上、右、下、左四邊的寬度，而且使用了border-color及border-style屬性來定義其顏色及邊框樣式。

4.1.3 下拉及多級彈出式菜單

　　下拉及多級彈出式菜單可以充分利用頁面現有空間來隱藏或顯示更多的內容，並可以對內容進行合理的分類顯示。

　　早期的下拉或彈出式菜單，是經過隱藏的<layer>或<div>塊來實現對內容的隱藏，而且經過JavaScript腳原本響應用戶操做。目前還採用JavaScript+div或其餘元素的形式來製做此類導航。不一樣的是，整個導航都使用符合Web標準的CSS佈局來打造，再也不使用表格來製做這類菜單。

　　實際上，下拉式菜單就是橫向導航與縱向導航的結合，而且經過CSS對屬性的衆多支持，同一個菜單再也不須要多個div相互配合完成，而是使用CSS佈局來製做下拉菜單元件，甚至能夠直接控制ul和li元素。XHTML代碼以下：

 1 <ul id="nav">
 2     <li><a href="">文章</a>
 3         <ul>
 4             <li><a href="">CSS教程</a></li>
 5             <li><a href="">DOM教程</a></li>
 6             <li><a href="">XML教程</a></li>
 7             <li><a href="">Flash教程</a></li>
 8         </ul>
 9     </li>
10     <li><a href="">參考</a>
11         <ul>
12             <li><a href="">XHTML</a></li>
13             <li><a href="">XML</a></li>
14             <li><a href="">CSS</a></li>
15         </ul>
16     </li>
17     <li><a href="">Blog</a>
18         <ul>
19             <li><a href="">所有</a></li>
20             <li><a href="">網頁技術</a></li>
21             <li><a href="">UI技術</a></li>
22             <li><a href="">Flash技術</a></li>
23         </ul>
24     </li>
25 </ul>
26 <ul>
27      <li><a href="">搖滾</a></li>
28      <li><a href="">純音樂</a></li>
29      <li><a href="">古典金曲</a></li>
30      <li><a href="">電影原聲</a></li>
31 </ul>

　　如上述代碼，這裏涉及了嵌套，在第一層<li></li>之間，插入了另外一個<ul></ul>結構，這就是多級菜單的代碼構成模式。設置CSS樣式，讓菜單變成橫向式，CSS代碼以下：

 1 [css]
 2 
 3 ul {
 4     padding: 0;
 5     margin: 0;
 6     list-style: none;
 7 }
 8 
 9 li {
10     float: left;
11     width: 160px;
12 }
13 
14 li ul {
15     display: none;
16     top: 20px;
17 }
18 
19 li: hover ul, li.over ul {
20     display: block;
21 }

　　第一步：對導航系統的全部ul元素進行基本設置。list-style: none;屬性能去掉ul中的全部圓點標識。

　　第二步：經過對li設置float: left;屬性，使得全部li向左浮動，便造成了橫向的佈局。

　　第三步：對li下面的ul元素進行設置。使用top屬性來設置整個ul的上邊距，並使用display: none;來讓這部分被隱藏。

　　第四步：li: hover ul定義了li元素在hover狀態下，ul元素的顯隱模式。便是當鼠標上移到li元素時，使其下的ul元素顯現出來。一樣，li.over ul則是定義了class爲over的li元素下ul元素的顯隱模式。

　　最後，須要爲菜單的顯隱加入一段JavaScript代碼：

 1 <script type="text/javascript">
 2     startList = function() {
 3         if (document.all && document.getElementById) {
 4             navRoot = document.getElementById("nav");
 5             for (i=0; i<navRoot.childNodes.length; i++) {
 6                 node = navRoot.childNodes[i];
 7                 if (node.nodeName=="LI") {
 8                     node.onmouseover=function() {
 9                         this.className+="over";
10                     }
11                     node.onmouseout=function() {
12                         this.className=this.className.replace("over", "");
13                     }
14                 }
15             }
16         }
17     }
18     window.onload=startList;
19 </script>

4.2 背景控制

　　HTML的各個元素基本上都支持background屬性，可是形式比較單一，因此能夠用CSS的background背景屬性來替代傳統表格式佈局中background的方法。

　　CSS爲背景提供的屬性定義以下：

屬性	描述	可用值
background	設置背景的全部控制選項	background-color
		background-image
		background-repeat
		background-attachment
		background-position
background-attachment	設置背景圖的滾動方式，能夠爲固定或者隨內容滾動	scroll
		fixed
background-color	設置背景顏色	color-rgb
		color-hex
		color-name
		transparent
background-image	設置背景圖片	url
		none
background-position	設置背景圖片的位置	top left
		top center
		top right
		center left
		center center
		center right
		bottom left
		bottom center
		bottom right
		x-% y-%
		x-pos y-pos
background-repeat	設置背景圖片的平鋪方式	repeat
		repeat-x
		repeat-y
		no-repeat

4.2.1 背景顏色

　　下面是XHTML代碼：

　　<h1>十六進制顏色值</h1>

　　<h2>RGB顏色值</h2>

　　<h3>顏色名稱</h3>

　　<h4>透明背景</h4>

　　下面是CSS代碼：

　　body {background-color: #EDEDEDED;}

　　h1 {background-color: #6E768F;}

　　h2 {background-color: rgb(53,161,32);}

　　h3 {background-color: mediumslateblue;}

　　h4 {background-color: transparent;}

　　body設置背景爲灰色，再分別對h一、h二、h三、h4進行了background-color屬性不一樣方式的設置：

• h1使用的是十六進制顏色表示方式。（推薦）
• h2直接應用了RGS值。（推薦）
• h3使用一種顏色的名稱。顏色名稱是指不一樣瀏覽器所支持的一些特定的顏色名稱，能夠直接使用，但可能出現瀏覽器不兼容狀況。因此，這不推薦使用。
• h4使用transparent透明模式，該元素在頁面中的背景顯示爲透明效果。若是遇到某元素的父級元素被設置了背景色，那麼這個元素就可使用這種形式來恢復成透明背景色。

4.2.2 背景圖片

　　先來看看最基本的設置背景圖片的方法：

　　下面是XHTML代碼：

　　<div id="content"></div>

　　下面是CSS代碼：

　　#content {

　　　　border: 1px solid #000FFF;

　　　　height: 500px;

　　　　background-image: url(img/bg.gif);

　　}

　　默認狀況下，背景一樣以平鋪的方式出如今元素之中。然而使用CSS來控制背景須要更多屬性。改進後的CSS代碼：須要再加入：background-repeat: repeat-x;這樣背景就只能在x軸即橫向進行平鋪。

4.2.3 背景定位

　　除了平鋪方式外，CSS還提供了另外一個強大的功能，即對背景的定位。在傳統表格式佈局中，每每是經過透明gif圖片來強迫圖片到達某一位置。而在CSS中，即便背景，也可以作到精肯定位。在上述CSS代碼中加入：background-position: left bottom;並將repeat模式設爲no-repeat，使背景圖片只出現一次，不進行平鋪，這樣圖片在背景中被放置到左下角。background-position屬性用於設置圖片的x軸和y軸方向的定位，可使用top、right、bottom、left及center這5種標準對齊方式來進行設定。

　　background-position的設置方式爲：background-position: 左對齊方式 上對齊方式

　　除了使用對齊式方式外，background-position的值還能夠經過百分比及絕對像素單位進行精確控制。如：background-position: 30% 20px;這裏指的是背景在元素中對於其左側、上側空間的距離。

4.2.4 背景滾動

　　在傳統背景定義中，若是定義了一個網頁的body背景，那麼網頁背景每每會自動根據滾動條的下拉而變化。而在CSS中，針對body元素上背景的控制，提供了另外一個選擇，即固定背景模式。使用固定背景模式，背景就再也不跟着滾動條的下拉而進行位移，而始終保持在固定的位置上。background-attachment屬性就是用於控制背景滾動方式。默認爲scroll，也可使用fixed值來表示背景爲固定位置。

4.2.5 背景屬性縮寫

　　基本語法爲：background: 背景色 背景圖片 背景平鋪模式 背景滾動模式 背景定位

　　只要遵循這樣的書寫順序，直接將參數寫在background裏面，便可完成背景設置。

4.3 使用列表元素

　　早期表格式佈局網頁設計中，列表偏偏是表格用處最大之處。若是須要在列表頭部加上圓標或者箭頭等元素，那每一行必須在左側增長一個單元格來存放箭頭圖片，每一個箭頭圖片就是一個<img>標籤。而CSS佈局中的列表設計，提倡使用HTML中自帶的ul及ol標籤。

4.3.1 ul無序列表

　　無序列表是指列表中的各個元素如今邏輯上沒有前後順序。ul與li元素配合使用，每一個li標籤 均爲一條列表項。

4.3.2 ol有序列表

　　有序列表是指列表中的各個元素存在順序區分，從上至下能夠有序地編號爲一、二、三、4或者a、b、c、d等。

　　ul/ol元素所支持的屬性：

屬性	描述	可用值
list-style	設置列表的全部屬性選項	list-style-tyle
		list-style-position
		list-style-image
list-style-image	設置圖片做爲列表中的項目符號	none
		url
list-style-position	設置項目符號的放置	inside
		outside
list-style-type	設置項目符號的幾種默認樣式	none
		disc
		circle
		square
		decimal
		lower-roman
		upper-roman
		lower-alpha
		upper-alpha

4.3.3 改變項目符號樣式

　　經過使用格式：list-style-type: 樣式名稱來設置默認樣式。CSS提供了包含無符號在內的9種默認樣式，針對ul無序列表的有4中樣式：disc/none/circle/square。

　　針對這4種不一樣類型的默認樣式，能夠分別經過list-style-type的取值得以實現。

　　ul {list-style-type: disc}       /* 實心圓 */

　　ul {list-style-type: circle}       /* 空心圓 */

　　ul {list-style-type: square}       /* 實心方塊 */

　　ul {list-style-type: none}       /* 不顯示項目符號 */

　　而對於ol有序列表，除了none外，CSS還提供5種類型的樣式：decimal/lroman/uroman/lalpha/ualpha。

　　ol {list-style-type: decimal}       /* 阿拉伯數字 */

　　ol {list-style-type: lower-roman}       /* 小寫羅馬數字 */

　　ol {list-style-type: upper-roman}       /* 大寫羅馬數字 */

　　ol {list-style-type: lower-alpha}       /* 小寫英文字母 */

　　ol {list-style-type: upper-alpha}       /* 大寫英文字母 */

4.3.4 使用圖片自定義項目符號

　　無須更改HTML代碼，只需使用CSS提供的list-style-image屬性就能完成圖片替代項目符號。如：list-style-image: url(arrow.gif);

　　不過，通常不設置list-style-image屬性，這是由於雖然使用list-style-image就能簡單地達到目的，但同時也失去了一些經常使用特性。那正確的CSS代碼以下：

 1 [css]
 2  
 3 ul {
 4     list-style-type: none;
 5 }
 6  
 7 li {
 8     background-image: url(arrow.gif);
 9     background-repeat: no-repeat;
10     background-position: 0px 3px;
11     padding-left: 20px;
12 }

　　上述代碼中，首先使用list-style-style: none;屬性來取消默認的圓點項目符，而後對li標籤訂義一個不平鋪的背景，並設置其在每一個li中的位置，距上邊爲3px高度。爲防止li中的文字壓住背景，能夠將li元素的左內邊距設置成20px，使得背景圖片能夠展現出來。

　　上述li中的background代碼還能夠縮減爲：background: url(arrow.gif) no-repeat 0px 3px;

4.3.5 使列表變爲段落

　　在display的可用值中，還有一個經常使用的參數inline。display: inline;XHTML中的大部分可視爲對象的默認方式，都是基於block及inline的。對於div而言，其默認爲一個block；對a及span而言，它們則是inline顯示方式。CSS爲頁面對象提供了一些可定義的顯示方式：

屬性	可用值	描述
display	block	將對象顯示爲盒狀，後一個對象換行顯示
	none	隱藏/不顯示對象
	inline	行間內聯樣式，將對象排列成一行，後一個對象繼續鏈接此對象顯示
	inline-block	對象顯示爲塊狀，但能呈現內聯樣式
	list-item	將對象做爲列表項顯示

　　可是，在導航設計中，使用float: left;模式一樣可使列表顯示在一行中，但爲何還要使用display: inline模式呢？

　　實際上，float: left;對對象在頁面中浮動的控制，而不是對象上下文關聯的顯示模式。使用float：left;來製做段落型文本，若是浮動對象較多並且複雜的話，很容易形成瀏覽器解析混亂。因此，float: left;更適合對象的佈局模式，而不是信息的組織。若是但願讓信息顯示爲段落，特別是這種上下文須要進行關聯的段落，最好實用display: inline;不提倡實用float。

4.3.6 列表縮進排版

　　對列表項的段落縮進，可使用CSS針對文本控制的一個公用屬性：text-indent: value;該屬性的參數除了可使用像素表示，還能夠用其餘單位（如50%或0.8em等），若是但願列表中的項目顯示特別一些，還能夠經過負數值來實現。負數值表示非縮進而是向左推動。

4.4 表單設計

　　幾個重要的表單元素是：button（按鈕）、 input（單行文本框）、 textarea（多行文本框）、 listbox（列表框）、 select（下拉列表）、 radio（單選按鈕）、 checkbox（複選按鈕）等。也能夠用小圖片來代替按鈕，只要將圖片作成按鈕樣式，再爲它添加click事件便可。

4.4.1 改變輸入框及文本域樣式

　　改變輸入框外觀的最基本方法是使用border及background-color，可使用兩者的組合來實現樣式的改變。

　　border的屬性從樣式上看主要由三部分，即color、style及width。以下：

屬性	描述	可用值
border-color	設置邊框的顏色	color
border-style	設置邊框的樣式	none   無邊框
		hidden   隱藏邊框
		dotted   點狀邊框
		dashed   虛線狀邊框
		solid   實線邊框
		double   雙線邊框
		groove   3D 凹槽狀邊框
		ridge   3D 凸槽狀邊框
		inset   3D 凹邊狀邊框
		outset   3D 凸邊狀邊框
border-width	設置邊框的寬度	thin
		medium
		thick
		length

4.4.2 改變下拉列表樣式

　　在CSS中，能夠藉助下拉列表的<option>對象實現。

4.4.3 改變按鈕樣式

　　對於按鈕，一樣能夠經過與文本框相同的邊框、背景色及圖片等方式，能夠方便地進行外觀式設計。

4.4.4 使用label標籤提高表單可用性

　　label標籤用來與表單元件進行配合，其使用形式以下：

　　<label for="c1">點擊此文件</label>

　　<input type="checkbox" name="c1" id="c1" value="checbox" />

　　其中，for屬性用於指定該標籤所關聯的表單元件。當for所指的名稱與表單某元件的id值相同時，該標籤將與該元件關聯，點擊該標籤的同時，該元件也獲得響應。

4.5 字體及段落樣式設計

4.5.1 應用字體樣式

　　CSS所支持的字體屬性以下：

屬性	描述	可用值
color	設置文字的顏色	color
font-family	設置文字名稱，可用使用多個名稱，或者使用逗號分隔，瀏覽器則按照前後順序依次使用可用字體	font-name
font-size	設置文字的尺寸	xx-small
		x-small
		small
		medium
		large
		x-large
		xx-large
		smaller
		larger
		length
		%
font-size-adjust	強制對象使用同一個尺寸	none
		number
font-style	設置文字樣式	normal
		italic
		oblique
font-weight	設置文字的加粗樣式	normal
		bold
		bolder
		lighter
		100 200
		300 400
		500 600
		700
		800
		900
font-variant	設置英文文本爲小型的大寫字母字體	normal
		small-caps
text-transform	設置英文文本的大小寫方式	none
		capitalize
		uppercase
		lowercase
text-decoration	設置文本的下劃線	none
		underline
		line-through
		overline

4.5.2 應用段落樣式

　　CSS的大部分段落樣式屬性以下：

屬性	描述	可用值
line-height	設置對象中文本的行高	normal
		length
letter-spacing	設置對象中文字之間的間距	normal
		length
word-spacing	設置對象中單詞之間的間距	normal
		length
text-indent	設置對象中首行文字的縮進值	normal
		length
text-overflow	當對象中的文本超過行寬時，可用對文本末端增長省略標記，但只有當對象設爲不換行顯示時纔有效	clip
		ellipsis
vertical-align	設置對象之中內容的垂直對齊方式	auto
		baseline
		sub
		super
		top
		text-top
		middle
		text-bottom
text-align	設置對象中文本的對齊方式	left
		right
		center
		justify
layout-flow	設置對象中文本的排版方式，橫向或縱向排版	horizontal
		vertical-ideographic
word-break	設置對象內文本的換行方式，使用break-all時，容許詞間進行換行	normal
		break-all
		keep-all
white-space	設置對象內空格字符的處理方式，使用nowarp方式時，將強制文本不換行，除非遇到<br />標籤	normal
		pre
		nowarp
word-warp	使用break-work時，若是內容超過其容器的邊界則發生換行	normal
		break-word

4.6 連接樣式控制

4.6.1 連接控制

　　CSS提供了4個僞類，用於對連接進行樣式控制。能夠進行如下4種狀態的樣式設置。

• a: link狀態：用於設置a對象在沒有被訪問時的樣式。在實際中，爲了編碼上的簡單，常常直接使用a而不是a: link來編寫。
• a: visited狀態：用於設置a對象被訪問後的樣式。
• a: active狀態：用於設置a對象在用戶點擊連接時的樣式，並且是在釋放以前的樣式設定。實際應用中，用的不多。
• a: hover狀態：用於設置a對象在鼠標懸停在連接上時的樣式。

注：

• 關於這4種僞類必定要注意順序！順序必須爲LVHA。
• a: active狀態通常不用寫。
• a: link也能夠簡寫爲a。

4.6.2 麪包屑導航連接

　　這裏所指的麪包屑導航(crumb)，就是指網站上常常出現的路徑式導航。XHTML代碼以下：

1 <div id="crumb">
2     <a href="#">CSS: Designer</a>
3     <a href="#">CSS 文章</a>
4     <a href="#">hack 技術</a>
5 </div>

　　CSS代碼以下：

 1 [css]
 2 
 3 #crumb a {
 4     float: left;
 5     color: #333333;
 6     font-size: 14px;
 7     font-family: arial;
 8     text-decoration: none;
 9     display: block;
10     background: url(img/ar.gif) no-repeat 3px 3px;
11     padding: 1px 2px 1px 20px;
12     margin: 0px 5px;
13     border: 1px solid #FFFFFF;
14 }
15 
16 #crumb a: hover {
17     border: 1px solid #578c12;
18     background-color: #f8f8f8f8;
19 }