সিএসএস width প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| width | ১.০ | ৪.০ | ১.০ | ১.০ | ৩.৫ |
সংজ্ঞা ও ব্যবহার
একটি এলিমেন্টের width প্রোপার্টি দিয়ে width নির্দিষ্ট করা হয়।
পরামর্শঃ
- width প্রোপার্টির মধ্যে padding, borders বা margins অন্তর্ভূক্ত থাকে না। এটা এরিয়ার মধ্যে এলিমেন্টের padding, border বা margin এর width নির্দিষ্ট করে।
- min-width এবং max-width প্রোপার্টির width overwrite করা হয়।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| auto | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
transform: none/transform-functions/initial/inherit;
একটি <p> এলিমেন্টের height এবং width নির্দিষ্ট করা হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
img.normal {
height: auto;
}
img.big {
height: 120px;
}
p.ex {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<img class="normal" src="../../images/css.jpg" width="90" height="80">
<img class="big" src="../../images/css.jpg" width="90" height="80">
<p> class="ex"> এই প্যারাগ্রাফটির দৈর্ঘ্য এবং প্রস্থ 100px</p>
<p>
এগুলো একটি প্যারাগ্রাফের কিছু টেক্সট।
এগুলো একটি প্যারাগ্রাফের কিছু টেক্সট।
এগুলো একটি প্যারাগ্রাফের কিছু টেক্সট।
এগুলো একটি প্যারাগ্রাফের কিছু টেক্সট।
এগুলো একটি প্যারাগ্রাফের কিছু টেক্সট।
এগুলো একটি প্যারাগ্রাফের কিছু টেক্সট।
</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.width="500px"উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#syntax {
width: 100px;
height: 100px;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<p>ডিভ এলিমেন্টের প্রস্থ পরিবর্তন করতে "ক্লিক করি" বাটনে ক্লিক করুন:</p>
<button onclick="myFunction()">ক্লিক করি</button>
<div id="syntax">
<h1>স্যাট একাডেমী</h1>
</div>
<script>
function myFunction() {
document.getElementById("syntax").style.width = "500px";
}
</script>
</body>
</html>
ফলাফল
আরো উদাহরণ
শতকরা ভ্যালু ব্যবহার করে <img> এলিমেন্টের width নির্দিষ্ট করা হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
img.normal {
width: auto;
}
img.big {
width: 50%;
}
img.small {
width: 10%;
}
</style>
</head>
<body>
<img class="normal" src="../../images/logocss.gif" width="90" height="80">
<img class="big" src="../../images/logocss.gif" width="90" height="80">
<img class="small" src="../../images/logocss.gif" width="90" height="80">
</body>
</html>
ফলাফল
উদাহরণ
একটি <input type="text"> এলিমেন্টে 100px width নির্দিষ্ট করা হলো। যাইহোক, যখন এটা ফোকাস হবে এটা 250px হবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
input[type=text] {
width: 100px;
-webkit-transition: width .35s ease-in-out;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
</style>
</head>
<body>
<p>ইনফুট ফিল্ডের প্রস্থ ১০০ পিক্সেল সেট করি। যাইহোক, যখন ইনফুট ফিল্ডটি ফোকাস হবে তখন এটিকে ২৫০ পিক্সেল হবে:</p>
সার্চ: <input type="text" name="search">
<p> ফলাফল দেখার জন্য সার্চ বক্সে ক্লিক করুন! </p>
</body>
</html>
ফলাফল
width প্রোপার্টির ভ্যালু-সমূহ
- auto - ব্রাউজারে ডিফল্ট একটি width থাকে।
- length - width এর মধ্যে px, cm ইত্যাদি নির্ধারণ করা যায়।
- % - কন্টেইন ব্লকের জন্য width এর মধ্যে পার্সেন্ট(%) নির্ধারণ করা যায়।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
width প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।