Day20:設定元素顏色

2024 iThome 鐵人賽

DAY 20

佛心分享-IT 人自學之術

HTML&CSS網頁設計學習心得系列第 20 篇

16th鐵人賽

gogococo

2024-10-04 14:36:38

121 瀏覽

分享至

在 HTML 和 CSS 中，設定元素的顏色可以通過color和background-color屬性

1.文字顏色
使用color屬性來設定文字的顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Color</title>
    <style>
        p {
            color: red; /* 可以使用颜色名称 */
        }
        h1 {
            color: #3498db; /* 也可以使用十六进制代码 */
        }
        h2 {
            color: rgb(255, 165, 0); /* 或使用 RGB 颜色 */
        }
        h3 {
            color: rgba(255, 165, 0, 0.8); /* 使用 RGBA 颜色（带透明度） */
        }
    </style>
</head>
<body>
    <p>This is a red paragraph.</p>
    <h1>This is a blue heading.</h1>
    <h2>This is an orange heading using RGB.</h2>
    <h3>This is a semi-transparent orange heading using RGBA.</h3>
</body>
</html>

2.背景顏色
使用background-color屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Color</title>
    <style>
        div {
            background-color: yellow; /* 使用颜色名称 */
        }
        .blue-bg {
            background-color: #3498db; /* 使用十六进制代码 */
        }
        .gradient-bg {
            background: linear-gradient(to right, red, yellow); /* 使用渐变背景 */
        }
    </style>
</head>
<body>
    <div>This is a div with a yellow background.</div>
    <div class="blue-bg">This div has a blue background.</div>
    <div class="gradient-bg">This div has a gradient background.</div>
</body>
</html>

3.顏色表示方式
顏色名稱：red,blue,green等
十六行：如#FF0000（#3498db（藍
RGB：如rgb(255, 0, 0)（紅色
RGBA：如`rgba(255, 0, 0, 0.5)（
HSL：hsl(0, 100%, 50%)（