DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 5.8 本章總結
5.8 本章總結
編輯:CSS3基礎     

在CSS3中,增加了豐富的文本修飾效果,使得網頁更加美觀舒服。下面列出了常用的CSS3文本屬性:

CSS3文本屬性 屬性 說明 text-shadow 文字陰影 text-stroke 文字描邊 text-overflow 文本溢出處理 word-wrap 長單詞或URL強制換行 @font-face 嵌入服務器字體 font-size-adjust 調整字體尺寸

一、text-shadow屬性

在CSS3中,我們可以使用text-shadow屬性來實現文字的陰影效果。

語法:

 
text-shadow:x-offset  y-offset  blur  color;

說明:

x-offset:(水平陰影)表示陰影的水平偏移距離,單位可以是px、em或者百分比等。如果值為正,則陰影向右偏移;如果值為負,則陰影向左偏移;

y-offset:(垂直陰影)表示陰影的垂直偏移距離,單位可以是px、em或者百分比等。如果值為正,則陰影向下偏移;如果值為負,則陰影向上偏移;

blur:(模糊距離)表示陰影的模糊程度,單位可以是px、em或者百分比等。blur值不能為負。如果值越大,則陰影越模糊;如果值越小,則陰影越清晰。當然,如果不需要陰影模糊效果,可以吧blur值設置為0;

color:(陰影的顏色)表示陰影的顏色,可以使用 學習網的“在線調色板”獲取。

二、text-stroke屬性

在CSS3中,我們可以使用text-stroke屬性為文字添加描邊效果。這個描邊效果,說白了就是給文字添加邊框,注意喔,“文字”也能添加邊框了呢。

語法:

text-stroke:寬度值 顏色值;

說明:

text-stroke是一個復合屬性,由text-stroke-width和text-stroke-color兩個子屬性組成。

(1)text-stroke-width屬性設置描邊的寬度,可以為一般的長度值。

(2)text-stroke-color屬性設置描邊的顏色。我們可以使用“在線調色板”來取色。

三、text-overflow屬性

在CSS3中,文本溢出text-overflow屬性用於設置是否使用一個省略標記(…)標示對象內文本的溢出。

語法:

text-overflow:取值;

說明:

text-overflow屬性取值只有2個:

text-overflow屬性取值 屬性值 說明 ellipsis 當對象內文本溢出時顯示省略標記(…) clip 當對象內文本溢出時不顯示省略標記(…),而是將溢出的部分裁切掉

單獨使用text-overflow屬性是無法得到以下圖1的效果的。因為text-overflow屬性只是說明文字溢出時用什麼方式顯示,要實現溢出時產生省略號效果,還須定義2個內容:

  • (1)white-space:nowrap;(強制文本在一行內顯示);
  • (2)overflow:hidden;(溢出內容為隱藏);

下面是完整語法:

 
text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap;

這3個屬性是必須一起使用才會有效果。

四、word-wrap屬性

在CSS3中,我們可以使用word-wrap屬性來設置“長單詞”或“URL地址”是否換行到下一行。

語法:

word-wrap:取值;

說明:

word-wrap屬性只有2個取值:normal和break-word。

word-wrap屬性取值 選擇器 說明 normal 默認值,文本自動換行 break-word “長單詞”或“URL地址”強制換行

五、嵌入字體@font-face簡介

在CSS3中,我們可以使用@font-face方法來使得所有客戶端加載服務器端的字體文件,從而使得所有用戶的浏覽器都能正常顯示該字體。

語法:

 
@font-face
{
    font-family : 字體名稱;
    src :url("字體文件路徑");
}

說明:

六、font-size-adjust屬性

在CSS3中,我們可以使用font-size-adjust屬性來在字體類型(font-family)改變的情況下而保持字體大小(實際大小)不變。

語法:

font-size-adjust:屬性值;

說明:

font-size-adjust屬性取值為一個“aspect值”。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved