รูปแบบ HTML
แอตทริบิวต์ HTML styleใช้เพื่อเพิ่มสไตล์ให้กับองค์ประกอบ เช่น สี แบบอักษร ขนาด และอื่นๆ
ตัวอย่าง
ฉันแดง
ฉันเศร้า
ฉันใหญ่
แอตทริบิวต์สไตล์ HTML
การตั้งค่ารูปแบบขององค์ประกอบ HTML สามารถทำได้ด้วยstyleแอตทริบิวต์
แอตทริบิวต์ HTML styleมีไวยากรณ์ต่อไปนี้:
<tagname
style="property:value;">
คุณสมบัติเป็นคุณสมบัติCSS ค่า นี้เป็น ค่า CSS
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ CSS ในภายหลังในบทช่วยสอนนี้
สีพื้นหลัง
คุณสมบัติ CSS background-colorกำหนดสีพื้นหลังสำหรับองค์ประกอบ HTML
ตัวอย่าง
ตั้งค่าสีพื้นหลังสำหรับหน้าเป็นผงสีน้ำเงิน:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
ตัวอย่าง
ตั้งค่าสีพื้นหลังสำหรับสององค์ประกอบที่แตกต่างกัน:
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p
style="background-color:tomato;">This is a paragraph.</p>
</body>
สีข้อความ
คุณสมบัติ CSS colorกำหนดสีข้อความสำหรับองค์ประกอบ HTML:
ตัวอย่าง
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
แบบอักษร
คุณสมบัติ CSS font-familyกำหนดแบบอักษรที่จะใช้สำหรับองค์ประกอบ HTML:
ตัวอย่าง
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
ขนาดตัวอักษร
คุณสมบัติ CSS font-sizeกำหนดขนาดข้อความสำหรับองค์ประกอบ HTML:
ตัวอย่าง
<h1 style="font-size:300%;">This is a heading</h1>
<p
style="font-size:160%;">This is a paragraph.</p>
การจัดตำแหน่งข้อความ
คุณสมบัติ CSS text-alignกำหนดการจัดตำแหน่งข้อความแนวนอนสำหรับองค์ประกอบ HTML:
ตัวอย่าง
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
สรุปบท
- ใช้
styleแอตทริบิวต์สำหรับใส่สไตล์องค์ประกอบ HTML - ใช้
background-colorสำหรับสีพื้นหลัง - ใช้
colorสำหรับสีข้อความ - ใช้
font-familyสำหรับแบบอักษรข้อความ - ใช้
font-sizeสำหรับขนาดตัวอักษร - ใช้
text-alignสำหรับการจัดตำแหน่งข้อความ