การกำหนดรูปแบบตัวอักษร HTML
บทความนี้สอนวิธีการกำหนดรูปแบบตัวอักษร HTML ด้วยคำสั่ง font-family โดยคำสั่งนี้ใช้สำหรับเลือก font หรือชนิดของตัวอักษรที่เราต้องการใช้งานในเว็บไซต์ของเรา โดยสอน 3 วิธีคือ เขียน CSS ลงใน HTML, แยก CSS และเรียกใช้ใน HTML และเขียน CSS ในแท็ก body ของ HTML มีรายละเอียดดังนี้
ตัวอย่าง การกำหนดรูปแบบตัวอักษร HTML แบบเขียน CSS ลงใน HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
* {
font-family: 'Tahoma';
}
</style>
</head>
<body>
...
</body>
</html>จากตัวอย่างโค้ดอธิบายได้ดังนี้
1. เปิดแท็ก style ภายในแท็ก head ของ HTML
2. อ้างถึง * (ดอกจัน) คือทุก elements ใน HTML
3. ใช้คำสั่ง font-family: 'Tahoma' คือ กำหนดรูปแบบตัวอักษรเป็น ‘Tahoma’
ตัวอย่าง การกำหนดรูปแบบตัวอักษร HTML แบบแยก CSS และเรียกใช้ใน HTML
1 สร้างไฟล์ style ตัวอย่างชื่อ style.css กำหนดรูปแบบตัวอักษรเป็น ‘Tahoma’ ด้วยคำสั่ง font-family แนะนำให้วางไฟล์นี้ไว้ที่เดียวกับไฟล์ HTML
* {
font-family: 'Tahoma';
}
2.2 เรียกไฟล์ CSS เข้ามาใน HTML ด้วยแท็ก link กำหนดที่อยู่ของไฟล์ CSS ด้วยคำสั่ง href และกำหนด rel="stylesheet"
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet">
</head>
<body>
...
</body>
</html>
ตัวอย่าง การกำหนดรูปแบบตัวอักษร HTML แบบเขียน CSS ลงในแท็ก body ของ HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="font-family: 'Tahoma';">
...
</body>
</html>จากตัวอย่างโค้ดอธิบายได้ดังนี้
1. เขียนโค้ดภายในแท็ก body ที่คลุมเนื้อหาทั้งหมดของเว็บไซต์
2. ใช้ attribute style ใน body เพื่อเขียน CSS ลงในแท็ก HTML
3. กำหนด font-family: 'Tahoma' ในลง attribute style เพื่อกำหนดรูปแบบตัวอักษรเป็น ‘Tahoma’
1. เขียน CSS ลงใน HTML ผ่านแท็ก style ข้อดีคือ ไม่ต้องสร้างไฟล์ CSS แยก
2. เขียน CSS แยก และเรียกใช้ใน HTML ข้อดีคือ ไฟล์ CSS และ HTML จะแยกออกจากกัน ทำให้บำรุงรักษาโค้ดได้ง่าย
3. เขียน CSS ลงในแท็ก body ของ HTML ข้อดีคือ มีลำดับขั้นตอนเขียนโค้ดที่น้อย แต่โค้ด HTML และ CSS จะรวมอยู่ด้วยกัน อาจทำให้บำรุงรักษาโค้ดได้ลำบาก
