WEB基礎(chǔ)03文本格式化表格樣式

1、1. 文本格式化本章主要講解如何實(shí)現(xiàn)文本的格式化，包括控制文本的字體（如字體大小、字體樣式和字體系列等）和設(shè)置文本的格式（如文本顏色、文本排列和文本縮進(jìn)等）。1.1. 文本格式化1.1.1. 控制字體CSS 字體屬性定義文本的字體系列、大小、加粗、風(fēng)格（如斜體）等，這些屬性會(huì)直接影響字體及其外觀。常用的屬性有：1、指定字體（font-family）可以使用font-family屬性指定文本的字體，語(yǔ)法如下：font-family:name/inherit;如果需要指定字體，則設(shè)置值為name，即首選字體的名稱。如果字體名稱有多個(gè)單詞，即中間有空格，則需要將字體名稱用一對(duì)單引號(hào)或者雙引號(hào)包圍起來(lái)

2、。如果字體名稱包含非ASCII字符，就必須聲明樣式表的編碼。這個(gè)屬性最大的問(wèn)題在于，如果用戶機(jī)器上并沒(méi)有安裝所需要的字體，則會(huì)顯示默認(rèn)字體。因此，在指定字體時(shí)，最好同時(shí)指定替代字體。我們可以為font-family屬性指定多種字體，且多種字體之間用逗號(hào)隔開，這樣可以為頁(yè)面指定一個(gè)字體列表。如果用戶機(jī)器沒(méi)有第一種字體，則瀏覽器會(huì)查找字體列表中的下一種字體作為替代字體顯示。如果找遍了字體列表還是沒(méi)有可以使用的字體，瀏覽器會(huì)使用默認(rèn)字體顯示頁(yè)面。我們可以結(jié)合特定字體和通用字體系列來(lái)指定字體，如：h1 font-family: Georgia, serif;如果用戶機(jī)器上沒(méi)有安裝 Georgia，但安

3、裝了 Times 字體（serif 字體系列中的一種字體），瀏覽器就可能對(duì) 元素使用 Times。盡管 Times 與 Georgia 并不完全匹配，但至少足夠接近。2、字體大?。╢ont-size ）font-size 屬性用來(lái)設(shè)置文本的大小。如果沒(méi)有規(guī)定字體大小，普通文本（比如段落）的默認(rèn)大小是 16 像素 (16px=1em)?？梢允褂枚喾N方式指定這個(gè)屬性的值：絕對(duì)大小、相對(duì)大小、長(zhǎng)度單位和百分比。其中，如果使用長(zhǎng)度單位來(lái)設(shè)置字體大小，還可以分別使用相對(duì)單位和絕對(duì)單位。長(zhǎng)度是指采用一種長(zhǎng)度單位來(lái)表達(dá)字體的大小?？墒褂玫慕^對(duì)單位如表1所示。表1 長(zhǎng)度的絕對(duì)單位圖1給出了使用長(zhǎng)度的絕對(duì)單位來(lái)

4、設(shè)置字體大小的效果。圖-1也可以使用相對(duì)單位的長(zhǎng)度來(lái)設(shè)置字體大小，可使用的相對(duì)單位如表2所示。表2 長(zhǎng)度的相對(duì)單位如果需要使用相對(duì)單位來(lái)設(shè)置大小，我們可以使用px，表示像素。通過(guò)像素設(shè)置文本大小，可以對(duì)文本大小進(jìn)行完全控制。比如，我們可以這樣設(shè)置：h1 font-size:60px;h2 font-size:40px;p font-size:14px;font-size 屬性的值還可以設(shè)置為“inherit”，規(guī)定應(yīng)該從父元素繼承字體尺寸。3、字體加粗（font-weight）font-weight屬性用于設(shè)置文本的粗細(xì)，常用于實(shí)現(xiàn)將顯示元素的文本中所用的字體加粗。該屬性可能的值如表3所示。表

5、3 font-weight屬性的取值使用 bold 關(guān)鍵字可以將文本設(shè)置為粗體。關(guān)鍵字 100 900 為字體指定了 9 級(jí)加粗度。如果一個(gè)字體內(nèi)置了這些加粗級(jí)別，那么這些數(shù)字就直接映射到預(yù)定義的級(jí)別，100 對(duì)應(yīng)最細(xì)的字體變形，900 對(duì)應(yīng)最粗的字體變形。數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 bold。如果將元素的加粗設(shè)置為 bolder，瀏覽器會(huì)設(shè)置比所繼承值更粗的一個(gè)字體加粗。與此相反，關(guān)鍵詞 lighter 會(huì)導(dǎo)致瀏覽器將加粗度下移而不是上移。比如，我們可以這樣定義樣式規(guī)則：p.normal font-weight:normal;p.thick font-weight

6、:bold;p.thicker font-weight:900;然后查看如下代碼：font-weight:normalfont-weight:boldfont-weight:900上述代碼在瀏覽器中的顯示效果如圖-2所示。圖-2其中，bold是最常用的值，也會(huì)遇到使用normal的情況，尤其是在大量加粗文本中創(chuàng)建不同效果的文本時(shí)。1.1.2. 控制文本格式CSS除了可以設(shè)置字體，還可以定義文本的外觀。通過(guò)文本屬性，可以改變文本的顏色、字符間距、對(duì)齊文本、裝飾文本、對(duì)文本進(jìn)行縮進(jìn)等。1、文本顏色（color）color 屬性用于設(shè)置文本的顏色，即元素的前景色。這個(gè)顏色還會(huì)應(yīng)用到元素的所有邊框，除

7、非被 border-color 或另外某個(gè)邊框顏色屬性覆蓋。沒(méi)有設(shè)置color屬性的文本將使用瀏覽器的默認(rèn)顏色顯示。如果需要使用該屬性設(shè)置文本顏色，該屬性的值可以是顏色名稱、rgb 值或者十六進(jìn)制數(shù)，其默認(rèn)值取決于瀏覽器。比如，我們可以這樣設(shè)置：p color: rgb(255,255,0);或者p color: #FFFF00;2、文本排列（text-align）text-align 是一個(gè)基本的屬性，用于設(shè)置一個(gè)元素中的文本行互相之間的對(duì)齊方式。該屬性通過(guò)指定行框與哪個(gè)點(diǎn)對(duì)齊，從而設(shè)置塊級(jí)元素內(nèi)文本的水平對(duì)齊方式。該屬性可能的取值如表4所示。表4 text-align屬性的取值前 3 個(gè)值

8、相當(dāng)直接，不用額外解釋。text-align屬性還可能取值 justify，我們稱為兩端對(duì)齊。在兩端對(duì)齊文本中，文本行的左右兩端都放在父元素的內(nèi)邊界上。然后，調(diào)整單詞和字母間的間隔，使各行的長(zhǎng)度恰好相等。這種兩端對(duì)齊的排列方式經(jīng)常用于打印。比如，我們可以這樣定義樣式規(guī)則：td.leftAlign text-align:left;td.rightAlign text-align:right;td.centerAlign text-align:center;td.justifyAlign text-align:justify;然后，查看如下代碼： With sunshine, water, and

9、 careful tending, roses will bloom several times in a season. With sunshine, water, and careful tending, roses will bloom several times in a season. With sunshine, water, and careful tending, roses will bloom several times in a season. With sunshine, water, and careful tending, roses will bloom seve

10、ral times in a season. 上述代碼在瀏覽器中的顯示效果如圖-3所示。圖-3由圖3可以看出，居左或者居右排列后，另外一端會(huì)顯示為鋸齒狀（使用默認(rèn)的字寬和間隔，以單詞為單位換行）；而如果使用justify則會(huì)顯示為兩端對(duì)齊的效果。3、文字修飾（text-decoration）text-decoration 屬性用于對(duì)文本進(jìn)行修飾。它允許對(duì)文本設(shè)置某種效果，如加下劃線、上劃線或者閃爍等。text-decoration屬性可能的取值如表5所示。表5 text-decoration屬性的取值underline 會(huì)對(duì)元素加下劃線;而overline 的作用恰好相反，會(huì)在文本的頂端畫一個(gè)

11、上劃線；值 line-through 則在文本中間畫一個(gè)貫穿線;blink 會(huì)讓文本閃爍。還可以在一個(gè)規(guī)則中結(jié)合多種裝飾，只需要為text-decoration屬性設(shè)置多個(gè)值，且多個(gè)值之間用空格隔開。比如，如果一個(gè)段落中的文本既有下劃線，又有上劃線，我們可以這樣定義：p text-decoration:underline overline;none 值會(huì)關(guān)閉原本應(yīng)用到一個(gè)元素上的所有裝飾。通常，無(wú)裝飾的文本是默認(rèn)外觀，但某些元素例外。比如，鏈接默認(rèn)地會(huì)有下劃線。因此，如果希望去掉超鏈接的下劃線，可以使用以下 CSS 來(lái)做到這一點(diǎn)：a text-decoration: none;如果顯式地用這樣

12、一個(gè)規(guī)則去掉鏈接的下劃線，那么它與正常文本之間在視覺(jué)上的唯一差別可能就是顏色（瀏覽器往往會(huì)為鏈接設(shè)置默認(rèn)的顏色）。blink 值會(huì)創(chuàng)建閃爍的文本，但是這通常被認(rèn)為是不贊成使用的方式，大部分瀏覽器也不支持它。4、行高（line-height）line-height 屬性用于設(shè)置行間的距離。當(dāng)處理大量文本時(shí)，增加文本行之間的垂直空間量可以提高文檔可閱讀性，這種空間量稱為行間距。在Web頁(yè)面中增加行間距是非常有用的。比如，如果文本行之間存在更多的空間，當(dāng)達(dá)到一行的末尾之后，更容易發(fā)現(xiàn)下一行的起點(diǎn)。line-height 屬性會(huì)影響行框的布局。在應(yīng)用到一個(gè)塊級(jí)元素時(shí)，它定義了該元素中基線之間的最小距離

13、。行間距是line-height 與 font-size 的計(jì)算值之差。行間距會(huì)被分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部。而可以包含這些內(nèi)容的最小框就是行框。比如，我們可以這樣定義樣式規(guī)則：p border:1px solid red;p.smallLength line-height: 10px;p.bigLength line-height: 30px;然后，查看如下代碼：這是擁有標(biāo)準(zhǔn)行高的段落。在大多數(shù)瀏覽器中默認(rèn)行高大約是 20px。這是擁有標(biāo)準(zhǔn)行高的段落。length=10px。這個(gè)段落擁有更小的行高。這個(gè)段落擁有更小的行高。length=30px。這個(gè)段落擁有更大的行高。這個(gè)

14、段落擁有更大的行高。上述代碼在瀏覽器中的顯示效果如圖-4所示。圖-45、首行文本縮進(jìn)（text-indent）把 Web 頁(yè)面上的段落的第一行縮進(jìn)，這是一種最常用的文本格式化效果。CSS 提供了 text-indent 屬性，該屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)。text-indent 屬性縮進(jìn)元素中的首行文本，即使用該屬性可以讓元素的第一行縮進(jìn)一個(gè)給定的距離。這個(gè)屬性最常見(jiàn)的用途是將段落的首行縮進(jìn)，下面的規(guī)則會(huì)使段落的首行縮進(jìn) 2 em：p.first text-indent: 2em;可以為塊級(jí)元素應(yīng)用 text-indent屬性，但無(wú)法將該屬性應(yīng)用于行內(nèi)元素，且圖像之類的替換元素上也無(wú)法應(yīng)用 t

15、ext-indent 屬性。不過(guò)，如果一個(gè)塊級(jí)元素（比如段落）的首行中有一個(gè)圖像，它會(huì)隨該行的其余文本移動(dòng)。text-indent 屬性除了可以使用長(zhǎng)度單位，還包括百分比值。百分?jǐn)?shù)是相對(duì)于縮進(jìn)元素的父元素的寬度。即如果將縮進(jìn)值設(shè)置為 20%，所影響元素的第一行會(huì)縮進(jìn)其父元素寬度的 20%。比如，我們可以這樣定義樣式規(guī)則（為了更好的觀察父元素的邊界，我們定義了 元素的邊框）：div width: 400px;border:1px solid red;p.indent text-indent: 20%;然后，查看如下代碼： This is a paragraph.This is a paragra

16、ph.This is a paragraph. This is a paragraph.This is a paragraph.This is a paragraph.上述代碼在瀏覽器中的顯示效果如圖-5所示（縮進(jìn)值是父元素的 20%，即 80 個(gè)像素）：圖-52. 表格樣式2.1. 表格常用樣式屬性2.1.1. 表格常用樣式屬性對(duì)于表格而言，它可以使用前面章節(jié)中講述的很多CSS樣式（如背景色、邊框和字體等），比如，可以使用 width 屬性、height 屬性設(shè)置單元格的大??；可以使用border 屬性設(shè)置單元格的邊框；可以使用padding 屬性控制表格中內(nèi)容與邊框的距離；可以使用back

17、ground 屬性設(shè)置表格或者單元格的背景色以及背景圖像；還可以使用文本格式化相關(guān)的樣式屬性來(lái)定義表格中的文本。需要注意的是，除了background-color 屬性和height 屬性之外，最好避免將這些屬性用于 元素。因?yàn)檫@些屬性用于表行時(shí)，瀏覽器對(duì)它們的支持并沒(méi)有像它們用于單個(gè)單元格時(shí)那么好。2.1.2. 垂直方向?qū)Rvertical-align 屬性用于設(shè)置元素的垂直對(duì)齊方式，當(dāng)操作內(nèi)聯(lián)元素時(shí)（比如圖像或者普通文本），該屬性非常有用。在表單元格中，這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式。vertical-align 屬性可能的取值有很多，但是該屬性在用于表格單元格中的內(nèi)容垂直

18、對(duì)齊方式時(shí)可取的值如表6所示。表6 vertical-align屬性的取值vertical-align 屬性在用于表格單元格中的內(nèi)容垂直對(duì)齊方式時(shí)，可以設(shè)置為頂部top、中部middle和底部bottom三個(gè)值。比如，我們定義如下樣式規(guī)則：.top vertical-align:top;.middle vertical-align:middle;.bottom vertical-align:bottom;td width:200px;height:80px;border:1px solid red;然后，在頁(yè)面的主體中添加如下代碼： some text some text some text

19、some text 上述代碼在瀏覽器中的顯示效果如圖-6所示。圖-6表格單元格中內(nèi)容的垂直對(duì)齊方式的默認(rèn)值為middle，因此，圖1中表格的第一列的兩個(gè)單元格中的文本都是垂直居中顯示；而設(shè)置了top 值和bottom 值以后，可以設(shè)置單元格中內(nèi)容位于單元格頂部或者底部顯示。另外，默認(rèn)情況下，單元格中的文本在水平方向上居左顯示，可以使用text-align 屬性來(lái)修改其水平對(duì)齊方式。2.2. 表格特有樣式屬性除了上一節(jié)中講述的那些屬性以外，還有一些屬性是只與表格相關(guān)的。這些僅與表格相關(guān)的樣式屬性可以極大的改善表格的外觀。2.2.1. 邊框合并從在前面的示例中不難發(fā)現(xiàn)，如果設(shè)置了單元格的邊框，相鄰

20、單元格的邊框會(huì)單獨(dú)顯示，類似于雙線邊框（見(jiàn)圖-6）。如果需要合并相鄰的邊框，則可以使用border-collapse 屬性。border-collapse 屬性設(shè)置是否將表格邊框折疊為單一邊框，即是否被合并為一個(gè)單一的邊框，還是像在標(biāo)準(zhǔn)的 HTML 中那樣分開顯示。border-collapse 屬性可能的取值如表7所示。表7 border-collapse 屬性的取值border-collapse 屬性的值如果設(shè)置為separate 值或者不設(shè)置，瀏覽器會(huì)獨(dú)立顯示每一個(gè)單元格的邊框，即使兩個(gè)相鄰單元格具有不同類型的邊框。border-collapse 屬性的值如果設(shè)置為collapse 值，

21、則會(huì)對(duì)邊框進(jìn)行合并，即會(huì)基于一組內(nèi)置的復(fù)雜規(guī)則來(lái)決定顯示哪一個(gè)邊框。一般情況下，瀏覽器會(huì)對(duì)邊框進(jìn)行折疊。比如，我們定義如下樣式規(guī)則：table border:2px dotted black;td width:200px;height:50px;table.separate border-collapse:separate;table.collapse border-collapse:collapse;td.solid border:3px solid silver;td.dashed border:3px dashed gray;然后，在頁(yè)面的主體中添加如下代碼：border-collaps

22、e:separate 第1行第1列 第1行第2列 第2行第1列 第2行第2列 border-collapse:collapse 第1行第1列 第1行第2列 第2行第1列 第2行第2列 上述代碼在瀏覽器中的顯示效果如圖-7所示。圖-7為了更好的查看效果，圖-7中的相鄰單元格使用了不同樣式的邊框。圖-7中的第一個(gè)表格的border-collapse 屬性使用了separate 值，則表格的邊框、各單元格的邊框都獨(dú)立顯示，即使相鄰的單元格的邊框樣式不同。第二個(gè)表格的border-collapse 屬性使用了collapse 值，相鄰的邊框則會(huì)發(fā)生合并，邊框會(huì)互相折疊。由圖可見(jiàn)，實(shí)線邊框的優(yōu)先級(jí)高于虛

23、線邊框。2.2.2. 邊框邊距由前面的示例不難發(fā)現(xiàn)，在表格中的單元格之間存在一定的間距，如果希望控制這個(gè)間距，則可以使用border-spacing 屬性。border-spacing 屬性設(shè)置相鄰單元格的邊框間的距離，但是僅限于分隔單元格邊框，即border-collapse 屬性為separate 值的情況下，也稱為邊框分離模式。該屬性的值可以是長(zhǎng)度單位或者單詞 inherit。如果設(shè)置為長(zhǎng)度，則可以使用px、cm等單位，但是不允許使用負(fù)值；如果設(shè)置為inherit值，表示規(guī)定應(yīng)該從父元素繼承 border-spacing 屬性的值。設(shè)置border-spacing 屬性的值為長(zhǎng)度值時(shí)，可

24、以為該屬性指定一個(gè)或者兩個(gè)值。如果指定一個(gè)值，則該值同時(shí)應(yīng)用于水平和垂直間距；如果指定兩個(gè)值，那么第一個(gè)值指定水平間距，第二個(gè)值指定垂直間距，且兩個(gè)值之間用空格隔開。比如，我們定義如下樣式規(guī)則：table border:2px dotted gray;td background-color:#f0f0f0;width:200px;height:50px;border-collapse:separate;border:1px solid black;table.singleSpacing border-spacing:5px;table.doubleSpacing border-spacing:

25、10px 20px;然后，在頁(yè)面的主體中添加如下代碼： 設(shè)置一個(gè)值 第1行第1列 第1行第2列 第2行第1列 第2行第2列 設(shè)置兩個(gè)值 第1行第1列 第1行第2列 第2行第1列 第2行第2列 上述代碼在瀏覽器中的顯示效果如圖-8所示。圖-8由圖-8可以看出，第一個(gè)表的border-spacing 屬性只設(shè)置了一個(gè)值為5px，則單元格邊框之間的垂直和水平間隔均為5 像素；而第二個(gè)表的border-spacing 屬性設(shè)置了兩個(gè)值，則單元格邊框之間的水平間距為10 像素，而垂直間距較大，為20 像素。需要注意的是，為了盡量能夠在各瀏覽器中得到一致的顯示效果，最好為 元素設(shè)置border-spaci

26、ng 屬性，而不是單元格等其他元素。3. 浮動(dòng)定位3.1. 定位概述3.1.1. 定位概述CSS 為定位提供了一些屬性，利用這些屬性，可以建立列式布局，還可以將布局的一部分與另一部分重疊，這樣可以完成多年來(lái)通常需要使用多個(gè)表格才能完成的任務(wù)。定位的基本思想很簡(jiǎn)單，即可以定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。顯然，這個(gè)功能非常強(qiáng)大，而且各瀏覽器對(duì) CSS2 中定位的支持遠(yuǎn)勝于對(duì)其它方面的支持。CSS 有三種基本的定位機(jī)制：普通流定位、浮動(dòng)和絕對(duì)定位。其中，使用position 屬性和偏移屬性可以實(shí)現(xiàn)普通流定位（包括相對(duì)定位）和絕對(duì)定位（包

27、括固定定位）；使用float 屬性可以實(shí)現(xiàn)浮動(dòng)定位。其他屬性為輔助屬性。在后面的章節(jié)中，我們會(huì)詳細(xì)講解普通流定位、相對(duì)定位、絕對(duì)定位和浮動(dòng)。3.1.2. 普通流定位默認(rèn)情況下，通過(guò)使用稱為普通流的方式在頁(yè)面中布局元素。在普通流中定位，頁(yè)面中的塊級(jí)元素框從上到下一個(gè)接一個(gè)地排列，且每一個(gè)塊級(jí)元素都會(huì)出現(xiàn)在一個(gè)新行中（比如 元素、 元素），元素框之間的垂直距離是由框的垂直外邊距計(jì)算出來(lái)的。內(nèi)聯(lián)元素將在一行中從左到右排列水平布置，不需要從新行開始。可以使用水平內(nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box），行框的高

28、度總是足以容納它包含的所有行內(nèi)框。不過(guò)，設(shè)置行高可以增加這個(gè)框的高度。為了更好的理解普通流定位模式，我們定義如下樣式規(guī)則：p height:70px; border:1px solid gray; margin-top:20px; padding-top:10px;div height:70px;border:2px dashed black;margin-top:20px;padding-top:10px;b height:50px;border:2px dotted red;margin-top:20px;padding-top:10px;然后在頁(yè)面的主體中添加如下代碼：This is t

29、he first block element.This is the second block element.This is paragraph one.上述代碼在瀏覽器中的顯示效果如圖-9所示。圖-9由圖9可以看出，每個(gè)塊級(jí)元素（段落和 元素）按照在代碼中書寫的順序逐一出現(xiàn)在一個(gè)不同的行中，而 、 和 這些內(nèi)聯(lián)元素則位于塊級(jí)元素中的同一行，且按照從左到右的順序出現(xiàn)。對(duì)于塊級(jí)元素，可以設(shè)置邊框、高度、寬度、外邊距和內(nèi)邊距；而對(duì)于內(nèi)聯(lián)元素，即使設(shè)置高度和外邊距，也沒(méi)有實(shí)際效果，只能設(shè)置內(nèi)邊距（見(jiàn) 元素的顯示效果）。如果希望讓元素的位置與在普通流位置中出現(xiàn)的位置不同，則需要使用定位屬性來(lái)實(shí)現(xiàn)。使

30、用position 屬性可以更改定位模式為相對(duì)定位、絕對(duì)定位和固定定位，還可以使用偏移屬性來(lái)實(shí)現(xiàn)元素框位置的偏移；或者使用float屬性來(lái)實(shí)現(xiàn)浮動(dòng)定位。3.2. 浮動(dòng)定位3.2.1. 浮動(dòng)概述浮動(dòng)定位是指將元素排除在普通流之外，并且將它放置在包含框的左邊或者右邊，但是依舊位于包含框之內(nèi)。也就是說(shuō)，浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。使用浮?dòng)可以修改元素原有的定位方式，尤其在一些需要設(shè)置多個(gè)塊級(jí)元素同行排列的情況下會(huì)非常有用。3.2.2. 浮動(dòng)定位由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。為了更好的理解浮動(dòng)的作用，

31、我們先用一些示意圖解釋浮動(dòng)的效果，然后在使用float 屬性來(lái)實(shí)現(xiàn)這些效果。首先，請(qǐng)看圖10。包含框中有三個(gè)元素框，如果把框 1 向右浮動(dòng)，則它脫離文檔流并且向右移動(dòng)，直到它的右邊緣碰到包含框的右邊緣：圖-10然后，我們查看圖11。圖-11由圖11可以看出，當(dāng)框 1 向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了框 2，使框 2 從視圖中消失（如圖11中的左圖所示）。而如果把所有三個(gè)框都向左移動(dòng)，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框（如圖11中的右圖所示）。而如果包含框太窄或

32、者浮動(dòng)框的高度不同，會(huì)出現(xiàn)什么現(xiàn)象呢？我們查看圖12。圖-12由圖12可以看出，如果包含框太窄，無(wú)法容納水平排列的三個(gè)浮動(dòng)元素，那么其它浮動(dòng)塊會(huì)自動(dòng)向下移動(dòng)，直到有足夠的空間（如圖12中的左圖所示）；而如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”（如圖12中的右圖所示）。3.2.3. float 屬性如果需要指示框浮動(dòng)在包含框的左邊或者右邊，我們可以通過(guò) float 屬性來(lái)實(shí)現(xiàn)。float 屬性定義元素在哪個(gè)方向浮動(dòng)。float 屬性可能的取值如表8 所示。表8float屬性的取值比如，我們定義如下樣式規(guī)則： div height:100px; background-

33、color:#f0f0f0; border:1px solid gray; margin:10px 0px 0px 10px; font-size:24px; div.float float:right;然后，在頁(yè)面的主體中添加如下代碼：框1框2框3上述代碼在瀏覽器中的顯示效果如圖-13所示。圖-13由圖13可以看出，設(shè)置框 2 向右浮動(dòng)后，它會(huì)?？吭陧?yè)面的右邊框，而框 3 位于框 2浮動(dòng)前的位置，就像框 2 不存在一樣。但是因?yàn)闆](méi)有指定元素框的寬度，則浮動(dòng)框會(huì)盡可能的窄，就如同框 2 的效果。因此，指定元素的 float 屬性后，最好設(shè)置元素的 width 屬性，用于指示浮動(dòng)框占用包含框的寬

34、度。我們修改 元素的樣式規(guī)則，為其加上寬度：div width:100px;height:100px; background-color:#f0f0f0; border:1px solid gray; margin:10px 0px 0px 10px; font-size:24px; div.float float:right;圖-14給出了上述代碼在瀏覽器中的顯示效果。圖-143.2.4. clear 屬性出現(xiàn)在其他元素中的圖形和文本元素稱為浮動(dòng)元素，而 clear 屬性用于設(shè)置一個(gè)元素的側(cè)面是否允許其他的浮動(dòng)元素。clear 屬性定義了元素的哪邊上不允許出現(xiàn)浮動(dòng)元素。在 CSS1 和 CS

35、S2 中，這是通過(guò)自動(dòng)為清除元素（即設(shè)置了 clear 屬性的元素）增加上外邊距實(shí)現(xiàn)的。在 CSS2.1 中，會(huì)在元素上外邊距之上增加清除空間，而外邊距本身并不改變。不論哪一種改變，最終結(jié)果都一樣。clear 屬性可能的取值如表9 所示。表9 clear屬性的取值其中，none 值為默認(rèn)值，不進(jìn)行清理，即會(huì)出現(xiàn)文本圍繞的效果；而如果聲明為左邊或右邊清除，表示框的哪些邊不應(yīng)該挨著浮動(dòng)框，會(huì)使元素的上外邊框邊界剛好在該邊上浮動(dòng)元素的下外邊距邊界之下。比如，我們定義如下樣式規(guī)則（為兩個(gè)浮動(dòng)元素框定義不同的高度）：p height:200px; border:1px solid gray; margi

36、n:20px 0px 0px 20px; font-size:24px;div width:100px; border:1px solid gray; margin:20px 0px 0px 20px; font-size:24px; background-color:#f0f0f0;div.floatLeft float:left;height:150px;div.floatRight float:right;height:100px;然后，在頁(yè)面主體中添加如下代碼：左側(cè)浮動(dòng)框右側(cè)浮動(dòng)框This is paragraph.This is paragraph.This is paragraph

37、.This is paragraph.此時(shí)，雖然先定義 元素再添加段落 元素，但是因?yàn)閮蓚€(gè) 元素分別設(shè)置了向左和向右浮動(dòng)，則段落 元素會(huì)向上移，且出現(xiàn)文本包圍浮動(dòng)框的效果，如圖15所示。圖-15如果不希望實(shí)現(xiàn)圖15所示的文本圍繞效果，則可以設(shè)置段落元素的 clear 屬性。如果需要清除右側(cè)浮動(dòng)框，則可以設(shè)置clear屬性為值right ，即段落元素的右邊不允許有浮動(dòng)元素。修改樣式規(guī)則如下：p height:200px; border:1px solid gray; margin:20px 0px 0px 20px; font-size:24px;clear:right;圖16給出了修改樣式規(guī)則

38、后的代碼在瀏覽器中的顯示效果。圖-16由圖16可以看出，設(shè)置了段落的clear 屬性為right 值以后，為段落元素添加上外邊距以實(shí)現(xiàn)清除右邊浮動(dòng)框的效果。但是因?yàn)樽筮吀?dòng)框的高度大于右邊浮動(dòng)框，左邊依然有文本圍繞浮動(dòng)框的效果。因此，如果需要完全清除文本圍繞的效果，則可以設(shè)置清除左側(cè)浮動(dòng)框（左側(cè)浮動(dòng)框的高度大于右側(cè)浮動(dòng)框，可以添加足夠的上外邊距）；或者設(shè)置clear 屬性為both 值。為此，我們修改樣式規(guī)則如下：p height:200px; border:1px solid gray; margin:20px 0px 0px 20px; font-size:24px;clear:both;

39、圖17給出了修改樣式規(guī)則后的代碼在瀏覽器中的顯示效果。圖-174. 顯示4.1. 顯示方式4.1.1. 顯示方式相信學(xué)到這里的時(shí)候，你已經(jīng)對(duì)“一切皆為框”這句話有了深刻的理解：頁(yè)面上所有的元素都可以顯示為框。不過(guò)，像 、 或 元素常常被稱為塊級(jí)元素，這意味著這些元素顯示為一塊內(nèi)容，即“塊框”；與之相反， 和 等元素稱為“內(nèi)聯(lián)元素”或者“行內(nèi)元素”，這是因?yàn)樗鼈兊膬?nèi)容顯示在行中，即“行內(nèi)框”。4.1.2. display 屬性除了默認(rèn)的顯示效果之外，我們還可以使用 display 屬性來(lái)修改元素框的顯示方式，即改變生成的框的類型。該屬性可能的取值如表 - 10 所示。表10 display屬性的

40、取值由表-10可以看出，我們可以用 display 屬性定義建立布局時(shí)元素生成的顯示框類型。1、block值如果將 display 屬性設(shè)置為 block，可以讓行內(nèi)元素（比如 元素）表現(xiàn)得像塊級(jí)元素一樣。比如，我們定義如下樣式規(guī)則：a width:100px; height:30px; border:1px solid gray; background-color:#f0f0f0; text-align:center;a.displayAsBlock display:block;然后，在頁(yè)面的主體中添加如下代碼：鏈接1鏈接2鏈接1鏈接2上述代碼在瀏覽器中的顯示效果如圖-18所示。圖-18由圖

41、-18可知，設(shè)置了 元素的顯示類型為 block 之后，該元素就顯示為塊級(jí)元素的效果，可以定義高度和寬度，且會(huì)自動(dòng)換行。2、inline值如果將 display 屬性設(shè)置為 inline，可以讓塊級(jí)元素（比如 元素）表現(xiàn)得像內(nèi)聯(lián)元素一樣。比如，我們定義如下樣式規(guī)則：p width:100px; height:50px; border:1px solid gray; background-color:#f0f0f0; text-align:center;p.displayAsInline display:inline;然后，在頁(yè)面的主體中添加如下代碼：普通段落段落1段落2上述代碼在瀏覽器中的顯示

42、效果如圖-19所示。圖-19由圖-19可知，設(shè)置了 元素的顯示類型為 inline 之后，該元素就顯示為內(nèi)聯(lián)元素的效果，定義的高度和寬度失效，且不會(huì)自動(dòng)換行。3、inline-block 值inline-block 值表示行內(nèi)塊元素，是CSS2.1 新增的值。為了更好的理解此屬性值的作用，我們添加如下樣式規(guī)則：p.displayAsInlineBlock display:inline-block;然后，在頁(yè)面的主體中添加如下代碼：普通段落1段落1段落2段落3段落4上述代碼在瀏覽器中的顯示效果如圖-20所示。圖-20由圖-20可知，設(shè)置了 元素的顯示類型為 inline-block 之后，多個(gè)段

43、落元素依然顯示在同一行，但是在同一行內(nèi)的段落元素表現(xiàn)的如同塊級(jí)元素，即可以為其定義高度和寬度，會(huì)占據(jù)相應(yīng)的空間（如段落3 和段落 4）。4、none 值可以通過(guò)把 display 屬性設(shè)置為 none，讓生成的元素根本沒(méi)有框。這樣的話，該框及其所有內(nèi)容就不再顯示，不占用文檔中的空間。比如，我們繼續(xù)定義如下樣式規(guī)則：p.noDisplay display:none;然后，在頁(yè)面的主體中添加如下代碼：普通段落1普通段落2普通段落3上述代碼在瀏覽器中的顯示效果如圖-21所示。圖-21由圖-21可知，設(shè)置了 元素的顯示類型為 none 之后，該元素就不再顯示，且不占用空間，就像沒(méi)有定義過(guò)一樣。由這些示

44、例可以看出，我們可以使用 display 屬性來(lái)定義元素生成的顯示框類型，從而實(shí)現(xiàn)頁(yè)面布局中的某些特殊顯示效果。4.2. 光標(biāo)4.2.1. 光標(biāo)默認(rèn)情況下，光標(biāo)會(huì)根據(jù)用戶的操作發(fā)生改變。比如，當(dāng)鼠標(biāo)懸停在一個(gè)鏈接上時(shí)，光標(biāo)將從指針形狀變?yōu)槭譅钚螤?；?dāng)鼠標(biāo)懸停在文本區(qū)域時(shí)，會(huì)顯示 I 形狀；而當(dāng)鼠標(biāo)懸停在一個(gè)按鈕上時(shí)，光標(biāo)會(huì)顯示為箭頭?？梢允褂?cursor 屬性指定顯示給用戶的鼠標(biāo)光標(biāo)類型（形狀）。比如，當(dāng)一個(gè)圖像可以被點(diǎn)擊，甚至可以作為表單上的提交按鈕時(shí)，則可以使用此屬性修改光標(biāo)的形狀為手狀，這樣可以為用戶提供一種可視化的暗示，提示他們可以單擊該圖像。4.2.2. cursor 屬性curs

45、or 屬性定義了鼠標(biāo)指針?lè)旁谝粋€(gè)元素邊界范圍內(nèi)時(shí)所用的光標(biāo)形狀，該屬性常用的取值有：auto、default 、pointer 、crosshair 、move 、text 、wait、help 和 URL等。其中，auto 值表示由瀏覽器自動(dòng)根據(jù)元素類型設(shè)置光標(biāo)形狀，而default 、pointer 、crosshair 、move 、text 、wait 和 help 都容易理解，不再贅述。url 值是指可以為元素定義一個(gè)自定義的圖標(biāo)作為光標(biāo)形狀，只是使用url時(shí)，最好在列表的末端始終定義一種普通的光標(biāo)，這樣，當(dāng)沒(méi)有由 URL 定義的可用光標(biāo)時(shí)還可以替代顯示普通光標(biāo)。比如，我們可以這樣定

46、義：div.definedCursor cursor:url(image/s1.cur) default;5. 列表樣式5.1. 列表樣式5.1.1. 列表項(xiàng)標(biāo)志 list-style-type在設(shè)置列表的外觀中，最簡(jiǎn)單、最常用同時(shí)也是被各瀏覽器支持的最好的屬性就是設(shè)置列表項(xiàng)的標(biāo)志類型。list-style-type 屬性用于控制列表中列表項(xiàng)標(biāo)志的樣式。該屬性的取值需要依據(jù)列表的類型。例如，在一個(gè)無(wú)序列表中，列表項(xiàng)的標(biāo)志是出現(xiàn)在各列表項(xiàng)旁邊的圓點(diǎn)，而在有序列表中，標(biāo)志可能是字母、數(shù)字或另外某種計(jì)數(shù)體系中的一個(gè)符號(hào)。list-style-type 屬性用于無(wú)序列表時(shí)可以采用的值如表11 所示。表

47、11 list-style-type屬性用于無(wú)序列表時(shí)的取值list-style-type 屬性用于有序列表時(shí)，經(jīng)常采用的且得到了各瀏覽器廣泛支持的值如表12所示。表12 list-style-type屬性用于有序列表時(shí)常用的取值list-style-type 屬性可以用于列表元素和，以影響整個(gè)列表中所有的列表項(xiàng)；也可以用于列表項(xiàng)元素 以實(shí)現(xiàn)列表項(xiàng)的單獨(dú)設(shè)置。 元素中的設(shè)置將覆蓋 或者 元素中的設(shè)置。5.1.2. 列表項(xiàng)圖像 list-style-image雖然使用list-style-type屬性可以控制列表項(xiàng)的標(biāo)志，但是該屬性只能設(shè)置常規(guī)的標(biāo)志，如圓形或者數(shù)字等。如果需要為頁(yè)面添加更吸引人

48、的效果，我們可能會(huì)希望為列表項(xiàng)添加圖像作為標(biāo)志。這時(shí)，我們需要使用list-style-image 屬性。list-style-image 屬性使用圖像來(lái)替換列表項(xiàng)的標(biāo)記，通過(guò)為list-style-image 屬性賦值一個(gè)圖像的URL來(lái)顯示圖像標(biāo)志。但是，在設(shè)置圖像標(biāo)志時(shí)，建議始終規(guī)定一個(gè) list-style-type 屬性以定義常規(guī)標(biāo)志。這樣做的好處在于，如果圖像不存在或者因?yàn)槟撤N原因?qū)е聢D像不可用時(shí)，可以替換顯示常規(guī)標(biāo)志。6. 定位6.1. 定位機(jī)制6.1.1. 什么是定位在CSS出現(xiàn)之前，通常使用表格精確的控制頁(yè)面中內(nèi)容的位置，而且內(nèi)容以普通的流方式呈現(xiàn)，即內(nèi)容按照它們?cè)谖臋n中出現(xiàn)的

49、順序顯示。但是，通過(guò)使用CSS的定位屬性，即使不用表格，也可以實(shí)現(xiàn)頁(yè)面的精確布局，還可以讓信息顯示的順序與它們?cè)谖臋n中出現(xiàn)的順序不同。雖然目前依然可以看到很多使用表格定位元素的頁(yè)面，但是使用CSS來(lái)進(jìn)行定位的趨勢(shì)將越來(lái)越強(qiáng)烈，因?yàn)樗梢允鬼?yè)面的內(nèi)容有更好的可重用性，實(shí)現(xiàn)頁(yè)面和布局的真正分離。這是因?yàn)橐坏╉?yè)面的布局過(guò)多的依賴表格，則通常頁(yè)面將僅限于顯示在最初為其設(shè)計(jì)的媒體上。隨著更多具有不同功能的設(shè)備訪問(wèn)Internet，則可能更多的使用CSS來(lái)實(shí)現(xiàn)定位。CSS 有三種基本的定位機(jī)制：普通流定位、浮動(dòng)和絕對(duì)定位。6.1.2. 定位屬性任何元素都可以定位，只是絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論

50、該元素本身是什么類型；相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。CSS 所提供的用于定位的屬性如表13 所示。表13 CSS定位屬性其中，使用position 屬性和偏移屬性可以實(shí)現(xiàn)普通流定位（包括相對(duì)定位）和絕對(duì)定位（包括固定定位）；使用float 屬性可以實(shí)現(xiàn)浮動(dòng)定位。其他屬性為輔助屬性?？梢允褂胮osition 屬性指定元素的定位方式，該屬性可能的取值如表14 所示。表14 position屬性的取值通過(guò)使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會(huì)影響元素框生成的方式。position 屬性取值為static 時(shí)，元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作

51、為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。static 值為默認(rèn)值，代表普通流定位模式，因此很少需要顯式地指定該值。如果指定position 屬性的值為static，則不能使用偏移屬性來(lái)修改元素框的位置，也不能使用z-index 屬性設(shè)置元素框的堆疊順序。即使設(shè)置了這些屬性，瀏覽器也會(huì)自動(dòng)忽略它們（指top, bottom, left, right 和 z-index）。另外，static 值和相對(duì)定位（relative值）都是普通流定位。相對(duì)定位之所以被看作普通流定位模型的一部分，因?yàn)樵氐奈恢檬窍鄬?duì)于它在普通流中的位置。如果指定元素框的定位機(jī)制為默認(rèn)方式以外的其他方

52、式，則經(jīng)常需要使用元素框偏移屬性來(lái)指示框的位置。在講解具體的定位方式之前，我們先查看這些用于偏移的屬性。CSS 中提供的元素框偏移屬性如表15所示。表15 CSS偏移屬性需要注意的是，如果position 屬性的值為 static，那么設(shè)置這些偏移屬性不會(huì)產(chǎn)生任何效果。6.1.3. 相對(duì)定位相對(duì)定位是一個(gè)非常容易掌握的概念。如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，元素仍保持其未定位前的形狀，它原本所占的空間仍保留，只是元素框會(huì)相對(duì)于它原來(lái)的位置偏移某個(gè)距離。通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素相對(duì)于它的起點(diǎn)進(jìn)行移動(dòng)。相對(duì)定位將元素相對(duì)于它在普通流中的位置進(jìn)行定位，具體的位置由偏移屬性來(lái)設(shè)置。因此，如果需要設(shè)

53、置元素為相對(duì)定位，則首先需要設(shè)置position 屬性的值為 relative，然后使用left 屬性或者right 屬性設(shè)置水平方向的偏移量；也可以使用top 屬性或者bottom 屬性設(shè)置垂直方向的偏移量。6.1.4. 絕對(duì)定位絕對(duì)定位是指將元素的內(nèi)容從普通流中完全移除，并且可以使用偏移屬性來(lái)固定該元素的位置。絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同，相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。而普通流中其它元素的布局和絕對(duì)定位的元素?zé)o關(guān)。6.1.5. 堆疊順序在前面的示例中我們提到過(guò)，一旦修改了元素的定位方式，則元素可能會(huì)發(fā)生堆疊。當(dāng)發(fā)生堆疊時(shí)，默認(rèn)的處理方