CSS বৈশিষ্ট্য

বৈশিষ্ট্যতা কী?

যদি একই উপাদানের জন্য দুটি বা তার থেকেও বেশি সাংঘাতিক CSS নিয়ম থাকে, তবে ব্রাউজার কিছু নিয়ম অনুসরণ করবে যাতে যেটি সবচেয়ে বিশেষ হবে তা নির্ধারণ করে, যার ফলে জয়বান হবে。

বৈশিষ্ট্যতা (specificity) হিসেবে স্কোর/পর্যায় দেখা, যা স্থির করতে পারে যে কোনও শৈলী প্রকল্পনা কোনও উপাদানের ওপর প্রয়োগ করা হবে。

সাধারণ সিলেক্টর (*)-এর বৈশিষ্ট্যতা কম, কিন্তু ID সিলেক্টর উচ্চ বৈশিষ্ট্যতা রয়েছে!

মনযোগ করুন:এই বৈশিষ্ট্যটি হলো CSS নিয়মগুলো কিছু উপাদানের জন্য অবরূপ হওয়ার সাধারণ কারণ, যদিও আপনি মনে করতে পারেন যে এটি যথেষ্ট হবে।

বিশেষত্ব পর্যায়

প্রত্যেক সিলেক্টরকে বিশেষত্ব পর্যায়ের মধ্যে একটি স্থান রয়েছে। নিচের চারটি শ্রেণীটি সিলেক্টরের বিশেষত্ব স্তরকে নির্দিষ্ট করে:

ইনলাইন স্টাইল - ইনলাইন (ইনলাইন) স্টাইল সরাসরি স্টাইল নিয়ন্ত্রণ করা হয়েছে, যেমন <h1 style="color: #ffffff;">。</h1>

ID - ID হল পাতার এলিমেন্টের একক পরিচিতাকারী, যেমন #navbar。

ক্লাস, অ্যাট্রিবিউট এবং প্রোফাইল - এই শ্রেণীটি .classes, [attributes] এবং প্রোফাইলকে অন্তর্ভুক্ত করে, যেমন :hover, :focus ইত্যাদি。

এলিমেন্ট এবং প্রোফাইল - এই শ্রেণীটি এলিমেন্ট নাম এবং প্রোফাইলকে অন্তর্ভুক্ত করে, যেমন h1, div, :before এবং :after。

বিশেষত্ব কিভাবে গণনা করা হয়?

আপনাকে বিশেষত্ব গণনার পদ্ধতিকে মনে রাখুন!

0 থেকে শুরু করে, style অ্যাট্রিবিউটে 1000, প্রত্যেক ID-কে 100, প্রত্যেক অ্যাট্রিবিউট, ক্লাস বা প্রোফাইলে 10, প্রত্যেক এলিমেন্ট নাম বা প্রোফাইলে 1 যোগ করুন。

নিচের তিনটি কোড শব্দক্রম চিন্তার হুকুম করুন:

ইনস্ট্যান্স

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">হেডিং</h1></div>
  • A-এর বিশেষত্ব 1 (একটি এলিমেন্ট)
  • B-এর বিশেষত্ব 101 (একটি ID রেফারেন্স এবং একটি এলিমেন্ট)
  • C-এর বিশেষত্ব 1000 (ইনলাইন স্টাইল)

কারণ 1 < 101 < 1000, তাই তৃতীয় নিয়ম (C) আরও বিশিষ্ট, তাই এটি প্রয়োগ করা হবে。

বিশেষত্ব নিয়ম 1:

বিশেষত্ব একই থাকলে: সর্বশেষ নিয়মটি গুরুত্বপূর্ণ - যদি একই নিয়মটিকে বাহিরী স্টাইলশিপে দুবার লিখা হয়, তবে স্টাইলশিপের শেষভাগের নিয়মটি আরও কার্যকর হবে কারণ এটি আরও কার্যকর হবে:

ইনস্ট্যান্স

h1 {background-color: yellow;}
h1 {background-color: red;}

আপনার নিজেই চেষ্টা করুন

পরবর্তী নিয়মটি সবসময় প্রয়োগ করা হবে。

বিশেষত্ব নিয়ম 2:

ID সিলেক্টরটি অ্যাট্রিবিউট সিলেক্টরের তুলনায় আরও বিশিষ্ট - নিচের তিনটি লাইন দেখুন:

ইনস্ট্যান্স

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

আপনার নিজেই চেষ্টা করুন

প্রথম নিয়মটি অন্য দুটির তুলনায় আরও বিশিষ্ট, তাই এটি প্রয়োগ করা হবে。

বিশেষত্ব নিয়ম 3:

কনটেক্সট সিলেক্টরটি একক এলিমেন্ট সিলেক্টরের তুলনায় আরও বিশিষ্ট - এমনকি এমন ক্ষেত্রে যেখানে ইনলাইন স্টাইলশিপটি আরও কার্যকর হয়:

ইনস্ট্যান্স

বাহিরী CSS ফাইল থেকে এসেছে:

#content h1 {background-color: red;}

এই এইচএমএল ফাইলে:

<style>
#content h1 {
  background-color: yellow;
}
</style>

আপনত্তম নিয়মটি প্রয়োগ করা হবে。

বৈশিষ্ট্য নিয়ম 4:

ক্লাস সিলেক্টর অসীম সংখ্যক ইলেকটর সিলেক্টরকে জিতবে - ক্লাস সিলেক্টর (যেমন .intro হিসেবে h1, p, div ইত্যাদি কেরোন জিতবে):

ইনস্ট্যান্স

.intro {background-color: yellow;}
h1 {background-color: red;}

আপনার নিজেই চেষ্টা করুন

এছাড়াওজেনেরিক সিলেক্টর এবং উত্তরসূরী মানগুলো 0 - * এর বৈশিষ্ট্য, body * এবং এমনকি অন্যান্যও 0 বৈশিষ্ট্যসম্পন্ন