HTML Styles

< บทเรียนก่อนหน้า
บทเรียนถัดไป >

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 สำหรับจัดข้อความ
< บทเรียนก่อนหน้า
บทเรียนถัดไป >