CSS অতিমৌলিক গঠনশৈলী

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

আপনি সিলেক্টরকে গ্রুপ করতে পারেন, তারপর এই গ্রুপকৃত সিলেক্টরগুলি একই ঘোষণা ভাগ করতে পারে। যেমন, সিলেক্টরকে কমা দিয়ে গ্রুপ করা হয়। নিচের উদাহরণে, আমরা সকল টাইটেল এলিমেন্টকে গ্রুপ করেছি। সকল টাইটেল এলিমেন্টগুলি হলো সবুজ。

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

উত্তরাধিকার এবং সমস্যা

CSS অনুযায়ী, সাব-এলিমেন্টগুলি পিতা-এলিমেন্ট থেকে বৈশিষ্ট্যগুলি উত্তরাধিকার করবে। কিন্তু এটি সবসময়ই এইভাবে কাজ করে না। দেখুন নিচের এই নিয়মটি:

body {
     font-family: Verdana, sans-serif;
     }

এই নিয়ম অনুযায়ী, সাইটের body এলিমেন্টটি Verdana ফন্ট ব্যবহার করবে (যদি ব্রাউজারের সিস্টেমে এই ফন্ট হয়)。

CSS ইনহারিটরের মাধ্যমে, সাব-এলিমেন্টগুলি (যেমন p, td, ul, ol, ul, li, dl, dt, এবং dd) শীর্ষস্থানীয় এলিমেন্ট (এই ক্ষেত্রে body) দ্বারা অধিকার প্রাপ্ত বৈশিষ্ট্যগুলি উত্তরাধিকার করবে। আর্থোগ্রাফ আরো করতে প্রয়োজন নেই, সকল body সাব-এলিমেন্টকে Verdana ফন্ট দেখাতে হবে, এবং সাব-সাব-এলিমেন্টও একইভাবে। এবং বেশিরভাগ আধুনিক ব্রাউজারগুলিতেও এটি সত্য হয়。

কিন্তু সেই ব্রাউজার যুদ্ধের রক্তকাটন সময়ে, এই ধরনের বিষয়টি হয়তো ঘটবে না, সেসময় প্রমাণপত্রের সমর্থন কোম্পানিগুলির অগ্রাধিকার না হলো। যেমন, Netscape 4 ইনহারিট অনুধাবন করতে পারে না, তা ইনহারিটকেও বাদ দিয়েছে এবং body মেটার অ্যাপ্লাইড রুলকেও বাদ দিয়েছে। IE/Windows পর্যন্ত IE6 পর্যন্তও এই সমস্যা বসবাস করছিল, টেবিলের ফন্ট সাইজকে অবহেলা করা হত। আমরা কী করবো?

অনুকূল করে Netscape 4

ভাগ্যবান হওয়ার কারণে, আপনি আমরা বলাই "Be Kind to Netscape 4" নামক পুনরাবৃত্তির নিয়ম ব্যবহার করে পুরনো ব্রাউজারগুলির যেগুলি ইনহারিট অনুধাবন করতে পারে না এমন সমস্যা সমাধান করতে পারেন。

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

4.0 ব্রাউজারগুলি উত্তরণকে বুঝতে পারে না, কিন্তু তারা গোষ্ঠী বাছাইকারীকে বুঝতে পারে। এইভাবে করলে কোনও ব্যবহারকারীর ব্যান্ডওয়াইড ব্যান্ডওয়াইড হার্ডওয়ার্ড ব্যয় হবে, কিন্তু নেটস্কেপ 4 ব্যবহারকারীদের জন্য সমর্থন করতে হলে, এইভাবে করতে হবে。

উত্তরণ একটি নিন্দা কিনা?

আপনি যদি না চান "Verdana, sans-serif" ফন্টটি সমস্ত সাবসংশ্লিষ্ট উপ-তত্ত্বগুলিকে উত্তরণ করা, তবে কী করবেন? যেমন, আপনি প্যারাগ্রাফের ফন্টটি Times হতে চান। কোনও সমস্যা নেই। p-র জন্য একটি বিশেষ নিয়ম তৈরি করুন, তারপর তা অভিভাবক তত্ত্বটি ছেড়ে যাবে:

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }