যখন এইচটিএমএল এবং সিএসএস ব্যবহার করে ওয়েব ডেভেলপমেন্টের কথা আসে, তখন ওয়েবপেজে উপাদানগুলির উপস্থিতি ম্যানিপুলেট করার ক্ষমতা অত্যন্ত গুরুত্বপূর্ণ। এটি অর্জনের একটি উপায় হল একটি উপাদানের সাথে একটি সীমানা যুক্ত করা। CSS-এ, বর্ডার প্রপার্টি একটি উপাদানের সীমানা নির্ধারণ করতে ব্যবহৃত হয় এবং এটি আপনাকে সীমানার আকার নির্দিষ্ট করতে দেয়।
CSS-এ একটি বর্ডার সাইজ যোগ করতে, আপনি বর্ডার-প্রস্থ বৈশিষ্ট্য ব্যবহার করতে পারেন। এই বৈশিষ্ট্যটি আপনাকে পিক্সেল, ইএমএস, রেমস বা শতাংশের মতো বিভিন্ন ইউনিটে সীমানার প্রস্থ নির্ধারণ করতে দেয়। সীমানা-প্রস্থ বৈশিষ্ট্যটি উপাদানের সীমানার পৃথক পার্শ্বে (উপর, ডান, নীচে এবং বাম) বা একবারে সমস্ত দিকে প্রয়োগ করা যেতে পারে।
একটি উপাদানে একটি সীমানা আকার যোগ করতে আপনি কীভাবে বর্ডার-প্রস্থ সম্পত্তি ব্যবহার করতে পারেন তার একটি উদাহরণ এখানে রয়েছে:
css
/* Applying border width to all sides */
.element {
border-width: 2px;
}
/* Applying different border widths to each side */
.element {
border-width: 2px 4px 6px 8px;
}
প্রথম উদাহরণে, সীমানা-প্রস্থ বৈশিষ্ট্যটি 2 পিক্সেলে সেট করা হয়েছে, যা উপাদানটির সমস্ত দিকে একই সীমানা প্রস্থ প্রয়োগ করে। দ্বিতীয় উদাহরণে, বর্ডার-প্রস্থ বৈশিষ্ট্যটি উপরের দিকের জন্য 2 পিক্সেল, ডান দিকের জন্য 4 পিক্সেল, নীচের দিকে 6 পিক্সেল এবং বাম দিকের জন্য 8 পিক্সেল সেট করা হয়েছে। এটি আপনাকে উপাদানটির চারপাশে একটি অ-ইউনিফর্ম সীমানা তৈরি করতে দেয়।
এটা মনে রাখা গুরুত্বপূর্ণ যে শুধুমাত্র সীমানা-প্রস্থ সম্পত্তি দৃশ্যত সীমানা দেখাবে না যদি না আপনি বর্ডার-স্টাইল এবং বর্ডার-রঙের বৈশিষ্ট্যগুলিও সংজ্ঞায়িত করেন। বর্ডার-স্টাইল প্রপার্টি বর্ডারের স্টাইল নির্ধারণ করে, যেমন কঠিন, ড্যাশড, ডটেড ইত্যাদি, যখন বর্ডার-কালার প্রপার্টি সীমানার রঙ সেট করে।
এখানে একটি উদাহরণ রয়েছে যা সীমানা-প্রস্থ, সীমানা-শৈলী এবং সীমানা-রঙের বৈশিষ্ট্যগুলিকে একত্রিত করে:
এই উদাহরণে, সীমানা-প্রস্থ বৈশিষ্ট্যটি সীমানার প্রস্থকে 2 পিক্সেলে সেট করে, বর্ডার-স্টাইলের বৈশিষ্ট্য শৈলীটিকে কঠিনে সেট করে এবং বর্ডার-রঙের বৈশিষ্ট্যটি রঙটিকে লালে সেট করে। এটি উপাদানটির চারপাশে একটি শক্ত লাল সীমানা তৈরি করবে।
CSS-এ একটি বর্ডার সাইজ যোগ করতে, আপনি বর্ডার-প্রস্থ বৈশিষ্ট্য ব্যবহার করতে পারেন। এই বৈশিষ্ট্যটি আপনাকে বিভিন্ন ইউনিটে সীমানার প্রস্থ নির্দিষ্ট করার অনুমতি দেয় এবং পৃথক বাহুতে বা একটি উপাদানের সমস্ত দিকে প্রয়োগ করা যেতে পারে। সীমানা দৃশ্যমান করতে সীমানা-শৈলী এবং বর্ডার-রঙের বৈশিষ্ট্যগুলিও সংজ্ঞায়িত করতে ভুলবেন না।
CSS এ বর্ডার সাইজ যোগ করলে কি হবে?
যখন এইচটিএমএল এবং সিএসএস ব্যবহার করে ওয়েব ডেভেলপমেন্টের কথা আসে, তখন ওয়েবপেজে উপাদানগুলির উপস্থিতি ম্যানিপুলেট করার ক্ষমতা অত্যন্ত গুরুত্বপূর্ণ। এটি অর্জনের একটি উপায় হল একটি উপাদানের সাথে একটি সীমানা যুক্ত করা। CSS-এ, বর্ডার প্রপার্টি একটি উপাদানের সীমানা নির্ধারণ করতে ব্যবহৃত হয় এবং এটি আপনাকে সীমানার আকার নির্দিষ্ট করতে দেয়।
CSS-এ একটি বর্ডার সাইজ যোগ করতে, আপনি বর্ডার-প্রস্থ বৈশিষ্ট্য ব্যবহার করতে পারেন। এই বৈশিষ্ট্যটি আপনাকে পিক্সেল, ইএমএস, রেমস বা শতাংশের মতো বিভিন্ন ইউনিটে সীমানার প্রস্থ নির্ধারণ করতে দেয়। সীমানা-প্রস্থ বৈশিষ্ট্যটি উপাদানের সীমানার পৃথক পার্শ্বে (উপর, ডান, নীচে এবং বাম) বা একবারে সমস্ত দিকে প্রয়োগ করা যেতে পারে।
একটি উপাদানে একটি সীমানা আকার যোগ করতে আপনি কীভাবে বর্ডার-প্রস্থ সম্পত্তি ব্যবহার করতে পারেন তার একটি উদাহরণ এখানে রয়েছে:
প্রথম উদাহরণে, সীমানা-প্রস্থ বৈশিষ্ট্যটি 2 পিক্সেলে সেট করা হয়েছে, যা উপাদানটির সমস্ত দিকে একই সীমানা প্রস্থ প্রয়োগ করে। দ্বিতীয় উদাহরণে, বর্ডার-প্রস্থ বৈশিষ্ট্যটি উপরের দিকের জন্য 2 পিক্সেল, ডান দিকের জন্য 4 পিক্সেল, নীচের দিকে 6 পিক্সেল এবং বাম দিকের জন্য 8 পিক্সেল সেট করা হয়েছে। এটি আপনাকে উপাদানটির চারপাশে একটি অ-ইউনিফর্ম সীমানা তৈরি করতে দেয়।
এটা মনে রাখা গুরুত্বপূর্ণ যে শুধুমাত্র সীমানা-প্রস্থ সম্পত্তি দৃশ্যত সীমানা দেখাবে না যদি না আপনি বর্ডার-স্টাইল এবং বর্ডার-রঙের বৈশিষ্ট্যগুলিও সংজ্ঞায়িত করেন। বর্ডার-স্টাইল প্রপার্টি বর্ডারের স্টাইল নির্ধারণ করে, যেমন কঠিন, ড্যাশড, ডটেড ইত্যাদি, যখন বর্ডার-কালার প্রপার্টি সীমানার রঙ সেট করে।
এখানে একটি উদাহরণ রয়েছে যা সীমানা-প্রস্থ, সীমানা-শৈলী এবং সীমানা-রঙের বৈশিষ্ট্যগুলিকে একত্রিত করে:
এই উদাহরণে, সীমানা-প্রস্থ বৈশিষ্ট্যটি সীমানার প্রস্থকে 2 পিক্সেলে সেট করে, বর্ডার-স্টাইলের বৈশিষ্ট্য শৈলীটিকে কঠিনে সেট করে এবং বর্ডার-রঙের বৈশিষ্ট্যটি রঙটিকে লালে সেট করে। এটি উপাদানটির চারপাশে একটি শক্ত লাল সীমানা তৈরি করবে।
CSS-এ একটি বর্ডার সাইজ যোগ করতে, আপনি বর্ডার-প্রস্থ বৈশিষ্ট্য ব্যবহার করতে পারেন। এই বৈশিষ্ট্যটি আপনাকে বিভিন্ন ইউনিটে সীমানার প্রস্থ নির্দিষ্ট করার অনুমতি দেয় এবং পৃথক বাহুতে বা একটি উপাদানের সমস্ত দিকে প্রয়োগ করা যেতে পারে। সীমানা দৃশ্যমান করতে সীমানা-শৈলী এবং বর্ডার-রঙের বৈশিষ্ট্যগুলিও সংজ্ঞায়িত করতে ভুলবেন না।
সম্পর্কিত অন্যান্য সাম্প্রতিক প্রশ্ন এবং উত্তর এইচটিএমএল এবং সিএসএসে অগ্রগতি:
অ্যাডভান্সিং ইন এইচটিএমএল এবং সিএসএস-এ আরও প্রশ্ন ও উত্তর দেখুন
আরও প্রশ্ন এবং উত্তর: