คู่มือท่องเที่ยว สำหรับคนรักการท่องเที่ยว

Chapter 3

หน่วยที่ใช้วัดค่าต่างๆ ใน 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
« Chapter 2
Chapter 4 »