資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究HTML 中的 div 類和 id 如何使用？
HTML 的<div>標籤表示 HTML 文件中的一個分隔或部分。此標籤用作容器，在其中我們可以嵌入任何 HTML 元素（例如文字、影像、表格、音訊、影片等）。
如果我們想設定<div>元素的樣式或與之互動，我們可以分配id或class屬性。
注意 - 預設情況下，大多數瀏覽器始終在 <div> 元素前後新增一個新的換行符。
HTML id 屬性
在 HTML 中，使用 id 屬性（全域性屬性），我們可以為任何 HTML 元素指定一個唯一的識別符號。我們不能在 HTML 文件中為多個元素分配相同的 id，因此，id 在整個文件中必須是唯一的。
使用此 id，我們可以使用 CSS 和 JavaScript 設定特定 HTML 元素的樣式或與之互動。
語法
以下是為 HTML 屬性定義 id 的語法 -
<p id = mypara1> Welcome to Tutorialspoint </p>
我們可以使用 (#id) 選擇器在 CSS 中訪問 id 屬性。以下是語法 -
#mypara{
color: Red;
}
HTML class 屬性
在 HTML 中，class 屬性（全域性屬性）可用於為任何 HTML 元素指定一個類。我們可以將相同的類分配給多個 HTML 元素。類名區分大小寫。
我們可以使用 CSS 和 JavaScript 設定具有特定類名的元素的樣式或操作這些元素。
語法
以下是為 HTML 屬性定義類的語法 -
<h1 class = myheading1> Simply easy learning </h1>
我們可以使用 (.class) 選擇器在 CSS 中訪問 class 屬性。以下是語法 -
.myheading1{
color: yellowgreen;
}
示例
在下面的示例中，我們建立了 4 個 <div> 元素，但沒有為它們分配 class 和 id 屬性 -
<!DOCTYPE html>
<html>
<head>
<title>DIV in HTML</title>
<style>
div {
border: solid 1px;
}
</style>
</head>
<body>
<div>
<p>Tutorialspoint</p>
</div>
<div>
<p>simply</p>
</div>
<div>
<p>easy</p>
</div>
<div>
<p>learning</p>
</div>
</body>
</html>
輸出
正如我們在輸出中看到的，我們有三個 <div> 元素，瀏覽器在 <div> 元素前後添加了一個新的換行符。
示例
在下面的示例中，我們為 HTML 文件中的每個 <div> 元素分配了一個 class 屬性，並使用 CSS 設定了它們的樣式 -
<!DOCTYPE html>
<html>
<head>
<title>DIV in HTML</title>
<style>
div {
border: solid 1px;
padding: 10px;
}
.mydiv1 {
background-color: lightcoral;
}
.mydiv2 {
background-color: lightgreen;
}
.mydiv3 {
background-color: lightseagreen;
}
.mydiv4 {
background-color: lightslategrey;
}
</style>
</head>
<body>
<div class="mydiv1">
<p>Tutorialspoint</p>
</div>
<div class="mydiv2">
<p>simply</p>
</div>
<div class="mydiv3">
<p>easy</p>
</div>
<div class="mydiv4">
<p>learning</p>
</div>
</body>
</html>
輸出
在上面的程式中，我們使用 <style> 標籤中的類為 div 元素設定了樣式。
示例
在這裡，我們藉助它們的 id 為 <div> 元素新增 CSS。
<!DOCTYPE html>
<html>
<head>
<title>DIV in HTML</title>
<style>
div{
border: solid 1px;
padding: 10px;
}
#mydiv1{
background-color: lightslategrey;
}
#mydiv2{
background-color: lightseagreen;
}
#mydiv3{
background-color: lightgreen;
}
#mydiv4{
background-color: lightcoral;
}
</style>
</head>
<body>
<div id="mydiv1">
<p>Tutorialspoint</p>
</div>
<div id="mydiv2">
<p>simply</p>
</div>
<div id="mydiv3">
<p>easy</p>
</div>
<div id="mydiv4">
<p>learning</p>
</div>
</body>
</html>
輸出
在上面的程式中，我們使用 <style> 標籤中的ID為 div 元素設定了樣式。
281 次瀏覽
