ขั้นตอนที่ 2: เพิ่มหัวเรื่อง

ถัดไป แทรกหัวเรื่องโดยใช้ “

' ถึง '

แท็ก ตัวอย่างเช่น “

” เพิ่มหัวเรื่อง

ขั้นตอนที่ 3: เพิ่มข้อมูลลงในรายการ

ในการแทรกข้อมูลในรูปแบบรายการ ให้ใช้ปุ่ม “ <นั่น> แท็ก:

---

---

< แผนก ระดับ = 'สัตว์เลี้ยง-สัตว์' >

< h1 > รายชื่อสัตว์เลี้ยง < / h1 >

< นั่น > ไก่ < / นั่น >

< นั่น > เป็ด < / นั่น >

< นั่น > สุนัข < / นั่น >

< นั่น > แมว < / นั่น >

< นั่น > กระต่าย < / นั่น >

< / แผนก >

ผลลัพธ์ของโค้ดที่กล่าวถึงข้างต้นเป็นดังนี้:

ตอนนี้ เดินหน้าต่อไปยังส่วน CSS เพื่อจัดรูปแบบรายการ

ขั้นตอนที่ 4: สไตล์องค์ประกอบ '.pet-animal'

เข้าสู่ “

” องค์ประกอบด้วยความช่วยเหลือของคลาสที่กำหนด “ .pet-สัตว์ ” และใช้คุณสมบัติที่ระบุไว้:

.pet-สัตว์ {

ชายแดน : 2px ประ rgb ( 230 , สิบห้า , สิบห้า ) ;

ขอบ : 50พิกเซล ;

สีพื้นหลัง : rgb ( 252 , 239 , 169 ) ;

}

ที่นี่:

• “ ชายแดน คุณสมบัติ ” ใช้เพื่อระบุขอบเขตรอบองค์ประกอบ
• “ ขอบ ” กำหนดพื้นที่รอบขอบเขตองค์ประกอบ
• “ สีพื้นหลัง ” จัดสรรสีที่ด้านหลังขององค์ประกอบ

ภาพผลลัพธ์แสดงผลลัพธ์ของโค้ดด้านบน:

ขั้นตอนที่ 5: รายการสไตล์ที่เพิ่ม “li”

ตอนนี้ เข้าถึงรายการของ “ แผนก ”คอนเทนเนอร์มีคลาส” สัตว์เลี้ยง ' โดยใช้ ' .pet-animal > li ” และใช้คุณสมบัติที่กล่าวถึงด้านล่าง:

.pet-สัตว์ > นั่น {

ทัศนวิสัย : ที่ซ่อนอยู่ ;

ความทึบ : 0.2 ;

การเปลี่ยนแปลง : ทัศนวิสัย 0 วินาที , ความทึบ 0.5 วินาที เชิงเส้น ;

}

ที่นี่:

• “ ทัศนวิสัย ” CSS ใช้เพื่อตั้งค่าการเปิดเผยองค์ประกอบโดยไม่ต้องเปลี่ยนเค้าโครงของเอกสาร เช่น ซ่อนหรือมองเห็น
• “ ความทึบ ” ระบุความโปร่งใสขององค์ประกอบ
• “ การเปลี่ยนแปลง ” อนุญาตให้ผู้ใช้เปลี่ยนค่าคุณสมบัติได้อย่างราบรื่นในช่วงเวลาที่กำหนด:

ขั้นตอนที่ 6: ใช้ 'โฮเวอร์' Pseudo Class

ตอนนี้ ใช้ “ โฉบ ” คุณสมบัติในรายการ:

.pet-สัตว์ : โฉบ > นั่น {

ทัศนวิสัย : มองเห็นได้ ;

ความทึบ : หนึ่ง ;

}

“ : เลื่อน ” CSS เป็นคลาสเทียมที่ทำการเปลี่ยนแปลงในเวลาทำงานเมื่อตัวชี้เมาส์ถูกเลื่อนไปเหนือองค์ประกอบ ทำให้รายการมองเห็นได้โดยใช้ปุ่ม “ ทัศนวิสัย ” และตั้งค่าความโปร่งใสโดยใช้ปุ่ม “ ความทึบ ” คุณสมบัติ CSS ในรายการที่โฮเวอร์:

สังเกตได้ว่าเราได้นำการเปลี่ยนแปลงมาใช้กับ ' แสดง ' คุณสมบัติ.

บทสรุป

ไม่สามารถใช้การเปลี่ยน CSS ได้โดยตรงกับ ' แสดง ' คุณสมบัติ. อย่างไรก็ตามสามารถใช้ในลักษณะอื่นได้ ในการดำเนินการดังกล่าว ให้เพิ่มแท็กรายการในเอกสาร HTML เข้าถึงรายการด้วยชื่อแท็ก และใช้ “ การเปลี่ยนแปลง ”, “ ความทึบ ', และ ' ทัศนวิสัย คุณสมบัติ CSS ในรายการ จากนั้นใช้ “ : เลื่อน ” pseudo-class และตั้งค่าการมองเห็นเป็น “ มองเห็นได้ '. โพสต์นี้ได้อธิบายถึงวิธีการใช้การเปลี่ยนแปลงกับคุณสมบัติการแสดง CSS