【Day31】從零開始的程式大亂鬥：CSS－Style

2023 iThome 鐵人賽

自我挑戰組

那些有趣的程式系列第 31 篇

15th鐵人賽

dcheng0915

2023-10-21 01:26:33

291 瀏覽

分享至

在【Day30】從零開始的程式大亂鬥：HTML－Elements 文章中，我們運用了紙張來比喻網頁內容中的元素，接下來的CSS也會依此繼續舉例。

CSS

CSS 是用來定義網頁內容的外觀和排版。

讓我們將先前的例子加上class：

<div class="paper1">1</div>
<div class="paper2">
    <div class="paper2-1">2</div>
    <div class="paper2-2">3</div>
</div>

現在我們可以開始用CSS去設定每個元素的外面，也可以說是每張紙的外觀。

Example：

將 paper1 的背景顏色改為黑色（讓第一張紙，整張顏色變為黑色）

.paper1 {
    background-color: black;
}

將 paper2 的背景顏色改為淺灰色（讓第二張紙，整張顏色變為淺灰色）

.paper2 {
    background-color: lightgray;
}

將 paper2-1 的背景顏色改為淺藍色、元素寬度設為 80%
（讓第二張上的第一張紙，整張顏色變為淺藍色、寬度變為底下第二張的 80%）

.paper2-1 {
    background-color: lightblue;
    width: 80%;
}

將 paper2-2 的背景顏色改為淺粉紅色、元素寬度設為 50%
（讓第二張上的第二張紙，整張顏色變為淺粉紅色、寬度變為底下第二張的 50%）

.paper2-1 {
    background-color: lightblue;
    width: 80%;
}

完整程式碼：

<!DOCTYPE html>
<html>
    <head>
        <title>CSS－Style</title>
        <style>
            .paper1 {
                background-color: black;
            }
            .paper2 {
                background-color: lightgray;
            }
            .paper2-1 {
                background-color: lightblue;
                width: 80%;
            }
            .paper2-2 {
                background-color: lightpink;
                width: 60%;
            }
        </style>
    </head>
    <body>
        <div class="paper1">1</div>
        <div class="paper2">
            <div class="paper2-1">2</div>
            <div class="paper2-2">3</div>
        </div>
    </body>
</html>