วิธีสร้าง CSS

วิธีใส่ตารางสไตล์

เมื่ออ่านตารางสไตล์ เครื่องอ่านเอกสารจะจัดระเบียบเอกสาร HTML ตามมัน วิธีที่ใช้เพื่อใส่ตารางสไตล์มีสามวิธี:

ตารางสไตล์นอก

เมื่อสไตล์ต้องการใช้บนหลายเพจ ตารางสไตล์นอกจะเป็นทางเลือกที่สมบูรณ์ ในกรณีที่ใช้ตารางสไตล์นอก คุณสามารถเปลี่ยนรูปแบบทั้งเว็บไซต์ด้วยการเปลี่ยนไฟล์เดียว แต่ละเพจใช้แท็ก <link> และลิงก์ไปยังตารางสไตล์ <link> แท็กในส่วนหัวของเอกสาร:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

เครื่องอ่านเอกสารจะอ่านการประกาศสไตล์จากไฟล์ mystyle.css และจัดระเบียบเอกสารตามมัน

ตารางสไตล์นอกสามารถแก้ไขได้ด้วยแท็กเก็บเอกสารทั่วไป แบบแบ่งปันไม่ควรมีแท็ก html ใดๆ ตารางสไตล์ควรเก็บด้วยนามสกุล .css ตัวอย่างตารางสไตล์คือ:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

ไม่ควรใส่ช่องว่างระหว่างค่าและหน่วยนับ หากคุณใช้ "margin-left: 20 px" แทน "margin-left: 20px" มันจะทำงานได้เมื่อเทียบกับ IE 6 แต่จะไม่ทำงานได้บน Mozilla/Firefox หรือ Netscape

ตารางสไตล์ภายใน

เมื่อเอกสารที่เดียวต้องการสไตล์พิเศษ คุณควรใช้ตารางสไตล์ภายในเอกสาร คุณสามารถใช้แท็ก <style> ในส่วนหัวของเอกสารเพื่อกำหนดตารางสไตล์ภายในเอกสาร ตามรูปแบบนี้:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

สไตล์ในลิงค์

เนื่องจากจะผสานรูปแบบและเนื้อหา สไตล์ในลิงค์จะสูญเสียหลายข้อประโยชน์ของตารางสไตล์ โปรดใช้วิธีนี้ด้วยความระมัดระวัง ตัวอย่างเช่น เมื่อสไตล์ต้องการใช้บนองค์ประกอบเดียวเท่านั้น

เพื่อใช้สไตล์ในลิงค์ คุณต้องใช้คุณภาพที่มีสไตล์ (style) ในแท็กที่เกี่ยวข้อง คุณภาพที่มีสไตล์สามารถมีคุณสมบัติของ CSS ทุกอย่าง ตัวอย่างนี้แสดงวิธีเปลี่ยนสีของปารากราฟและมุมด้านซ้ายของปารากราฟ:

<p> style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

สไตล์หลายตัว

หากมีตัวแปรเดียวกันที่ถูกกำหนดโดยตัวเลือกสไตล์ต่างๆ ในตัวเลือกที่เหมือนกัน ตัวแปรจะถูกสืบทอดมาจากตัวเลือกที่เป็นรายละเอียดที่สูงขึ้น

เช่น ตัวเลือกสไตล์ด้านนอกมีสามตัวแปรสำหรับตัวเลือก h3

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

ในขณะที่ตัวเลือกสไตล์ด้านในมีสองตัวแปรสำหรับตัวเลือก h3

h3 {
  text-align: right; 
  font-size: 20pt;
  }

หากเว็บไซต์ที่มีตัวเลือกสไตล์ด้านในนี้มีการลิงก์กับตัวเลือกสไตล์ด้านนอก ตัวเลือก h3 จะได้รับสไตล์ดังนี้

color: red; 
text-align: right; 
font-size: 20pt;

ตัวเลือกสีจะถูกสืบทอดมาจากตัวเลือกสไตล์ด้านนอก ขณะที่เซตตัวเลือกเรียงข้อความ (text-alignment) และขนาดตัวอักษร (font-size) จะถูกแทนที่โดยกฎของตัวเลือกสไตล์ด้านใน