এইচটিএমএল-এ আইডি এবং ক্লাস অ্যাট্রিবিউট এবং তাদের সিএসএস সিলেক্টর

ওয়েব পৃষ্ঠা স্টাইল করার জন্য CSS ব্যবহার করার সময়, আপনি প্রায়ই আপনার পৃষ্ঠার নির্দিষ্ট অংশগুলিকে লক্ষ্য করতে চান। আপনি যেভাবে এক বা একাধিক উপাদান নির্বাচন করতে পারেন তার মধ্যে একটি হল তাদের আইডি এবং/অথবা ক্লাস অ্যাট্রিবিউট।

আপনি যখন এই টিউটোরিয়ালটি দিয়ে যাচ্ছেন, ইন্টারেক্টিভ কোডপেন চেকআউট করুন এবং শুধু আমার সাথে খেলুন!

আইডি অ্যাট্রিবিউট এবং সিএসএস নির্বাচক

চলুন এগিয়ে যাই এবং

ট্যাগ:

   <p> Color this paragraph! </p>

একটি আইডি হল একটি অনন্য শনাক্তকারী যা আপনি এটিকে অনন্যভাবে সনাক্ত করতে যেকোনো একক উপাদান যোগ করেন। এটি কনভেনশন আইডি="#NAME" অনুসরণ করে।

এটি মাথায় রেখে, এবং যেহেতু আমরা আমাদের অনুচ্ছেদটি রঙ করতে চাই, আসুন এটি একটি অনন্য নাম দিয়ে নামকরণ করি।

   <p id="paragraph-colored"> Color this paragraph! </p>

এখন যেহেতু আমাদের আইডি অনন্য শনাক্তকারী আছে, আমাদের নিশ্চিত করতে হবে যে আমরা একই আইডি অন্য উপাদানে যোগ করব না। যদিও ব্রাউজার অভিযোগ করবে না, এটি উদ্দেশ্য হারাবে এবং CSS উদ্দেশ্য অনুযায়ী কাজ করবে না।

আমাদের আইডির জায়গায়, আমরা CSS এর সাথে হ্যাশট্যাগ চিহ্ন # ব্যবহার করে এটি নির্বাচন করতে পারি। আমাদের পি ট্যাগ বেগুনি করা যাক:

#paragraph-colored {
  color: purple;
}

ইজি-পিসি ঠিক? 😄

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

ক্লাস অ্যাট্রিবিউট এবং এর CSS নির্বাচক

কুল আমরা টেক্সট রঙিন বেগুনি সঙ্গে আমাদের অনুচ্ছেদ আছে. এখন ধরা যাক আমাদের একক পি ট্যাগের নিচে একগুচ্ছ অ্যাভোকাডোস ছবি আছে:

<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">

কিভাবে আমরা এই সমস্ত আভাকাডো-ডেভেলপার (যার মানে যাই হোক না কেন) সনাক্ত করতে এবং নির্বাচন করতে পারি? আমরা জানি আমরা আইডি ট্যাগ ব্যবহার করতে পারি না, কারণ এটি একটি একক আইটেমকে অনন্যভাবে সনাক্ত করতে ব্যবহৃত হয়। এখানেই ক্লাস অ্যাট্রিবিউট খেলতে আসে।

ক্লাস অ্যাট্রিবিউট কনভেনশন ক্লাস="#CLASS_NAME" অনুসরণ করে। যেহেতু অনেক সদস্য একটি শ্রেণীর অন্তর্ভুক্ত হতে পারে, তাই আমাদের সমস্ত অ্যাভোকাডো বিকাশকারীকে একটি ক্লাস বরাদ্দ করা যেতে পারে যেমন:

<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado" class="avocado-devs">

দারুণ! আমাদের অ্যাভোকাডো ছবিগুলিকে "অ্যাভোকাডো-দেবস" বর্গ নির্ধারণ করা হয়েছে। আমরা এখন CSS ক্লাস সিলেক্টর ব্যবহার করতে পারি যা একটি সাধারণ ডট (.) দ্বারা প্রতিনিধিত্ব করা হয়। চলুন এগিয়ে যাই এবং আমাদের অ্যাভোকাডো ডেভসে CSS ফিল্টার প্রপার্টি যোগ করি। আমরা মনে করি তারা গভীর রাতে কাজ করছে তাই আসুন তাদের রং 100 শতাংশ উল্টে ফেলি।

.avocado-devs {
  filter: invert(100)
}

ক্লাসের সাহায্যে আমরা মূলত গ্রুপ তৈরি করি এবং তারপরে CSS ক্লাস সিলেক্টরের সাহায্যে আমরা উপাদানগুলির গ্রুপে যেভাবে চাই স্টাইল প্রয়োগ করতে পারি।

শ্রেণী নির্বাচকদের সাথে জেনেরিক ট্যাগ নির্বাচক ব্যবহার করা

আমরা প্রায়ই দেখি যে CSS এর সাথে ক্লাস নির্বাচন করার সময় ডট সিলেক্টরের সাথে জেনেরিক ট্যাগ নির্বাচক ব্যবহার করা ভাল। কেন? কারণ আরো নির্দিষ্ট আমরা আমাদের নির্বাচকদের সাথে আছি, আমাদের CSS আরো ভালোভাবে প্রয়োগ করবে।

CSS এর সাথে, আমরা জেনেরিক ট্যাগ নির্বাচকদের ব্যবহার করি ট্যাগ নামের দ্বারা তাদের উল্লেখ করে। সুতরাং উদাহরণস্বরূপ এই সমস্ত বৈধ ট্যাগ নির্বাচক:

/* H1 */ 
h1{}
/* Paragraphs */ 
p{ }

তাই আমরা img অন্তর্ভুক্ত করে আমাদের ছবি নির্বাচককে রিফ্যাক্টর করতে পারি জেনেরিক ট্যাগ:

img.avocado-devs {
  filter: invert(100)
}

কার্যকারিতা পরিবর্তিত হয়নি, কিন্তু আপনার কোড বাড়ার সাথে সাথে এই নির্দিষ্টতা গুরুত্বপূর্ণ। এটি আপনার কোডকে আরও পঠনযোগ্য করে তুলবে। অন্যান্য বিকাশকারীরা দেখতে পাবেন যে অ্যাভোকাডো-ডিভস ক্লাস একটি চিত্রকে বোঝায়।

এটি গুরুত্বপূর্ণ কারণ এখানে আমরা শুধুমাত্র নির্দিষ্ট শ্রেণীর নাম আছে এমন চিত্রগুলিতে ফিল্টার প্রয়োগ করি। যদি আমরা উপযুক্ত শ্রেণী ছাড়া অন্য একটি অ্যাভোকাডো-দেব চিত্র যোগ করি তবে শৈলীটি প্রযোজ্য হবে না। ওয়েব ডেভেলপার হিসেবে এই শর্তসাপেক্ষ আচরণ প্রায়ই আমরা চাই।