AdSense

網頁

2019/7/29

CSS 練習 ID選擇器

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

請先將下面的HTML文件以外部樣式表套用以下CSS，效果為所有的<div>
底色為橘色(background-color:orange)；
高100px(height:100px;)；
寬100px(width:100px;)；
邊界外距10px(margin:10px;)；
邊線1px(border:solid 1px;)；
最重要的是有靠左的浮動效果(float:left)，你可以試著把此屬性拿掉來比較看看差別。

div {
    background-color: orange;
    height: 100px;
    width: 100px;
    margin: 10px;
    border: solid 1px;
    float: left;
}

id-selectors.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="div-1"></div>
    <div id="div-2"></div>
    <div id="div-3"></div>
    <div id="div-4"></div>
    <div id="div-5"></div>
</body>
</html>

若完成上述設定在瀏覽器開啟如下。



請在外部樣式表中使用ID selectors，將第三個<div>區塊的底色改為紅色(red)如下。



提示：
CSS ID selectors ID選擇器。

解答：

id-selectors.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <div id="div-1"></div>
    <div id="div-2"></div>
    <div id="div-3"></div>
    <div id="div-4"></div>
    <div id="div-5"></div>
</body>
</html>

style.css

div {
    background-color:orange;
    height: 100px;
    width:100px;
    margin: 10px;
    border:solid 1px;
    float:left;
}

#div-3 {
    background-color: red;
}
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

AdSense