ตกแต่งด้วย Style


HTML Styles

คือการตกแต่งหน้าเว็บ โดยใช้คุณสมบัติของภาษา CSS ใน HTML Tag โดยกำหนดที่ Attribute ที่ชื่อว่า style

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


HTML Attribute: style

การตั้งค่า style ให้กับ HTML Tag ทำได้โดย Attribute style

การเขียน Attribute style มี syntax (ไวยากรณ์ภาษาโปรแกรม) ดังนี้

<tagname style="property: value;">

property คือ ชื่อคุณลักษณะที่เราต้องการกำหนดให้กับ Element นั้นๆ เป็นภาษา CSS

value คือ ค่าที่ต้องการกำหนด

คุณสามารถเรียนรู้ภาษา CSS เพิ่มเติมได้ที่บทเรียน CSS


สีพื้นหลัง

กำหนดสีพื้นหลังได้โดยใช้ property background-color เพื่อระบุสีพื้นหลังของ Element

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


สีตัวอักษร

กำหนดสีตัวอักษรได้โดยใช้ property color เพื่อระบุสีตัวอักษรของ Element

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ประเภทตัวอักษร

กำหนดประเภทตัวอักษรได้โดยใช้ property font-family เพื่อระบุประเภทตัวอักษรของ Element

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ขนาดตัวอักษร

กำหนดขนาดตัวอักษรได้โดยใช้ property font-size เพื่อระบุขนาดตัวอักษรของ Element

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


จัดตำแหน่งข้อความ

จัดตำแหน่งข้อความได้โดยใช้ property text-align เพื่อจัดตำแหน่งข้อความของ Element

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


บทสรุป

  • ใช้ Attribute style เพื่อตกแต่ง HTML Element
  • ใช้ background-color เพื่อกำหนดสีพื้นหลัง
  • ใช้ color เพื่อกำหนดสีข้อความ
  • ใช้ font-family เพื่อกำหนดประเภทตัวอักษร
  • ใช้ font-size เพื่อกำหนดขนาดตัวอักษร
  • ใช้ text-align เพื่อจัดตำแหน่งข้อความ