CSS-এ উত্তরাধিকার
এই নিবন্ধটি CSS-এ ইনহেরিটেন্স ব্যাখ্যা করে।
আপনি ইনহেরিটেড এবং নন-ইনহেরিটেড প্রোপার্টিগুলির প্রতিনিধিত্ব দেখতে পারেন।
YouTube Video
প্রিভিউর জন্য HTML
css-inheritance.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Inheritance</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-inheritance.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Inheritance</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Inheritance</h2></header>
19 <article>
20 <h3>Example of Inheritance</h3>
21 <section>
22 <p>
23 Example of P Element.<br>
24 <span>Example of Span Element</span>
25 </p>
26 </section>
27 <div>
28 Example of Div Element
29 </div>
30 <ul>
31 <li>List Item 1</li>
32 <li>List Item 2</li>
33 <li>List Item 3</li>
34 </ul>
35 </article>
36 <article>
37 <h3>all</h3>
38 <section>
39 <h4>Initial</h4>
40 <div class="all-initial">This is an initial element</div>
41 </section>
42 <section>
43 <h4>Inherit</h4>
44 <div class="parent-inherit">
45 <div class="all-inherit">This is an inherited element</div>
46 </div>
47 </section>
48 <section>
49 <h4>Unset All</h4>
50 <div class="parent-unset">
51 <div class="all-unset">This is an unset element</div>
52 </div>
53 </section>
54 <section>
55 <h4>all and !important</h4>
56 <div class="important-style">
57 <div class="all-with-important">
58 This is an initial element with !important
59 </div>
60 </div>
61 </section>
62 </article>
63 </main>
64</body>
65</html>CSS-এ উত্তরাধিকার
CSS-এ, কিছু বৈশিষ্ট্য স্বয়ংক্রিয়ভাবে প্যারেন্ট এলিমেন্ট থেকে চাইল্ড এলিমেন্টে উত্তরাধিকার হয়। এটি একটি উপকারী প্রক্রিয়া কারণ আপনি একটি নির্দিষ্ট বৈশিষ্ট্য সেট করলে চাইল্ড এলিমেন্টগুলিও একই স্টাইল পাবে, যা বারবার সেট করার প্রয়োজন দূর করে। তবে, সব বৈশিষ্ট্য উত্তরাধিকার হয় না; কিছু বৈশিষ্ট্য উত্তরাধিকার হয় কিন্তু অন্যগুলি নয়। উদাহরণস্বরূপ, color এবং font-family উত্তরাধিকার হয়, কিন্তু বক্স মডেল বৈশিষ্ট্য যেমন margin এবং padding উত্তরাধিকার হয় না।
উত্তরাধিকৃত প্রপার্টিজ
উত্তরাধিকারযোগ্য বৈশিষ্ট্যগুলি মূলত পাঠ্য এবং ফন্টের সাথে সম্পর্কিত।
সাধারণভাবে উত্তরাধিকৃত প্রপার্টিজ
color: টেক্সটের রং
1body {
2 color: black;
3}- এই ক্ষেত্রে,
bodyএর ভিতরে সমস্ত চাইল্ড এলিমেন্টের টেক্সট কালার কালো হবে।
font-family: ফন্ট ফ্যামিলি
1body {
2 font-family: "Times New Roman", cursive;
3}- সমস্ত চাইল্ড এলিমেন্ট
Arialফন্ট ব্যবহার করে।
font-size: টেক্সটের আকার
1body {
2 font-size: 16px;
3}bodyএর ভিতরে সব টেক্সট ডিফল্টরূপে16pxহবে।
line-height: লাইনের ফাঁকা জায়গা
1p {
2 line-height: 1.5;
3}<p>এলিমেন্টের ভিতরের টেক্সট 1.5 গুন লাইন উচ্চতা সহ প্রদর্শিত হবে, এটি তার চাইল্ড এলিমেন্টগুলিতেও প্রভাব ফেলবে।
text-align: টেক্সটের সন্নিবেশ
1div {
2 text-align: center;
3}divএলিমেন্টের ভিতরের টেক্সট এবং ইনলাইন এলিমেন্টগুলি কেন্দ্রাভিমুখীভাবে প্রদর্শিত হয়।
visibility: উপাদানের দৃশ্যমানতা
1div {
2 visibility: hidden;
3}visibilityএকটি বৈশিষ্ট্য যা একটি এলিমেন্টের দৃশ্যমানতা নিয়ন্ত্রণ করে। গোপন করা হলে, উপাদানটি অদৃশ্য হয়ে যায়।- এই ক্ষেত্রে,
divএর ভিতরের শিশু উপাদানগুলোও গোপন করা হবে।
list-style: তালিকার স্টাইল (<ul>এবং<ol>এর তালিকা চিহ্ন)
1ul {
2 list-style: square;
3}- এই ক্ষেত্রে, ul ট্যাগের মধ্যে তালিকা আইটেমগুলো বর্গাকার চিহ্ন দিয়ে প্রদর্শিত হবে।
উদাহরণ:
অনা-উত্তরাধিকৃত প্রপার্টিজ
লেআউট এবং বক্স মডেলের সঙ্গে সম্পর্কিত বৈশিষ্ট্যগুলো সাধারণত উত্তরাধিকারযোগ্য নয়। প্রত্যেক উপাদানের জন্য এগুলি আলাদাভাবে সেট করতে হয়।
সাধারণ অ-উত্তরাধিকার প্রোপার্টি
margin,padding: একটি উপাদানের বাহ্যিক এবং অভ্যন্তরীণ মার্জিন
1div {
2 margin: 10px;
3 padding: 20px;
4}- যদি আপনি একটি
divএলিমেন্টের জন্য বাইরের বা ভেতরের মার্জিন সেট করেন, তবুও এটি এর চাইল্ড এলিমেন্টগুলিকে প্রভাবিত করে না।
border: উপাদানের বর্ডার
1div {
2 border: 1px solid black;
3}- যদি কোনো প্যারেন্ট এলিমেন্টে একটি বর্ডার সেট করা থাকে, এটি চাইল্ড এলিমেন্টগুলিকে প্রভাবিত করে না।
width,height: উপাদানের প্রস্থ এবং উচ্চতা
1div {
2 width: 100px;
3 height: 50px;
4}- একটি প্যারেন্ট এলিমেন্টের প্রস্থ এবং উচ্চতা স্বয়ংক্রিয়ভাবে চাইল্ড এলিমেন্টগুলিকে প্রভাবিত করে না।
background: ব্যাকগ্রাউন্ড স্টাইল
1body {
2 background-color: lightblue;
3}body-তে সেট করা পটভূমির রঙ সরাসরি চাইল্ড এলিমেন্টগুলিকে প্রভাবিত করে না। যাইহোক, যদি একটি চাইল্ড এলিমেন্টের পটভূমি স্বচ্ছ হয়, তবে প্যারেন্ট এলিমেন্টের পটভূমি রঙ এটি দিয়ে দৃশ্যমান হতে পারে।
উদাহরণ:
উত্তরাধিকার নিয়ন্ত্রণ
উত্তরাধিকার inherit, initial, বা unset কীওয়ার্ড ব্যবহার করে নিয়ন্ত্রণ করা যায়।
- যদি আপনি ইনহেরিটেন্স সক্রিয় করতে চান: আপনি
inheritকীওয়ার্ড ব্যবহার করে ইনহেরিটেন্স জোরপূর্বক করতে পারেন।
1div {
2 color: inherit; /* Inherit the color from its parent element */
3}- যদি আপনি ইনহেরিটেন্স না চান: আপনি প্রোপার্টিকে এর প্রাথমিক মানে পুনঃস্থাপন করতে
initialবাunsetকীওয়ার্ড ব্যবহার করতে পারেন।
1p {
2 color: initial; /* Reset the color to its initial/default value */
3}উদাহরণ:
all প্রোপার্টি
all প্রোপার্টি এমন একটি প্রোপার্টি যা নির্দিষ্ট একক এলিমেন্টের জন্য প্রায় সমস্ত CSS প্রোপার্টিকে, ইনহেরিটেড প্রোপার্টিসহ, একবারে রিসেট করতে পারে। বিশেষভাবে, আপনি একটি উপাদানের বৈশিষ্ট্য সেট করতে নিম্নলিখিত তিনটি কীওয়ার্ড ব্যবহার করতে পারেন:।
initial: সব প্রোপার্টি তাদের প্রাথমিক মানে পুনঃস্থাপন করে।inherit: প্যারেন্ট এলিমেন্ট থেকে সমস্ত প্রোপার্টি ইনহেরিট করে।unset: প্রোপার্টি ইনহেরিট করার যোগ্য হলে ইনহেরিট করে, অন্যথায় এটি প্রাথমিক মানে পুনঃস্থাপন করে।
all খুবই উপকারী যখন আপনি একাধিক প্রোপার্টিকে একসঙ্গে রিসেট বা সেট করতে চান, নির্দিষ্ট প্রোপার্টি পৃথকভাবে সেট করার পরিবর্তে।
প্রাথমিক মানে রিসেট করার উদাহরণ
1.all-initial {
2 all: initial;
3 background-color: lightskyblue;
4}-
যখন আপনি একটি নির্দিষ্ট এলিমেন্টের জন্য পূর্বে সেট করা সমস্ত স্টাইল রিসেট করে এটি প্রাথমিক অবস্থায় ফেরত আনতে চান, তখন
all: initialএইভাবে ব্যবহার করুন। -
এই উদাহরণে,
.all-initialক্লাস সহ<div>এলিমেন্টের সমস্ত প্রোপার্টি ব্রাউজারের ডিফল্ট প্রাথমিক মানে পুনঃস্থাপন করা হয়েছে।
উত্তরাধিকার উদাহরণ
1.parent-inherit {
2 color: blue;
3 font-size: 20px;
4 border: 1px solid blue;
5}
6
7.all-inherit {
8 all: inherit;
9 background-color: lightskyblue;
10}all: inheritব্যবহারে সমস্ত প্রোপার্টি প্যারেন্ট এলিমেন্ট থেকে ইনহেরিট করে।- এই উদাহরণে,
.all-inheritক্লাস সহ এলিমেন্টগুলি, যেমনcolorএবংfont-size, প্যারেন্ট এলিমেন্ট থেকে সমস্ত প্রোপার্টি ইনহেরিট করে।
শর্তের ভিত্তিতে প্রাথমিক মান বা উত্তরাধিকার নির্ধারণের উদাহরণ
1.parent-unset {
2 color: blue;
3}
4
5.all-unset {
6 font-weight: bold;
7}
8
9.all-unset {
10 all: unset;
11}all: unsetব্যবহার করলে প্রোপার্টিস ইনহেরিট হলে হতে পারে; অন্যথা, সেগুলি প্রাথমিক মানে পুনঃস্থাপন করা হয়।- এই ক্ষেত্রে,
colorইনহেরিট হয়, যখনfont-weightতার প্রাথমিক মান, সাধারণতnormal, এ পুনঃস্থাপন হয়।
নির্দেশকত্বের (প্রাধান্যের) সাথে সম্পর্ক
1.all-with-important {
2 color: red !important;
3 background-color: lightskyblue;
4}
5
6.all-with-important {
7 all: initial;
8}-
allপ্রোপার্টি একটি শক্তিশালী রিসেট মেকানিজম, তবে এটি CSS স্পেসিফিসিটির দ্বারা প্রভাবিত হয়। যদি একটি নির্দিষ্ট এলিমেন্টে শক্তিশালী স্টাইল স্পেসিফিকেশন থাকে, তবেallপ্রোপার্টি সেই স্টাইলগুলিকে ওভাররাইড করতে সক্ষম নাও হতে পারে। উদাহরণস্বরূপ,!importantদিয়ে উল্লেখিত প্রোপার্টিগুলি প্রভাবিত হতে পারে না। -
এই উদাহরণে, আপনি
all: initialদিয়ে স্টাইল রিসেট করার চেষ্টা করলেও,color: red !importantস্পেসিফিকেশনের কারণেcolorপ্রোপার্টি রিসেট হবে না।
ব্লক-স্তরের উপাদান এবং ইনলাইন উপাদান
ব্লক-স্তরের উপাদান
- উদাহরণ:
<div>,<p>,<h1>〜<h6>,<ul>,<li>,<section> - বৈশিষ্ট্যগুলি:
- তারা সর্বদা একটি নতুন লাইনে উপস্থিত হয় এবং তাদের প্যারেন্ট এলিমেন্টের পুরো প্রস্থ পূরণ করতে প্রসারিত হয়।
- প্রস্থ (
width) এবং উচ্চতা (height) মুক্তভাবে নির্ধারণ করা যেতে পারে। - প্রান্তসীমা (
margin) এবং প্যাডিং (padding) সব দিকেই নির্ধারণ করা যেতে পারে এবং এটি সমস্ত পাশকে প্রভাবিত করবে।
1div {
2 width: 80%; /* Set the width to 80% of its parent element's width */
3 padding: 20px; /* Add a padding of 20 pixels on all sides */
4 margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}ইনলাইন উপাদান
- উদাহরণ:
<span>,<a>,<strong>,<em>,<img>,<label> - বৈশিষ্ট্যগুলি:
- এগুলি একই লাইনে অন্যান্য ইনলাইন উপাদানগুলির পাশেই প্রদর্শিত হয়।
- প্রস্থ (
width) এবং উচ্চতা (height) সরাসরি নির্ধারণ করা যায় না (যদি নাdisplay: blockপ্রয়োগ করা হয়)। - প্রান্তসীমা (
margin) বা প্যাডিং (padding) উল্লম্বভাবে নির্ধারণ করলে সীমিত প্রভাব ফেলে (ক্ষেত্রতীরীয় প্রান্তসীমা এবং প্যাডিং কার্যকর হয়)।
1a {
2 padding: 5px; /* Padding for inline elements */
3 margin-right: 10px; /* Set margin to the right */
4 color: blue;
5}ব্লক-স্তরের উপাদান এবং ইনলাইন উপাদানের মধ্যে পার্থক্য
-
প্রস্থ এবং উচ্চতা সেটিংস:
- ব্লক স্তরের উপাদানসমূহ: প্রস্থ এবং উচ্চতা নির্ধারণ করা যায়।
- ইনলাইন উপাদানসমূহ: প্রস্থ এবং উচ্চতা সাধারণত নির্ধারণ করা যায় না।
-
মার্জিন এবং প্যাডিং:
- ব্লক স্তরের উপাদানসমূহ: প্রান্তসীমা এবং প্যাডিং সব পাশে প্রয়োগ করা হয়।
- ইনলাইন উপাদানসমূহ: উপরের এবং নিচের প্রান্তসীমা এবং প্যাডিং অকার্যকর বা সীমিত প্রভাব ফেলে।
-
লেআউট পদ্ধতি:
- ব্লক স্তরের উপাদানসমূহ: স্বয়ংক্রিয়ভাবে একটি নতুন লাইনে স্থাপন করা হয়।
- ইনলাইন উপাদানসমূহ: অন্যান্য ইনলাইন উপাদানগুলির সাথে একই লাইনে সংগতিপূর্ণ থাকে।
আপনি যেমন দেখতে পাচ্ছেন, CSS স্টাইলগুলি ব্লক-লেভেল উপাদান এবং ইনলাইন উপাদানে কিভাবে প্রয়োগ করা হয় তার মধ্যে পার্থক্য রয়েছে। ব্লক-লেভেল উপাদানে, প্রস্থ, উচ্চতা, মার্জিন এবং প্যাডিং এর মত লেআউট-সম্পর্কিত CSS প্রোপার্টিগুলি নির্দিষ্ট হিসাবে প্রয়োগ করা হয়। অন্যদিকে, ইনলাইন উপাদানগুলির ক্ষেত্রে, প্রস্থ, উচ্চতা, প্রান্তসীমা, বা প্যাডিং এর মতো লেআউট সম্পর্কিত CSS বৈশিষ্ট্য নির্ধারণ করলে তা প্রয়োগ নাও হতে পারে অথবা সীমিতভাবে প্রয়োগ হতে পারে।
ব্লক-স্তরের এবং ইনলাইন উপাদানের CSS ব্যবস্থাপনা
1span {
2 display: block; /* Display the span element as a block-level element */
3 width: 100px;
4 height: 50px;
5}তবে, display বৈশিষ্ট্য block বা inline-block এ সেট করে, ইনলাইন উপাদানগুলির জন্য প্রস্থ এবং উচ্চতার মতো শৈলীসমূহ সামঞ্জস্য করা যেতে পারে যেন সেগুলি ব্লক উপাদান।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।