หน้าแรก

หน่วยที่ใช้วัดค่าต่างๆในการบอกขนาด และ ระยะ ใน Style Sheet ใน CSS


จาก 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
ที่มา....www.enjoyday.net

โครงสร้างคำสั่ง CSS การระบุสี (Color) ใน CSS
บทความที่เกี่ยวข้อง

ดูบทความ CSS ทั้งหมด »