কোডের পুনরাবৃত্তি এড়াতে, আমরা HTML এবং CSS-এ একাধিক ক্লাস ব্যবহার করি। CSS-এর সাহায্যে, আমরা উভয় ক্লাসকে একত্রে সংজ্ঞায়িত ও স্টাইল করতে পারি এবং একটি উপাদানে একাধিক ক্লাস ব্যবহার করতে পারি এবং তাদের বিভিন্ন ক্লাস আইডি বরাদ্দ করে। একটি এইচটিএমএল এলিমেন্টে একাধিক ক্লাস যোগ করতে স্থান-বিচ্ছিন্ন সিনট্যাক্স ব্যবহার করে এই পদ্ধতি অনুসরণ করা যেতে পারে।
এই নিবন্ধে, আমরা শিখব কিভাবে একটি উপাদানে একাধিক ক্লাস যোগ করতে হয়।
কিভাবে CSS এ একাধিক ক্লাস ব্যবহার করবেন?
একটি উপাদানে দুই বা ততোধিক ক্লাস ব্যবহার করতে, প্রতিটি ক্লাস আইডি একটি স্পেস দ্বারা পৃথক করা হবে।
একটি উপাদানে একাধিক ক্লাস ব্যবহার করতে আপনাকে নিম্নলিখিত সিনট্যাক্স অনুসরণ করতে হবে:
< h1 ক্লাস = 'ক্লাস_1 ক্লাস_2 ক্লাস_3' > হস্তান্তর... জ >
একটি একক এইচটিএমএল উপাদানে, আপনি একটি স্থান দিয়ে আলাদা করে একাধিক শ্রেণি অন্তর্ভুক্ত করতে পারেন। আপনার সুবিধার জন্য, এখানে একটি উদাহরণ.
উদাহরণ: CSS-এ একাধিক ক্লাস ব্যবহার করা
নীচের উদাহরণে, আমরা তৈরি করব:
-
ট্যাগ ব্যবহার করে একটি শিরোনাম এবং ক্লাসের নাম বরাদ্দ করুন “ শিরোনাম ”
- এর পরে, আমরা আরেকটি শিরোনাম তৈরি করব এবং এটি দুটি ভিন্ন শ্রেণিতে বরাদ্দ করব: “ শিরোনাম ' এবং ' লাইন ” এই ক্লাস আইডি একটি স্থান দ্বারা পৃথক করা হয়:
এইচটিএমএল
h1 >
< h1 ক্লাস = 'শিরোনাম লাইন' >
একাধিক ক্লাস ভিতরে এক উপাদান
h1 >
এখন, আসুন CSS ফাইলে চলে যাই এবং নীচে তালিকাভুক্ত কিছু CSS বৈশিষ্ট্য প্রয়োগ করি:
- rgb() ফাংশন ব্যবহার করে শিরোনামে পটভূমির রঙ সেট করুন “ (69, 51, 151) ”
- ফন্ট স্টাইল সেট করুন ' তির্যক শিরোনামের জন্য।
এইচটিএমএল ক্লাসে, প্রথম শিরোনামটি ক্লাসের নাম ব্যবহার করে “ শিরোনাম ” সুতরাং, নির্দিষ্ট শ্রেণীতে উল্লিখিত শৈলীটি প্রথম শিরোনামে প্রয়োগ করা হবে:
শিরোনাম {
ব্যাকগ্রাউন্ড-রঙ: rgb ( 69 , 51 , 151 ) ;
ফন্ট-স্টাইল: তির্যক
}
জন্য ' লাইন 'শ্রেণী, আমাদের আছে:
- rgb() ফাংশন ব্যবহার করে শিরোনামের রঙ সেট করুন “ (255, 0, 0) ”
- টেক্সট-ডেকোরেশন-লাইন প্রয়োগ করুন ' আন্ডারলাইন ”
দ্বিতীয় শিরোনাম উভয় শ্রেণীর শৈলী ব্যবহার করবে: “ শিরোনাম ' এবং ' লাইন 'শ্রেণী:
লাইন {রঙ: আরজিবি ( 255 , 0 , 0 ) ;
পাঠ্য-সজ্জা-লাইন: আন্ডারলাইন;
}
বাস্তবায়নের পরে, ফলাফল পরীক্ষা করুন:
আউটপুট থেকে, আপনি লক্ষ্য করতে পারেন যে দ্বিতীয় শিরোনাম উভয় CSS ক্লাস ব্যবহার করে।
উপসংহার
একটি একক উপাদানে একাধিক ক্লাস ব্যবহার করতে, সাদা স্পেস দ্বারা পৃথক পৃথক ক্লাস আইডি ব্যবহার করুন। এটি ব্যবহার করে, আমরা একসাথে বিভিন্ন CSS বৈশিষ্ট্য প্রয়োগ করতে পারি। এটি আমাদের ক্লাসটি পুনরায় ব্যবহার করার অনুমতি দেয় যেখানে অনুরূপ উপাদান বিদ্যমান। এই নিবন্ধটি ব্যাখ্যা করেছে যে কিভাবে একটি একক উপাদানে একাধিক ক্লাস ব্যবহার করতে হয় এবং একটি উদাহরণ সহ এটি স্টাইল করতে হয়।