CSS實用教程（二）

七．控制文字的樣式

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

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）的色彩值表示

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

2．背景顏色

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

基本格式如下：

background-color: 引數

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

3．背景

基本格式如下：

background-image: url(url)

url就是背景的存放路徑。如果用「none」來代替背景的存放路徑，將什麼也不顯示。

4．背景重複

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

基本格式如下：

background-repeat: 引數

引數取值範圍：

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

5．背景固定

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

基本格式如下：

background-attachment: 引數

引數取值範圍：

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是指一種容器，包含了應用樣式規則的物件，具體介紹將在後文中給出。

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

基本格式如下：

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"

左下箭頭形

CSS實用教程（二）

礎開始 CSS實用教程二

IDEA實用教程（二）

Axmath實用教程

CSS實用教程（二）

礎開始 CSS實用教程 二

IDEA實用教程（二）

Axmath實用教程

相關推薦

礎開始 CSS實用教程二