display CSS คือคำสั่งอะไร ใช้ทำอะไร

display CSS คือคำสั่งกำหนดรูปแบบการแสดงผล หรือการมองเห็น โดยปกติคำสั่ง display จะมี property value อยู่ค่อนข้างเยอะ แต่ที่ชัดเจน และนิยมใช้กันคือ none และ block สามารถเขียนคำสั่งได้ดังนี้

ตัวอย่าง display CSS คือคำสั่งอะไร ใช้ทำอะไร

<style>
    .show {
        display: block;
    }
    .hide {
        display: none;
    }
</style>

<div class="show">ข้อความนี้จะแสดงที่หน้าเว็บไซต์</div>
<div class="hide">ข้อความนี้จะไม่แสดงที่หน้าเว็บไซต์ เพราะถูกซ่อน</div>

ผลลัพธ์

ข้อความนี้จะแสดงที่หน้าเว็บไซต์

display CSS จากตัวอย่างแนะนำทั้งหมด 2 property value คือ none และ block โดยมีรายละเอียดดังนี้

1. display CSS กำหนด block คือ แสดง หรือปรากฏที่หน้าเว็บไซต์ โดย elements ใดๆ ที่ได้รับคำสั่งดังกล่าวจะแสดงที่หน้าเว็บไซต์

2. display CSS กำหนด none คือ ไม่แสดง หรือซ่อน โดย elements ใดๆ ที่ได้รับคำสั่งนี้จะไม่แสดงที่หน้าเว็บไซต์ ในลักษณะถูกซ่อน (ถ้าดูรหัสต้นฉบับ elements ดังกล่าวยังอยู่ที่หน้าเว็บไซต์ แต่แค่ถูกซ่อน)