CSS Absolute Units এবং Relative Units দুটোই Distance units ক্যাটাগরির অধীনে পড়ে।
CSS Relative Units একটি এলিমেন্টের দৈর্ঘ্য অন্য একটি এলিমেন্টের রেফারেন্সে ডিফাইন করে।
উদাহরণস্বরূপ, vh রিলেটিভ यুনিট ভিউপোর্ট হাইটের সাপেক্ষে রিলেটিভ।
নিচে CSS relative units গুলো দেওয়া হলো:
| Sr.No | Unit & Relative to |
|---|---|
| 1 | % প্যারেন্ট এলিমেন্টের ডাইমেনশন |
| 2 | em এলিমেন্টের ফন্ট সাইজ |
| 3 | ex এলিমেন্টের ফন্টের x-height |
| 4 | lh এলিমেন্টের লাইন হাইট |
| 5 | rem রুট এলিমেন্টের ফন্ট সাইজ |
| 6 | rlh রুট এলিমেন্টের লাইন হাইট |
| 7 | vb রুট এলিমেন্টের ব্লক অক্ষের ভিউপোর্টের সাইজের 1% |
| 8 | vh ভিউপোর্ট হাইটের 1% |
| 9 | vmax ভিউপোর্টের বড় ডাইমেনশনের 1% |
| 10 | vmin ভিউপোর্টের ছোট ডাইমেনশনের 1% |
| 11 | vw ভিউপোর্ট ওয়িডথের 1% |
উদাহরণ
CSS relative units এর একটি উদাহরণ:
<!DOCTYPE html> <html> <head> <title>CSS Relative Units</title> <style> html{ font-size: 14px; line-height: normal; } form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #textContain { font-size: 20px; line-height: 2; } </style> </head> <body> <form> <fieldset> <legend>CSS-Relative-Units</legend> <input type="text" id="textSelect" placeholder="Type Text Here..."> <input type="number" id="numSelect" value="1" min="1"> <div id="radioBut"> <input class="radio" type="radio" name="heading" value="em" checked><label>em</label> <input class="radio" type="radio" name="heading" value="rem"><label>rem</label> <input class="radio" type="radio" name="heading" value="vw"><label>vw</label> <input class="radio" type="radio" name="heading" value="vh"><label>lh</label> <input class="radio" type="radio" name="heading" value="ex"><label>ex</label> </div> <div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div> <input type="button" onclick="changeText()" value="Preview"> </fieldset> </form> <script> var textSelect = document.getElementById("textSelect"); var numSelect = document.getElementById("numSelect"); var textPreview = document.getElementById("textPreview"); function changeText() { if(textSelect.value === '') textPreview.textContent = 'Type some text first'; else{ for(var i=0; i<5; i++){ var radInp = document.getElementsByClassName('radio')[i]; if(radInp.checked === true){ textPreview.textContent = textSelect.value; textPreview.style.fontSize = numSelect.value+radInp.value } } } } </script> </body> </html>
আউটপুট
উপরের কোডের আউটপুট:
কোনো বাটনে ক্লিক করার আগে:
'Preview' বাটনে ক্লিক করার পর 'em' অপশন সিলেক্টেড এবং খালি টেক্সট ফিল্ড:
'Preview' বাটনে ক্লিক করার পর 'rem' অপশন সিলেক্টেড এবং নন-এম্পটি টেক্সট ফিল্ড:
'Preview' বাটনে ক্লিক করার পর 'em' অপশন সিলেক্টেড এবং নন-এম্পটি টেক্সট ফিল্ড:
নিচে CSS absolute units গুলো দেওয়া হলো:
| Sr.No | Unit & Name |
|---|---|
| 1 | cm সেন্টিমিটার (1 cm = 100 mm) |
| 2 | in ইঞ্চি (1 in = 2.54 cm) |
| 3 | mm মিলিমিটার |
| 4 | pc পিকাস (1 pc = 12 pt) |
| 5 | pt পয়েন্টস (1 pt = 1/72 in) |
| 6 | px পিক্সেলস (1 px = 0.75 pt) |
উদাহরণ
CSS absolute units এর একটি উদাহরণ:
<!DOCTYPE html> <html> <head> <title>CSS Absolute Units</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } </style> </head> <body> <form> <fieldset> <legend>CSS-Absolute-Units</legend> <input type="text" id="textSelect" placeholder="Type Text Here..."> <input type="number" id="numSelect" value="10" min="1"> <div id="radioBut"> <input class="radio" type="radio" name="heading" value="pc"><label>pc</label> <input class="radio" type="radio" name="heading" value="pt"><label>pt</label> <input class="radio" type="radio" name="heading" value="px" checked><label>px</label> <input class="radio" type="radio" name="heading" value="in"><label>in</label> <input class="radio" type="radio" name="heading" value="cm"><label>cm</label> </div> <div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div> <input type="button" onclick="changeText()" value="Preview"> </fieldset> </form> <script> var textSelect = document.getElementById("textSelect"); var numSelect = document.getElementById("numSelect"); var textPreview = document.getElementById("textPreview"); function changeText() { if(textSelect.value === '') textPreview.textContent = 'Type some text first'; else{ for(var i=0; i<5; i++){ var radInp = document.getElementsByClassName('radio')[i]; if(radInp.checked === true){ textPreview.textContent = textSelect.value; textPreview.style.fontSize = numSelect.value+radInp.value } } } } </script> </body> </html>
আউটপুট
উপরের কোডের আউটপুট:
কোনো বাটনে ক্লিক করার আগে:
'Preview' বাটনে ক্লিক করার পর 'px' অপশন সিলেক্টেড এবং নন-এম্পটি টেক্সট ফিল্ড:
'Preview' বাটনে ক্লিক করার পর 'pt' অপশন সিলেক্টেড এবং নন-এম্পটি টেক্সট ফিল্ড:
'Preview' বাটনে ক্লিক করার পর 'pc' অপশন সিলেক্টেড এবং নন-এম্পটি টেক্সট ফিল্ড:
