文字之HTML5教學都在這裡告訴你~不論你要字行設定.文字排列...所有跟文字有關的設定都可以來這裡找找~
前端工程師小教室- HTML5教學之文字相關設定!
1. 跟文字排列 (行距、排序) 有關的設定
屬性名稱 說明 設定範例 letter-spacing 指定字與字之間的間距 letter-spacing: 4pt； line-height 設定行高 line-height:200%
line-height:16px text-align 指定字型對齊方式
包含 left(向左)、center(置中)、right(向右)
、justify(左右對齊) text-align:justify； text-decoration 修飾文字
包含 underline(底線)、overline(上線)、
line-through(刪除線)、blink(讓文字閃爍)、 text-decoration:line-through； text-decoration 修飾文字
包含 underline(底線)、overline(上線)、
line-through(刪除線)、blink(讓文字閃爍)、 text-decoration:line-through； text-indent 段落的第一行要留多少縮排 text-ident:20px
text-ident:12pt； text-transform 大小寫控制
包含 capitalize(第一個字母大寫)、
uppercase(全部字母大寫)、lowercase(全部字母小寫) text-transform:uppercase； word-spacing 僅適用於英文單字，控制「英文單字」間的距離
用法與 letter-spacing 有點類似，不同的是
word-spacing 控制的是單字（或段落）而非單一字母
letter-spacing 控制的則是單一字元間的距離。 word-spacing:2px；
| 屬性名稱 | 說明 | 設定範例 |
|---|---|---|
| letter-spacing | 指定字與字之間的間距 | letter-spacing: 4pt； |
| line-height | 設定行高 | line-height:200% line-height:16px |
| text-align | 指定字型對齊方式 包含 left(向左)、center(置中)、right(向右) 、justify(左右對齊) | text-align:justify； |
| text-decoration | 修飾文字 包含 underline(底線)、overline(上線)、 line-through(刪除線)、blink(讓文字閃爍)、 | text-decoration:line-through； |
| text-decoration | 修飾文字 包含 underline(底線)、overline(上線)、 line-through(刪除線)、blink(讓文字閃爍)、 | text-decoration:line-through； |
| text-indent | 段落的第一行要留多少縮排 | text-ident:20px text-ident:12pt； |
| text-transform | 大小寫控制 包含 capitalize(第一個字母大寫)、 uppercase(全部字母大寫)、lowercase(全部字母小寫) | text-transform:uppercase； |
| word-spacing | 僅適用於英文單字，控制「英文單字」間的距離 用法與 letter-spacing 有點類似，不同的是 word-spacing 控制的是單字（或段落）而非單一字母 letter-spacing 控制的則是單一字元間的距離。 | word-spacing:2px； |
2.跟字型相關的CSS設定 (常用)
屬性名稱 說明 設定範例 font-family 指定使用的字體，可以設定多個，讓瀏覽器依照排序使用 font-family: 微軟正黑體,"Arial"； font-size 指定字體大小，有多種單位可以使用:
small、large、pt、px、cm、% font-size:16pt
font-size:large font-weight 指定字型厚度，數值越大字型越粗
也可以直接使用"bold"指定之 font-weight:100；font-weight:bold； font-style 指定字型樣式，大多用來設定斜體 font-style:italic；
| 屬性名稱 | 說明 | 設定範例 |
|---|---|---|
| font-family | 指定使用的字體，可以設定多個，讓瀏覽器依照排序使用 | font-family: 微軟正黑體,"Arial"； |
| font-size | 指定字體大小，有多種單位可以使用: small、large、pt、px、cm、% | font-size:16pt font-size:large |
| font-weight | 指定字型厚度，數值越大字型越粗 也可以直接使用"bold"指定之 | font-weight:100；font-weight:bold； |
| font-style | 指定字型樣式，大多用來設定斜體 | font-style:italic； |
其實除了文字之外，前端工程師在 HTML5教學網頁的各個元素進行 CSS 格式設定時，有一個 「盒子模型 (box model) 」 的概念：就是所有要被設定的元素，都會被視為一個盒子"<span>"或"<div>"。
而些盒子的內容都是被框 (border) 包著的，內容與框中間又有所謂的留白 (padding)。而這個框 (border )的粗細是可以調整的。如以上範例所示：
而些盒子的內容都是被框 (border) 包著的，內容與框中間又有所謂的留白 (padding)。而這個框 (border )的粗細是可以調整的。如以上範例所示：
上面範例包含兩個大盒子 <div> 與 <div> ，而第一個<div>中又放了三個小盒子<span>，所以我們在<div>中設定的值，三個 <span> 內的文字也會同步被變更。而這三個<span>又可以分別獨立設定邊框大小與線條形式、顏色、粗細。(border的設定依據為粗細、樣式、顏色)。這是較簡單的區塊設定方法，在下一章中，將會更進一步說明邊框的設定值並說明如何用 CSS 設定邊框。(CSS設定的邊框還可以導圓角喔)。
推薦閱讀