ตกแต่งด้วย 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

ตัวอย่าง

<body style="background-color: yellow;">
<h1>This is header</h1>
<p>This is paragraph</p>
</body>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

สีตัวอักษร

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

ตัวอย่าง

<h1 style="color: red;">This is header</h1>
<p style="color: blue;">This is paragraph</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

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

ตัวอย่าง

<h1 style="font-family:verdana;">This is header</h1>
<p style="font-family:courier;">This is paragraph</p>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

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

ตัวอย่าง

<h1 style="font-family:verdana;">This is header</h1>
<p style="font-family:courier;">This is paragraph</p>

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

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

ตัวอย่าง

<h1 style="font-family:verdana;">This is header</h1>
<p style="font-family:courier;">This is paragraph</p>

บทสรุป

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

แสดงความคิดเห็น

0ความคิดเห็น

แสดงความคิดเห็น (0)