1.1 顏色
CSS (Cascading Style Sheets) 提供了許多屬性來幫助我們設計文字。其中最重要的屬性是
color, font-size 和 font-weight。這些屬性能讓我們分別控制文字的顏色、大小和字體粗細。現在，我們詳細看看這些屬性。
屬性 color 用於設置文字顏色。它可以使用多種顏色格式來設定，包括顏色名稱、十六進位值、RGB、RGBA、HSL 和 HSLA。
使用範例
1. 顏色名稱：
CSS
p {
color: red;
}
2. 十六進位值：
CSS
p {
color: #ff0000;
}
3. RGB 與 RGBA：
CSS
p {
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* 透明紅色 */
}
4. HSL 和 HSLA：
CSS
p {
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5); /* 透明紅色 */
}
HTML中的使用範例：
CSS
p {
color: #3498db; /* 藍色 */
}
HTML
<body>
<p>這段文字會是藍色的。</p>
</body>
1.2 屬性 font-size
屬性 font-size 用於設定文字大小。值可以用不同單位表示，如像素 (px)、相對單位 (em, rem, %)、從像素衍生的單位 (mm, cm, pt, pc)、vw 和 vh (視口寬度和視口高度) 等等。
使用範例
1. 像素：
CSS
p {
font-size: 16px;
}
2. 相對單位：
%, em, rem
CSS
p {
font-size: 150%; /* 基本字體大小的150% */
font-size: 1.5em; /* 基本字體大小的1.5倍 */
font-size: 1.5rem; /* 相對於 <html> 元素的字體大小 */
}
3. 視口單位：
CSS
p {
font-size: 2vw; /* 視口寬度的2% */
font-size: 2vh; /* 視口高度的2% */
}
HTML中的使用範例：
CSS
p {
font-size: 18px; /* 文字大小18像素 */
}
HTML
<body>
<p>這段文字的大小是18像素。</p>
</body>
1.3 屬性 font-weight
屬性 font-weight 用於設定文字的粗細。值可以是關鍵字 (normal, bold, bolder, lighter) 或是從 100 到 900 的數值，其中 400 對應於 normal，而 700 對應於 bold。
使用範例
1. 關鍵字：
CSS
p {
font-weight: bold;
}
2. 數值：
CSS
p {
font-weight: 300; /* 輕文字 */
font-weight: 700; /* 相當於 bold */
}
HTML中的使用範例：
CSS
p {
font-weight: 700; /* 粗體文字 */
}
HTML
<body>
<p>這段文字會是粗體的。</p>
</body>
GO TO FULL VERSION