สไตล์ HTML

ภาษีนิยาม style ใช้เพื่อเปลี่ยนแปลงรูปแบบขององค์ประกอบ HTML

ข้อความนี้ใช้ Verdana และสีแดง
ข้อความนี้ใช้ Times และสีฟ้า
ข้อความนี้สูง 30 พิกเซล

ทดลองด้วยตัวเอง

ภาษีนิยาม style ของ HTML

บทบาทของภาษีนิยาม style

เป็นวิธีที่สามารถเปลี่ยนแปลงรูปแบบขององค์ประกอบ HTML ทั้งหมด

สไตล์ถูกนำเสนอใน HTML 4 โดยเป็นวิธีที่ถือว่าเป็นทางเลือกที่ยอมรับในการเปลี่ยนแปลงรูปแบบขององค์ประกอบ HTML โดยตรงโดยใช้ภาษีนิยาม style หรือโดยทางตรงที่ผ่านมาโดยการกำหนดในสไตล์แยกตัว (ไฟล์ CSS)。

คุณสามารถหาคอร์สที่เรา คอร์ส CSSเรียนรู้ทั้งหมดเกี่ยวกับสไตล์และ CSS

ในคอร์ส HTML ของเรา เราจะใช้ภาษีนิยาม style ในการอธิบายเกี่ยวกับสไตล์ HTML。

แท็กและภาษีนิยามที่ไม่เป็นที่นิยม

ใน HTML 4 มีแท็กและภาษีนิยามหลายตัวที่ถูกปฏิเสธ。

ข้อมูลที่ถูกกล่าวถึงนี้มีความชัดเจน: หลีกเลี่ยงใช้แท็กและภาษีนิยามที่ถูกปฏิเสธ!

ควรหลีกเลี่ยงใช้แท็กและภาษีนิยามดังกล่าว:

แท็ก คำอธิบาย
<center> กำหนดสิ่งที่ตั้งกลาง
<font> และ <basefont> กำหนดตัวอักษร HTML。
<s> และ <strike> กำหนดข้อความที่มีลายบาง
<u> กำหนดข้อความที่มีขีดใต้
ภาษีนิยาม คำอธิบาย
align กำหนดการปรับเรียงของข้อความ
bgcolor กำหนดสีพื้นหลัง
color กำหนดสีของข้อความ

สำหรับแท็กและภาษีนิยามดังกล่าว: ใช้สไตล์แทน!

ตัวอย่างสไตล์ HTML - สีพื้นหลัง

background-color ภาษีนิยามสำหรับองค์ประกอบเพื่อกำหนดสีพื้นหลัง：

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

ทดลองด้วยตัวเอง

คุณสมบัติ style ได้ทำให้ bgcolor ล้าสลัก

ทดลองด้วยตัวเอง: วิธีเก่าในการจัดตำแหน่งสีพื้นหลัง

ตัวอย่าง HTML สไตล์ - สายตา สีและขนาดของตัวอักษร

คุณสมบัติ font-family, color และ font-size นั้นนิยามรหัสสายตาของข้อความขององค์ประกอบ สีและขนาดของตัวอักษร

<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

ทดลองด้วยตัวเอง

คุณสมบัติ style ได้ทำให้ตาแบบ <font> ล้าสลัก

ทดลองด้วยตัวเอง: วิธีเก่าในการจัดตำแหน่งตัวอักษร

ตัวอย่าง HTML สไตล์ - การจัดตำแหน่งข้อความ

คุณสมบัติ text-align กำหนดวิธีการจัดตำแหน่งระดับน้ำตายของข้อความขององค์ประกอบ

<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>ส่วนหัวข้อด้านบนมีการจัดตำแหน่งที่กลางของหน้านี้</p>
</body>
</html>

ทดลองด้วยตัวเอง

คุณสมบัติ style ได้ทำให้คุณสมบัติ align ล้าสลัก

ทดลองด้วยตัวเอง: วิธีเก่าในการจัดตำแหน่งกลาง