หน่วยที่ใช้วัดค่าต่างๆ ใน Style Sheet

จาก syntax ของคำสั่ง CSS ค่า value ของ property บางค่าจะต้องมีการระบุหน่วยด้วย หน่วยที่ใช้งานใน CSS มีอะไรบ้าง มาดูกันค่ะ

หน่วยแบบ Relative Length (กำหนดแบบอัตราส่วน)
px (pixels, สัมพันธ์กับค่าความละเอียดของหน้าจอ) เช่น 1px, 4px
em (emphasize, ความสูงของตัวอักษร) เป็นขนาดจำนวนเท่าของขนาด font ที่กำหนดให้ body
ถ้า font ที่ body กำหนดเป็น 10px
h1{fon-size:1.5em} h1 จะมีขนาดเป็น 1.5 เท่า ของ 10px = 15px
h2{fon-size:1.4em} h2 จะมีขนาดเป็น 1.4 เท่า ของ 10px = 14px
และถ้าเรากำหนดเป็น 1em ก็จะมีขนาด้เท่ากับ 10px เหมือนเดิม
ex (x-height, ความสูงของตัวอักษร “x”) เช่น 1.5ex, 2ex
% (percent, สัมพันธ์กับขนาดหน้าจอ หรือ container ที่บรรจุวัตถุนั้นๆ อยู่) เช่น 50%, 130%
หน่วยแบบ Absolute Length (กำหนดตายตัว)
in (inches; 1in=2.54cm =72pt =6pc) เช่น 2in, 1.5in
cm (centimeters; 1cm=10mm) เช่น 2cm, 1.11cm
mm (millimeters) เช่น 50mm, 0.8mm
pt (points; 1pt=1/72in, 10pt มีขนาดพอๆกับ 12px) เป็นหน่วยที่ใช้ในงานสิ่งพิมพเช่น 12pt, 20pt
pc (picas; 1pc=12pt) เช่น 1pc, 2pc