iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
自我挑戰組

從零開始前端學習筆記(HTML、CSS、JavaScript)系列 第 8

Day 08 CSS <文本屬性>

CSS Text 屬性可定義文本的外觀
例如 : 文本的顏色、對齊文本、裝飾文本、文本縮進、行間距


1.文本顏色

color用於定義文本的顏色

div{
color: red or #FF0000 or rgb(255,0,0);
}

2.文本對齊

text-align用於設置文本內容的水平對齊方式

div{
text-align: center; (居中對齊)
text-align: left; (左對齊)
text-align: right; (右對齊)
}

3.裝飾文本(加線)

text-decoration可添加文本裝飾,可給文本添加下划、刪除、上划線

div{
text-decoration: none; (默認 文字沒有線) 可給<a>使用 使<a>刪除下划線 
text-decoration: underline;  (下划線)
text-decoration: overline;  (上划線)
text-decoration: line-through;  (刪除線)
}

4.文本縮進

text-indent用來指定文本的第一行縮進,通常是將段落的首行縮進

div{
text-indent: 10px;
}

text-indent經常使用em當作單位,em是一個相對單位,就是當前font-size 1個文字的大小,如果當前元素沒有設置大小,則會按照父元素的1個文字大小
sample :

P{
text-indent:2em;
}

5.行間距

line-height用於設置行間距離,可以控制文字行與行之間的距離

p{
line-height: 26px;
}

文本屬性範例


上一篇
Day 07 CSS <字體屬性>
下一篇
Day 09 CSS <背景屬性>
系列文
從零開始前端學習筆記(HTML、CSS、JavaScript)10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言