HTML style attributes ใช้เพื่อเพิ่มสไตล์ให้กับองค์ประกอบ เช่น สี รูปแบบฟ้อนต์ ขนาด และอื่นๆ
ตัวอย่าง
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
HTML Style Attribute
การตั้งค่าสไตล์ของ HTML element สามารถทำได้ด้วย style attribute
โดย style attribute มีโครงสร้้างดังนี้
<tagname style="property:value;">
คุณสมบัตินี้เป็นคุณสมบัติของค่า CSS โดยคุณจะได้เรียนหลังจากเรียน HTML จบแล้ว
สีพื้นหลัง
คุณสมบัติ CSS background-color กำหนดสีพื้นหลังสำหรับ HTML element
ตัวอย่าง
ตั้งค่าสีพื้นหลังสำหรับหน้าเป็น powderblue
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
ตั้งค่าสีพื้นหลังสำหรับ 2 element ที่แตกต่างกัน
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
</html>
สีข้อความ
คุณสมบัติ CSS color กำหนดสีข้อความสำหรับ HTML element
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
รูปแบบฟ้อนต์
คุณสมบัติ CSS font-family กำหนดรูปแบบฟ้อนต์ที่จะใช้สำหรับ HTML element
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
ขนาดตัวอักษร
คุณสมบัติ CSS font-size กำหนดขนาดข้อความสำหรับ HTML element
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
การจัดตำแหน่งข้อความ
คุณสมบัติ CSS text-align กำหนดการจัดตำแหน่งข้อความแนวนอนสำหรับ HTML element
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
สรุปบท
- ใช้ style attribute สำหรับกำหนดองค์ HTML element
- ใช้ background-color สำหรับสีพื้นหลัง
- ใช้ color สำหรับสีข้อความ
- ใช้ font-family สำหรับเลือกใช้รูปแบบฟ้อนต์
- ใช้ font-size สำหรับขนาดข้อความ
- ใช้ text-align สำหรับจัดข้อความ