CSS ইউনিট বোঝা

CSS ইউনিট বিভিন্ন ক্যাটাগরিতে আসে যেমন ফন্ট-সাইজ, ক্যারেক্টার-সাইজ, ভিউপোর্ট ডাইমেনশন ইত্যাদি। বামুঁলে দুটি ক্যাটাগরি রয়েছে: অ্যাসলিউট এবং রিলেটিভ ইউনিট যেগুলো উপরে উল্লিখিত সাব-ক্যাটাগরিগুলো নিয়ে গঠিত।

CSS অ্যাসলিউট ইউনিটগুলো নিম্নরূপ:

CSS অ্যাসলিউট ইউনিটের একটি উদাহরণ দেখি:

উদাহরণ

<!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; } #container {    display: flex; } .child{    margin: 5px 0;    height: 40px;    color: white;    border-width: 4px 0 4px 4px;    border-color: black;    border-style: solid; } .child:nth-of-type(1){    background-color: #FF8A00;    width:1cm; } .child:nth-of-type(2){    background-color: #F44336;    width:1in; } .child:nth-of-type(3){    background-color: #C303C3;    width:1mm; } .child:nth-of-type(4){ background-color: #4CAF50; width:1pc; } .child:nth-of-type(5){    background-color: #03A9F4;    width:1pt; } .child:nth-of-type(6){    background-color: #FEDC11;    width:1px;    border-right-width: 4px; } </style> </head> <body> <form> <fieldset> <legend>CSS-Absolute-Units</legend> <div id="container"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div><br> <div><span class="child">cm</span><span class="child">in</span><span class="child">mm</span><span class="child">pc</span><span class="child">pt</span><span class="child">px</span></div><br> <input type="number" id="numSelect" value="1" min="1"> <input type="button" onclick="changeWidth()" value="Preview"> <script> var numSelect = document.getElementById("numSelect"); function changeWidth() {    var divChild = document.getElementsByClassName('child');    for(var i=0; i<6; i++){       divChild[i].style.width = numSelect.value+divChild[i+6].textContent; }} </script> </body> </html>

আউটপুট

কোনো বাটন ক্লিক করার আগে:

'Preview' বাটনে ক্লিক করার পর নাম্বার ফিল্ড সেট করে:

CSS রিলেটিভ ইউনিটগুলো নিম্নরূপ:

CSS রিলেটিভ ইউনিটের একটি উদাহরণ দেখি:

উদাহরণ

<!DOCTYPE html> <html> <head> <title>CSS Relative Units</title> <style> form {    width:70%;    margin: 0 auto;    text-align: center; } * {    padding: 2px;    margin:5px; } input[type="button"] {    border-radius: 10px; } #container {    display: flex; } .child{    margin: 5px 0;    height: 40px;    color: white;    border-width: 4px 0 4px 4px;    border-color: black;    border-style: solid; } .child:nth-of-type(1){    background-color: #FF8A00;    width:1%; } .child:nth-of-type(2){    background-color: #F44336;    width:1em; } .child:nth-of-type(3){    background-color: #C303C3;    width:1ex; } .child:nth-of-type(4){    background-color: #4CAF50;    width:1rem; } .child:nth-of-type(5){    background-color: #03A9F4;    width:1vh; } .child:nth-of-type(6){    background-color: #FEDC11;    width:1vw;    border-right-width: 4px; } </style> </head> <body> <form> <fieldset> <legend>CSS-Relative-Units</legend> <div id="container"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div><br> <div><span class="child">%</span><span class="child">em</span><span class="child">ex</span><span class="child">rem</span><span class="child">vh</span><span class="child">vw</span></div><br> <input type="number" id="numSelect" value="1" min="1"> <input type="button" onclick="changeWidth()" value="Preview"> <script> var numSelect = document.getElementById("numSelect"); function changeWidth() {    var divChild = document.getElementsByClassName('child');    for(var i=0; i<6; i++){       divChild[i].style.width = numSelect.value+divChild[i+6].textContent; }} </script> </body> </html>

আউটপুট

কোনো বাটন ক্লিক করার আগে:

'Preview' বাটনে ক্লিক করার পর 'em' অপশন সিলেক্ট এবং খালি টেক্সট ফিল্ড নিয়ে: