CSS文字樣式設定
當許多文字組合到一起就形成了文字，現在我們研究的就是如何設定這些文字的樣式。
1.文字的顏色 “color”
在目前的瀏覽器標準中，要想改變瀏覽器預設字型的顏色（#000000）唯一的途徑就是通過CSS的“color”屬性進行設定。顏色。
color屬性可以設定4種類型的值
①　顏色英文單詞
可以通過顏色的英文單詞直接設定文字的顏色，如
“red”、“”orange、“yellow”、“green”、“cyan”、“blue”、“purple”、“pink”、“gray”、“black”和“white”
等等。
②　HEX（三原色，16進製表示）
通過“#”+16進製表示顏色，
有“#”+“三位”和“#”+“六位”的形式。
若是“三位”的形式，第一位表示“紅”，第二位表示“綠”，第三位表示“藍”，通過取值區間“0-9”,“a-f”(10-16)的組合，如“#26f”，共計能表達4,096個顏色。
若是“六位”的形式，可以表示的顏色數更加細緻，第一二為表示“紅”，第三四位表示“綠”，第四五位表示“藍”，同樣也是通過取值區間“0-9”,“a-f”的組合，如“#2369fd”，共計能表達16,777,216【一千六百多萬】個顏色。
③　RGBa（三原色，十進位制表示）
和“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)”。
④　HSLa（色調，飽和度，亮度，不透明度）
該模式通過設定
“色調”（Hue）、
“飽和度”（Saturation）、
“亮度”（Lightness）
“不透明度”（Alpha）
來表現色彩的，不透明度的表示和“RGBa”一樣，我們主要來看下面三個值的意義：
1)色調
除開“黑色”和“白色”從純紅色過度到純藍色再過度到純紅色這一過程的顏色軸的區間，共計360個色調；
2)飽和度
從該色調的純黑到該色調的純色區間，越接近黑色，飽和度越低，越接近純色，飽和度越高；
3)亮度
從“純黑”到“純白”這一過程的表示，越接近黑色亮度越低，越接近白色亮度越高。
4)例子
HSL(76, 35%, 45%) ：這是一個色調為76，飽和度35%，亮度45%，不透明的顏色
HSLa(316, 75%, 56%, 0.9)：這是一個色調為316，飽和度75%，亮度56%，不透明度0.9的顏色
⑤　Transparent（透明）
只要設定該值，那文字的內容將變為完全透明，即無論背景為什麼顏色或圖片，都會完全看不到設定的文字元素，只是起到了一個佔位作用，除非文字被選中，如下例：
div { color: transparent;}
需要補充的是，“IE 8”瀏覽器及以下的版本不支援“RGBa”、“HSLa”模式及“Transparent”值，即不支援透明度部分的值，對常規“RGB”和“HSL”模式仍能正常支援。
2.文字的居中方式“text-align”
該屬性用於控制“行內塊元素”或“塊元素”內“行內元素”（文字元素）的居中方式的，包含三個值：
left（預設）
文字左對齊
center
文字居中對齊
right
文字右對齊
3.段落首行縮排“text-indent”
該屬性是用於設定 每個段落首行縮排數量值 的屬性，
如果是用於中文佈局，一般會使用“2em”的數值和單位來為每個段落的首行縮排“兩個字元”。
4.文字裝飾線“text-decoration”
該屬性是為文字上新增一根裝飾線，帶"href"屬性的標籤預設會帶有一根下劃線，就是由該屬性的值“underline”設定的。
“text-decoration”屬性有以下值：
none（預設）
不顯示任何裝飾線
underline
在文字下方顯示裝飾線
overline
在文字上方顯示裝飾線
line-through
在文字中間顯示裝飾線，相當於刪除線
5.英文字母大小寫轉“text-transform”
該屬效能將“行內元素”中的英文文字進行大小寫轉換，以滿足網站對規範性的要求。
特別在一些對專案產品細節要求至嚴的跨國企業或合資企業，
他們對網站或應用中的文字格式也有相當高的要求。
當網站中的絕大部分英文文字都是由其它地方整理貼上而來的時候，如果要逐一去修改這些文字，不僅時間成本大大地增加，也容易出現一些難以一時發現的疏漏，這個時候“text-transform”屬性就有它的“用武之地”了。
該屬性有以下屬性值：
none（預設）
保持文字中英文單詞的預設大小寫
capitalize
將每個英文單詞首字母變為大寫字母（而不管他原本是大寫還是小寫），其它字母即便是小寫也不管。
uppercase
將所有英文單詞轉換為大寫字母
lowercase
將所有英文單詞轉換為小寫字母
6.文字的陰影“text-shadow”
該屬性的作用是給文字新增陰影效果。
該屬性最初是在CSS2.0中被定義的，但在CSS 2.1被刪除了，不知道是出於什麼考慮，在CSS3.0中又重新被寫進了規範。
目前除了IE9及之前版本不支援該屬性外，其它主流瀏覽器鈞支援該屬性。
該屬性有4個值，具體如下：
水平方向陰影偏移（h-shadow）
“0”表示維持原位，正數為向右偏移，負數為向左偏移。單位為畫素“px”。
垂直方向陰影偏移（v-shadow）
“0”表示維持原位，正數為向上偏移，負數為向下偏移。單位為畫素“px”。
陰影模糊距離（blur）
用正數表示陰影模糊的單位距離，距離越大模糊程度越高，單位為畫素“px”。
陰影的顏色（color）
支援Web技術中的常用顏色模式：“顏色英文單詞”、“HEX”、“RGBa”、“HSLa”。
和“行內塊元素”和“塊元素”所用的“box-shadow”（以後會學習）有所不同，文字陰影的屬性值裡沒有“inset”（設定為內陰影）和“spread”（陰影的擴充套件，單位畫素“px”），以後在使用中需要加以區分。
7.段落文字行高“line-height”
該屬性是用於設定“行內元素”中文字元素在一行中所佔據的高度，（可實現單行文字垂直居中的效果）
使用場景如：表格、導航按鈕、自定義樣式按鈕、標題欄等。
8.單詞的間距“word-spacing”
該屬性用於設定英文單詞之間的間距。
注意
他區分單詞時是按照單詞兩邊是否含有空格來判斷的，所有如果你的內容是中文，
1.當你的文字間沒有空格時，整體就會被當做一個單詞。
2.當你的每個漢字兩邊都有空格時，每個漢字才會被當做是一個單詞。
3.其值可以為負數，距離會減小
9.字元的間距“letter-spacing”
和“word-spacing”有所不同，該屬性是用於控制字元間的間距。
一個字母，一個漢字，甚至一個空格都是一個字元。
注意：
1.在html中，多個空格最終會變為一個空格的。
2.其值可以為負數，距離會減小
10.空格換行處理“white-space”
該屬性設定如何處理元素內的空格符和換行符，它主要有以下值：
normal（預設）
由瀏覽器處理空格和換行
pre
段落裡所有的空格符和換行符都會被保留（類似於

標籤）

nowrap

段落內的文字不會換行（類似於沒有設定過換行的“notepad”）

pre-wrap

段落裡所有的空格符序列和換行符序列都會被保留，這點類似於pre

但是他不會去更改瀏覽器的預設行為（當內容的寬度小於了窗體的寬度時會出現滾動條的行為）

pre-line

保留換行符，但是多個空格還是會按照瀏覽器的預設行為處理（多個合併為一個）

注意：

如果你當前的內容是無空格分隔的一連串的英文，那麼他會被瀏覽器當作是一個單詞，不會讓他換行，只會出現水平滾動條去適應他。

11.設定文字方向“direction”

該屬性是由於控制文字顯示方向的，即從左往右，或從右向左。

在有些國家，如：“阿拉伯”、“伊朗”、“以色列”，還有古典的“中日韓”文等等，他們的文字顯示方向都是從右向左的，為了適應這些文字方向的需求，如果用手工去設定，耗費的時間成本會過高，也非常容易出錯，這個時候“direction”屬性會幫你克服這個問題。該屬性有兩個值：

ltr

預設值,文字方向從左到右

rtl

文字方向從右向左

12.設定文字溢位時的處理“overflow”

13.文字的裁切“text-overflow”

該屬性規定當文字溢位所在標籤時進行的處理。

該屬性主要包含兩個值：

clip 裁剪文字（從屬性意義不大，通過overflow：hidden可實現此效果）

ellipsis顯示省略符號來代表被裁剪的文字

不過該屬性不能單獨使用，必須要配合

“white-space”和“overflow”來使用，

否則會達不到所期望的效果。

顯示省略號的流程

1.文字長度需要超出寬度邊界

2.不允許內容換行

3.設定超出就隱藏

4.設定文字末尾顯示省略號