CSS দেখুন এবং পরিবর্তন করুন

সোফিয়া ইমেলিয়ানোভা
Sofia Emelianova

Chrome DevTools ব্যবহার করে একটি পৃষ্ঠার CSS দেখার এবং পরিবর্তন করার প্রাথমিক বিষয়গুলি শিখতে এই ইন্টারেক্টিভ টিউটোরিয়ালগুলি সম্পূর্ণ করুন৷

একটি উপাদানের CSS দেখুন

  1. Inspect me! নীচে পাঠ্য এবং পরিদর্শন নির্বাচন করুন। DevTools-এর Elements প্যানেল খোলে।

    আমাকে পরিদর্শন করুন!

  2. Inspect me! DOM ট্রিতে এলিমেন্ট নীল হাইলাইট করা হয়েছে।

    হাইলাইট করা উপাদান।

  3. DOM Tree- এ, Inspect me-এর জন্য data-message অ্যাট্রিবিউটের মান খুঁজুন Inspect me! উপাদান

  4. নিচের টেক্সট বক্সে অ্যাট্রিবিউটের মান লিখুন।

  5. এলিমেন্টস > স্টাইল প্যানে, aloha ক্লাস নিয়ম খুঁজুন।

    শৈলী ফলকটি DOM ট্রি- তে নির্বাচন করা যাই হোক না কেন এলিমেন্টে প্রয়োগ করা CSS নিয়মগুলিকে তালিকাভুক্ত করে, যেটি এখনও Inspect me! উপাদান

  6. aloha ক্লাস padding জন্য একটি মান ঘোষণা করছে। নিচের টেক্সট বক্সে স্পেস ছাড়াই এই মান এবং এর ইউনিট লিখুন।

আপনি যদি আপনার DevTools উইন্ডোটিকে আপনার ভিউপোর্টের ডানদিকে ডক করতে চান, যেমন প্রথম ধাপের স্ক্রিনশট, দেখুন DevTools প্লেসমেন্ট পরিবর্তন করুন

একটি উপাদানে একটি CSS ঘোষণা যোগ করুন

আপনি যখন একটি উপাদান পরিবর্তন করতে বা CSS ঘোষণা যোগ করতে চান তখন শৈলী ফলক ব্যবহার করুন।

  1. Add a background color to me! নীচে পাঠ্য এবং পরিদর্শন নির্বাচন করুন।

    আমাকে একটি পটভূমি রং যোগ করুন!

  2. শৈলী ফলকের উপরে element.style ক্লিক করুন।

  3. background-color টাইপ করুন এবং এন্টার টিপুন।

  4. honeydew টাইপ করুন এবং এন্টার টিপুন। DOM ট্রিতে , আপনি দেখতে পারেন যে উপাদানটিতে একটি ইনলাইন শৈলী ঘোষণা প্রয়োগ করা হয়েছে।

স্টাইল ফলকের মাধ্যমে উপাদানটিতে একটি CSS ঘোষণা যোগ করা।

একটি উপাদানে একটি CSS ক্লাস যোগ করুন

একটি এলিমেন্টে CSS ক্লাস প্রয়োগ করা বা সরানো হলে একটি উপাদান কেমন দেখায় তা দেখতে শৈলী ফলকটি ব্যবহার করুন।

  1. Add a class to me! নীচের উপাদান এবং পরিদর্শন নির্বাচন করুন।

    আমাকে একটি ক্লাস যোগ করুন!

  2. .cls এ ক্লিক করুন। DevTools একটি পাঠ্য বাক্স প্রকাশ করে যেখানে আপনি নির্বাচিত উপাদানটিতে ক্লাস যোগ করতে পারেন।

  3. Add new class টেক্সট বক্সে color_me টাইপ করুন এবং তারপর এন্টার টিপুন। নতুন ক্লাস যুক্ত পাঠ্য বাক্সের নীচে একটি চেকবক্স প্রদর্শিত হবে, যেখানে আপনি ক্লাসটি চালু এবং বন্ধ করতে পারবেন। তাহলে Add a class to me! উপাদান এটিতে প্রয়োগ করা অন্য কোন ক্লাস ছিল, আপনি এখান থেকে তাদের টগল করতে সক্ষম হবেন।

উপাদানটিতে color_me ক্লাস প্রয়োগ করা হচ্ছে।

একটি ক্লাসে একটি সিউডোস্টেট যোগ করুন

একটি উপাদানে একটি CSS সিউডোস্টেট প্রয়োগ করতে শৈলী ফলকটি ব্যবহার করুন। DevTools সমর্থন করে :active , :focus , :focus-within , :target , :hover , :visited , or focus-visible

  1. Hover over me! নীচে পাঠ্য। পটভূমির রঙ পরিবর্তন হয়।

    আমার উপর হোভার!

  2. Hover over me! পাঠ্য এবং পরিদর্শন নির্বাচন করুন।

  3. শৈলী ফলকে, ক্লিক করুন :hov

  4. :হোভার চেকবক্স চেক করুন। পটভূমির রঙ আগের মতই পরিবর্তিত হয়, যদিও আপনি আসলে উপাদানটির উপর ঘোরাফেরা করছেন না।

একটি উপাদানে হোভার সিউডোস্টেট টগল করা হচ্ছে।

একটি উপাদানের মাত্রা পরিবর্তন করুন

একটি উপাদানের প্রস্থ, উচ্চতা, প্যাডিং, মার্জিন বা সীমানা দৈর্ঘ্য পরিবর্তন করতে স্টাইল প্যানে বক্স মডেল ইন্টারেক্টিভ ডায়াগ্রাম ব্যবহার করুন।

  1. চেঞ্জ Change my margin! নীচের উপাদান এবং পরিদর্শন নির্বাচন করুন।

    আমার মার্জিন পরিবর্তন!

  2. বক্স মডেল দেখতে, ক্লিক করুন সাইডবার দেখান। স্টাইল প্যানে অ্যাকশন বারে সাইডবার বোতাম দেখানসাইডবার বোতামটি দেখান।

  3. স্টাইল প্যানে বক্স মডেল ডায়াগ্রামে, প্যাডিং এর উপর হোভার করুন। উপাদানটির প্যাডিং ভিউপোর্টে হাইলাইট করা হয়েছে। উপাদান এর প্যাডিং.

  4. বক্স মডেলের বাম মার্জিনে ডাবল ক্লিক করুন। উপাদানটির বর্তমানে মার্জিন নেই, তাই left-margin একটি মান আছে -

  5. 100 টাইপ করুন এবং এন্টার টিপুন। উপাদানের বাম মার্জিন পরিবর্তন করা হচ্ছে,

বক্স মডেলটি পিক্সেলে ডিফল্ট, তবে এটি অন্যান্য মানও গ্রহণ করে, যেমন 25% বা 10vw