สร้างกรอบ HTML ด้วย div และลงสีด้วย CSS

สร้างกรอบ HTML ด้วย div และลงสีด้วย CSS บทความนี้สอนการสร้างกรอบคลุมข้อความ คลุมรูปภาพ และอื่นๆ ตามที่ต้องการด้วยภาษา HTML และลงสีเพื่อความสวยงามด้วย CSS สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง สร้างกรอบ HTML ด้วย div และลงสีด้วย CSS

<style>
    .box {
        background-color: aliceblue;
        border: dotted 2px cadetblue;
        width: 80px;
        height: 80px;        
    }
</style>

<div class="box"></div>

สร้างกรอบ HTML จากตัวอย่างโค้ดใช้แท็ก div สร้างกรอบ และแต่งสีเพื่อความสวยงามด้วย CSS ผ่าน class box โดยประกอบด้วยคำสั่งดังนี้

1. background-color คือ คำสั่งลงสีพื้นหลัง

2. border คือ คำสั่งลงเส้นขอบ เส้นกรอบ

3. width และ height คือ คำสั่งกำหนดขนาดของกรอบ ประกอบด้วยความกว้าง และความสูง