CSS চিহ্নিতকারী গোষ্ঠী

সিলেক্টর গ্রুপিং

যদি আপনি চান h2 এবং প্যারাগ্রাফ এলিমেন্টগুলোকে গ্রে রঙের করে দেওয়া হোক, তাহলে এই লক্ষ্যপূরণের সবচেয়ে সহজ পদ্ধতি হলো নিচের ঘোষণা ব্যবহার করা:

h2, p {color:gray;}

h2 এবং p সিলেক্টরকে নিয়ে একটি রুলের ডানদিকে রাখুন, তারপর কমা দিয়ে বিভক্ত করুন, তাহলে একটি রুল নির্ধারিত হয়। এর ডানদিকের স্টাইল (color:gray;) এই দুটি সিলেক্টরকে উল্লেখকৃত এলিমেন্টগুলোতে লাগানো হবে। কমা ব্রাউজারকে বলে, রুলে দুটি ভিন্ন সিলেক্টর রয়েছে। এই কমা ছাড়াই, রুলের অর্থ সম্পূর্ণরূপে ভিন্ন হবে। দেখুন ডেস্কেন্ডেন্ট সিলেক্টর।

কোনও সীমানা ছাড়াই কোনও সাইলারের সমূহকে গ্রুপিং করা যায়।

যদি আপনি অনেক এলমেন্টকে গ্রেই হিসাবে দেখতে চান, তবে এমন একটি নিয়ম ব্যবহার করতে পারেন:

body, h2, p, table, th, td, pre, strong, em {color:gray;}

সুঝানা:গ্রুপিং করে, রচয়তা কিছু ধরনের স্টাইল "সংকুচিত" করতে পারে, যাতে সবচেয়ে সাধারণ স্টাইলশীট পাওয়া যায়。

নিম্নলিখিত দুটি নিয়ম একই ফলাফল প্রদান করতে পারে, কিন্তু লেখা হওয়ার কল্পে কিনা সহজ বোঝা যায়:

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

আপনার হাতে পরীক্ষা করুন

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

/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

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

লক্ষ্য করুন, group 3-এ 'ঘোষণা গ্রুপ' ব্যবহৃত হয়েছে। পরের একটি সময়ে 'ঘোষণা গ্রুপ' ব্যাপারে আমরা আপনাকে বোঝাব।

সাধারণ চিহ্নিতকারী

CSS2-এ একটি নতুন সরল চিহ্নিতকারী - সাধারণ চিহ্নিতকারী (universal selector) - একটি স্টার (একমাত্র *) হিসাবে দেখা যায়। এই চিহ্নিতকারী কোনও ইলেকমেন্টের সাথে মিলতে পারে, যেমন একটি সাধারণ চিহ্নিতকারী।

উদাহরণস্বরূপ, নিচের নিয়মটি ডকুমেন্টের সমস্ত ইলেকমেন্টকে লাল হিসাবে করবে:

* {color:red;}

আপনার হাতে পরীক্ষা করুন

এই ঘোষণা সমস্ত ডকুমেন্টের ইলেকমেন্টগুলির একটি গ্রুপ চিহ্নিতকারীর সমতুল্য। সাধারণ চিহ্নিতকারী ব্যবহার করে, একটি স্টার (একমাত্র * একটি) দ্বারা ডকুমেন্টের সমস্ত ইলেকমেন্টের color অ্যাট্রিবিউটের মান red হিসাবে নির্দিষ্ট করা যাবে।

ঘোষণা গ্রুপ

আমরা একইভাবে চিহ্নিতকারীকেও এবং ঘোষণা গ্রুপকেও একসাথে রাখতে পারি।

যদি আপনারা সমস্ত h1 ইলেকমেন্টগুলিকে লাল পটভূমি এবং 28 পিক্সেল উচ্চতার Verdana ফন্টে নীল লিখা হওয়ার ইচ্ছা করেন, তবে নিচের স্টাইলশিপটি লিখতে হবে:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

কিন্তু এইভাবের পদ্ধতির দক্ষতা খুবই কম। বিশেষ করে, যখন একটি বহুবিধ স্টাইলশিপটি থাকে, তখন এটি খুবই সমস্যাজনক হতে পারে। পক্ষে, আমরা ঘোষণা গ্রুপগুলি একসাথে রাখতে পারি:

h1 {font: 28px Verdana; color: white; background: black;}

এটি আগের 3 লাইন স্টাইলশিপটির সাথে একই প্রভাব প্রদর্শন করে।

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

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

আপনার হাতে পরীক্ষা করুন

কি, উপরোক্ত লেখার পদ্ধতির পঢ়ার মান বেশি কিনা?

কিন্তু, যদি দ্বিতীয়টি সমস্তা উপেক্ষা করা হয়, তবে ইউজার এজেন্ট এই স্টাইলশিপটিকে এভাবে বোঝবে:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

আপনার হাতে পরীক্ষা করুন

কারণ background color-কে একটি বৈধ মান হিসাবে মনে করা হয়না, এবং color-কে একটি কীবর্ড মাত্র নির্দিষ্ট করা যায়, তাই ইউজার এজেন্ট এই color ঘোষণা (যেমন background: black) সম্পূর্ণভাবে অবগত হবেনা। এইভাবে h1 শিরোনামটি শুধুমাত্র নীল রঙে দেখা যাবে, কিন্তু লাল পটভূমি থাকবেনা, কিন্তু আপনারা লাল রঙের h1 পাবেনা। পক্ষে, এই শিরোনামগুলি সাধারণ রঙে (সাধারণত কালো) দেখা যাবে, এবং কোনও পটভূমি রঙও থাকবেনা। font: 28px Verdana ঘোষণা সর্বদা সঠিকভাবে কাজ করবে, কারণ এটি একটি সমস্তা দ্বারা সমাপ্ত হয়।

চিহ্নিতকারী গোষ্ঠীর মতো, ঘোষণা গোষ্ঠীও একটি সুবিধাজনক পদ্ধতি, যা শৈলীসূচীকে সহজ ও সহজলভ্য করে, এবং তা সহজলভ্য ও পরিচ্ছন্ন রাখে।

সুঝানা:একটি নিয়মের শেষ ঘোষণার পরেও একটি সমাপ্তি সঙ্কেত যোগ করা একটি ভালো অভ্যাস

চিহ্নিতকারী ও ঘোষণা গোষ্ঠীর মিশ্রণ

আমরা একটি নিয়মের মধ্যে চিহ্নিতকারী গোষ্ঠী ও ঘোষণা গোষ্ঠী মিশ্রণ করতে পারি, তারপর কম বাক্যগুলিতে অতি জটিল শৈলী নির্ধারণ করতে পারি。

এই নিয়মটি সমস্ত শিরোনামগুলির একটি জটিল শৈলীকে নির্ধারণ করে:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

আপনার হাতে পরীক্ষা করুন

এই নিয়মটি সমস্ত শিরোনামগুলির শৈলীকে শ্বেত পটভূমির হলুদ লেখা হিসাবে নির্ধারণ করে, যার অভ্যন্তরীণ মাঝামাঝি 10 পিক্সেল, 1 পিক্সেল ঘন কিনারা এবং লেখার ফন্ট হলো Verdana。