CSS พื้นฐานทางภาษา

CSS 语法

กฎ CSS ประกอบด้วยสองส่วนหลัก: ตัวเลือก และคำแถลงข้อความหนึ่งหรือหลายข้อ

selector {declaration1; declaration2; ... declarationN }

ตัวเลือก (selector) ปกติแล้วคือองค์ประกอบ HTML ที่คุณต้องการเปลี่ยนรูปแบบ

การแถลงข้อความทุกข้อประกอบด้วยคุณสมบัติและค่า

คุณสมบัติ (property) คือคุณสมบัติที่คุณต้องการกำหนดรูปแบบ (style attribute) คุณสมบัติทุกตัวมีค่าหนึ่ง คุณสมบัติและค่าแยกด้วยตัวกระทบ

selector {property: value}

การใช้ของคำสั่งนี้คือจัดให้ข้อความด้านในองค์ประกอบ h1 แสดงเป็นสีแดง และกำหนดขนาดของตัวอักษรเป็น 14 พิกเซล

ในตัวอย่างนี้ h1 คือตัวเลือก และ color และ font-size คือคุณสมบัติ และ red และ 14px คือค่า

h1 {color:red; font-size:14px;}

ตัวอย่างแสดงภาพรวมของโค้ดด้านบนนี้

CSS 语法

คำเตือน：ใช้วงเล็บกันรอบคำแถลงข้อความ

รูปแบบการเขียนค่าและหน่วยมาตร

นอกจากคำว่า red ภาษาอังกฤษ ยังสามารถใช้ค่าสีที่เป็นสัญญาณสิบหกทศนิยม #ff0000 ได้

p { color: #ff0000; }

เพื่อประหยัดตัวอักษร สามารถใช้รูปแบบย่อของ CSS ได้

p { color: #f00; }

เราสามารถใช้ค่า RGB ด้วยสองวิธีนี้：

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

โปรดระวังว่าเมื่อใช้ RGB ร้อยละ ถึงแม้ว่าค่าเป็น 0 ก็ตาม ต้องใส่สัญญาณร้อยละ อย่างไรก็ตาม ในกรณีอื่นไม่จำเป็นต้องทำเช่นนี้ ตัวอย่างเช่น ในกรณีที่ขนาดเท่า 0 พิกเซล หลังจาก 0 ไม่จำเป็นต้องใช้หน่วยเมตรเป็น px เพราะ 0 ก็คือ 0 ไม่ว่าหน่วยเป็นอะไรก็ตาม。

อย่าลืมใส่วงเล็บ

คำเตือน：ถ้าค่าเป็นคำต่างกันหลายคำ ต้องใส่คำต่างกันในเครื่องหมายเปิดและปิดวงเล็บ：

p {font-family: "sans serif";}

คำแถลงข้อความหลายอย่าง：

คำเตือน：ถ้าต้องการกำหนดคำแถลงข้อความหลายอย่าง ต้องใช้จุดข้อย่อมเพื่อแยกคำแถลงข้อความแต่ละอัน ตัวอย่างด้านล่างแสดงวิธีการกำหนดข้อความที่แสดงเป็นสีแดงและศูนย์กลาง และกฎที่สุดท้ายคือไม่จำเป็นต้องใช้จุดข้อย่อม เพราะจุดข้อย่อมในภาษาอังกฤษเป็นสัญญาณแยกไม่ใช่สัญญาณจบ อย่างไรก็ตาม หลายคนที่มีประสบการณ์จะใช้จุดข้อย่อมที่ท้ายของการแถลงข้อความ หลักประโยชน์ของมันคือ เมื่อคุณเพิ่มหรือลดคำแถลงข้อความในกฎที่มีอยู่แล้ว ความเสี่ยงที่จะทำให้เกิดข้อผิดพลาดจะลดลงเป็นอย่างมาก เช่นนี้:

p {text-align:center}; color:red;}

คุณควรอธิบายเพียงประวัติความเป็นเจ้าของในแต่ละแถวเพื่อที่จะเพิ่มความอ่านได้ของการกำหนดแบบภาพรวม แบบนี้:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

สเปซและกระดาษเขียน

ส่วนใหญ่แบบภาพรวมแบบบ้านมีมากกว่าหนึ่งระบบต่าง ๆ และส่วนใหญ่แบบต่าง ๆ มีมากกว่าหนึ่งการระบุ การใช้ภาษาเขียนและหรือพื้นที่เขียนทำให้แบบภาพรวมแบบบ้านง่ายต่อการแก้ไขมากยิ่งขึ้น:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

การประกอบตัวชีพหรือไม่จะไม่ส่งผลต่อการทำงานของ CSS ในบราวเซอร์ ซึ่งไม่เหมือน XHTML ซึ่ง CSS ไม่มีความเครียดต่อการเขียนใหญ่หรือเล็ก แต่มีข้อยกเว้นหนึ่ง ถ้ามีความเกี่ยวข้องกับบันทึก HTML แบบบ้าน class และ id จะมีความเครียดต่อการเขียนใหญ่หรือเล็ก