การกำหนดและใช้งานคุณสมบัติของ CSS (Property / Value)

ในการใช้งาน CSS เราจำเป็นที่จะต้องศึกษาถึงคุณสมบัติ (Property) ที่สามารถกำหนดและนำมาใช้งานได้ ซึ่งคุณสมบัติเหล่านี้จะมีรูปแบบในการกำหนดค่า (Value) ที่แตกต่างกัน โดยแบ่งออกเป็นกลุ่ม ๆ ได้ดังนี้

คุณสมบัติเกี่ยวกับหน่วยวัด

มีบางคุณสมบัติ (Property) ที่ต้องเกี่ยวข้องกับหน่วยวัด ซึ่งหน่วยวัดที่สามารถดำหนดได้จะมีดังนี้
เปอร์เซ็นต์ percentage (%)    
มิลลิเมตร millimeter (mm.)    
เซนติเมตร centimeter (cm.)    
นิ้ว inch (in.)    
พอยท์ point (pt.)  โดย 1 พอยต์ = 1/72 นิ้ว font-size : 24pt;
พิคา pica (pc.)  โดย 1 พิคา = 12 พอยต์  
พิกเซล pixel (px.)  โดย 1 พิกเซล คือ 1 จุดบนจอภาพ margin : 10px; 
หน่วย em  โดย 1 em = ขนาดตัวอักษรขณะนั้น font-size : 1.1em;
หน่วย ex  โดย 1 ex = ขนาดตัวอักษร x ตัวพิมพ์เล็ก  

คุณสมบัติเกี่ยวกับการใช้สี

สีที่แสดงในคอมพิวเตอร์นั้น เกิดจากการผสมสีพื้นฐานเข้าด้วยกันโดยเรียกกันว่าระบบสี ระบบสีที่คอมพิวเตอร์รู้จักอันที่จริงมีอยู่หลายระบบ แต่ระบบที่นำมาใช้ในการพัฒนาเว็บเพจนั้น จะเป็นระบบสีที่เรียกว่า RGB โดย R ย่อมาจาก Red คือสีแดง G ย่อมาจาก Green คือสีเขียว และ B ย่อมาจาก Blue คือสีน้ำเงิน อันเป็นสีพื้นฐานของระบบการแสดงผลทางจอภาพ การกำหนดเกี่ยวกับสีใน CSS สามารถกำหนดโดยใช้ชื่อสีมาตรฐาน หรือกำหนดจากเลขฐานสิบหก และสามารถกำหนดสีในระบบ RGB และ RGB(a) ได้ด้วย ดังมีรายละเอียดต่อไปนี้

1. การใช้ชื่อสีมาตรฐาน เช่น red , green , blue , pink , yellow , orange , violet , gray , brown เป็นต้น

ตัวอย่าง หมายถึงการกำหนดให้ตัวอักษรเป็นสีชมพู แต่การกำหนดสีด้วยวิธีนี้มีข้อจำกัดเรื่องของจำนวนสีที่สามารถนำมาใช้ และการรองรับของเว็บเบราเซอร์บางตัว

2. การกำหนดจากรหัสเลขฐานสิบหก สำหรับวิธีการระบุสีนั้น ทำได้ด้วยการนำเลขฐานสิบหก หกหลักมาเรียงต่อกัน ซึ้งแท้ที่จริงเลขหกหลักดังกล่าว คือ การแบ่งเลขเป็นชุด ๆ ละ 2 หลัก รวมเป็น 3 ชุด สำหรับแม่สี 3 สี โดยตัวเลขแต่ละชุดบอกถึงอัตราส่วนความเข้มของแม่สีนั้น ๆ

เนื่องจากตัวเลขแต่ละชุดเป็นเลขฐานสิบหก 2 หลัก จึงมีค่าอยู่ระหว่าง 00 - ff (เลขฐานสิบหกใช้ตัวอักษร a b c d e f แทน 10 11 12 13 14 15) รวมแล้วได้ 255 ระดับ ค่า 0 คือมีค่าระดับความเข้มของแม่สีนั้นน้อยที่สุด หรือไม่มีเลย และอัตราส่วนของค่าระดับสีจะเพิ่มขึ้นเรื่อย ๆ สิ้นสุดที่ ff (255) ดังตัวอย่างต่อไปนี้

color h1(สีแดง) color h2(สีเขียว) color h3(สีน้ำเงิน)

3. การกำหนดสีในรูปแบบ RGB(a)

โดยที่ R หมายถึงระดับของสีแดง  , G หมายถึง ระดับของสีเขียว และ B หมายถึง ระดับของสีน้ำเงิน และทุกหลักสามารถกำหนดค่าตัวเลขได้ 0 - 255 ส่วนระดับความโปร่งแสง มีค่าอยู่ในช่วง 0 - 1 หากกำหนดเป็น 0 จะโปร่งแสงมากที่สุด แต่ถ้าเป็น 1 จะทึบแสง

ตัวอย่าง เช่นcolo rgb sampleค่าสีแดง = 0 , ค่าสีเขียว = 255 , ค่าสีน้ำเงิน = 0 และค่าความโปร่งแสง = 0.25