CSS Important

By /

CSS গুরুত্বপূর্ণ:

!গুরুত্বপূর্ণ মানে ‘এটি গুরুত্বপূর্ণ’। এই নিয়মটি CSS-এ ক্যাসকেড তৈরি করার একটি উপায় প্রদান করে।

যদি আমরা এই বৈশিষ্ট্যটি পাঠ্যে প্রয়োগ করি, তবে সেই পাঠ্যের অগ্রাধিকার অন্যান্য অগ্রাধিকারের চেয়ে বেশি। এটি অত্যন্ত প্রয়োজনীয় না হওয়া পর্যন্ত আপনার প্রোগ্রামে এই CSS বৈশিষ্ট্যটি ব্যবহার না করার পরামর্শ দেওয়া হচ্ছে। কারণ এই সম্পত্তির বেশি ব্যবহার অনেক অপ্রত্যাশিত আচরণের কারণ হবে।

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

এটি CSS সম্পত্তির অগ্রাধিকার বাড়ায় এবং ওভাররাইডিং বৈশিষ্ট্যগুলিকে উপেক্ষা করে।

বাক্য গঠন:

  1. element {  
  2.     font-size: 14px !important;   
  3.     color: blue  !important;  
  4.     …  
  5. }  

উদাহরণ:

  1. Example  
  2. >   
  3. <html>   
  4.     </head>   
  5.         </style>   
  6.             h1 {   
  7.                 color: white ;   
  8.             }   
  9.             H1 {   
  10.                 color:blue !important;   
  11.             }   
  12.             body {   
  13.                 background-color:lightblue !important;   
  14.                 text-align:center;   
  15.                 background-color:yellow;   
  16.             }   
  17.         </style>   
  18.     </head>   
  19.     </body>   
  20.         <h1>Hello World.</h1>   
  21.         <h1>Welcome to the javaTpoint.com. This is an example of <i>!important</i> property.</h1>   
  22.         <p></p>   
  23.     </body>   
  24. </html>     

উপরের উদাহরণে, আমরা দেখতে পাচ্ছি যে গোলাপির পরিবর্তে, শরীরের পটভূমির রঙ হালকা নীল কারণ, বডি ট্যাগে, !গুরুত্বপূর্ণ হালকা নীল পটভূমির রঙের পরে প্রয়োগ করা হয়।

আরও স্পষ্টভাবে বোঝার জন্য এই সম্পত্তির আরেকটি উদাহরণ নেওয়া যাক।

উদাহরণ:

এই উদাহরণে, আমরা পাঠ্যের সীমানায় !গুরুত্বপূর্ণ বৈশিষ্ট্যটি প্রয়োগ করছি। অন্যান্য ঘোষণা সত্ত্বেও h1 শিরোনামের সীমানার রঙ লাল থাকবে। অন্যান্য ঘোষণা সত্ত্বেও h2 শিরোনামের রঙ এবং সীমানা-রঙ সবুজ এবং বেগুনি থাকবে।

  1. >  
  2. <html>  
  3. </head>  
  4. <meta name=“viewport” content=“width=device-width, initial-scale=1”>  
  5. <style>  
  6.    body{  
  7.       text-align: center;  
  8.    }  
  9. h1 {  
  10.   border-color: red !important;   
  11.   border: 5px green solid;  
  12.   border-color: black;  
  13. }  
  14. h2{  
  15.    color: green !important;  
  16.    color: red;  
  17.    border-color:violet !important;  
  18.    border: 5px green solid;  
  19. }  
  20. </style>  
  21. </head>  
  22. <body>  
  23.   
  24. <h1>Hello World 🙂 🙂</h1>  
  25. <h2>Welcome to the javaTpoint.com</h2>  
  26.   
  27. </body>  
  28. </html>  


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top