External เป็นจุดประสงค์หลักของการใช้งาน CSS และมันจะประหยัดพื้นที่ในการเก็บแฟ้มต่างๆบนเซิฟเวอร์ เพราะว่าได้มีการแยกโค๊ดคุณสมบัติของเอกสาร HTML ออกมาเป็นแฟ้มเดียวแต่สามารถจัดการลักษณะทั้งหมดในทุกๆเว็บเพจที่เชื่อมโยง มายังแฟ้ม CSS แฟ้มเดียวได้ เมื่อแยกแฟ้มออกมาเป็นแฟ้มเดี่ยวแล้วให้บันทึกแฟ้ม CSS นั้นให้มีนามสกุลเ็ป็น .css เท่านั้นแล้วทำการใช้แท็ก ในเอกสาร HTML เพื่อทำการเชื่อมโยงแฟ้มเอกสาร HTML และแฟ้ม CSS เข้าด้วยกัน ทุกๆเว็บเพจที่มีการเชื่อมโยงมายังแฟ้ม CSS จะมีลักษณะตามที่กำหนดไว้ในแฟ้ม CSS นั้น
ตัวอย่างการใช้งาน
body{
color:#8B0000;
font-size:15px;
}
โดยปกติแล้วแบบ inline เราจะนำ code ดังกล่าวไปใส่ไว้ใน
หรือ
ซึ่งแน่นอนว่าหากเราต้องการนำไปใช้กับไฟล์อื่นๆ ก็ต้องนำ code ไปใส่ในลักษณะเดียวกัน แต่ปัญหาคือ สมมุตว่าเรามีไฟล์อยู่ 50 ไฟล์ ใส่ code ให้ตัวอักษรเป็นสีแดงและขนาดตัวอักษร 15px แล้ว วันดีคืนดีต้องการที่จะเปลี่ยนเป็นตัวอักษรสีฟ้า ขนาดตัวอักษร 14px ............. ซวยแล้ว ตั้ง 50 ไฟล์นะ ไล่เปลี่ยนไหวหรอ เสียเวลาทำมาหากินมาก แทนที่จะเอาเวลามานั่งเปลี่ยน 50 ไฟล์นี้ เอาเวลาไปปลูกป่าช่วยโลกร้อนยังได้ประโยชน์มากกว่าเลย
และนี่คือสาเหตุที่ต้องมีการใช้งานแบบ External ซึ่งทุกๆไฟล์สามารถดึง CSS มาใช้ได้หมด หากต้องมีการเปลี่ยนแปลง เราเปลี่ยนแค่ไฟล์ .css ไฟล์เดียวจบเลยครับ หมดปัญหาในการเสียเวลามานั่งเปลี่ยน 50 ไฟล์ และข้อดีอีกอย่างหนึ่งคือ จะเป็นผลดีกับการทำ SEO สำหรับ Google เล็กน้อยด้วย เพราะทำให้ Google Robot ไม่ต้องไปอ่าน code มากๆ เพราะ Google Robot ไม่มีความจำเป็นที่จะต้องไปอ่านพวก CSS หรือ Javascript ทำให้ Google Robot นั้นเก็บข้อมูลเว็บเราได้ง่ายขึ้นครับ
เอาล่ะ มาถึงวิธีใช้แบบ External
จากตัวอย่าง code
body{
color:#8B0000;
font-size:15px;
}
ให้เรานำ code นี้ ไปใส่ใน notepad แล้วเซฟเป็น
(ชื่อไฟล์.css) ในที่นี้ผมจะตั้งชื่อว่า style.css
เวลาเรียกใช้ในหน้า HTML
ข้อความ 1
ข้อความ 2
ข้อความ 3
ไม่มีความคิดเห็น:
แสดงความคิดเห็น