หน่วยของค่าที่ใช้ต่างๆ ใน CSS

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
bankjittapol
PHP Super Member
PHP Super Member
Posts: 344
Joined: 21/10/2019 10:19 am

หน่วยของค่าที่ใช้ต่างๆ ใน CSS

Post by bankjittapol »

หน่วยของค่าที่ใช้ต่างๆ ใน CSS
css คือ คำสั่งที่จัดการรูปแบบ หรือตกแต่งเอกสาร html หรือ xhtml เช่น เพิ่มสีข้อความ พื้นหลัง เพื่อรูปภาพ เป็นต้น ซึ่งต้องมีการกำหนดขนาดของแต่ละสิ่งที่อยู่ภายใน เอกสารนั้นๆ เช่นว่า ขนาดของข้อความ ขนาดของรูปภาพ ขนาดของหัวข้อ เป็นต้น ซึ่งจะแบ่งเป็น 2 หมวด คือ หน่วยแบบกำหนดแบบอัตราส่วน คือ หน่วยที่มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล และ หน่วยแบบกำหนดตายตัว คือ หน่วยที่กำหนดค่าแบบตายตัว

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

หน่วยแบบกำหนดแบบอัตราส่วน (Relative Length)
- px (pixels) สัมพันธ์กับค่าความละเอียดของหน้าจอ เช่น 1px, 4px
- em (emphasize) ความสูงของตัวอักษรเป็นขนาดจำนวนเท่าของขนาด font ที่กำหนดให้ body ถ้า font ที่ body กำหนดเป็น 10px h1{font-size:1.5em} h1 จะมีขนาดเป็น 1.5 เท่า ของ 10px = 15px
- ex (x-height)ความสูงของตัวอักษร "x" เช่น 1.5ex, 2ex เป็นต้น ซึ่งไม่ค่อยนิยมใช้
- % (percent) ค่าเป็นเปอร์เซ็นสัมพันธ์ตามขนาดหน้าจอ เช่น 50%, 100%
- ch ค่าที่สัมพันธ์กับ ค่า width ที่เท่ากับ 0
- rem ตั้งค่าขนาดตาม font-size ของ root
- vw ย่อ - ขยายความกว้างตามขนาดหน้าจอ
- vh ย่อ - ขยายความยาวตามขนาดหน้าจอ

หน่วยแบบกำหนดตายตัว (Absolute Length)
- in (inches) ขนาดเป็นนิ้ว ซึ่ง 1in = 2.54 cm เช่น 2in, 1.5in
- cm (centimeters) ขนาดเป็นเซนติเมตร เช่น 2cm, 1.11cm
- mm (millimeters) ขนาดเป็นมิลลิเมตร เช่น 50mm, 0.8mm
- pt (points) เป็นหน่วยที่ใช้ในงานสิ่งพิมพ์เช่น 12pt, 20pt
- pc (picas) 1pc=12pt เช่น 1pc, 2pc

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 7 guests