美國NASDAQ上市公司
外商IT教育培訓企業

0800-777-100


週一到週五 09:00~21:00 週六到週日 09:00~18:00

熱門課程

CSS 基礎語法 - 1. 與字型、文字排序有關的設定

  • 時間:2019-01-15
  • 發布:達內教育台灣
  • 來源:HTML5課程

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 )的粗細是可以調整的。如以下範例所示:

HTML5 運用兩個div以及三個span的範例|達內教育

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

上一篇:網路行銷人員也該上的HTML5教學2-認識HTML表格標籤
下一篇:網路行銷人員也該上的HTML5教學1-認識HTML基礎標籤與免費網頁編輯器
使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之1-秒懂你的使用者

等網頁Loading等到想睡著的男性圖片|SEO優化|達內教育

2018年SEO 8部曲之2-你的網頁夠快嗎?

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之3-Title與Meta Description還是要做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之4-原來URL也可以做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO八部曲之5-圖片的 SEO 優化

使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之7-Schema結構化資料

 

選擇城市和中心
貴州省

廣西省

海南省