AdSense

網頁

2019/7/29

CSS 練習 使用Class selectors

請建立一份HTML文件，檔名為class.html。請用VS Code編輯。

class.html內容如下。

class.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="bg-yellow">哈囉你好嗎</div>
    <div class="bg-pink">衷心感謝</div>
    <div class="bg-yellow tx-red">珍重再見</div>
    <div class="bg-pink tx-red">期待再相逢</div>
</body>
</html>

請在Internal style sheet使用Class selectors來套用CSS樣式，需在瀏覽器顯示如下結果。



解答：

class.html

<!DOCTYPE html>
<html>
<head>
    <style>
        .bg-yellow {
            background-color: yellow;
        }
        .bg-pink {
            background-color: pink;
        }
        .tx-red {
            color: red;
        }
    </style>
</head>
<body>
    <div class="bg-yellow">哈囉你好嗎</div>
    <div class="bg-pink">衷心感謝</div>
    <div class="bg-yellow tx-red">珍重再見</div>
    <div class="bg-pink tx-red">期待再相逢</div>
</body>
</html>
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

AdSense