文字排版
這章節我們要來介紹文字排版,而文字排版其實蠻重要的,排版排的好可以增加使用者好體驗,讓閱讀文章可以輕鬆毫無壓力,以下會介紹幾個文字排常用的語法。
CSS
p {
color: black; // 文字顏色
font-family: Verdana; // 字型設定,它有很多種類
font-size: 16px; // 文字大小
line-height: 1.5; // 行與行之間的距離,簡稱行距
text-align: left; // 文字靠左,預設是靠左
text-indent: 32px; // 首行縮排
text-decoration: underline; // 文字加上下底線
text-decoration: line-through; // 文字加上刪除線
letter-spacing: 5px; // 字和字之間的距離,簡稱字間
}
畫面
補充:
這裡想補充行距的部分,例:文字大小 font-size: 18px,行距 1.5 倍 line-height: 1.5,意思是 16px 大小的文字,文字整行就是 18px * 1.5 = 27px 的大小,而行距也直接用 px 設定,像是 line-height: 24px。圖片解釋:
線條
線條是 HTML 上面蠻常會看到,像是標題、段落、圖片...等都會看到它的出現,所以下面會介紹怎麼樣使用線條。
語法:
border: 線大小 樣式 顏色;
border-上下左右: 線大小 樣式 顏色;
CSS
// 標題上使用線條
h2 {
font-size: 30px;
border-left: 10px solid red; // 左邊線條
border-top: 10px solid #000; // 上面線條
border-right: 10px solid blue; // 右邊線條
border-bottom: 10px solid pink; // 下面線條
}
畫面
// 圖片上使用
img {
border: 5px solid black; // 1.實線
border: 5px dashed black; // 2.虛線
border: 5px dotted black; // 3.點綴線
}
畫面
1.實線
2.虛線
3.點綴線