সিএসএস পডকাস্ট - 005: উত্তরাধিকার
বলুন আপনি উপাদানগুলিকে একটি বোতামের মতো দেখতে কিছু সিএসএস লিখেছেন।
<a href="http://example.com" class="my-button">I am a button link</a>
.my-button {
display: inline-block;
padding: 1rem 2rem;
text-decoration: none;
background: pink;
font: inherit;
text-align: center;
}
তারপর আপনি বিষয়বস্তুর একটি নিবন্ধে একটি লিঙ্ক উপাদান যোগ করুন, যার একটি class
মান .my-button
। তবে একটি সমস্যা আছে, টেক্সটটি সেই রঙের নয় যা আপনি আশা করেছিলেন। এটা কিভাবে ঘটল?
কিছু CSS বৈশিষ্ট্য উত্তরাধিকারসূত্রে পাওয়া যায় যদি আপনি তাদের জন্য একটি মান নির্দিষ্ট না করেন। এই বোতামের ক্ষেত্রে, এটি এই CSS থেকে color
উত্তরাধিকার সূত্রে পেয়েছে :
article a {
color: maroon;
}
এই পাঠে আপনি শিখবেন কেন এটি ঘটে এবং কীভাবে উত্তরাধিকার একটি শক্তিশালী বৈশিষ্ট্য যা আপনাকে কম CSS লিখতে সহায়তা করে।
উত্তরাধিকার প্রবাহ
আসুন HTML এর এই স্নিপেটটি ব্যবহার করে কীভাবে উত্তরাধিকার কাজ করে তা একবার দেখে নেওয়া যাক:
<html>
<body>
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
</html>
মূল উপাদান ( <html>
) কোন কিছুর উত্তরাধিকারী হবে না কারণ এটি নথির প্রথম উপাদান। এইচটিএমএল এলিমেন্টে কিছু CSS যোগ করুন এবং এটি ডকুমেন্টকে ক্যাসকেড করতে শুরু করে।
html {
color: lightslategray;
}
color
বৈশিষ্ট্য অন্যান্য উপাদান দ্বারা ডিফল্টভাবে উত্তরাধিকারসূত্রে পাওয়া যায়। html
উপাদানটির color: lightslategray
, তাই রঙের উত্তরাধিকারী হতে পারে এমন সমস্ত উপাদানের এখন lightslategray
রঙ থাকবে।
body {
font-size: 1.2em;
}
p {
font-style: italic;
}
শুধুমাত্র <p>
এ ইটালিক টেক্সট থাকবে কারণ এটি গভীরতম নেস্টেড উপাদান। উত্তরাধিকার শুধুমাত্র নীচের দিকে প্রবাহিত হয়, মূল উপাদানগুলিতে ব্যাক আপ নয়।
কোন বৈশিষ্ট্য ডিফল্টভাবে উত্তরাধিকারসূত্রে প্রাপ্ত হয়?
সমস্ত সিএসএস বৈশিষ্ট্য ডিফল্টরূপে উত্তরাধিকারসূত্রে পাওয়া যায় না, তবে অনেকগুলি রয়েছে। রেফারেন্সের জন্য, এখানে সমস্ত সিএসএস বৈশিষ্ট্যের W3 রেফারেন্স থেকে নেওয়া ডিফল্টরূপে উত্তরাধিকারসূত্রে প্রাপ্ত বৈশিষ্ট্যগুলির সম্পূর্ণ তালিকা রয়েছে:
- আজিমুথ
- সীমান্ত-পতন
- বর্ডার-স্পেসিং
- ক্যাপশন-সাইড
- রঙ
- কার্সার
- দিক
- খালি কোষ
- ফন্ট-পরিবার
- ফন্ট সাইজ
- ফন্ট-স্টাইল
- ফন্ট-ভেরিয়েন্ট
- হরফ-ওজন
- ফন্ট
- অক্ষর-ব্যবধান
- লাইন-উচ্চতা
- তালিকা-শৈলী-চিত্র
- তালিকা-শৈলী-অবস্থান
- তালিকা-শৈলী-প্রকার
- তালিকা-শৈলী
- অনাথ
- উদ্ধৃতি
- পাঠ্য-সারিবদ্ধ
- টেক্সট-ইন্ডেন্ট
- পাঠ্য-রূপান্তর
- দৃশ্যমানতা
- সাদা স্থান
- বিধবা
- শব্দ ব্যবধান
উত্তরাধিকার কিভাবে কাজ করে
প্রতিটি এইচটিএমএল উপাদানের প্রতিটি সিএসএস প্রপার্টি একটি প্রাথমিক মান সহ ডিফল্টরূপে সংজ্ঞায়িত থাকে। একটি প্রাথমিক মান হল একটি সম্পত্তি যা উত্তরাধিকারসূত্রে পাওয়া যায় না এবং ক্যাসকেড সেই উপাদানটির জন্য একটি মান গণনা করতে ব্যর্থ হলে ডিফল্ট হিসাবে দেখায়৷
যে বৈশিষ্ট্যগুলি উত্তরাধিকারসূত্রে নীচের দিকে ক্যাসকেড হতে পারে এবং শিশু উপাদানগুলি একটি গণনা করা মান পাবে যা তার পিতামাতার মানকে উপস্থাপন করে৷ এর মানে হল যে যদি একজন অভিভাবকের font-weight
bold
জন্য সেট করা থাকে তবে সমস্ত চাইল্ড এলিমেন্ট বোল্ড হবে, যদি না তাদের font-weight
একটি ভিন্ন মান সেট করা হয়, অথবা ব্যবহারকারী এজেন্ট স্টাইলশীটে সেই উপাদানের জন্য font-weight
একটি মান থাকে।
কিভাবে সুস্পষ্টভাবে উত্তরাধিকারী এবং উত্তরাধিকার নিয়ন্ত্রণ করতে হয়
উত্তরাধিকার উপাদানগুলিকে অপ্রত্যাশিত উপায়ে প্রভাবিত করতে পারে তাই CSS-এর কাছে এটির সাথে সাহায্য করার জন্য সরঞ্জাম রয়েছে।
inherit
কীওয়ার্ড
আপনি inherit
কীওয়ার্ড দিয়ে যে কোনো সম্পত্তিকে তার পিতামাতার গণনাকৃত মান উত্তরাধিকারী করতে পারেন। এই কীওয়ার্ড ব্যবহার করার একটি দরকারী উপায় হল ব্যতিক্রম তৈরি করা।
strong {
font-weight: 900;
}
এই CSS স্নিপেটটি ডিফল্ট bold
মানের পরিবর্তে 900
এর font-weight
সমস্ত <strong>
উপাদান সেট করে, যা font-weight: 700
এর সমতুল্য হবে।
.my-component {
font-weight: 500;
}
.my-component
ক্লাস এর পরিবর্তে font-weight
500
সেট করে। .my-component
ভিতরে <strong>
উপাদানগুলি তৈরি করতে font-weight: 500
যোগ করুন:
.my-component strong {
font-weight: inherit;
}
এখন, .my-component
ভিতরের <strong>
উপাদানগুলির font-weight
500
হবে।
আপনি স্পষ্টভাবে এই মানটি সেট করতে পারেন, কিন্তু আপনি যদি ভবিষ্যতে .my-component
পরিবর্তনের inherit
এবং CSS ব্যবহার করেন, আপনি গ্যারান্টি দিতে পারেন যে আপনার <strong>
স্বয়ংক্রিয়ভাবে এটির সাথে আপ টু ডেট থাকবে।
initial
কীওয়ার্ড
উত্তরাধিকার আপনার উপাদানগুলির সাথে সমস্যা সৃষ্টি করতে পারে এবং initial
আপনাকে একটি শক্তিশালী রিসেট বিকল্প প্রদান করে।
আপনি আগে শিখেছেন যে প্রতিটি সম্পত্তি CSS-এ একটি ডিফল্ট মান আছে। initial
কীওয়ার্ডটি সেই প্রারম্ভিক, ডিফল্ট মানটিতে একটি সম্পত্তি সেট করে।
aside strong {
font-weight: initial;
}
এই স্নিপেটটি একটি <aside>
উপাদানের ভিতরে সমস্ত <strong>
উপাদান থেকে বোল্ড ওজন সরিয়ে দেবে এবং পরিবর্তে, তাদের স্বাভাবিক ওজন তৈরি করবে, যা প্রাথমিক মান।
unset
কীওয়ার্ড
কোনো সম্পত্তি ডিফল্টভাবে উত্তরাধিকার সূত্রে প্রাপ্ত হলে বা না থাকলে unset
প্রপার্টি ভিন্নভাবে আচরণ করে। যদি একটি সম্পত্তি ডিফল্টভাবে উত্তরাধিকারসূত্রে পাওয়া যায়, তাহলে unset
কীওয়ার্ডটি inherit
এর মতোই হবে। যদি সম্পত্তিটি ডিফল্টরূপে উত্তরাধিকারসূত্রে পাওয়া না হয়, তাহলে unset
কীওয়ার্ডটি initial
সমান।
ডিফল্টভাবে কোন সিএসএস বৈশিষ্ট্য উত্তরাধিকারসূত্রে পাওয়া যায় তা মনে রাখা কঠিন হতে পারে, unset
সেই প্রসঙ্গে সহায়ক হতে পারে। উদাহরণস্বরূপ, color
ডিফল্টরূপে উত্তরাধিকারসূত্রে পাওয়া যায়, কিন্তু margin
নয়, তাই আপনি এটি লিখতে পারেন:
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
}
/* The p needs to be reset in asides, so you can use unset */
aside p {
margin: unset;
color: unset;
}
এখন, margin
সরানো হয়েছে এবং color
উত্তরাধিকার সূত্রে প্রাপ্ত গণনাকৃত মান হিসাবে ফিরে আসে।
আপনি all
সম্পত্তির সাথেও unset
মান ব্যবহার করতে পারেন। উপরের উদাহরণে ফিরে যাওয়া, গ্লোবাল p
স্টাইলগুলি অতিরিক্ত কয়েকটি বৈশিষ্ট্য পেলে কী হবে? শুধুমাত্র margin
এবং color
জন্য যে নিয়ম সেট করা হয়েছিল তা প্রযোজ্য হবে।
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
padding: 2em;
border: 1px solid;
}
/* Not all properties are accounted for anymore */
aside p {
margin: unset;
color: unset;
}
আপনি যদি aside p
নিয়মটি all: unset
, ভবিষ্যতে p
এ কোন গ্লোবাল স্টাইল প্রয়োগ করা হয় তাতে কিছু যায় আসে না, সেগুলি সর্বদা আনসেট থাকবে।
aside p {
margin: unset;
color: unset;
all: unset;
}
আপনার উপলব্ধি পরীক্ষা করুন
উত্তরাধিকার সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন
নিম্নলিখিত বৈশিষ্ট্যগুলির মধ্যে কোনটি উত্তরাধিকারসূত্রে পাওয়া যায়?
animation
line-height
font-size
color
text-align
কোন মান inherit
হিসাবে আচরণ করে যদি না উত্তরাধিকারী হওয়ার মতো কিছু না থাকে এবং তারপর initial
মতো আচরণ করে?
reset
unset
superset