หน่วย CSS แอบโซลูท
หน่วยความยาวสัมบูรณ์ได้รับการแก้ไขโดยสัมพันธ์กัน หน่วยเหล่านี้ใช้เมื่อทราบรูปแบบเอาต์พุตแล้ว ต่อไปนี้คือหน่วยความยาวสัมบูรณ์บางส่วน -
| Sr.No | หน่วย &คำอธิบาย |
|---|---|
| 1 | ซม. เซนติเมตร |
| 2 | มม มิลลิเมตร |
| 3 | ใน นิ้ว (1in =96px =2.54cm) |
| 4 | px * พิกเซล (1px =1/96th of 1in) |
| 5 | pt คะแนน (1pt =1/72 ของ 1in) |
| 6 | ชิ้น picas (1pc =12 pt) |
ตัวอย่าง
เรามาดูตัวอย่างกัน −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 0.3in;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html> ผลลัพธ์
หน่วยสัมพัทธ์ CSS
หน่วยความยาวสัมพัทธ์ใน CSS ใช้เพื่อระบุความยาวที่สัมพันธ์กับคุณสมบัติความยาวอื่น
เทียบกับความสูง x ของแบบอักษรปัจจุบัน
| Sr.no | หน่วย &คำอธิบาย |
|---|---|
| 1 | em สัมพันธ์กับขนาดแบบอักษรขององค์ประกอบ เช่น 4em หมายถึงขนาดแบบอักษรปัจจุบัน 4 เท่า |
| 2 | อดีต เทียบกับความสูง x ของแบบอักษรปัจจุบัน |
| 3 | ช เทียบกับความกว้างของ 0 |
| 4 | เรม สัมพันธ์กับขนาดตัวอักษรขององค์ประกอบรูท |
| 5 | vw สัมพันธ์กับ 1% ของความกว้างของวิวพอร์ต* |
| 6 | vh เทียบกับ 1% ของความสูงของวิวพอร์ต* |
| 7 | vmin เทียบกับ 1% ของวิวพอร์ต* ขนาดเล็กลง |
| 8 | vmax เทียบกับ 1% ของวิวพอร์ต* ขนาดที่ใหญ่ขึ้น |
| 9 | % สัมพันธ์กับองค์ประกอบหลัก |
ตัวอย่าง
ให้เราดูตัวอย่างโดยใช้หน่วยความยาวสัมพัทธ์ -
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 1.4em;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html> ผลลัพธ์
