網頁

▼

2019/8/6

CSS 練習 自訂ID Selectors

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

my-id-selectors.html內容如下。

my-id-selectors.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

上面的HTML文件目前已套用外部樣式表(External style sheet)的CSS如下。

style.css

div {
    height:20px;
    border:solid 1px;
}

請幫每個<div>自行定義id屬性，然後在外部樣式表中另外使用ID Selectors為每個<div>區塊新增背景顏色，由上到下依序為red，orange，yellow，green，blue，在瀏覽器開啟如下。



提示：
CSS ID selectors ID選擇器。


解答：

my-id-selectors.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
</body>
</html>

style.css

div {
    height:20px;
    border:solid 1px;
}

#div1 {
    background-color:red;
}
#div2 {
    background-color:orange;
}
#div3 {
    background-color:yellow;
}
#div4 {
    background-color:green;
}
#div5 {
    background-color:blue;
}

沒有留言:

張貼留言