কম্পিউটার টিউটোরিয়াল

CSS ইউনিভার্সেল সিলেক্টর (*)

CSS ইউনিভার্সেল সিলেক্টর (*) পেজের সব HTML এলিমেন্টকে টার্গেট করে। এটি সবচেয়ে ব্রড সিলেক্টর এবং এটি কার্যকরভাবে আপনার পুরো ডকুমেন্টের জন্য ডিফল্ট স্টাইল সেট করে।

ইউনিভার্সেল সিলেক্টর সিনট্যাক্স

* { property-name: value; }

সাধারণ ব্যবহারের ক্ষেত্র

CSS রিসেট

সবচেয়ে কমন ব্যবহার হচ্ছে একটি "CSS রিসেট" লিখা ব্রাউজারের ডিফল্ট স্টাইলিং নরমালাইজ করার জন্য (যেমন মার্জিন, প্যাডিং, বক্স-সাইজিং):

* { margin: 0; padding: 0; box-sizing: border-box; }

এটি নিশ্চিত করে যে সব এলিমেন্ট একই ক্লিন স্লেট থেকে শুরু হয়।

গ্লোবাল টাইপোগ্রাফি

আপনি একটি বেস ফন্ট ফ্যামিলি বা লাইন হাইট সেট করতে পারেন যা সব জায়গায় ইনহেরিট হবে:

* { font-family: system-ui, sans-serif; line-height: 1.5; }

ডিবাগিং

লেআউট ইশু ডিবাগ করার সময় আপনি সকল এলিমেন্টের আউটলাইন দেখতে পারেন:

* { outline: 1px solid red; }

পারফরম্যান্স নোট

ইউনিভার্সেল সিলেক্টর টেকনিক্যালি সবচেয়ে "খরচালু" সিলেক্টর কারণ ব্রাউজারকে প্রতিটি এলিমেন্ট ইভ্যালুয়েট করতে হয়। তবে, মডার্ন ব্রাউজারগুলোতে সাধারণ স্টাইল রুলসের জন্য পারফরম্যান্স প্রভাব নগণ্য। এটি এড়াতে হবে কমপ্লেক্স সিলেক্টর চেইনের ভিতরে (যেমন div * { ... })।

স্পেসিফিসিটি

ইউনিভার্সেল সিলেক্টর শূন্য স্পেসিফিসিটি (0,0,0) دارায়। যে কোনো অন্য সিলেক্টর (টাইপ, ক্লাস, আইডি) এটি ওভাররাইড করবে। এটি বেস স্টাইল সেট করার জন্য আইডিয়াল কিন্তু কম্পোনেন্ট-স্পেসিফিক স্টাইলের জন্য নয়।

সংক্ষেপে

  • * পেজের সব এলিমেন্ট সিলেক্ট করে
  • সেরা ব্যবহার: CSS রিসেট, গ্লোবাল ডিফল্টস, ডিবাগিং
  • سبেসিফিসিটি: 0 — সহজে ওভাররাইড হয়
  • কমপ্লেক্স সিলেক্টর চেইনে এড়িয়ে চলুন
  1. CSS দিয়ে এলিমেন্টের দৃশ্যমানতা নিয়ন্ত্রণ

  2. CSS-এ ইউনিভার্সাল সিলেক্টর

  3. CSS-এ এলিমেন্ট টাইপ সিলেক্টর

  4. CSS color প্রপার্টি দিয়ে এলিমেন্টের টেক্সট রঙ পরিবর্তন