CSS語法 HTML5 網頁設計

HTML5教學-字型與文字排列CSS設定懶人包

2019-01-17

 

HTML5教學與CSS語法:打造美感文字與字形
 
使用HTML5編寫網頁的弊病就是文字樣式過於單調,倘若搭配CSS語法展現不同字體與文字排列模式,網頁質感立即升級!
1. 跟字型相關的CSS設定 (常用)
屬性名稱
說明
設定範例
font-family
指定使用的字體,可以設定多個,讓瀏覽器依照排序使用
font-family: 微軟正黑體,”Arial”
font-size
指定字體大小,有多種單位可以使用:
smalllargeptpxcm%
font-size:16pt
font-size:large
font-weight
指定字型厚度,數值越大字型越粗
也可以直接使用“bold”指定之
font-weight:100font-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 )的粗細是可以調整的。如以下範例所示:

HTML5教學與CSS語法:打造美感文字與字形

該範例包含兩個大盒子
<div>
<div> ,而第一個<div>中又放了三個小盒子<span>,所以我們在<div>中設定的值,三個
<span> 內的文字也會同步被變更。而這三個<span>又可以分別獨立設定邊框大小與線條形式、顏色、粗細。(border的設定依據為粗細、樣式、顏色)。這是較簡單的區塊設定方法,在下一章中,將會更進一步說明邊框的設定值並說明如何用
CSS 設定邊框。(CSS設定的邊框還可以導圓角喔)
 
以上這兩種身為前端工程師不可不知的HTML5教學你學會了嗎?

 

推薦閱讀:

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料