使用HTML5編寫網頁的弊病就是文字內容過於單調,倘若搭配CSS語法展現不同字體與文字排列模式,網頁質感立即升級!
1. 跟字型相關的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；
|
2. 跟文字排列
(行距、排序) 有關的設定
屬性名稱
|
說明
|
設定範例
|
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；
|
其實除了文字之外，前端工程師 在 HTML5教學 網頁的各個元素進行 CSS 格式設定時，有一個 「盒子模型
(box model) 」 的概念：就是所有要被設定的元素，都會被視為一個盒子"<span>"或"<div>"。
而些盒子的內容都是被框
(border) 包著的，內容與框中間又有所謂的留白
(padding)。而這個框
(border )的粗細是可以調整的。如以下範例所示：
該範例包含兩個大盒子
<div> 與
<div> ，而第一個<div>中又放了三個小盒子<span>，所以我們在<div>中設定的值，三個
<span> 內的文字也會同步被變更。而這三個<span>又可以分別獨立設定邊框大小與線條形式、顏色、粗細。(border的設定依據為粗細、樣式、顏色)。這是較簡單的區塊設定方法，在下一章中，將會更進一步說明邊框的設定值並說明如何用
CSS 設定邊框。(CSS設定的邊框還可以導圓角喔)。
推薦閱讀:
- 網路行銷又添一利器(上):趕快來學免費的HTML5教學
- 網路行銷又添一利器(中):HTML5教學把圖片變成文字標籤
- 網路行銷又添一利器(下):HTML5教學給你滿滿的標籤
- CSS是什麼?網頁設計課程教你認識他!!基礎一:在HRML中導入CSS!!
- 想要網路行銷之前,UI課程是必修課之一!
- 學完網路行銷課程,好想知道哪些程式語言最有錢途?
- 全球TOP 5熱門程式語言,除了Java課程你還應該知道…
