CSS：設定文字與字型樣式
應用基本的文字樣式
文字對齊方式：text-align
該屬性用於控制“行內塊元素”或“塊元素”內“行內元素”（文字元素）的居中方式的，包含三個值：
left：居左對齊；
center：居中對齊；
right：居右對齊；
空白處理：white-space
空白在HTML文件中通常是被壓縮或者直接忽略掉。這允許你將HTML文件的佈局跟頁面的外觀分離。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Example</title>
<style type="text/css" 在上面的程式碼中，文字包含了一些空格、製表符和換行符。瀏覽器遇到多個空格時，會將他們壓縮為一個空格，而換行符等其他空白符則會直接被忽略。瀏覽器會自動處理文字換行，以便各行都能適應元素邊界。瀏覽器的這種處理方式並不是我們想要的，有時候我們就像在HTML源文件中保留文字中的空白，這是，可以使用whitespace屬性控制瀏覽器對空白字元的處理方式，這個屬性的值總結如下：
| 值 | 說明 |
|---|---|
| normal | 預設值，空白符被壓縮，文字自動換行 |
| nowrap | 空白符被壓縮，文字行不換行 |
| pre | 空白符被保留，文字只在遇到換行符的時候換行，這個pre元素的效果一樣 |
| pre-line | 空白符被壓縮，文字只會在一行排滿或遇到換行符時換行 |
| pre-wrap | 空白符被保留，文字會在一行排滿或遇到換行符時換行 |
段落首行縮排：text-indent
該屬性是用於“行內元素”設定每個段落首行縮排數量值的屬性，CSS字型大小（font-size）可以設定的數值和單位在該屬性的值中都可以使用（除了百分比）。如果是用於中文佈局，一般會使用“2em”的數值和單位來為每個段落的首行縮排“兩個字元”。
文字裝飾線：text-decoration
該屬性是為文字上新增一根裝飾線，帶”href”屬性的 <a> 標籤預設會帶有一根下劃線，就是由該屬性的值“underline”設定的。“text-decoration”屬性有以下值：
none：（預設）不顯示任何裝飾線；
underline：在文字下方顯示裝飾線；
overline：在文字上方顯示裝飾線；
line-through：在文字中間顯示裝飾線，相當於刪除線；
英文字母的大小寫轉換：text-transform
該屬效能將“行內元素”中的英文文字進行大小寫轉換，以滿足網站對規範性的要求。特別在一些對專案產品細節要求至嚴的跨國企業或合資企業，他們對網站或應用中的文字格式也有相當高的要求，當網站中的絕大部分英文文字都是由其它地方整理貼上而來的時候，如果要逐一去修改這些文字，不僅時間成本大大地增加，也容易出現一些難以一時發現的疏漏，這個時候“text-transform”屬性就有它的“用武之地”了。該屬性有以下屬性值：
none：（預設）保持文字中英文單詞的預設大小寫
capitalize：每個英文單詞首字母為大寫字母，其它為小寫字母
uppercase：將所有英文單詞轉換為大寫字母
lowercase：將所有英文單詞轉換為小寫字母
指定文字方向：direction
direction有兩個值，分別如下：
ltr：從左至右；
rtl：從右至左；
提示：direction屬性已經從相關CSS模組的最新草案中移除了，不過也沒給出具體的原因，說不定在模組最終完善之前還能恢復。
制定單詞、字母、行之間的間距
可以告訴瀏覽器單詞與單詞、字母與字母、行與行之間的間距。相關屬性列在下表中：
| 屬性 | 說明 | 值 |
|---|---|---|
| letter-spacing | 設定字母之間的間距 | normal<長度值> |
| word-spacing | 設定單詞之間的間距 | normal<長度值> |
| line-height | 設定行高 | normal/<數值>/<長度值><%> |
文字的陰影：text-shadow
| 屬性 | 說明 | 值 |
|---|---|---|
| text-shadow | 為文字塊應用陰影 | h-shadow,v-shadow,blur,color |
h-shadow和v-shadow值分別指定陰影的水平偏移和垂直偏移。它們的值用長度值（px）表示，允許負值。h-shadow值，“0”表示維持原位，正數為向右偏移，負數為向左偏移；v-shadow值，“0”表示維持原位，正數為向下偏移，負數為向上偏移。blur值也是一個長度值，定義了陰影的模糊程度，該值可選，距離越大模糊程度越高。color值指定陰影的顏色，支援Web技術中的常用顏色模式：“顏色英文單詞”“HEX”、“RGBa”、“HSLa”。
字型樣式
我們可以對文字進行許多改變，其中最基本的一項就是改變用來顯示字元的字型。下方列表中描述了字型相關屬性。
字型基本設定
| 屬性 | 說明 | 值 |
|---|---|---|
| font-family | 指定文字塊採用的字型名稱 | 中文或英文字型名:“宋體”“Arial” |
| font-size | 指定文字塊的字型大小 | 單位：px/em/%/pt/ex/pc/mm/cm/in） |
| font-style | 指定字型樣式 | normal(普通)/italic（斜體）/oblique（傾斜字型） |
| font-weight | 設定字型粗細 | normal/bold/bolder/lighter |
字型的組合寫法
除了為“font”的具體分支屬性設定樣式，我們還能將“font”的多個值組合起來寫，如我們要設定一個風格為正常的粗體，字號為20畫素的“微軟雅黑”和一個風格為斜體的正常粗細，字號為22畫素的“宋體”，我們可以這樣寫：
<article>
<p class="setFont_1">正常風格加粗20畫素的微軟雅黑字型</p>
<p class="setFont_2">斜體風格正常粗細22畫素的宋體字型</p>
</article>對應的CSS程式碼如下：
.setFont_1 {
font: normal bold 20px "微軟雅黑";
}
.setFont_2 {
font: italic normal 22px "宋體";
}由於字型風格和字型粗細，具有一定的相似性，如他們都有一個“normal”值，所以在寫“font”屬性組合值的時候可以省略二者之一，以辨識到的值進行設定，另外一個自動為“normal”，甚至還能省略掉第前兩個值，只保留“font-size”和“font-family”。如下所示：
.setFont {20px "微軟雅黑"}
等價於
.setFont {normal 20px "微軟雅黑"}
等價於
.setFont {normal normal 20px "微軟雅黑"}但有一點需要強調的是，在“font”組合值的寫法中，只有“font-size”和“font-family”這兩個的值是不能省略的，而且是缺一不可，否則瀏覽器會不認識該值，對該組合值進行報錯。
字型顏色 color
在目前的瀏覽器標準中，要想改變瀏覽器預設字型的顏色（#000000）唯一的途徑就是通過CSS的“color”屬性進行設定。顏色屬性可以設定4種類型的值，有以下型別：
1、顏色英文單詞
可以通過顏色的英文單詞直接設定文字的顏色，如“red”、“orange”、“yellow”、“green”、“cyan”、“blue”、“purple”、“pink”、“gray”、“black”和“white”等等。
2、HEX（16進位制顏色）
通過“#”+16進製表示顏色，有“#”+“三位”和“#”+“六位”的形式。若是“三位”的形式，第一位表示“紅”，第二位表示“綠”，第三位表示“藍”，通過取值區間“0-9”,“a-f”(10-16)的組合，如“#26f”，共計能表達4,096個顏色。若是“六位”的形式，可以表示的顏色數更加細緻，第一二為表示“紅”，第三四位表示“綠”，第四五位表示“藍”，同樣也是通過取值區間“0-9”,“a-f”的組合，如“#2369fd”，共計能表達16,777,216個顏色。
3、RGBa/ARGB（Alpha的三原色）
和“HEX”表示三原色一樣，該模式同樣也是採用三元色的值來表現色彩，不過“RGBa”顏色模式採用的是10進位制的值，格式如“rgb(34, 102, 255)”，值之間用英文逗號“,”進行分割，第一個值表示“紅”，第二個值表示“綠”，第三個值表示“藍”，每個值的區間為“0-255”（256個色階），共計同樣也能表示16,777,216個顏色。除此之外，該模式還支援對不透明度的設定，也就是“RGBa”裡面的這個“a”（alpha），它表示不透明度，取值區間是“0到1”之間的浮點數（可保留到兩位小數），“0”表示完全透明，“1”表示完全不透明，寫法如“rgba(34, 102, 255, 0.55)”、“rgba(34, 102, 255, .9)”或“rgb(34, 102, 255)”。
4、HSLa（Alpha的Hue、Saturation、Lightness）
該模式通過設定“色調”（Hue）、“飽和度”（Saturation）、“亮度”（Lightness）和“不透明度”（Alpha）來表現色彩的，不透明度的表示和“RGBa”一樣，我們主要來看下面三個值的意義：
色調：除開“黑色”和“白色”從純紅色過度到純藍色再過度到純紅色這一過程的顏色軸的區間，共計360個色調；
飽和度：從該色調的純黑到該色調的純色區間，越接近黑色，飽和度越低，越接近純色，飽和度越高；
亮度：從“純黑”到“純白”這一過程的表示，越接近黑色亮度越低，越接近白色亮度越高。
如例：
這是一個色調為316，飽和度75%，亮度56%，不透明度0.9的顏色–HSLa(316, 75%, 56%, 0.9)
這是一個色調為76，飽和度35%，亮度45%，不透明的顏色–HSL(76, 35%, 45%)
5、Transparent（透明）
只要設定該值，那文字的內容將變為完全透明，即無論背景為什麼顏色或圖片，都會完全看不到設定的文字元素，只是起到了一個佔位作用，除非文字被選中，如下例：
這是一段一般人根本不會發現的文字。
需要補充的是，“IE 8”瀏覽器及以下的版本不支援“RGBa”、“HSLa”模式及“Transparent”值，即不支援透明度部分的值，對常規“RGB”和“HSL”模式仍能正常支援。