เขียน CSS ไว้ตรงไหนได้บ้าง
เราสามารถเขียนโค้ด CSS ไว้ในเว็บเพจของเราก็ได้ หรือจะเขียนไว้นอกเว็บเพจก็ได้ เพื่อความสะดวกในการเรียกใช้จากเว็บเพจอื่น ๆ ซึ่งจุดที่เราสามารถเขียน CSS ได้ มี 3 จุด ดังนี้
- External CSS คือการเขียน CSS ไว้นอกเว็บเพจในเว็บไซต์เดียวกัน
- Internal CSS คือการเขียน CSS ไว้ในเว็บเพจนั้น ๆ
- Inline CSS คือการเขียน CSS ไว้ในเอลิเมนต์ที่ต้องการกำหนดสไตล์
External CSS การเขียน CSS ไว้ภายนอกเว็บเพจ
การเขียน CSS ไว้ภายนอกเว็บเพจ คือการเขียนโค้ด CSS ไว้แยกต่างหากจากเว็บเพจนั้น ๆ แต่อยู่ภายในเว็บไซต์เดียวกัน โดยไฟล์นั้นต้องมีนามสกุลเป็น .css ข้อดีคือ เราสามารถเรียกไช้ไฟล์นั้นจากทุกเว็บเพจในเว็บไซต์เดียวกัน ทำให้เกิดความสะดวกสบาย เพราะสามารถแก้ไขโค้ดที่เดียวแต่มีผลกับทุกเว็บเพจ
โดยเมื่อต้องการเรียกใช้ไฟล์ css ดังกล่าว เราต้องทำการอ้างอิงถึงไฟล์นั้น โดยกำหนดไว้ในเอลิเมนต์ <link> ภายในส่วน head ดังนี้
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>หัวเรื่อง</h1> <p>เนื้อหา</p> </body> </html>
Internal CSS การเขียน CSS ไว้ในหน้าเว็บเพจ
การเขียน CSS ไว้ในหน้าเว็บเพจ คือการเขียนโค้ด CSS เพื่อใช้ในหน้าเว็บนั้น ๆ เท่านั้น ไม่สามารถใช้ในหน้าอื่นได้ โดยต้องทำการเขียนโค้ดไว้ภายในเอลิเมนต์ <style></style> ภายในส่วน head ดังนี้
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>หัวเรื่อง</h1>
<p>เนื้อหา</p>
</body>
</html> - บรรทัดที่ 4 คือส่วนเริ่มต้นของขอบเขตสำหรับเขียนโค้ด CSS
- บรรทัดที่ 5 – 12 คือส่วนของโค้ด CSS
- บรรทัดที่ 14 คือส่วนปิดขอบเขตสำหรับเขียนโค้ด CSS
โค้ด CSS ที่เขียนในตัวอย่างข้างต้น จะมีผลกับทุกเอลิเมนต์ที่ถูกอ้างถึงในหน้าเว็บเพจนั้น
Inline CSS การเขียนโค้ด CSS ภายในเอลิเมนต์
Inline CSS คือการเขียนโค้ด CSS เพื่อกำหนดสไตล์ให้กับเอลิเมนต์ใดเอลิเมนต์หนึ่งเป็นการเฉพาะ และจะมีผลกับเอลิเมนต์นั้นเท่านั้น โดยจะเขียนไว้ภายในแอททริบิวต์ style ดังนี้
<h1 style="color:blue;text-align:center;">หัวเรื่อง</h1> <p style="color:red;">เนื้อหา</p>
ลำดับความสำคัญ
ในกรณีที่มีการเขียน CSS ไว้หลายที่ เช่น มีทั้ง CSS ภายนอก มีทั้ง CSS ที่เขียนไว้ส่วนหัวของหน้าเว็บ และมีทั้ง CSS ที่เขียนไว้ภายในเอลิเมนต์ และมีการอ้างอิงถึงเอลิเมนต์ตัวเดียวกัน เบราเซอร์จะจัดลำดับความสำคัญของ CSS ดังนี้
- Inline CSS คือ CSS ที่เขียนไว้ในเอลิเมนต์จะมีลำดับความสำคัญสูงสุด
- External CSS และ Internal CSS ระหว่าง CSS ภายนอกกับ CSS ที่เขียนไว้ส่วนหัวของเว็บเพจ ตัวไหนมีการอ้างอิงถึงทีหลัง ตัวนั้นจะมีลำดับความสำคัญมากกว่าตัวที่อ้างอิงก่อน คือสไตล์ที่ถูกกำหนดหลังสุดจะถูกนำมาใช้เสมอ
![5 รีม Quality Orange 70 แกรม ] กระดาษถ่ายเอกสาร ขนาด A4/500 แผ่น ต่อรีม](https://th-live-01.slatic.net/p/df768cfa623a125811b047b207b99ce2.jpg)
