CSS入門-Day3：文字與字體樣式
閱讀時間約 5 分鐘
文字屬性
字體大小（font-size）
設置文本的大小，可以使用絕對大小（如 px、pt）或相對大小（如 em、rem、百分比）。
p {
font-size: 16px;
}
h1 {
font-size: 2em;
}
字體顏色（color）
設置文本的顏色，可以使用顏色名稱、十六進制值、RGB 或 HSL 值。
p {
color: #333;
}
h1 {
color: rgb(255, 0, 0);
}
字體系列（font-family）
設置文本的字體，可以指定多個字體名稱，瀏覽器會從左到右依次查找。
body {
font-family: 'Arial', sans-serif;
}
字體樣式（font-style）
設置文本的樣式，如普通、斜體等。
p {
font-style: italic;
}
字體粗細（font-weight）
設置文本的粗細，如正常、加粗等。
p {
font-weight: bold;
}
文本對齊
文本對齊（text-align）
設置文本在容器內的水平對齊方式。
p {
text-align: left; /* 左對齊 */
}
h1 {
text-align: center; /* 居中對齊 */
}
div {
text-align: right; /* 右對齊 */
}
行高（line-height）
設置文本行之間的距離。
p {
line-height: 1.5; /* 行高為字體大小的 1.5 倍 */
}
文字間距（letter-spacing）
設置文本中字符之間的間距。
p {
letter-spacing: 2px;
}
單詞間距（word-spacing）
設置文本中單詞之間的間距。
p {
word-spacing: 5px;
}
文本裝飾（text-decoration）
設置文本的裝飾，如下劃線、上劃線等。
p {
text-decoration: underline; /* 下劃線 */
}
h1 {
text-decoration: line-through; /* 刪除線 */
}
Google 字體
引入 Google 字體
可以通過在 HTML 文件的 <head> 部分添加 <link> 標籤來引入 Google 字體。
<head>
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">
</head>
使用 Google 字體
引入字體後，可以在 CSS 中使用 font-family 屬性來應用這些字體。
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700; /* 使用粗體 */
}
示例
這裡是一個完整的示例，展示如何使用 Google 字體和文本屬性。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 文字屬性示例</title>
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
color: #333;
line-height: 1.5;
}
h1 {
font-size: 2em;
text-align: center;
text-decoration: underline;
font-weight: 700;
}
p {
font-size: 16px;
text-align: justify;
letter-spacing: 1px;
word-spacing: 2px;
}
</style>
</head>
<body>
<h1>這是一個標題</h1>
<p>這是一段文本，展示了如何使用 CSS 文字屬性來控制文本的顯示效果。我們使用了 Google 字體、字體大小、字體顏色、行高、文本對齊、文字間距和單詞間距等屬性。</p>
</body>
</html>
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本篇為隨筆紀錄，將看完的影片疏理為短小筆記 。
特別有感的是，現在回頭看，發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了，這是在學習及練習中很常會反覆發生、需要注意的地方，提醒自己在接下來的練習中，能將老師提及的思維及作法吸取並應用。
本篇將不同 Sass 學習資源彙整在此，作爲學習筆記，大多來自 w3schools 和六角學院，相關連結也一並記錄下來，以便可以隨時查看、更新。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本篇為隨筆紀錄，將看完的影片疏理為短小筆記 。
特別有感的是，現在回頭看，發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了，這是在學習及練習中很常會反覆發生、需要注意的地方，提醒自己在接下來的練習中，能將老師提及的思維及作法吸取並應用。
本篇將不同 Sass 學習資源彙整在此，作爲學習筆記，大多來自 w3schools 和六角學院，相關連結也一並記錄下來，以便可以隨時查看、更新。