CSS實用教程（二）(轉)

CSS實用教程（二）(轉)[@more@]

    七。控制文字的樣式控制文字的樣式包括文字大小寫、文字修飾兩個部分。

    1.文字大小寫

    文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫，而可以在輸入完畢後，再根據需要對區域性的文字設定大小寫。

    基本格式如下：

    text-transform： 引數

    引數取值範圍：

    。uppercase：所有文字大寫顯示

    。lowercase：所有文字小寫顯示

    。capitalize：每個單詞的頭字母大寫顯示

    。none：不繼承母體的文字變形引數

    注意：繼承是指HTML的識別符號對於包含自己的識別符號的引數會繼承下來。

    2.文字修飾

    文字修飾的主要用途是改變瀏覽器顯示文字連結時的下劃線。

    基本格式如下：

    text-decoration： 引數

    引數取值範圍：

    。underline：為文字加下劃線

    。overline：為文字加上劃線

    。line-through：為文字加刪除線

    。blink：使文字閃爍

    。none：不顯示上述任何效果

    八。控制文字的樣式

    控制文字的樣式包括單詞距離、字母距離、文字行距、文字水平對齊、文字垂直對齊文字縮排六個部分。

    1.單詞間距

    單詞間距指的是英文每個單詞之間的距離，不包括中文文字。

    基本格式如下：

    word-spacing： 間隔距離

    間隔距離的取值：points、em、pixes、in、cm、mm、pc、ex、normal等。

    2.字母間距

    字母間距是指英文字母之間的距離，功能、用法，以及引數的設定和單詞間距很相似。

    基本格式如下：

    letter-spacing： 字母間距

    3.行距

    行距是指上下兩行基準線之間的垂直距離。一般地說，英文五線格練習本，從上往下數的第三條橫線就是計算機所認為的該行的基準線。

    基本格式如下：

    line-height： 行間距離

    行間距離取值：

    。不帶單位的數字：以1為基數，相當於比例關係的100%

    。帶長度單位的數字：以具體的單位為準

    。比例關係

    注意：如果文字字型很大，而行距相對較小的話，可能會發生上下兩行文字互相重疊的現象。

    4.文字水平對齊

    文字水平對齊可以控制文字的水平對齊，而且並不僅僅指文字內容，也包括設定圖片、影像資料的對齊方式。

    基本格式如下：

    text-align： 引數

    引數的取值：

    。left：左對齊

    。right：右對齊

    。center：居中對齊

    。justify：相對左右對齊

    但需要注意的是，text-alight是塊級屬性，只能用於< p>、< blockquqte>、< ul>、< h1>~< h6>等識別符號裡。

    5.文字垂直對齊

    文字的垂直對齊應當是相對於文字母體的位置而言的，不是指文字在網頁裡垂直對齊。比如說，表格的單元格里有一段文字，那麼對這段文字設定垂直居中就是針對單元格來衡量的，也就是說，文字將在單元格的正中顯示，而不是整個網頁的正中。

    基本格式如下：

    vertical-align： 引數

    引數取值：

    。top：頂對齊

    。bottom：底對齊

    。text-top：相對文字頂對齊

    。text-bottom：相對文字底對齊

    。baseline：基準線對齊

    。middle：中心對齊

    。sub：以下標的形式顯示

    。super：以上標的形式顯示

    6.文字縮排

    文字縮排可以使文字在相對預設值較窄的區域裡顯示，主要用於中文板式的首行縮排，或是為大段的引用文字和備註做成縮排的格式。

    基本格式如下：

    text-indent： 縮排距離

    縮排距離取值：

    。帶長度單位的數字

    。比例關係

    但是需要注意的是，在使用比例關係的時候，有人會認為瀏覽器預設的比例是相對段落的寬度而言的，其實事實並非如此，整個瀏覽器的視窗才是瀏覽器所預設的參照物。

    另外，text-indent是塊級屬性，只能用於< p>、< blockquqte>、< ul>、< h1>~< h6>等識別符號裡。

    九。控制顏色和背景的樣式

    控制顏色和背景的樣式包括顏色屬性、背景顏色、背景圖片、背景圖片重複、背景圖片固定、背景定位六個部分。

    1.顏色屬性

    基本格式如下：

    color： 引數

    顏色引數取值範圍：

    。以RGB值表示

    。以16進位制（hex）的色彩值表示

    。以預設顏色的英文名稱表示

    以預設顏色的英文名稱表示無疑是最為方便的，但由於預定義的顏色種類太少，所以更多的網頁設計者喜歡用RGB的方式。RGB方式的好處很多，不但可以用數字的形式精確地表示顏色，而且也是很多影像製作軟體（如Photoshop）裡預設使用的規範，這樣一來就為圖片和網頁更好地結合打下了堅實的基礎。

    2.背景顏色

    在HTML當中，要為某個物件加上背景色只有一種辦法，那就是先做一個表格，在表格中設定完背景色，再把物件放進單元格。這樣做比較麻煩，不但程式碼較多，還要為表格的大小和定位傷些腦筋。現在用CSS就可以輕鬆地直接搞定了，而且物件的範圍很廣，可以是一段文字，也可以只是一個單詞或一個字母。

    基本格式如下：

    background-color： 引數

    引數取值和顏色屬性一樣。

    3.背景圖片

    基本格式如下：

    background-image： url（URL）

    URL就是背景圖片的存放路徑。如果用“none”來代替背景圖片的存放路徑，將什麼也不顯示。

    4.背景圖片重複

    背景圖片重複控制的是背景圖片平鋪與否，也就是說，結合背景定位的控制可以在網頁上的某處單獨顯示一幅背景圖片。

    基本格式如下：

    background-repeat： 引數

    引數取值範圍：

    。no-repeat：不重複平鋪背景圖片

    。repeat-x：使圖片只在水平方向上平鋪

    。repeat-y：使圖片只在垂直方向上平鋪

    如果不指定背景圖片重複屬性，瀏覽器預設的是背景圖片向水平、垂直兩個方向上平鋪。

    5.背景圖片固定

    背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。如果不設定背景圖片固定屬性，瀏覽器預設背景圖片隨網頁的滾動而滾動。為了避免過於花哨的背景圖片在滾動時傷害瀏覽者的視力，所以可以解除背景圖片和文字內容的捆綁，該為和瀏覽器視窗捆綁。

    基本格式如下：

    background-attachment： 引數

    引數取值範圍：

    。fixed：網頁滾動時，背景圖片相對於瀏覽器的視窗而言，固定不動

    。scroll：網頁滾動時，背景圖片相對於瀏覽器的視窗而言，一起滾動

    6.背景定位

    背景定位用於控制背景圖片在網頁中顯示的位置。

    基本格式如下：

    background-position： 參數列

    引數取值範圍：

    。帶長度單位的數字引數

    。top：相對前景物件頂對齊

    。bottom：相對前景物件底對齊

    。left：相對前景物件左對齊

    。right：相對前景物件右對齊

    。center：相對前景物件中心對齊

    。比例關係

    引數中的center如果用於另外一個引數的前面，表示水平居中；如果用於另外一個引數的後面，表示垂直居中。

    十。控制列表的樣式

    列表是HTML裡一種很有用的顯示方式，可以把相關的並列內容整齊地垂直排列，使網頁顯得整潔專業，並讓瀏覽者有一目瞭然的感覺。

    樣式表為列表增加了一些功能，控制列表的樣式包括列表樣式、圖形符號、列表位置三個部分。

    1.列表符號

    列表符號是指顯示於每一個列表專案前的符號標識。

    基本格式如下：

    list-style-type：引數

    引數取值範圍：

    。disc：圓形

    。circle：空心圓

    。square：方塊

    。decimal：十進位制數字

    。lower-roman：小寫羅馬數字

    。upper-roman：大寫羅馬數字

    。lower-alpha：小寫希臘字母

    。upper-alpha：大寫希臘字母

    。none：無符號顯示

    引數中的disc是預設選項。

    2.圖形符號

    圖形符號指原來列表的專案符號將可以使用圖形來代替。

    基本格式如下：

    list-style-image：URL

    URL是用來代替專案符號的圖形檔案的地址，可以使用相對地址或絕對地址。

    3.列表位置

    列表位置描述列表在何處顯示。

    基本格式如下：

    list-style-position：引數

    引數取值範圍：

    。inside：在BOX模型內部顯示

    。outside：在BOX模型外部顯示

    這裡又出現了一個新的概念：BOX模型。BOX是指一種容器，包含了應用樣式規則的物件，具體介紹將在後文中給出。

    十一。控制使用者介面的樣式

    在網頁上，滑鼠平時呈箭頭形，指向連結時成為手形，等待網頁下載時成為沙漏形……這似乎是約定俗成的。雖然這樣的設計能使我們知道瀏覽器現在的狀態或是可以做什麼，但這些好像還不能完全地滿足我們的需要。就拿連結來說，可以是指向一個幫助檔案，也可以是向前進一頁或是向後退一頁，針對如此多的功能光靠千篇一律的手形滑鼠是不能說明問題的。值得慶幸的是，CSS提供了多達13種的滑鼠形狀，供我們選擇。

    基本格式如下：

    cursor：滑鼠形狀引數

    CSS滑鼠形狀參數列：

    CSS程式碼

    滑鼠形狀

    style="cursor：hand"

    手形

    style="cursor：crosshair"

    十字形

    style="cursor：text"

    文字形

    style="cursor：wait"

    沙漏形

    style="cursor：move"

    十字箭頭形

    style="cursor：help"

    問號形

    style="cursor：e-resize"

    右箭頭形

    style="cursor：n-resize"

    上箭頭形

    style="cursor：nw-resize"

    左上箭頭形

    style="cursor：w-resize"

    左箭頭形

    style="cursor：s-resize"

    下箭頭形

    style="cursor：se-resize"

    右下箭頭形

    style="cursor：sw-resize"

    左下箭頭形