第 15 章 CSS 文字樣式[下]

 學習要點：

1.文字總彙

2.文字樣式

3.文字控制

 

主講教師：李炎恢

 

本章主要探討 HTML5 中 CSS 文字樣式，通過文字樣式的設定，更改字型的大小、樣式以及文字的方位。

 

一．文字總彙

本節課，我們重點了解一下 CSS 文字樣式中文字內容的一些設定方法，樣式表如下：

屬性名	說明	CSS 版本
text-decoration	裝飾文字出現各種劃線。	1
text-transform	將英文文字轉換大小寫。	1
text-shadow	給文字新增陰影	3
text-align	設定文字對齊方式	1,3
white-space	排版中的空白處理方式	1
letter-spacing	設定字母之間的間距	1
word-spacing	設定單詞之間的間距	1
line-height	設定行高	1
word-wrap	控制段詞	3
text-indent	設定文字首行的縮排	1

 

二．文字樣式

CSS 文字樣式有三種：文字裝飾、英文大小寫轉換和文字陰影。

1.text-decoration

p {
    text-decoration: underline;
}

解釋：設定文字出現下劃線。屬性值如下表：

值	說明
none	讓本身有劃線裝飾的文字取消掉
underline	讓文字的底部出現一條下劃線

overline	讓文字的頭部出現一條上劃線
line-through	讓文字的中部出現一條刪除劃線
blink	讓文字進行閃爍，基本不支援了

 

//讓本來有下劃線的超連結取消 

a {
    text-decoration: none;
}

 

2.text-transform

p {
    text-transform: uppercase;
}

解釋：設定英文文字轉換為大小寫。

值	說明
none	將已被轉換大小寫的值恢復到預設狀態
capitalize	將英文單詞首字母大寫
uppercase	將英文轉換為大寫字母
lowercase	將英文轉換為小寫字母

 

3.text-shadow

p {
    text-shadow: 5px 5px 3px black;
}

解釋：給文字新增陰影。其中四個值，第一個值：水平偏移；第二個值：垂直偏移；第三個值：陰影模糊度（可選）；第四個值：陰影顏色（可選）。

 

三．文字控制

CSS 文字樣式中還有一組對文字進行訪問、形態進行控制的樣式。

1.text-align

p {
    text-align: center;
}

解釋：指定文字的對齊方式。

值	說明
left	靠左對齊，預設
right	靠右對齊
center	居中對齊
justify	內容兩端對齊
start	讓文字處於結束的邊界
end	讓文字處於結束的邊界

start 和 end 屬於 CSS3 新增的功能，但目前 IE 和 Opera 尚未支援。

 

2.white-space

p {
    white-space: nowrap;
}

解釋：處理空白排版方式。

值	說明
normal	預設值，空白符被壓縮，文字自動換行
nowrap	空白符被壓縮，文字不換行
pre	空白符被保留，遇到換行符則換行
pre-line	空白符被壓縮，文字會在排滿或遇換行符換行
pre-wrap	空白符被保留，文字會在排滿或遇換行符換行

 

3.letter-spacing

p {
    letter-spacing: 4px;
}

解釋：設定文字之間的間距。

值	說明
normal	設定預設間距
長度值	比如：“數字”+“px”

  

4.word-spacing

p {
    word-spacing: 14px;
}

解釋：設定英文單子之間的間距。

值	說明
normal	設定預設間距
長度值	比如：“數字”+“px”

 

5.line-height

p {
    line-height: 200%;
}

解釋：設定段落行高。

值	說明
normal	設定預設間距
長度值	比如：“數字”+“px”
數值	比如：1,2,3
%	比如：200%

 

6.word-wrap

p {
    word-wrap: break-word;
}

解釋：讓過長的英文單詞斷開。

值	說明
normal	單詞不斷開
break-word	斷開單詞

 

7.text-indent

p {
    text-indent: 20px;
}

解釋：設定文字首行的縮排。

值	說明
normal	設定預設間距
長度值	比如：“數字”+“px”