เขียน 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 ดังนี้

  1. Inline CSS คือ CSS ที่เขียนไว้ในเอลิเมนต์จะมีลำดับความสำคัญสูงสุด
  2. External CSS และ Internal CSS ระหว่าง CSS ภายนอกกับ CSS ที่เขียนไว้ส่วนหัวของเว็บเพจ ตัวไหนมีการอ้างอิงถึงทีหลัง ตัวนั้นจะมีลำดับความสำคัญมากกว่าตัวที่อ้างอิงก่อน คือสไตล์ที่ถูกกำหนดหลังสุดจะถูกนำมาใช้เสมอ
Tags

เรื่องที่น่าสนใจ