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 สำหรับจัดข้อความ