# HTML中怎么改變字體顏色和大小
在網頁設計中，文字樣式是影響用戶體驗的關鍵因素之一。HTML提供了多種方式來控制字體顏色和大小，本文將詳細介紹這些方法。
## 一、使用內聯樣式（Inline Style）
最直接的方式是使用`style`屬性直接在HTML標簽中定義樣式：
```html
<p style="color: red; font-size: 20px;">這是紅色20像素的文字</p>
color: 支持顏色名稱、十六進制值或RGB值font-size: 支持px（像素）、em、rem等單位在<head>部分通過<style>標簽定義樣式規則：
<head>
<style>
.highlight {
color: #FF5733; /* 十六進制橙色 */
font-size: 1.2em; /* 相對單位 */
}
</style>
</head>
<body>
<p class="highlight">高亮顯示的文本</p>
</body>
最佳實踐是將樣式規則寫入單獨的.css文件：
/* styles.css */
.title {
color: rgb(0, 150, 200);
font-size: 24pt; /* 點單位 */
}
HTML文件中通過<link>引入：
<link rel="stylesheet" href="styles.css">
雖然現代開發不推薦，但了解歷史方法仍有價值：
<font color="blue" size="4">傳統方式設置的文本</font>
注意：HTML5已廢棄
<font>標簽，建議使用CSS替代
| 類型 | 示例 | 說明 |
|---|---|---|
| 顏色名稱 | red, blue |
140+種預定義顏色 |
| 十六進制 | #FF0000, #09C |
6位或3位簡寫形式 |
| RGB | rgb(255, 0, 0) |
紅綠藍三原色值 |
| RGBA | rgba(255,0,0,0.5) |
帶透明度的顏色 |
| 單位 | 示例 | 特點 |
|---|---|---|
| px | 16px |
絕對單位，固定像素值 |
| em | 1.5em |
相對單位，基于父元素字體大小 |
| rem | 2rem |
相對單位，基于根元素字體大小 |
| % | 120% |
相對于父元素字體大小的百分比 |
| vw | 5vw |
相對于視口寬度的百分比 |
結合媒體查詢實現不同屏幕尺寸的適配：
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
@media (min-width: 1200px) {
body {
font-size: 18px;
}
}
body {
font-family: "Helvetica Neue", Arial, sans-serif;
}
:root {
--main-color: #3a86ff;
--text-size: 16px;
}
p {
color: var(--main-color);
font-size: var(--text-size);
}
掌握HTML/CSS中控制字體樣式的方法，可以使網頁內容更具可讀性和視覺吸引力。建議： 1. 優先使用CSS而非HTML標簽 2. 選擇適合項目的顏色單位和尺寸單位 3. 考慮響應式設計和可訪問性要求
通過實踐這些技術，你將能夠創建出專業級的網頁文本效果。 “`
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
