標籤：style class blog http ext color
文字和映像是傳達資訊的基礎，是網頁設計永遠不可缺少的元素，各種各樣的文字和映像效果在整個互連網中無處不在。本章從基礎的文字設定開始，詳細講解CSS設定各種文字效果的方法，然後再進一步講解關於映像的幾個重要的應用領域。 使用過任何文文書處理軟體的使用者對文字排版都不會陌生。例如在Word軟體中可以對文字的字型、大小和顏色等各種屬性進行設定。CSS同樣可以對HTML頁面中的文字進行全面的設定。 一、準備網頁 為了便於講解和實踐，首先準備一個非常簡單的頁面，HTML代碼如下。
這個非常簡單的網頁，由一個h1標題和兩個p段落構成。為了對兩段文本段落分別進行設定，給它們各自設定了一個類別選取器，p1和p2。在沒有設定任何樣式時，效果1所示。該檔案請參考網頁學習網CSS教學資源中的“第5章\文字\basic.htm”。lodidance.com 圖1 準備好的基本頁面效果 二、設定字型 在HTML語言中，文字的字型是通過<font face="字型名稱">來設定的，而在CSS中字型是通過font-fanuly屬性來控制的。例如針對上面準備好的網頁，在樣式部分增加如下對p標記的樣式設定。
以上語句聲明了HTML頁面中p標記的字型名稱，並且同時聲明了兩個字型名稱。分別是Arial字型和Times New Roman字型，其含義是告訴瀏覽器首先在訪問者的電腦中尋找Arial字型。如果該訪問者的電腦中沒有Arial字型，就尋找Times New Roman；如果這兩種字型都沒有，則使用瀏覽器的預設字型顯示。 font-family屬性可以同時聲明多種字型，字型之間用逗號分隔開。另外，一些字型的名稱中間會出現空格，例如上面的Times New Roman，這時需要用雙引號將其引起來，使瀏覽器知道這是一種字型的名稱。 注意：不要輸入中文（全形）的雙引號，而要使用英文（半形）的雙引號。 這時在瀏覽器中的效果2所示。可以看到，兩個本文段落中的字型都發生了變化。該檔案請參考網頁學習網CSS教程資源中的”第5章/文字/font-family.htm”。 圖2 設定本文字型 注意：很多設計者喜歡使用各種各樣的字型來給頁面添彩，但這些字型在大多數使用者的機器上都沒有安裝，因此一定要設定多個備選字型，避免瀏覽器直接替換成預設的字型。最直接的解決方案是將使用了生僻字型的部分，用圖形軟體製作成小的圖片，再載入到頁面中。 三、文字大小 在網頁中通過文字的大小來突出主題是很常用的方法，CSS是通過font-size屬性來控制文字大小的，該屬性的值可以使用很多種長度單位，這裡分別進行介紹。 1.長度單位px 仍以上面的網頁為例子，增加對font-size屬性的設定，將其設定為12像素，代碼如下。
這時在瀏覽器中的效果3所示。可以看到，此時兩個本文段落中的文字都變小了。該檔案請參考網頁學習網CSS教程資源中的“第5章/文字/font-size.htm”。 圖3 設定了本文文字的大小為12像素 代碼中的px是一個長度單位，表示在瀏覽器上1個像素的大小。因為不同訪問者的顯示器的解析度不同，而且每個像素的實際大小也不相同，所以px被稱為相對單位，也就是相對於1個像素的比例。 在CSS中，除了可以使用px作為長度單位，還可以使用以下5種單位設定大小（包括文字、div的高度和寬度等），這5種單位都披稱為絕對長度單位，它們不會隨顯示器的變化而變化。各個單位的含義如下表所示。
2.長度單位em和ex 此外還有兩個比較特殊的長度單位：em和ex。它們與px類似，也是相對長度單位。lem表示的長度是其父元素中字母m的標準寬度，1ex則表示字母x的標準高度。當父元素的文字大小變化時，使用這兩個單位的子項目的大小會同比例變化。 例如，在文字排版時，有時會要求第一個字母比其他字母大很多．並下沉顯示，就可以使用這個單位。方法是先在上面的HTML中，把第2段文字的第1個字母“T”放入一對<span></span>標記中，並對它設定一個CSS類別，“.firstLIter”。
然後設定它的樣式，將font-size設定為2em，並使它向左浮動，代碼如下：
這時在瀏覽器中的效果4所示。此時第2段的首字母就變為標準大小的3倍，並因設定了向左浮動而實現下沉顯示。該檔案請參考網頁學習網CSS教程資源中的“第5章/文字/first-letter.htm”。 圖4 設定段首的字母放大並下沉顯示 3.長度單位% 最後一種單位是使用百分比作為單位，例如“font-size:200%”，表示文字的大小為原來的兩倍。lodidance.com 四、行高 在CSS中，還可以設定一個段落中各行文本的高度，這是通過line-height屬性設定的。在CSS中line-height的值表示的是兩行文字之間基準的距離，也就是每行文字的高度。如果給文字加上底線，底線的位置就是文字的基準。 line-height屬性的值與CSS中所有設定具體數值的屬性一樣，可以設定為相對數值，也可以設定為絕對數值。在靜態頁面中，文字大小固定時常常使用絕對數值，達到統一的效果。而對於論壇和部落格這些可以由使用者自訂字型大小的頁面，通常設定為相對數值，可以隨著使用者自訂的字型大小而改變相應的行距。 例如，對上面的例子的p標記設定如下CSS規則：
這時在瀏覽器中的效果5所示。每行的高度比原來增大了一些。該檔案請參考網頁學習網CSS教程資源中的“第5章/文字/line-height-1.htm”。 圖5 設定本文的行高 除了可以使用像素等作為行高的單位，也可以不加任何單位，此時行高應寫成與字型大小的比值。例如，字型大小是12像素，有下面這行代碼：
它所產生的行高效果．與下面的代碼的行高效果是相同的。
下面請讀者仔細對比一4與圖5，可以發現在設定了“line-height:18px”之後，圖4中下沉顯示的段首字母“T”，不再以下沉的方式顯示了。如果此時將行高由絕對高度18像素改為相對高度1.5．就會發現字母“T”又下沉最示了，6所示。該檔案請參考網頁學習網CSS教程資源中的“第5章/文字/line-height-2.htm”。 圖6 使用相對高度後的效果 分析：12像素的1.5倍正是18像素，行高也沒有變化，為什麼會影響到前面的字母“T”的位置呢？ 讀者可以好好思考一下這個問題。這裡考驗的是讀者是否已經充分理解了CSS的基本性質。答案是這樣的，在本教程第1章中曾經重點介紹過CSS的樣式具有繼承的性質。當p的樣式中，將line-height設定為18像素時，字母“T”所在的span是p元素的子項目，因此它繼承了這個樣式，它的行高也是18像素。這樣，儘管它的文字高度變大了，但是它的盒子高度仍然被限制為18像素，旁邊的文字翻繞它排版的時候是以盒子為界限的，因此效果就5所示了。（此時，字母“T”已經超出了盒子的範圍。請讀者實驗一下，在IE和Firefox中的不同處理方式。） 當把p的line-hright設定為1.5時，這個樣式同樣被字母“T”所在的span元素繼承了．因此當它的文字變為3倍大的時候，行高也隨之變大，就會產生6所示的效果了。 從這個小例子可以看出，在學習和實際工作過程中有時會遇到一些很細小的地方，其中蘊藏著很深的道理，都值得把它探究清楚。 下面還需要說明兩點。 (1) 上面介紹了設定文字的3個最基本的屬性，即字型、大小和行高。在CSS中，還可以把它們組合在一條CSS規則中。例如：
這行代碼錶示使用Arial字型，大小為12像素，行高18像素。注意在字型和行高之間要用斜線隔開。 也可以以相對比例作為行高的數值，例如：
(2) line-height屬性可以設定在文本元素中，例如上面的例子就是這樣，對p元素設定行高，就是確定了段落中每一行的高度。line-height屬性也可以設定在容器元素中，例如對一個div設定line-height屬性，那麼它裡面的文字都將使用這個行高值。
|
||||||||||||
| 編輯：網頁學習網 | ||||||||||||
| 本文地址:http://www.lodidance.com/css/jc/680.html |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
