การเรียกใช้งาน CSS แบบ (External)จะเป็นการสร้างไฟล์ CSS ขึ้นมาอีกไฟล์หนึ่งเพื่อแยกคำสั่งของ CSS อย่างชัดเจน จากเดิมที่ต้องใช้คำสั่งไว้ในหน้าเดิม ปัญหาที่อาจเกิดคือหากเราทำการเปลี่ยนข้อมูล CSS บางส่วนจะต้องทำให้ต้องแก้ไขส่วนเดิมในทุก ๆ ไฟล์ประโยชน์ของ CSS แบบ (
External) ก็เพื่อลดความซ้ำซ้อนของข้อมูล และความสะดวกในการแก้ไข
1.สร้างไฟล์ style_ex.css และเขียนคำสั่ง CSS ที่ต้องการลงไป
style_ex.css
โค้ด: เลือกทั้งหมด
body {background-color: lightgreen;}
h1 {color: BULE; text-align: center;}
2.สร้างไฟล์ css_external.html และทำการเรียกใช้คำสั่ง <link> เพื่อดึงคำสั่ง CSS จากไฟล์ style_ex.css มาแสดงผลดังตัวอย่าง(ที่อยู่ที่จัดเก็บไฟล์ css โดยในกรณีนี้ไฟล์อยู่โฟลดเดอร์เดียวกัน)
css_external.html
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<title>Basic Html</title>
<link rel="stylesheet" type="text/css" href="style_min.css">
</head>
<body>
<h1>HELLO</h1>
</body>
</html>
Output
- css_external.png (3.24 KiB) Viewed 3397 times
จากภาพจะเห็นว่าในส่วนของBody และ H1 แสดงผลตามคำสั่งcss ที่เราได้ประกาศไว้
[size=150]การเรียกใช้งาน CSS แบบ ([b]External[/b])[/size]จะเป็นการสร้างไฟล์ CSS ขึ้นมาอีกไฟล์หนึ่งเพื่อแยกคำสั่งของ CSS อย่างชัดเจน จากเดิมที่ต้องใช้คำสั่งไว้ในหน้าเดิม ปัญหาที่อาจเกิดคือหากเราทำการเปลี่ยนข้อมูล CSS บางส่วนจะต้องทำให้ต้องแก้ไขส่วนเดิมในทุก ๆ ไฟล์ประโยชน์ของ CSS แบบ ([b]External[/b]) ก็เพื่อลดความซ้ำซ้อนของข้อมูล และความสะดวกในการแก้ไข
1.สร้างไฟล์ style_ex.css และเขียนคำสั่ง CSS ที่ต้องการลงไป
[color=#0000BF][u]style_ex.css[/u][/color]
[code]
body {background-color: lightgreen;}
h1 {color: BULE; text-align: center;}
[/code]
2.สร้างไฟล์ css_external.html และทำการเรียกใช้คำสั่ง <link> เพื่อดึงคำสั่ง CSS จากไฟล์ style_ex.css มาแสดงผลดังตัวอย่าง(ที่อยู่ที่จัดเก็บไฟล์ css โดยในกรณีนี้ไฟล์อยู่โฟลดเดอร์เดียวกัน)
[color=#0000BF][u]css_external.html[/u][/color]
[code]
<!DOCTYPE html>
<html>
<head>
<title>Basic Html</title>
<link rel="stylesheet" type="text/css" href="style_min.css">
</head>
<body>
<h1>HELLO</h1>
</body>
</html>
[/code]
Output
[attachment=0]css_external.png[/attachment]
จากภาพจะเห็นว่าในส่วนของBody และ H1 แสดงผลตามคำสั่งcss ที่เราได้ประกาศไว้ :-D :-D