!গুরুত্বপূর্ণ নিয়মটি একটি ওয়েবপৃষ্ঠার স্টাইলিং ওভাররাইড করতে ব্যবহৃত হয়। সমস্ত সততার মধ্যে, আপনার কেন উচিত নয় তার আরও উদাহরণ রয়েছে৷ গুরুত্বপূর্ণ নিয়ম বনাম কেন আপনার উচিত ব্যবহার করুন। আসুন আলোচনা করি কিভাবে এটি ব্যবহার করা হয় এবং তারপর কেন এটি শুধুমাত্র অল্প ব্যবহার করা উচিত।
ইউজার-এজেন্ট স্টাইলশীট ওভাররাইডিং
CSS লেখার সময়, এমন কিছু ক্ষেত্রে থাকবে যেখানে আপনাকে দেওয়া স্টাইলশীটটি ওভাররাইট করতে হবে। বুটস্ট্র্যাপের মতো সিএসএস ফ্রেমওয়ার্ক ব্যবহার করে একটি প্রজেক্ট চালু করা এবং চলমান থাকলে, আপনি ফ্রেমওয়ার্কের মধ্যে তৈরি স্টাইলটি কাস্টমাইজ করতে চাইতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Important Keyword: Overriding Bootstrap</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<style>
.container {
display: flex;
}
.nav {
color: black;
background-color: pink;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</a>
<div
class="dropdown-menu"
aria-labelledby="navbarDropdown"
>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"
>Something else here</a
>
</div>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a
>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button
class="btn btn-outline-success my-2 my-sm-0"
type="submit"
>
Search
</button>
</form>
</div>
</nav>
<div class="container">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>
</body>
</html>
উপরের কোড এডিটরে কী ঘটছে তা বোঝার বিষয়ে খুব বেশি চিন্তা করবেন না। রান বোতাম টিপুন এবং আপনি যে জিনিসগুলি করেন তার স্টক নিন৷ সম্পর্কে জানা. আমাদের কিছু এইচটিএমএল আছে যা দেখে মনে হচ্ছে এতে ক্লাস এবং/অথবা আইডি রয়েছে, একটি CSS স্টাইলশীটের একটি লিঙ্ক যা নির্দেশ করে যে এটি বুটস্ট্র্যাপ থেকে হতে পারে এবং তারপরে <head> -এ আমাদের নিজস্ব কিছু স্টাইলিং রয়েছে। নথির যা সঠিকভাবে রেন্ডার করা হচ্ছে না।
.navbar-এ নির্বাচক, যেখানে এটি background-color: pink; উল্লেখ করে , টাইপ করুন
'!গুরুত্বপূর্ণ'। রঙ এবং !গুরুত্বপূর্ণ নিয়মের মধ্যে একটি স্থান অন্তর্ভুক্ত করুন। কোডটি আবার চালান। এটি নববারের পটভূমির রঙ পরিবর্তন করেছে?
এটি !গুরুত্বপূর্ণ নিয়মের প্রথম ব্যবহারের ক্ষেত্রে। যখন একটি CSS ফ্রেমওয়ার্ক বা অন্য কোথাও ব্যবহারকারী-এজেন্ট স্টাইলশীট দেওয়া হয়, আপনি বুটস্ট্র্যাপের সাথে আসা শৈলীগুলিকে ওভাররাইড করতে নিয়মটি ব্যবহার করতে পারেন।
ইনলাইন-স্টাইল ওভাররাইডিং
আরেকটি ব্যবহারের ক্ষেত্রে আমাদের একটি উপাদানের ইনলাইন শৈলী ওভাররাইড করতে হবে।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Important Keyword: Overriding Inline Styles</title>
<style>
.line-item:first-child{
color: purple;
}
.line-item:last-child {
color: crimson;
font-size: xx-large;
font-variant: normal;
}
</style>
</head>
<body>
<h1>Doctor Who Characters</h1>
<ul>
<li class="line-item" style="color: rosybrown; font-size: large;">Rose Tyler</li>
<li class="line-item">Jackie Tyler</li>
<li class="line-item">Mickey</li>
<li class="line-item" style="color:royalblue; font-size: larger; font-variant:small-caps;">The Doctor</li>
</ul>
</body>
</html>
লক্ষ্য করুন যে কোডের বডিতে আমাদের কিছু ইনলাইন স্টাইল আছে এবং তারপরে <style> এ ওভাররাইড করার জন্য কিছু সম্ভাব্য স্টাইলিং আছে। উপরের কোড এডিটরে ট্যাগ করুন। ইনলাইন শৈলীগুলিকে ওভাররাইড করতে CSS-এ !গুরুত্বপূর্ণ নিয়মটি ব্যবহার করুন৷
অনুগ্রহ করে মনে রাখবেন যে !গুরুত্বপূর্ণ নিয়মটি অগত্যা সর্বোত্তম অনুশীলন নয় এবং তুলনামূলকভাবে কম ব্যবহার করা উচিত৷ রাস্তার নিচে পরে এটি খুঁজে পাওয়া কঠিন বাগগুলির দিকে নিয়ে যাওয়ার সম্ভাবনা রয়েছে৷
আপনি যদি !গুরুত্বপূর্ণ নিয়মটি ব্যবহার করার প্রয়োজন অনুভব করেন এবং আপনি একটি কাঠামো ব্যবহার করছেন না, আপনি সাধারণত আপনার নির্বাচকদের পুনর্গঠন করতে পারেন যাতে আপনি যা দেখতে চান তা আরও ভালভাবে রেন্ডার করতে পারেন।
