CSS আপসোলিউট ইউনিট (নির্দিষ্ট আকার)
এই ইউনিটগুলো একে অপরের সাথে নিশ্চিত অনুপাতে থাকে। আউটপুট ফরম্যাট জানা থাকলে ব্যবহার করা হয়।
| ক্রমিক | ইউনিট ও বর্ণনা |
|---|---|
| 1 | cm — সেনটিমিটার |
| 2 | mm — মিলিমিটার |
| 3 | in — ইঞ্চি (1in = 96px = 2.54cm) |
| 4 | px * — পিক্সেল (1px = 1/96th of 1in) |
| 5 | pt — পয়েন্ট (1pt = 1/72 of 1in) |
| 6 | pc — পিকাস (1pc = 12 pt) |
উদাহরণ: ইনচ (in) ব্যবহার
<!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 রিলেটিভ ইউনিট (অন্যান্য প্রোপার্টির সাপেক্ষে)
রিলেটিভ ইউনিট অন্য একটি লেথ প্রোপার্টির সাপেক্ষে আকার নির্ধারণ করে।
| ক্রমিক | ইউনিট ও বর্ণনা |
|---|---|
| 1 | em — এলিমেন্টের font-size এর সাপেক্ষে (4em = 4×current font) |
| 2 | ex — কারেন্ট ফন্টের x-height এর সাপেক্ষে |
| 3 | ch — '0' (শূন্য) ক্যারেক্টার প্রস্থের সাপেক্ষে |
| 4 | rem — রুট এলিমেন্ট (<html>) এর font-size এর সাপেক্ষে |
| 5 | vw — ভিউপোর্ট প্রস্থের 1% |
| 6 | vh — ভিউপোর্ট উঁচুর 1% |
| 7 | vmin — ভিউপোর্টের ছোট ডাইমেনশনের 1% |
| 8 | vmax — ভিউপোর্টের বড় ডাইমেনশনের 1% |
| 9 | % — প্যারেন্ট এলিমেন্টের সাপেক্ষে |
উদাহরণ: em ব্যবহার
<!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>
উদাহরণ: ch ব্যবহার
<!DOCTYPE html>
<html>
<head>
<style>
.demo { text-decoration: overline underline; text-decoration-color: blue; font-size: 4ch; }
</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>
সুঢ়াব: রেসপনসিভ ডিজাইনে rem, vw, vh, clamp() ব্যবহার করুন।
