แอตทริบิวต์ของคลาส

6.1 แอตทริบิวต์คลาสและแท็กสไตล์

แต่นั่นไม่ใช่ทั้งหมด หลังจากคิดค้น "สไตล์" หลายร้อยแบบ คำถามก็เกิดขึ้น: จะใช้ได้อย่างไร? จากนั้นพวกเขาก็เกิดความคิดที่จะจัดกลุ่มพวกเขาเป็น "ชั้นเรียน" แน่นอนว่าสิ่งเหล่านี้ไม่ใช่คลาสเดียวกับใน Java เฉพาะกลุ่มสไตล์พิเศษ

และถ้าก่อนใช้ "คลาส" คุณมีรูปภาพ:

       <img src="logo.png" style="width=100px;height=100px;opacity=0.5">
    

ตอนนี้สามารถเขียนเป็น:

<img src="logo.png" class="picture">
 
<style>
    img.picture {
        width=100px;
        height=100px;
        opacity=0.5
    }
</style>

เราสร้างแบบพิเศษ«style» pictureและถ่ายโอนค่าสไตล์จากไฟล์style. จากนั้นเราก็ผูก <img> และรูปภาพ "สไตล์" ด้วยแท็classก

6.2 Selector ประเภทของตัวเลือก

สไตล์เหล่านี้ แสดงผลแยกกัน กลายเป็นที่รู้จักในชื่อclassesหรือ selectorsพวกเขามีคุณสมบัติที่สำคัญหลายประการ

หนึ่งhtml-elementสามารถมีได้หลายตัวเลือก ชื่อของพวกเขาถูกระบุด้วยช่องว่าง ตัวอย่าง:

       <img src="logo.png" class="picture main">
    

เหตุผลหนึ่งที่เราพูดถึงตัวเลือกที่นี่ เนื่องจากสามารถใช้ตัวเลือกเหล่านี้ได้โดยอัตโนมัติ และคุณสมบัติที่มีประโยชน์นี้จะถูกใช้บ่อยมากในอนาคต รวมถึงนักพัฒนา Java

นี่คือรายการสั้น ๆ ของพวกเขา:

* {
  margin: 0;
  padding: 0;
}

#img123 {
   width:100px;
   height 100px;
}

table {
   color: black;
}

table.important {
   color: red;
}

.picture {
  opacity: 0.5
}

main article {
  color: blue;
}

a:link {
color: blue;
}

a:visited {
color: red;
}

input[type=radio]:checked {
 border: 1px solid black;
}

div:hover {
  background: red;
}

ul li:first-child {
 border-top: none;
}

คุณไม่จำเป็นต้องท่องจำทั้งหมด แต่จะเป็นการดีถ้าคุณศึกษาตารางนี้สองสามครั้งและทั้งหมดนี้ถูกฝากไว้ในหัวของคุณ ไม่มีเว็บในชีวิตสมัยใหม่ ไม่มีที่ไหนเลย และบนเว็บ ไม่มีที่ไหนเลยหากไม่มีตัวเลือก