iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0
SideProject30

sideproject-簡易網站系列 第 17

Day-17 持續強化CSS文本觀念

  • 分享至 

  • xImage
  •  

文本內容要水平對齊時用這個

text-align: left; /* 對齊左邊 */
text-align: right; /* 對齊右邊 */
text-align: center; /* 置中 */

文本內容要垂直對齊時則是用這個

vertical-align: top; 
vertical-align: middle; 
vertical-align: bottom; 

行距這個我幾乎沒用到 不過還是簡單帶過

line-height: 1.5; /* 文字大小1.5倍*/
line-height: 150%; /* 同上換成100%做倍率*/
line-height: 24px; /* 固定像素值 */

調整文字水平間的距離 讓畫面看起來比較寬鬆

letter-spacing: 1px; /* 字符間增加1像素 */
letter-spacing: 0.5em; /* 以em為單位增加*/
text-decoration: underline;/*為文字加上底線*/
text-decoration: underline dotted;/*點狀底線*/
text-decoration: underline dashed;/*虛線下劃線*/
text-decoration: underline wavy;/*波浪狀劃線*/

上一篇
Day-16 強化CSS文本用法
下一篇
Day-18 探索更多CSS功能
系列文
sideproject-簡易網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言