সিএসএস ডাইমেনশন(CSS Dimension)
সিএসএস(CSS) টিউটোরিয়াল
আপনি প্রতিটি বাক্সকে ঘিরে এমন সীমানা দেখেছেন ie উপাদান, প্যাডিং যা প্রতিটি বাক্সের ভিতরে উপস্থিত হতে পারে এবং মার্জিন যা তাদের চারপাশে যেতে পারে। এই টিউটোরিয়ালে আমরা শিখব কীভাবে আমরা বাক্সগুলির মাত্রা পরিবর্তন করতে পারি।
- আমাদের নীচের বৈশিষ্ট্যগুলি রয়েছে যা আপনাকে একটি বাক্সের মাত্রা নিয়ন্ত্রণ করতে দেয়।
- উচ্চতার বৈশিষ্ট্যটি একটি বাক্সের উচ্চতা নির্ধারণ করতে ব্যবহৃত হয়।
- প্রস্থের বৈশিষ্ট্যটি একটি বাক্সের প্রস্থ নির্ধারণ করতে ব্যবহৃত হয়।
- লাইনের উচ্চতার বৈশিষ্ট্যটি পাঠ্যের একটি লাইনের উচ্চতা নির্ধারণ করতে ব্যবহৃত হয়।
- সর্বাধিক উচ্চতার বৈশিষ্ট্যটি কোনও বাক্স হতে পারে এমন সর্বোচ্চ উচ্চতা নির্ধারণ করতে ব্যবহৃত হয়।
- ন্যূনতম উচ্চতার বৈশিষ্ট্যটি কোনও বক্স হতে পারে সর্বনিম্ন উচ্চতা নির্ধারণ করতে ব্যবহৃত হয়।
- সর্বাধিক প্রস্থের সম্পত্তিটি কোনও বাক্স হতে পারে সর্বাধিক প্রস্থ সেট করতে ব্যবহৃত হয়।
- সর্বনিম্ন প্রস্থের বৈশিষ্ট্যটি কোনও বক্স হতে পারে সর্বনিম্ন প্রস্থকে সেট করতে ব্যবহৃত হয়।
উচ্চতা এবং প্রস্থের বৈশিষ্ট্য
উচ্চতা এবং প্রস্থের বৈশিষ্ট্যগুলি আপনাকে বাক্সগুলির জন্য উচ্চতা এবং প্রস্থ নির্ধারণ করতে দেয়। তারা দৈর্ঘ্য, শতাংশ, বা কীওয়ার্ড অটোর মান নিতে পারে।
উদাহরণ:
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
</body>
</html>
লাইন-উচ্চতার সম্পত্তি
লাইন-উচ্চতার বৈশিষ্ট্য আপনাকে পাঠ্য লাইনের মধ্যবর্তী স্থান বাড়িয়ে তুলতে দেয়। লাইন-উচ্চতার বৈশিষ্ট্যের মান সংখ্যা, দৈর্ঘ্য বা শতাংশ হতে পারে।
উদাহরণঃ
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
</p>
</body>
</html>
সর্বোচ্চ-উচ্চতার সম্পত্তি
সর্বাধিক উচ্চতার সম্পত্তি আপনাকে একটি বাক্সের সর্বোচ্চ উচ্চতা নির্দিষ্ট করতে দেয়। সর্বোচ্চ-উচ্চতার সম্পত্তির মান একটি সংখ্যা, দৈর্ঘ্য বা শতাংশ হতে পারে।
উদাহরণঃ
<html>
<head>
</head>
<body>
<p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
<br>
<img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
</body>
</html>
ন্যূনতম উচ্চতার সম্পত্তি
ন্যূনতম উচ্চতার বৈশিষ্ট্য আপনাকে একটি বাক্সের সর্বনিম্ন উচ্চতা নির্দিষ্ট করতে দেয়। ন্যূনতম-উচ্চতার সম্পত্তিটির মান একটি সংখ্যা, দৈর্ঘ্য বা শতাংশ হতে পারে।
উদাহরণঃ
<html>
<head>
</head>
<body>
<p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
</body>
</html>
সর্বাধিক প্রস্থের সম্পত্তি
সর্বাধিক প্রস্থের সম্পত্তি আপনাকে একটি বাক্সের সর্বাধিক প্রস্থ নির্দিষ্ট করতে দেয়। সর্বাধিক প্রস্থের সম্পত্তিটির সংখ্যা একটি সংখ্যা, দৈর্ঘ্য বা শতাংশ হতে পারে।
উদাহরণ:
<html>
<head>
</head>
<body>
<p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
</body>
</html>
সর্বনিম্ন প্রস্থের সম্পত্তি
ন্যূনতম প্রস্থের সম্পত্তি আপনাকে একটি বাক্সের সর্বনিম্ন প্রস্থ নির্দিষ্ট করতে দেয়। সর্বনিম্ন প্রস্থের সম্পত্তিটির মান একটি সংখ্যা, দৈর্ঘ্য বা শতাংশ হতে পারে।
উদাহরণঃ
<html>
<head>
</head>
<body>
<p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
</body>
</html>