8.5前端之類和id

阿新 • • 發佈：2021-08-05

8.5前端之類和id

類

好處：

對 HTML 進行分類（設定類），使我們能夠為元素的類定義 CSS 樣式。
為相同的類設定相同的樣式，或者為不同的類設定不同的樣式。

<head>
           <style>
            .ctities{
                background-color: black;
                color: white;
                margin: 20px;
                padding: 20px;
            }
        </style>
</head>
<body>
           <div class="ctities">
            <h2>ShenZhen</h2>
            <p>請說出你想說的:</p>
            <input size="7" style="font-family: '微軟雅黑'; color: red; font-size: medium;">
            <p>再次說出你想說的:</p>
            <input size="7" style="font-family: '微軟雅黑'; color: red; font-size: medium;">
        </div>
</body>

HTML <div> 元素是塊級元素。它能夠用作其他 HTML 元素的容器。
設定<div> 元素的類，使我們能夠為相同的 <div> 元素設定相同的類

id

特點：

HTML id 屬性用於為HTML 元素指定唯一的 id*
一個 HTML文件中不能存在多個有相同 id 的元素。
id 屬性指定 HTML 元素的唯一 ID。 id 屬性的值在 HTML 文件中必須是唯一的。
id 屬性用於指向樣式表中的特定樣式宣告。JavaScript 也可使用它來訪問和操作擁有特定 ID 的元素。
id 的語法是：寫一個井號 (#)，後跟一個 id 名稱。然後，在花括號 {} 中定義 CSS 屬性。

例項：

<style>
    #mydiv{
        background-color: lightblue;
        color: black;
        padding: 40px;
        text-align: center;
    }
</style>
        <div id="mydiv" style="font-family: '微軟雅黑';">
            這是自己設定的CSS
        </div>

注意：

id 名稱對大小寫敏感！
id 必須包含至少一個字元，且不能包含空白字元（空格、製表符等）。

通過 ID 和連結實現 HTML 書籤

<a href="PracticeDemoNo1.html#tips">點選跳轉到另一個html的該標籤元素處</a>

JavaScript使用id 屬性為特定元素執行某些任務

<!--使用 getElementById() 方法訪問擁有特定 id 的元素-->
<script>
function displayResult() {
 document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Class和id的區別

同一個類名可以由多個 HTML 元素使用，而一個 id 名稱只能由頁面中的一個 HTML 元素使用

        <div class="ctities">
            <h3>LiuZhou</h3>
            <p>柳州好呀!</p>
            <input size="7" style="font-family: '微軟雅黑'; color: red;" />
        </div>
        <a href="PracticeDemoNo1.html#tips">點選跳轉到另一個html</a>
        <div class="ctities">
            <h2>ShenZhen</h2>
            <p>請說出你想說的:</p>
            <input size="7" style="font-family: '微軟雅黑'; color: red; font-size: medium;">
            <p>再次說出你想說的:</p>
            <input size="7" style="font-family: '微軟雅黑'; color: red; font-size: medium;">
        </div>