CSS ইউনিটগুলি বিভিন্ন শ্রেণীতে আসে যেমন ফন্ট-আকার, অক্ষর-আকার, ভিউপোর্ট মাত্রা ইত্যাদি। বিস্তৃতভাবে পরম এবং আপেক্ষিক ইউনিটের দুটি বিভাগ রয়েছে যা উপরে উল্লিখিত সাব শ্রেণী নিয়ে গঠিত।
CSS পরম একক −
নিচে দেওয়া হল| Sr.No | একক এবং নাম |
|---|---|
| 1 | সেমি সেন্টিমিটার (1 সেমি =100 মিমি) |
| 2 | এ ইঞ্চি (1 ইঞ্চি =2.54 সেমি) |
| 3 | মিমি মিলিমিটার |
| 4 | pc পিকাস (1 পিসি =12 পিটি) |
| 5 | pt পয়েন্ট (1 pt =1/72 ইঞ্চি) |
| 6 | px পিক্সেল (1 px =0.75 pt) |
আসুন 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> আউটপুট
কোনো বোতামে ক্লিক করার আগে −
'প্রিভিউ' ক্লিক করার পর নম্বর ফিল্ড সেট সহ বোতাম -
নিচের CSS আপেক্ষিক ইউনিটগুলি −
| Sr.No | একক এবং এর সাথে সম্পর্কিত |
|---|---|
| 1 | % অভিভাবক উপাদান মাত্রা |
| 2 | em উপাদানের হরফের আকার |
| 3 | প্রাক্তন এলিমেন্টের ফন্টের x-উচ্চতা |
| 4 | rem রুট এলিমেন্টের ফন্ট সাইজ |
| 5 | vh ভিউপোর্টের উচ্চতার 1% |
| 6 | vmax ভিউপোর্টের বৃহত্তর মাত্রার 1% |
| 7 | vmin ভিউপোর্টের ছোট মাত্রার 1% |
| 8 | vw ভিউপোর্টের প্রস্থের 1% |
আসুন 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> আউটপুট
কোনো বোতামে ক্লিক করার আগে −
'প্রিভিউ' ক্লিক করার পর 'em' সহ বোতাম বিকল্প নির্বাচিত এবং খালি পাঠ্য ক্ষেত্র -
