CSS কভার ভেরিয়েবল
- পূর্ববর্তী পৃষ্ঠা CSS ভেরিয়েবল
- পরবর্তী পৃষ্ঠা CSS ভেরিয়েবল - JavaScript
স্থানীয় ভেক্টরের সার্বজনীন ভেক্টরকে অবরূপ করা
পূর্বপৃষ্ঠ থেকে আমরা জানতে পাই যে, সার্বজনীন ভেক্টরকে সমগ্র ডকুমেন্টে প্রবেশ/ব্যবহার করা যায়, কিন্তু স্থানীয় ভেক্টরটি শুধুমাত্র ঘোষণা করা সিলেক্টরের ভিতরেই ব্যবহার করা যায়。
দেখুন পূর্বপৃষ্ঠের উদাহরণ:
প্রকল্প
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
ব্যাকগ্রাউন্ড-কালার: ভেরিয়েবল(--white);
প্যাডিং: 15px;
}
button {
ব্যাকগ্রাউন্ড-কালার: ভেরিয়েবল(--white);
color: var(--blue);
border: 1px solid var(--blue);
প্যাডিং: 5px;
}
কখনও কখনও, আমরা ইচ্ছে করি যে ভেক্টরটি শুধুমাত্র পাতার নির্দিষ্ট অংশেই পরিবর্তিত হোক。
যদি আমরা বাটন ইলেমেন্টের জন্য ভিন্ন নীল রঙ ব্যবহার করতে চাই, তবে আমরা button সিলেক্টরের ভিতরে --blue ভেক্টরকে পুনরায় ঘোষণা করতে পারি।আমরা এই সিলেক্টরে var(--blue) ব্যবহার করতে পারি যখন, তখন এটি এই ঘোষণা করা স্থানীয় --blue ভেক্টরকে ব্যবহার করবে。
আমরা দেখতে পাই স্থানীয় --blue ভেক্টর বাটন ইলেমেন্টের সার্বজনীন --blue ভেক্টরকে অবরূপ করেছে:
প্রকল্প
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
ব্যাকগ্রাউন্ড-কালার: ভেরিয়েবল(--white);
প্যাডিং: 15px;
}
button {
--blue: #0000ff;
ব্যাকগ্রাউন্ড-কালার: ভেরিয়েবল(--white);
color: var(--blue);
border: 1px solid var(--blue);
প্যাডিং: 5px;
}
নতুন স্থানীয় ভেক্টর যোগ করুন
যদি একটি স্থানেই একটি ভেক্টর ব্যবহার করা হয়, তবে আমরা একটি নতুন স্থানীয় ভেক্টর ঘোষণা করতেও পারি, যেমন এই ভাবে:
প্রকল্প
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
ব্যাকগ্রাউন্ড-কালার: ভেরিয়েবল(--white);
প্যাডিং: 15px;
}
button {
--button-blue: #0000ff;
ব্যাকগ্রাউন্ড-কালার: ভেরিয়েবল(--white);
রঙ: ভেরিয়েবল(--button-blue);
বর্তন: 1px সলিড ভেরিয়েবল(--button-blue);
প্যাডিং: 5px;
}
ব্রাউজার সমর্থন
টেবিলের সংখ্যা এই এট্রিবিউটটির পূর্ণ সমর্থনকারী প্রথম ব্রাউজার সংস্করণকে উল্লেখ করে।
| ফাংশন | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() ফাংশন
| ফাংশন | বর্ণনা |
|---|---|
| var() | CSS ভেরিয়েবলের মান প্রবর্তন করুন。 |
- পূর্ববর্তী পৃষ্ঠা CSS ভেরিয়েবল
- পরবর্তী পৃষ্ঠা CSS ভেরিয়েবল - JavaScript
