แท็ก div สำหรับการจัดกลุ่มแท็กใน HTML

ในบทเรียนที่ผ่านมาเราได้วิเคราะห์แท็ก span ซึ่งช่วยให้สามารถเน้นบางส่วนของ ข้อความได้ มีแท็กพิเศษอีกอันหนึ่งคือ div ซึ่งช่วยให้สามารถจัดกลุ่ม แท็กหลายๆ อันเข้าด้วยกันได้ เพื่อที่จะทำอะไร กับพวกมันพร้อมกันในภายหลัง

ตัวอย่างเช่น ด้วยการใช้แท็ก div เราจะจัดกลุ่มย่อหน้า:

html<div class="block1">
  <p>
    ข้อความ
  </p>
  <p>
    ข้อความ
  </p>
</div>
<div class="block2">
  <p>
    ข้อความ
  </p>
  <p>
    ข้อความ
  </p>
</div>

ลองกำหนดสีแดงให้กับองค์ประกอบจากกลุ่มแรก และกำหนดสีเขียวให้กับองค์ประกอบจากกลุ่มที่สอง

css.block1 {
  color: red;
}
.block2 {
  color: green;
}

Задание 1

ให้โค้ดต่อไปนี้:

html<div>
  <h2>หัวเรื่อง</h2>
  <p>
    ข้อความ
  </p>
  <p>
    ข้อความ
  </p>
</div>
<div>
  <h2>หัวเรื่อง</h2>
  <p>
    ข้อความ
  </p>
  <p>
    ข้อความ
  </p>
  <p>
    ข้อความ
  </p>
</div>
<div>
  <h2>หัวเรื่อง</h2>
  <p>
    ข้อความ
  </p>
  <p>
    ข้อความ
  </p>
  <p>
    ข้อความ
  </p>
  <p>
    ข้อความ
  </p>
</div>

จงให้สีแดงกับเนื้อหาภายใน div แรก ให้สีเขียวกับเนื้อหาภายใน div ที่สอง และให้สีฟ้ากับเนื้อหาภายใน div ที่สาม โดยกำหนด คลาสให้กับแต่ละ div

Задание 2

ให้โค้ดต่อไปนี้:

html<div>
  <h2>หัวเรื่อง</h2>
  <p>
    ข้อความ
  </p>
  <p>
    ข้อความ
  </p>
</div>
<div>
  <h2>หัวเรื่อง</h2>
  <p>
    ข้อความ
  </p>
  <p>
    ข้อความ
  </p>
</div>
<div>
  <h2>หัวเรื่อง</h2>
  <p>
    ข้อความ
  </p>
  <p>
    ข้อความ
  </p>
</div>
<div>
  <h2>หัวเรื่อง</h2>
  <p>
    ข้อความ
  </p>
  <p>
    ข้อความ
  </p>
</div>

จงให้สีแดงกับเนื้อหาของ div แรกและ div ที่สาม ให้สีเขียวกับเนื้อหาของ div ที่สองและ div ที่สี่ โดยกำหนดคลาสเดียวกันให้กับ div แรก และ div ที่สาม และกำหนดอีกคลาสหนึ่งให้กับ div ที่สอง และ div ที่สี่