ওয়েব ডকুমেন্টগুলিতে কিভাবে CSS উত্তরাধিকারটি কাজ করে?

সিএসএস সহ একটি ওয়েবসাইট স্টাইল করার একটি গুরুত্বপূর্ণ অংশ উত্তরাধিকারের ধারণা বুঝতে পেরেছে

সিএসএস উত্তরাধিকার স্বয়ংক্রিয়ভাবে ব্যবহৃত সম্পত্তির শৈলী দ্বারা সংজ্ঞায়িত করা হয়। আপনি শৈলী সম্পত্তি পটভূমি-রং সন্ধান যখন, আপনি "inheritance" নামক একটি বিভাগ দেখতে পাবেন। আপনি যদি বেশিরভাগ ওয়েব ডিজাইনারের মতো হন তবে আপনি সেই বিভাগটি উপেক্ষা করেছেন, কিন্তু এটি একটি উদ্দেশ্য সাধন করে।

সিএসএস উত্তরাধিকার কি?

একটি এইচটিএমএল ডকুমেন্টের প্রতিটি এলিমেন্ট একটি বৃক্ষের অংশ এবং প্রাথমিক এলিমেন্টের মৌলিক উপাদান রয়েছে যা এটিকে সংযুক্ত করে। যে প্যারামিটার উপাদান প্রয়োগ করা হয় সেগুলি প্রয়োগ করা যেতে পারে এমন উপাদানগুলিতে প্রয়োগ করা যেতে পারে যদি সম্পত্তিগুলি উত্তরাধিকারসূত্রে প্রাপ্ত করা হয়।

উদাহরণস্বরূপ, নীচে এই HTML কোড একটি EM ট্যাগ enclosing একটি H1 ট্যাগ আছে:

এটি একটি বড় শিরোনাম

EM উপাদান H1 উপাদান একটি শিশু, এবং উত্তরাধিকারসূত্রে যে H1 যে কোন শৈলী পাশাপাশি EM টেক্সট পাশ করা হবে উদাহরণ স্বরূপ:

h1 {font-size: 2em; }

যেহেতু ফন্ট-আকারের সম্পত্তি উত্তরাধিকারসূত্রে প্রাপ্ত হয়, সেটি "বিগ" (যা ইএম ট্যাগের ভিতরটি ঘিরে থাকে) বলে যে লেখাটি বাকি H1- এর মতো একই আকার হবে। এটি হল কারণ এটি CSS বৈশিষ্ট্যের মান সেট বহন করে।

কিভাবে সিএসএস উত্তরাধিকার ব্যবহার করবেন

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

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

শরীর {ফন্ট-পরিবার: অ্যারেল, সান-সেরিফ; }

Inherit Style Value ব্যবহার করুন

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

শরীর {মার্জিন: 1em; } পি {মার্জিন: উত্তরাধিকারী; }

উত্তরাধিকার গণনা করা ব্যবহার করে

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

যদি আপনি আপনার BODY উপাদানতে 1 ইঞ্চি ফন্ট-আকার সেট করেন, তবে আপনার পুরো পৃষ্ঠাটি সাইজে শুধুমাত্র 1em হবে না। এটি কারণ শিরোনাম (H1-H6) এবং অন্যান্য উপাদানের মতো উপাদানের (কিছু ব্রাউজারগুলি টেবিলের বিভিন্ন বৈশিষ্ট্যগুলি গণনা করে) ওয়েব ব্রাউজারে একটি আপেক্ষিক আকার আছে। অন্যান্য ফন্ট সাইজ তথ্য অনুপস্থিতিতে, ওয়েব ব্রাউজার সবসময় H1 শিরোনামটি পৃষ্ঠার বৃহত্তম পাঠ্য তৈরি করবে, এর পরে H2 এবং আরও যখন আপনি একটি নির্দিষ্ট ফন্টের আকারে আপনার BODY উপাদান সেট করেন, তখন এটি "গড়" ফন্টের আকার হিসাবে ব্যবহৃত হয় এবং শিরোনাম উপাদানগুলিকে থেকে গণনা করা হয়।

উত্তরাধিকার এবং ব্যাকগ্রাউন্ড প্রোপার্টি সম্পর্কে একটি নোট

তালিকাভুক্ত এমন অনেকগুলি শৈলী রয়েছে যা W3C তে CSS 2 এ উত্তরাধিকারসূত্রে পাওয়া যায় না, তবে ওয়েব ব্রাউজারগুলি এখনও মানগুলি উত্তরাধিকার লাভ করে। উদাহরণস্বরূপ, যদি আপনি নিম্নলিখিত HTML এবং CSS লিখেছেন:

<শৈলী টাইপ = "পাঠ্য / CSS"> h1 {ব্যাকগ্রাউন্ড-রঙ: হলুদ; }

এটি একটি বড় শিরোনাম

"বিগ" শব্দটি এখনও একটি হলুদ ব্যাকগ্রাউন্ড থাকবে, যদিও ব্যাকগ্রাউন্ড-রঙের সম্পত্তি উত্তরাধিকারসূত্রে পাওয়া যাবে না। এটি কারণ একটি ব্যাকগ্রাউন্ড সম্পত্তি প্রাথমিক মান "স্বচ্ছ"। তাই আপনি এ ব্যাকগ্রাউন্ড কাল দেখেন না বরং বরং

পিতা বা মাতা থেকে যে রঙটি উজ্জ্বল হয়।