CSS Text ( 文本 ) 屬性就是專注在於定義文本一系列的改變屬性外觀，本章節會詳細說明一般前端開發者常用的文本屬性，例如怎麼設置文本顏色、怎麼對齊文字、文本縮進、行間距的問題，只要了解這些就夠囉! 並不需要去背還有記，多多練習並多使用就會學起來了。
- CSS 怎麼自定義文本( Text )顏色?
- CSS 如何設置文本( Text )對齊呢?
- CSS 如何設置文本( Text )縮進呢?
- CSS 行間距如何設置呢?
CSS Text 中文到底是文本還是字體(文字)呢?
那要先了解 Text 這個單字，它在字典有文本、正文、主題的意思，我們不必去深究這單字起源但你可以大體知道它有整體的意思，所以 Text 不可能是指一個文字或是字體唷! 不然 CSS 開發者為什麼不直接取這個屬性叫 font 就好而是 Text 呢? 你可以思考這個本質，為什麼開發者不取 font 呀!?
我個人解讀，因為 Text 就是視為一整個文本也就是整體來看，color 被歸類在 Text 一定有原因就是希望能夠一次使用就能套用整個文本顏色，而不是個別字體 ( 文字 ) 的顏色，也就是說 Text 的用法都要看作控制一個區塊或是一個模塊進行改變，font 是控制個體本身就是只有單一文字而已，至於網路上你看見的中文CSS Text 教學很多幾乎都寫錯，都寫成以下這些例子。
- 文字 ( Text ) 屬性
- 字體 ( Text ) 屬性
以上都是錯的唷!!! 雖然是小細節但你如果不搞清楚什麼是 Text 什麼是 font 後期在團隊溝通上會出現巨大災難，或者是你們溝通上不要使用中文溝通請使用英文，這樣能確保資訊是一致的，你可能會想沒那麼嚴重吧! 雖然是這樣中文就是你懂我懂大家都懂就好不夠嚴謹的。
CSS 的文本( Text )顏色 Color 如何使用?
文本顏色就是改變文本 ( Text )顏色，可以透過 CSS 的 color 顏色屬性來自行定義，你需要改變文本 ( Text )的顏色其實很簡單的如下代碼表示。
div {
color: red;
}
簡單歸簡單，但是要知道 color 顏色屬性有很多種表示方式，那在 CSS 中能夠用什麼方式來表示呢? 其實有最一般的方式就是你知道那一個顏色的英文名稱直接輸入使用就可以了，那如果那個顏色沒有名稱你也想要使用就需要使用 16 進制來表示該顏色，例如 #FF0000，或是使用 RGB 編碼也可以顯色特殊顏色唷! 例如 rgb(255,0,0)。
- 能夠使用英文來代表顏色
- 使用 16 進制需要加井號和 6 個數字，0~9 和 A~F
- A 是 11，F 是 15
- 使用 rgba(255,0,0,0) 或是 rgba(100%,0%,0%,0)
- rgba 的 a 是指透明度，可加也可不加，看個人需求
- rgb 英文對應括號數字的第一個數字，例如 R(red紅色) 就是對應到括號裡第一個數字，以此類推
div {
color: #ff0000;
color: rgba(255,0,0,0)
}
| 顏色表示方式 | 屬性值用法 |
| 英文顏色值 | red、green、blue |
| 16進制 | FFF000、#FF6841 |
| RGB代碼或RGBA | rgba(255,0,0,0)或是rgba(100%,0%,0%,0) |
小總結:
改變文本 ( Text )顏色總共有三種方法，第一種就是知道顏色的名稱就可以直接使用，第二種是 16 進制需要先加井號在加入 6 個數字或是 A~F，第三種方法是使用 RGBA 的方法英文順序對應括號內的數字順序，基本上我們實際開發不太會用到第一種方法，都是用後兩者居多，至於顏色在團隊開發中都會分發給你網頁需要用到什麼顏色，你不需要背畢竟顏色太多種了，或者我們可以使用顏色吸取器吸起來就能知道別人是使用什麼顏色囉!
點我瞭解 小青如何每月多賺5位數台幣CSS 的文本( Text )對齊 text – align 是什麼?
text – align 文本對齊，如果你不知道這個功能沒關係但是你一定用過，在我們使用微軟 Word 或是PPT 時候在寫文字時有時候是不是會讓文字靠左對齊、居中對齊還是靠右對齊，沒錯就是這個功能不陌生吧! 在網頁中我們也可以讓文字呈現出這樣的文字對齊效果，只是在網頁中我們稱為 text-align文本對齊罷了!
CSS 的 text-align 功能如何使用?
text 就是文本的意思，而 align 就是對齊的意思合起來就是，能夠設置文字呈現出水平對齊效果，要特別注意只能改變水平文字，就跟微軟 Word 裡一樣只能改變水平文字唷，如果你不知道水平是什麼就是原本 X 軸座標上的文字是不能突然改成 Y 軸座標 ( 垂直 ) 這樣你應該比較好懂吧!? 如下示範居中效果如下。
div {
text-align: center;
}
有居中效果當然也會有靠左效果、靠右效果，以上就是文本文字對齊的三種方法。
- left
- right
- center
| 屬性值名稱 | 屬性功能效果 |
| left | 靠左對齊 ( 網頁默認 ) |
| right | 靠右對齊 |
| center | 居中對齊 |
要知道 text-align 文本屬性可以用在所有文字呈現出對齊的效果，而不是只侷限在 <p> 段落標籤唷! 你也能夠改變 <h1> 標題標籤或是按鈕標籤裡面的文字都可以進行文字的 X 軸 ( 水平 ) 對齊效果的位置改變!!!
<style>
p {
text-align: center;
}
h1 {
text-align: center;
}
</style>
<body>
<h1>自我介紹</h1>
<p>大家好我是小青!</p>
</body>
CSS 的文本( Text )裝飾 text – decoration 是什麼?
text 就是文本的意思，而 decoration 就是裝飾的意思合起來就是文本裝飾或是文本 ( Text )修飾，這邊讓你猜猜看文字可以怎麼裝飾呢? 這邊小青就來跟你說說如何裝飾文字還有怎麼樣才算是文字有裝飾的效果。
- 下劃線
- 刪除線
- 上劃線
最常出現就是下劃線、刪除線、上劃線，講很簡單就是 text-decoration 能夠讓文字多一條線，就是這麼簡單不太複雜，當然我們也可以強制移除原本就有裝飾的文字，像是有自帶下劃線的 <a> 錨點標籤，一般我們在開發時候通常為了讓版面看起來很乾淨清爽，我們都會把 <a> 錨點標籤的下劃線給移除掉。
<style>
a {
text-decoration: none;
}
</style>
<body>
<h1>自我介紹</h1>
<a href="#">大家好我是小青!</a>
</body>
| 屬性值名稱 | 描述說明 | 使用頻率 |
| none | 沒有裝飾線 ( 一般文字都默認 ) | 超級高 |
| underline | 下劃線 ( 使用a標籤會自帶 ) | 高 |
| overline | 上劃線 | 不常使用 |
| line-through | 刪除線 | 根本很少 |
小總結:
其實 text-decoration 文本裝飾你只要知道怎麼新增下劃線和怎麼把 <a> 錨點 ( 鏈接 ) 標籤的下劃線移除就可以了，其他功能屬性我們真實在開發中真的非常少用到，如果需要用到我們在查一下了解有什麼 text-decoration 文本裝飾就可以了並不必深度研究。
CSS 的文本( Text )縮進 text – indent 是什麼?
text 就是文本的意思，而 indent 就是有凹進去的意思合起來就是文本縮進或是文字縮進，我們以前在寫作文，老師都會教你作文段落的第一行要先空兩格，表示這個段落的開始起頭，那網頁中也有這樣的功能存在叫做 text-indent 文本縮進，它的功能就是縮進功能。
CSS 的 text – indent 文本( Text )縮進功能如何使用?
要知道 text-indent 文本縮進的前提是在於，只能使用在段落的第一行的頭而已，其他地方如果也要使用是不會有效果呈現出來的，簡單來說就是只會呈現段落的首行縮進，縮進多少我們是使用 px ( 像素 ) 或是 em ( 相對單位 ) 來進行決定。
<style>
a {
text-indent: 10px;
}
</style>
<body>
<h1>自我介紹</h1>
<p>大家好我是小青!</p>
<p>大家好我是小青!</p>
<p>大家好我是小青!</p>
</body>
- 縮進效果是使用 px ( 像素 ) 單位或是 em ( 相對單位 )
- 縮進可以是正值
- 縮進可以是負值 ( 一般人不會這麼做，文字會看不見 )
- 只有首行開頭會縮進
小總結:
你可能會說首行需要空兩格，會因為字體的大小而影響 px ( 像素 ) 單位，那空兩格不是很麻煩要先知道字體大小是多少 px ( 像素 ) 才能做調整超級麻煩，對沒錯就是超級麻煩，所以一般我們不會使用 px ( 像素 ) 來進行縮進，前端人員都會使用 em ( 相對單位 ) 來進行縮進，也就說你用 em 的話會自動抓你當前字體的大小，如果你用 1em 就是空一格原字體寬度大小，2em 就是空剛剛好兩格大小。
- em ( 相對單位 ) 就是當前元素 ( font-size ) 一個字的大小
- 當前 font-size 如果是 18px 那 1em 也就是18px
<style>
a {
text-indent: 2em;
}
</style>
<body>
<h1>自我介紹</h1>
<p>大家好我是小青!</p>
<p>大家好我是小青!</p>
<p>大家好我是小青!</p>
</body>
CSS 的行間距 line – height 是什麼?
line 就是行的意思，而 height 就是高度的意思合起來就是行的高度又會說行高，行高行高就是一行的高度，那我們想一下高度是不是從上到下或是從下到上移動，也就是說那就是垂直沒錯吧! 那也是Y 軸移動也沒錯吧! 在前面小節我們不是有討論 text-align 是水平移動 ( X軸 ) 它是文字的移動，而line-height 比較特殊是行的間距並不是指文字。
你可能會說 line-height 為什麼不叫 text-height 文本高度或是字體高度，為什麼一定要叫 line-height 呢? 很好你有這樣的想法，那是因為開發者在進行開發他們的邏輯思考都是英文為基礎，那英文一般書寫就是只有從左至右，上行寫完換下行進行書寫，只有這樣的規則所以才有 text-align 水平移動，讓文字左右移動進行排版，那如果取名為 text-height 文字垂直移動 hmmm 好像哪裡怪怪的，並沒有必要。
但為了考慮到呈現出來的文字的閱讀體驗，就想到了一行與下一行之間的間距有影響，影響可大了所以就創了 CSS 的 line-height 代表文字的行高間距，但行高的思考模式跟 text-align 的思考模式邏輯不同，line-height 其實是控制文字的上方框和下方框的高度，如果不好理解可以觀察下方圖片思考其中的奧妙。
在來我出個練習讓你好好思考 line-height 的本質如果你能夠理解的話，行高就沒問題了，一個字體為 36px ( 像素 ) 作為舉例，今天我們要讓這 <p> 段文字與下段文字有 5px 行高，你要怎麼做呢? 開始動動小手開始寫看看。
<style>
p {
text-size: 36px;
line-height: 41px
}
</style>
<body>
<h1>自我介紹</h1>
<p>大家好我是小青!</p>
<p>大家好我是小青!</p>
<p>大家好我是小青!</p>
</body>
小總結:
line-height 行間距是由 3 個部分所組成的，上間距、文本高度、下間距，如果要上行間距 ( 像素 ) 是 10px ( 像素 ) 要先算原本文本 ( Text ) 的大小高度是多少在加上 20px ( 像素 )，因為控制行高是由上間距和下間距所決定的唷! 還有要記得加上原字體大小和加上 20px ( 像素 ) 也就是說 20 px (像素) 要在除以 2 因為要平均分配給上間距和下間距也就是個 10px ( 像素 )。
CSS 的文本( Text )所有用法屬性總結
文本 ( Text ) 屬性大總結，一共我們學了有關文本 ( Text ) 怎麼改變顏色、怎麼讓文本水平對齊 ( X軸 )、文本縮進、文本裝飾以及行間距 ( Y軸 )，改文本 ( Text ) 顏色有 3 種方法你還記得嗎? 最常用又是哪兩種呢? 如果想要讓文字對齊你該怎麼做呢? 文本縮進你會使用 px ( 像素 ) 還是 em ( 相對位置 ) 呢? 我想要刪除 <a> 錨點 ( 鏈結 ) 標籤要使用什麼 CSS 屬性呢? 行間距又是以什麼邏輯去控制的呢?
| 屬性名稱 | 屬性描述說明 | 屬性注意點 |
| color | 文本 ( Text ) 顏色 | 使用 16 進制最多，其次是 rgba |
| text-align | 文本 ( Text ) 對齊 | 可設定文本水平對齊方式 |
| text-indent | 文本 ( Text ) 縮進 | 縮進一般都使用 em ( 相對位置 ) |
| text-decoration | 文本 ( Text ) 裝飾 | 取消下劃線是 none |
| line-height | 行間距 | 由三個部分組成，其中上和下間距最重要 |
以上如果你都能夠輕鬆回答問題那就說明你已經把整個 CSS 文本屬性原理搞得清清楚楚，那如果你有任何一個問題沒辦法回答的話，可以好好複習加強學習該節，不要害怕學不會多練習你也可以掌握得了，畢竟每個人學習的速度都不同，不需要急找到你的節奏比較重要，並持續不斷進步相信你一定可以更好的，共勉之。
點我瞭解 小青如何每月多賺5位數台幣
能看到這裡通常只有 1％ 的人，很感謝您可以閱讀到這裡（鞠躬）
本篇文章歡迎社群分享，可按分享按鈕，讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷！
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青