iT邦幫忙

2023 iThome 鐵人賽

DAY 11
0
Modern Web

Web互動式網頁系列 第 11

DAY11 CSS文本與字體設計

  • 分享至 

  • xImage
  •  

這次來介紹如何調整文本外觀和字體設計,來美化文字顏色、大小、字體、對齊方式等以及好用的屬性吧!
(畢竟身為人都是外貌協會對美的事物都有好感的嘛-v-)

文字顏色

  • 使用color屬性設置文字顏色,可用各種單位表示:
    顏色名稱(如red)或十六進制顏色碼(#FF0000)。

範例:將所有段落元素的文字顏色都設定為紅色。

p {
  color: red;
}

文字大小

使用font-size屬性更改文字大小。可用各種單位表示像: 像素(px)、百分比(%)等都行。
範例:將h1標題元素的字體大小設置為24像素。

h1 {
  font-size: 24px;
}

字體設計

  • 使用font-family屬性可以指定文本的字體。
    設定一個字體族列給瀏覽器選擇最適合的可用字體,確保網頁在不同設備上都能顯示文字。

範例:指定字體為Arial,若不可用則使用sans-serif作為後備字體。

body {
  font-family: Arial, sans-serif;
}

文字對齊

  • 使用text-align屬性可以指定文本在元素內的位置與對齊方式。

範例:將所有段落元素中的文本居中對齊。

p {
  text-align: center;
}

字體加粗和斜體

  • 使用font-weight屬性使文字變粗。數值可以是normal、bold或數字(如700表示粗體)。
  • 使用font-style屬性使文字變斜體,數值可以是normal或italic。

範例:將h2標題元素的文字變為粗體,em元素的文字變為斜體。

h2 {
  font-weight: bold;
}

em {
  font-style: italic;
}

介紹到這邊,感謝觀看!


上一篇
DAY10 CSS盒模型(box)與佈局
下一篇
DAY12 CSS背景顏色與圖片
系列文
Web互動式網頁30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言