WEB基礎03文本格式化-表格樣式-浮動定位-顯示-列表樣

1.文本格式化本章主要講解如何實現(xiàn)文本的格式化，包括控制文本的字體（如字體大小、字體樣式和字體系列等）和設置文本的格式（如文本顏色、文本排列和文本縮進等）。1.1.文本格式化1.1.1.控制字體CSS字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）等，這些屬性會直接影響字體及其外觀。常用的屬性有：1、指定字體（font-family）可以使用font-family屬性指定文本的字體，語法如下：font-family:name/inherit;如果需要指定字體，則設置值為name，即首選字體的名稱。如果字體名稱有多個單詞，即中間有空格，則需要將字體名稱用一對單引號或者雙引號包圍起來。如果字體名稱包含非ASCII字符，就必須聲明樣式表的編碼。這個屬性最大的問題在于，如果用戶機器上并沒有安裝所需要的字體，則會顯示默認字體。因此，在指定字體時，最好同時指定替代字體。我們可以為font-family屬性指定多種字體，且多種字體之間用逗號隔開，這樣可以為頁面指定一個字體列表。如果用戶機器沒有第一種字體，則瀏覽器會查找字體列表中的下一種字體作為替代字體顯示。如果找遍了字體列表還是沒有可以使用的字體，瀏覽器會使用默認字體顯示頁面。我們可以結合特定字體和通用字體系列來指定字體，如：h1{font-family:Georgia,serif;}如果用戶機器上沒有安裝Georgia，但安裝了Times字體（serif字體系列中的一種字體），瀏覽器就可能對<h1>元素使用Times。盡管Times與Georgia并不完全匹配，但至少足夠接近。2、字體大?。╢ont-size）font-size屬性用來設置文本的大小。如果沒有規(guī)定字體大小，普通文本（比如段落）的默認大小是16像素(16px=1em)?？梢允褂枚喾N方式指定這個屬性的值：絕對大小、相對大小、長度單位和百分比。其中，如果使用長度單位來設置字體大小，還可以分別使用相對單位和絕對單位。長度是指采用一種長度單位來表達字體的大小?？墒褂玫慕^對單位如表－1所示。表－1長度的絕對單位圖－1給出了使用長度的絕對單位來設置字體大小的效果。圖-1也可以使用相對單位的長度來設置字體大小，可使用的相對單位如表－2所示。表－2長度的相對單位如果需要使用相對單位來設置大小，我們可以使用px，表示像素。通過像素設置文本大小，可以對文本大小進行完全控制。比如，我們可以這樣設置：h1{font-size:60px;}h2{font-size:40px;}p{font-size:14px;}font-size屬性的值還可以設置為“inherit”，規(guī)定應該從父元素繼承字體尺寸。3、字體加粗（font-weight）font-weight屬性用于設置文本的粗細，常用于實現(xiàn)將顯示元素的文本中所用的字體加粗。該屬性可能的值如表－3所示。表－3font-weight屬性的取值使用bold關鍵字可以將文本設置為粗體。關鍵字100~900為字體指定了9級加粗度。如果一個字體內(nèi)置了這些加粗級別，那么這些數(shù)字就直接映射到預定義的級別，100對應最細的字體變形，900對應最粗的字體變形。數(shù)字400等價于normal，而700等價于bold。如果將元素的加粗設置為bolder，瀏覽器會設置比所繼承值更粗的一個字體加粗。與此相反，關鍵詞lighter會導致瀏覽器將加粗度下移而不是上移。比如，我們可以這樣定義樣式規(guī)則：p.normal{font-weight:normal;}p.thick{font-weight:bold;}p.thicker{font-weight:900;}然后查看如下代碼：<pclass="normal">font-weight:normal</p><pclass="thick">font-weight:bold</p><pclass="thicker">font-weight:900</p>上述代碼在瀏覽器中的顯示效果如圖-2所示。圖-2其中，bold是最常用的值，也會遇到使用normal的情況，尤其是在大量加粗文本中創(chuàng)建不同效果的文本時。1.1.2.控制文本格式CSS除了可以設置字體，還可以定義文本的外觀。通過文本屬性，可以改變文本的顏色、字符間距、對齊文本、裝飾文本、對文本進行縮進等。1、文本顏色（color）color屬性用于設置文本的顏色，即元素的前景色。這個顏色還會應用到元素的所有邊框，除非被border-color或另外某個邊框顏色屬性覆蓋。沒有設置color屬性的文本將使用瀏覽器的默認顏色顯示。如果需要使用該屬性設置文本顏色，該屬性的值可以是顏色名稱、rgb值或者十六進制數(shù)，其默認值取決于瀏覽器。比如，我們可以這樣設置：p{color:rgb(255,255,0);}或者p{color:#FFFF00;}2、文本排列（text-align）text-align是一個基本的屬性，用于設置一個元素中的文本行互相之間的對齊方式。該屬性通過指定行框與哪個點對齊，從而設置塊級元素內(nèi)文本的水平對齊方式。該屬性可能的取值如表－4所示。表－4text-align屬性的取值前3個值相當直接，不用額外解釋。text-align屬性還可能取值justify，我們稱為兩端對齊。在兩端對齊文本中，文本行的左右兩端都放在父元素的內(nèi)邊界上。然后，調整單詞和字母間的間隔，使各行的長度恰好相等。這種兩端對齊的排列方式經(jīng)常用于打印。比如，我們可以這樣定義樣式規(guī)則：td.leftAlign{text-align:left;}td.rightAlign{text-align:right;}td.centerAlign{text-align:center;}td.justifyAlign{text-align:justify;}然后，查看如下代碼：<tableborder="1"><tr><tdclass="leftAlign">Withsunshine,water,andcarefultending,roseswillbloomseveraltimesinaseason.</td></tr><tr><tdclass="rightAlign">Withsunshine,water,andcarefultending,roseswillbloomseveraltimesinaseason.</td></tr><tr><tdclass="centerAlign">Withsunshine,water,andcarefultending,roseswillbloomseveraltimesinaseason.</td></tr><tr><tdclass="justifyAlign">Withsunshine,water,andcarefultending,roseswillbloomseveraltimesinaseason.</td></tr></table>上述代碼在瀏覽器中的顯示效果如圖-3所示。圖-3由圖－3可以看出，居左或者居右排列后，另外一端會顯示為鋸齒狀（使用默認的字寬和間隔，以單詞為單位換行）；而如果使用justify則會顯示為兩端對齊的效果。3、文字修飾（text-decoration）text-decoration屬性用于對文本進行修飾。它允許對文本設置某種效果，如加下劃線、上劃線或者閃爍等。text-decoration屬性可能的取值如表－5所示。表－5text-decoration屬性的取值underline會對元素加下劃線;而overline的作用恰好相反，會在文本的頂端畫一個上劃線；值line-through則在文本中間畫一個貫穿線;blink會讓文本閃爍。還可以在一個規(guī)則中結合多種裝飾，只需要為text-decoration屬性設置多個值，且多個值之間用空格隔開。比如，如果一個段落中的文本既有下劃線，又有上劃線，我們可以這樣定義：p{text-decoration:underlineoverline;}none值會關閉原本應用到一個元素上的所有裝飾。通常，無裝飾的文本是默認外觀，但某些元素例外。比如，鏈接默認地會有下劃線。因此，如果希望去掉超鏈接的下劃線，可以使用以下CSS來做到這一點：a{text-decoration:none;}如果顯式地用這樣一個規(guī)則去掉鏈接的下劃線，那么它與正常文本之間在視覺上的唯一差別可能就是顏色（瀏覽器往往會為鏈接設置默認的顏色）。blink值會創(chuàng)建閃爍的文本，但是這通常被認為是不贊成使用的方式，大部分瀏覽器也不支持它。4、行高（line-height）line-height屬性用于設置行間的距離。當處理大量文本時，增加文本行之間的垂直空間量可以提高文檔可閱讀性，這種空間量稱為行間距。在Web頁面中增加行間距是非常有用的。比如，如果文本行之間存在更多的空間，當達到一行的末尾之后，更容易發(fā)現(xiàn)下一行的起點。line-height屬性會影響行框的布局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離。行間距是line-height與font-size的計算值之差。行間距會被分為兩半，分別加到一個文本行內(nèi)容的頂部和底部。而可以包含這些內(nèi)容的最小框就是行框。比如，我們可以這樣定義樣式規(guī)則：p{border:1pxsolidred;}p.smallLength{line-height:10px;}p.bigLength{line-height:30px;}然后，查看如下代碼：<p>這是擁有標準行高的段落。在大多數(shù)瀏覽器中默認行高大約是20px。這是擁有標準行高的段落。</p><pclass="smallLength">length=10px。這個段落擁有更小的行高。這個段落擁有更小的行高。</p><pclass="bigLength">length=30px。這個段落擁有更大的行高。這個段落擁有更大的行高。</p>上述代碼在瀏覽器中的顯示效果如圖-4所示。圖-45、首行文本縮進（text-indent）把Web頁面上的段落的第一行縮進，這是一種最常用的文本格式化效果。CSS提供了text-indent屬性，該屬性可以方便地實現(xiàn)文本縮進。text-indent屬性縮進元素中的首行文本，即使用該屬性可以讓元素的第一行縮進一個給定的距離。這個屬性最常見的用途是將段落的首行縮進，下面的規(guī)則會使段落的首行縮進2em：p.first{text-indent:2em;}可以為塊級元素應用text-indent屬性，但無法將該屬性應用于行內(nèi)元素，且圖像之類的替換元素上也無法應用text-indent屬性。不過，如果一個塊級元素（比如段落）的首行中有一個圖像，它會隨該行的其余文本移動。text-indent屬性除了可以使用長度單位，還包括百分比值。百分數(shù)是相對于縮進元素的父元素的寬度。即如果將縮進值設置為20%，所影響元素的第一行會縮進其父元素寬度的20%。比如，我們可以這樣定義樣式規(guī)則（為了更好的觀察父元素的邊界，我們定義了<div>元素的邊框）：div{width:400px;border:1pxsolidred;}p.indent{text-indent:20%;}然后，查看如下代碼：<div><p>Thisisaparagraph.Thisisaparagraph.Thisisaparagraph.</p><pclass="indent">Thisisaparagraph.Thisisaparagraph.Thisisaparagraph.</p></div>上述代碼在瀏覽器中的顯示效果如圖-5所示（縮進值是父元素的20%，即80個像素）：圖-52.表格樣式2.1.表格常用樣式屬性2.1.1.表格常用樣式屬性對于表格而言，它可以使用前面章節(jié)中講述的很多CSS樣式（如背景色、邊框和字體等），比如，可以使用width屬性、height屬性設置單元格的大?。豢梢允褂胋order屬性設置單元格的邊框；可以使用padding屬性控制表格中內(nèi)容與邊框的距離；可以使用background屬性設置表格或者單元格的背景色以及背景圖像；還可以使用文本格式化相關的樣式屬性來定義表格中的文本。需要注意的是，除了background-color屬性和height屬性之外，最好避免將這些屬性用于<tr>元素。因為這些屬性用于表行時，瀏覽器對它們的支持并沒有像它們用于單個單元格時那么好。2.1.2.垂直方向對齊vertical-align屬性用于設置元素的垂直對齊方式，當操作內(nèi)聯(lián)元素時（比如圖像或者普通文本），該屬性非常有用。在表單元格中，這個屬性會設置單元格框中的單元格內(nèi)容的對齊方式。vertical-align屬性可能的取值有很多，但是該屬性在用于表格單元格中的內(nèi)容垂直對齊方式時可取的值如表－6所示。表－6vertical-align屬性的取值vertical-align屬性在用于表格單元格中的內(nèi)容垂直對齊方式時，可以設置為頂部top、中部middle和底部bottom三個值。比如，我們定義如下樣式規(guī)則：.top{vertical-align:top;}.middle{vertical-align:middle;}.bottom{vertical-align:bottom;}td{width:200px;height:80px;border:1pxsolidred;}然后，在頁面的主體中添加如下代碼：<table><tr><td>sometext</td><tdclass="top">sometext</td></tr><tr><tdclass="middle">sometext</td><tdclass="bottom">sometext</td></tr></table>上述代碼在瀏覽器中的顯示效果如圖-6所示。圖-6表格單元格中內(nèi)容的垂直對齊方式的默認值為middle，因此，圖－1中表格的第一列的兩個單元格中的文本都是垂直居中顯示；而設置了top值和bottom值以后，可以設置單元格中內(nèi)容位于單元格頂部或者底部顯示。另外，默認情況下，單元格中的文本在水平方向上居左顯示，可以使用text-align屬性來修改其水平對齊方式。2.2.表格特有樣式屬性除了上一節(jié)中講述的那些屬性以外，還有一些屬性是只與表格相關的。這些僅與表格相關的樣式屬性可以極大的改善表格的外觀。2.2.1.邊框合并從在前面的示例中不難發(fā)現(xiàn)，如果設置了單元格的邊框，相鄰單元格的邊框會單獨顯示，類似于雙線邊框（見圖-6）。如果需要合并相鄰的邊框，則可以使用border-collapse屬性。border-collapse屬性設置是否將表格邊框折疊為單一邊框，即是否被合并為一個單一的邊框，還是像在標準的HTML中那樣分開顯示。border-collapse屬性可能的取值如表－7所示。表－7border-collapse屬性的取值border-collapse屬性的值如果設置為separate值或者不設置，瀏覽器會獨立顯示每一個單元格的邊框，即使兩個相鄰單元格具有不同類型的邊框。border-collapse屬性的值如果設置為collapse值，則會對邊框進行合并，即會基于一組內(nèi)置的復雜規(guī)則來決定顯示哪一個邊框。一般情況下，瀏覽器會對邊框進行折疊。比如，我們定義如下樣式規(guī)則：table{border:2pxdottedblack;}td{width:200px;height:50px;}table.separate{border-collapse:separate;}table.collapse{border-collapse:collapse;}td.solid{border:3pxsolidsilver;}td.dashed{border:3pxdashedgray;}然后，在頁面的主體中添加如下代碼：border-collapse:separate<tableclass="separate"><tr><tdclass="solid">第1行第1列</td><tdclass="dashed">第1行第2列</td></tr><tr><tdclass="dashed">第2行第1列</td><tdclass="solid">第2行第2列</td></tr></table><br/>border-collapse:collapse<tableclass="collapse"><tr><tdclass="solid">第1行第1列</td><tdclass="dashed">第1行第2列</td></tr><tr><tdclass="dashed">第2行第1列</td><tdclass="solid">第2行第2列</td></tr></table>上述代碼在瀏覽器中的顯示效果如圖-7所示。圖-7為了更好的查看效果，圖-7中的相鄰單元格使用了不同樣式的邊框。圖-7中的第一個表格的border-collapse屬性使用了separate值，則表格的邊框、各單元格的邊框都獨立顯示，即使相鄰的單元格的邊框樣式不同。第二個表格的border-collapse屬性使用了collapse值，相鄰的邊框則會發(fā)生合并，邊框會互相折疊。由圖可見，實線邊框的優(yōu)先級高于虛線邊框。2.2.2.邊框邊距由前面的示例不難發(fā)現(xiàn)，在表格中的單元格之間存在一定的間距，如果希望控制這個間距，則可以使用border-spacing屬性。border-spacing屬性設置相鄰單元格的邊框間的距離，但是僅限于分隔單元格邊框，即border-collapse屬性為separate值的情況下，也稱為邊框分離模式。該屬性的值可以是長度單位或者單詞inherit。如果設置為長度，則可以使用px、cm等單位，但是不允許使用負值；如果設置為inherit值，表示規(guī)定應該從父元素繼承border-spacing屬性的值。設置border-spacing屬性的值為長度值時，可以為該屬性指定一個或者兩個值。如果指定一個值，則該值同時應用于水平和垂直間距；如果指定兩個值，那么第一個值指定水平間距，第二個值指定垂直間距，且兩個值之間用空格隔開。比如，我們定義如下樣式規(guī)則：table{border:2pxdottedgray;}td{background-color:#f0f0f0;width:200px;height:50px;border-collapse:separate;border:1pxsolidblack;}table.singleSpacing{border-spacing:5px;}table.doubleSpacing{border-spacing:10px20px;}然后，在頁面的主體中添加如下代碼：<tableclass="singleSpacing"><caption>設置一個值</caption><tr><td>第1行第1列</td><td>第1行第2列</td></tr><tr><td>第2行第1列</td><td>第2行第2列</td></tr></table><br/><tableclass="doubleSpacing"><caption>設置兩個值</caption><tr><td>第1行第1列</td><td>第1行第2列</td></tr><tr><td>第2行第1列</td><td>第2行第2列</td></tr></table>上述代碼在瀏覽器中的顯示效果如圖-8所示。圖-8由圖-8可以看出，第一個表的border-spacing屬性只設置了一個值為5px，則單元格邊框之間的垂直和水平間隔均為5像素；而第二個表的border-spacing屬性設置了兩個值，則單元格邊框之間的水平間距為10像素，而垂直間距較大，為20像素。需要注意的是，為了盡量能夠在各瀏覽器中得到一致的顯示效果，最好為<table>元素設置border-spacing屬性，而不是單元格等其他元素。3.浮動定位3.1.定位概述3.1.1.定位概述CSS為定位提供了一些屬性，利用這些屬性，可以建立列式布局，還可以將布局的一部分與另一部分重疊，這樣可以完成多年來通常需要使用多個表格才能完成的任務。定位的基本思想很簡單，即可以定義元素框相對于其正常位置應該出現(xiàn)的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，而且各瀏覽器對CSS2中定位的支持遠勝于對其它方面的支持。CSS有三種基本的定位機制：普通流定位、浮動和絕對定位。其中，使用position屬性和偏移屬性可以實現(xiàn)普通流定位（包括相對定位）和絕對定位（包括固定定位）；使用float屬性可以實現(xiàn)浮動定位。其他屬性為輔助屬性。在后面的章節(jié)中，我們會詳細講解普通流定位、相對定位、絕對定位和浮動。3.1.2.普通流定位默認情況下，通過使用稱為普通流的方式在頁面中布局元素。在普通流中定位，頁面中的塊級元素框從上到下一個接一個地排列，且每一個塊級元素都會出現(xiàn)在一個新行中（比如<p>元素、<div>元素），元素框之間的垂直距離是由框的垂直外邊距計算出來的。內(nèi)聯(lián)元素將在一行中從左到右排列水平布置，不需要從新行開始。可以使用水平內(nèi)邊距、邊框和外邊距調整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（LineBox），行框的高度總是足以容納它包含的所有行內(nèi)框。不過，設置行高可以增加這個框的高度。為了更好的理解普通流定位模式，我們定義如下樣式規(guī)則：p{height:70px;border:1pxsolidgray;margin-top:20px;padding-top:10px;}div{height:70px;border:2pxdashedblack;margin-top:20px;padding-top:10px;}b{height:50px;border:2pxdottedred;margin-top:20px;padding-top:10px;}然后在頁面的主體中添加如下代碼：<div><u>This</u>isthe<i>first</i><b>block</b>element.</div><div><u>This</u>isthe<i>second</i><b>block</b>element.</div><p><u>This</u>is<i>paragraph</i><b>one</b>.</p>上述代碼在瀏覽器中的顯示效果如圖-9所示。圖-9由圖－9可以看出，每個塊級元素（段落和<div>元素）按照在代碼中書寫的順序逐一出現(xiàn)在一個不同的行中，而<b>、<i>和<u>這些內(nèi)聯(lián)元素則位于塊級元素中的同一行，且按照從左到右的順序出現(xiàn)。對于塊級元素，可以設置邊框、高度、寬度、外邊距和內(nèi)邊距；而對于內(nèi)聯(lián)元素，即使設置高度和外邊距，也沒有實際效果，只能設置內(nèi)邊距（見<b>元素的顯示效果）。如果希望讓元素的位置與在普通流位置中出現(xiàn)的位置不同，則需要使用定位屬性來實現(xiàn)。使用position屬性可以更改定位模式為相對定位、絕對定位和固定定位，還可以使用偏移屬性來實現(xiàn)元素框位置的偏移；或者使用float屬性來實現(xiàn)浮動定位。3.2.浮動定位3.2.1.浮動概述浮動定位是指將元素排除在普通流之外，并且將它放置在包含框的左邊或者右邊，但是依舊位于包含框之內(nèi)。也就是說，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。使用浮動可以修改元素原有的定位方式，尤其在一些需要設置多個塊級元素同行排列的情況下會非常有用。3.2.2.浮動定位由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。為了更好的理解浮動的作用，我們先用一些示意圖解釋浮動的效果，然后在使用float屬性來實現(xiàn)這些效果。首先，請看圖－10。包含框中有三個元素框，如果把框1向右浮動，則它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：圖-10然后，我們查看圖－11。圖-11由圖－11可以看出，當框1向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框2，使框2從視圖中消失（如圖－11中的左圖所示）。而如果把所有三個框都向左移動，那么框1向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框（如圖－11中的右圖所示）。而如果包含框太窄或者浮動框的高度不同，會出現(xiàn)什么現(xiàn)象呢？我們查看圖－12。圖-12由圖－12可以看出，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊會自動向下移動，直到有足夠的空間（如圖－12中的左圖所示）；而如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”（如圖－12中的右圖所示）。3.2.3.float屬性如果需要指示框浮動在包含框的左邊或者右邊，我們可以通過float屬性來實現(xiàn)。float屬性定義元素在哪個方向浮動。float屬性可能的取值如表－8所示。表－8float屬性的取值比如，我們定義如下樣式規(guī)則：div{height:100px;background-color:#f0f0f0;border:1pxsolidgray;margin:10px0px0px10px;font-size:24px;}div.float{float:right;}然后，在頁面的主體中添加如下代碼：<div>框1</div><divclass="float">框2</div><div>框3</div>上述代碼在瀏覽器中的顯示效果如圖-13所示。圖-13由圖－13可以看出，設置框2向右浮動后，它會?？吭陧撁娴挠疫吙?，而框3位于框2浮動前的位置，就像框2不存在一樣。但是因為沒有指定元素框的寬度，則浮動框會盡可能的窄，就如同框2的效果。因此，指定元素的float屬性后，最好設置元素的width屬性，用于指示浮動框占用包含框的寬度。我們修改<div>元素的樣式規(guī)則，為其加上寬度：div{width:100px;height:100px;background-color:#f0f0f0;border:1pxsolidgray;margin:10px0px0px10px;font-size:24px;}div.float{float:right;}圖-14給出了上述代碼在瀏覽器中的顯示效果。圖-143.2.4.clear屬性出現(xiàn)在其他元素中的圖形和文本元素稱為浮動元素，而clear屬性用于設置一個元素的側面是否允許其他的浮動元素。clear屬性定義了元素的哪邊上不允許出現(xiàn)浮動元素。在CSS1和CSS2中，這是通過自動為清除元素（即設置了clear屬性的元素）增加上外邊距實現(xiàn)的。在CSS2.1中，會在元素上外邊距之上增加清除空間，而外邊距本身并不改變。不論哪一種改變，最終結果都一樣。clear屬性可能的取值如表－9所示。表－9clear屬性的取值其中，none值為默認值，不進行清理，即會出現(xiàn)文本圍繞的效果；而如果聲明為左邊或右邊清除，表示框的哪些邊不應該挨著浮動框，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。比如，我們定義如下樣式規(guī)則（為兩個浮動元素框定義不同的高度）：p{height:200px;border:1pxsolidgray;margin:20px0px0px20px;font-size:24px;}div{width:100px;border:1pxsolidgray;margin:20px0px0px20px;font-size:24px;background-color:#f0f0f0;}div.floatLeft{float:left;height:150px;}div.floatRight{float:right;height:100px;}然后，在頁面主體中添加如下代碼：<divclass="floatLeft">左側浮動框</div><divclass="floatRight">右側浮動框</div><p>Thisisparagraph.Thisisparagraph.Thisisparagraph.Thisisparagraph.</p>此時，雖然先定義<div>元素再添加段落<p>元素，但是因為兩個<div>元素分別設置了向左和向右浮動，則段落<p>元素會向上移，且出現(xiàn)文本包圍浮動框的效果，如圖－15所示。圖-15如果不希望實現(xiàn)圖－15所示的文本圍繞效果，則可以設置段落元素的clear屬性。如果需要清除右側浮動框，則可以設置clear屬性為值right，即段落元素的右邊不允許有浮動元素。修改樣式規(guī)則如下：p{height:200px;border:1pxsolidgray;margin:20px0px0px20px;font-size:24px;clear:right;}圖－16給出了修改樣式規(guī)則后的代碼在瀏覽器中的顯示效果。圖-16由圖－16可以看出，設置了段落的clear屬性為right值以后，為段落元素添加上外邊距以實現(xiàn)清除右邊浮動框的效果。但是因為左邊浮動框的高度大于右邊浮動框，左邊依然有文本圍繞浮動框的效果。因此，如果需要完全清除文本圍繞的效果，則可以設置清除左側浮動框（左側浮動框的高度大于右側浮動框，可以添加足夠的上外邊距）；或者設置clear屬性為both值。為此，我們修改樣式規(guī)則如下：p{height:200px;border:1pxsolidgray;margin:20px0px0px20px;font-size:24px;clear:both;}圖－17給出了修改樣式規(guī)則后的代碼在瀏覽器中的顯示效果。圖-174.顯示4.1.顯示方式4.1.1.顯示方式相信學到這里的時候，你已經(jīng)對“一切皆為框”這句話有了深刻的理解：頁面上所有的元素都可以顯示為框。不過，像<div>、<h1>或<p>元素常常被稱為塊級元素，這意味著這些元素顯示為一塊內(nèi)容，即“塊框”；與之相反，<span>和<strong>等元素稱為“內(nèi)聯(lián)元素”或者“行內(nèi)元素”，這是因為它們的內(nèi)容顯示在行中，即“行內(nèi)框”。4.1.2.display屬性除了默認的顯示效果之外，我們還可以使用display屬性來修改元素框的顯示方式，即改變生成的框的類型。該屬性可能的取值如表-10所示。表－10display屬性的取值由表-10可以看出，我們可以用display屬性定義建立布局時元素生成的顯示框類型。1、block值如果將display屬性設置為block，可以讓行內(nèi)元素（比如<a>元素）表現(xiàn)得像塊級元素一樣。比如，我們定義如下樣式規(guī)則：a{width:100px;height:30px;border:1pxsolidgray;background-color:#f0f0f0;text-align:center;}a.displayAsBlock{display:block;}然后，在頁面的主體中添加如下代碼：<ahref="#">鏈接1</a><ahref="#">鏈接2</a><br/><br/><ahref="#"class="displayAsBlock">鏈接1</a><ahref="#"class="displayAsBlock">鏈接2</a>上述代碼在瀏覽器中的顯示效果如圖-18所示。圖-18由圖-18可知，設置了<a>元素的顯示類型為block之后，該元素就顯示為塊級元素的效果，可以定義高度和寬度，且會自動換行。2、inline值如果將display屬性設置為inline，可以讓塊級元素（比如<p>元素）表現(xiàn)得像內(nèi)聯(lián)元素一樣。比如，我們定義如下樣式規(guī)則：p{width:100px;height:50px;border:1pxsolidgray;background-color:#f0f0f0;text-align:center;}p.displayAsInline{display:inline;}然后，在頁面的主體中添加如下代碼：<p>普通段落</p><pclass="displayAsInline">段落1</p><pclass="displayAsInline">段落2</p>上述代碼在瀏覽器中的顯示效果如圖-19所示。圖-19由圖-19可知，設置了<p>元素的顯示類型為inline之后，該元素就顯示為內(nèi)聯(lián)元素的效果，定義的高度和寬度失效，且不會自動換行。3、inline-block值inline-block值表示行內(nèi)塊元素，是CSS2.1新增的值。為了更好的理解此屬性值的作用，我們添加如下樣式規(guī)則：p.displayAsInlineBlock{display:inline-block;}然后，在頁面的主體中添加如下代碼：<p>普通段落1</p><pclass="displayAsInline">段落1</p><pclass="displayAsInline">段落2</p><br/><pclass="displayAsInlineBlock">段落3</p><pclass="displayAsInlineBlock">段落4</p>上述代碼在瀏覽器中的顯示效果如圖-20所示。圖-20由圖-20可知，設置了<p>元素的顯示類型為inline-block之后，多個段落元素依然顯示在同一行，但是在同一行內(nèi)的段落元素表現(xiàn)的如同塊級元素，即可以為其定義高度和寬度，會占據(jù)相應的空間（如段落3和段落4）。4、none值可以通過把display屬性設置為none，讓生成的元素根本沒有框。這樣的話，該框及其所有內(nèi)容就不再顯示，不占用文檔中的空間。比如，我們繼續(xù)定義如下樣式規(guī)則：p.noDisplay{display:none;}然后，在頁面的主體中添加如下代碼：<p>普通段落1</p><pclass="noDisplay">普通段落2</p><p>普通段落3</p>上述代碼在瀏覽器中的顯示效果如圖-21所示。圖-21由圖-21可知，設置了<p>元素的顯示類型為none之后，該元素就不再顯示，且不占用空間，就像沒有定義過一樣。由這些示例可以看出，我們可以使用display屬性來定義元素生成的顯示框類型，從而實現(xiàn)頁面布局中的某些特殊顯示效果。4.2.光標4.2.1.光標默認情況下，光標會根據(jù)用戶的操作發(fā)生改變。比如，當鼠標懸停在一個鏈接上時，光標將從指針形狀變?yōu)槭譅钚螤?；當鼠標懸停在文本區(qū)域時，會顯示I形狀；而當鼠標懸停在一個按鈕上時，光標會顯示為箭頭?？梢允褂胏ursor屬性指定顯示給用戶的鼠標光標類型（形狀）。比如，當一個圖像可以被點擊，甚至可以作為表單上的提交按鈕時，則可以使用此屬性修改光標的形狀為手狀，這樣可以為用戶提供一種可視化的暗示，提示他們可以單擊該圖像。4.2.2.cursor屬性cursor屬性定義了鼠標指針放在一個元素邊界范圍內(nèi)時所用的光標形狀，該屬性常用的取值有：auto、default、pointer、crosshair、move、text、wait、help和URL等。其中，auto值表示由瀏覽器自動根據(jù)元素類型設置光標形狀，而default、pointer、crosshair、move、text、wait和help都容易理解，不再贅述。url值是指可以為元素定義一個自定義的圖標作為光標形狀，只是使用url時，最好在列表的末端始終定義一種普通的光標，這樣，當沒有由URL定義的可用光標時還可以替代顯示普通光標。比如，我們可以這樣定義：div.definedCursor{cursor:url(image/s1.cur)default;}5.列表樣式5.1.列表樣式5.1.1.列表項標志list-style-type在設置列表的外觀中，最簡單、最常用同時也是被各瀏覽器支持的最好的屬性就是設置列表項的標志類型。list-style-type屬性用于控制列表中列表項標志的樣式。該屬性的取值需要依據(jù)列表的類型。例如，在一個無序列表中，列表項的標志是出現(xiàn)在各列表項旁邊的圓點，而在有序列表中，標志可能是字母、數(shù)字或另外某種計數(shù)體系中的一個符號。list-style-type屬性用于無序列表時可以采用的值如表－11所示。表－11list-style-type屬性用于無序列表時的取值list-style-type屬性用于有序列表時，經(jīng)常采用的且得到了各瀏覽器廣泛支持的值如表－12所示。表－12list-style-type屬性用于有序列表時常用的取值list-style-type屬性可以用于列表元素<ul>和<ol>，以影響整個列表中所有的列表項；也可以用于列表項元素<li>以實現(xiàn)列表項的單獨設置。<li>元素中的設置將覆蓋<ul>或者<ol>元素中的設置。5.1.2.列表項圖像list-style-image雖然使用list-style-type屬性可以控制列表項的標志，但是該屬性只能設置常規(guī)的標志，如圓形或者數(shù)字等。如果需要為頁面添加更吸引人的效果，我們可能會希望為列表項添加圖像作為標志。這時，我們需要使用list-style-image屬性。list-style-image屬性使用圖像來替換列表項的標記，通過為list-style-image屬性賦值一個圖像的URL來顯示圖像標志。但是，在設置圖像標志時，建議始終規(guī)定一個list-style-type屬性以定義常規(guī)標志。這樣做的好處在于，如果圖像不存在或者因為某種原因導致圖像不可用時，可以替換顯示常規(guī)標志。6.定位6.1.定位機制6.1.1.什么是定位在CSS出現(xiàn)之前，通常使用表格精確的控制頁面中內(nèi)容的位置，而且內(nèi)容以普通的流方式呈現(xiàn)，即內(nèi)容按照它們在文檔中出現(xiàn)的順序顯示。但是，通過使用CSS的定位屬性，即使不用表格，也可以實現(xiàn)頁面的精確布局，還可以讓信息顯示的順序與它們在文檔中出現(xiàn)的順序不同。雖然目前依然可以看到很多使用表格定位元素的頁面，但是使用CSS來進行定位的趨勢將越來越強烈，因為它可以使頁面的內(nèi)容有更好的可重用性，實現(xiàn)頁面和布局的真正分離。這是因為一旦頁面的布局過多的依賴表格，則通常頁面將僅限于顯示在最初為其設計的媒體上。隨著更多具有不同功能的設備訪問Internet，則可能更多的使用CSS來實現(xiàn)定位。CSS有三種基本的定位機制：普通流定位、浮動和絕對定位。6.1.2.定位屬性任何元素都可以定位，只是絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型；相對定位元素會相對于它在正常流中的默認位置偏移。CSS所提供的用于定位的屬性如表－13所示。表－13CSS定位屬性其中，使用position屬性和偏移屬性可以實現(xiàn)普通流定位（包括相對定位）和絕對定位（包括固定定位）；使用float屬性可以實現(xiàn)浮動定位。其他屬性為輔助屬性?？梢允褂胮osition屬性指定元素的定位方式，該屬性可能的取值如表－14所示。表－14position屬性的取值通過使用position屬性，我們可以選擇4種不同類型的定位，這會影響元素框生成的方式。position屬性取值為static時，元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。static值為默認值，代表普通流定位模式，因此很少需要顯式地指定該值。如果指定position屬性的值為static，則不能使用偏移屬性來修改元素框的位置，也不能使用z-index屬性設置元素框的堆疊順序。即使設置了這些屬性，瀏覽器也會自動忽略它們（指top,bottom,left,right和z-index）。另外，static值和相對定位（relative值）都是普通流定位。相對定位之所以被看作普通流定位模型的一部分，因為元素的位置是相對于它在普通流中的位置。如果指定元素框的定位機制為默認方式以外的其他方式，則經(jīng)常需要使用元素框偏移屬性來指示框的位置。在講解具體的定位方式之前，我們先查看這些用于偏移的屬性。CSS中提供的元素框偏移屬性如表－15所示。表－15CSS偏移屬性需要注意的是，如果position屬性的值為static，那么設置這些偏移屬性不會產(chǎn)生任何效果。6.1.3.相對定位相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，元素仍保持其未定位前的形狀，它原本所占的空間仍保留，只是元素框會相對于它原來的位置偏移某個距離。通過設置垂直或水平位置，讓這個元素相對于它的起點進行移動。相對定位將元素相對于它在普通流中的位置進行定位，具體的位置由偏移屬性來設置。因此，如果需要設置元素為相對定位，則首先需要設置position屬性的值為relative，然后使用left屬性或者right屬性設置水平方向的偏移量；也可以使用top屬性或者bottom屬性設置垂直方向的偏移量。6.1.4.絕對定位絕對定位是指將元素的內(nèi)容從普通流中完全移除，并且可以使用偏移屬性來固定該元素的位置。絕對定位使元素的位置與文檔流無關，因此不占據(jù)空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。而普通流中其它元素的布局和絕對定位的元素無關。6.1.5.堆疊順序在前面的示例中我們提到過，一旦修改了元素的定位方式，則元素可能會發(fā)生堆疊。當發(fā)生堆疊時，默認的處理方式是第一個元素位于后面的元素下方，我們稱為堆疊上下文。對于相對定位、絕對定位和固定定位的元素框，可以使用z-index屬性來修改堆疊上