আজকের ওয়েবের বিল্ডিং ওয়েবসাইটগুলি CSS (ক্যাসকেডিং স্টাইল শীট) সম্পর্কে গভীর বোঝার প্রয়োজন। ব্রাউজার উইন্ডোতে কীভাবে লেআউট করা হবে তা নির্ধারণ করার জন্য আপনি এটি একটি ওয়েবসাইট দিয়েছেন। আপনি আপনার HTML নথিতে "শৈলী" এর একটি সিরিজ প্রয়োগ করেন যা আপনার ওয়েবপৃষ্ঠাটির চেহারা এবং অনুভূতি তৈরি করবে।
একটি নথি জুড়ে সেই পূর্বনির্ধারিত শৈলীগুলি প্রয়োগ করার অনেক উপায় রয়েছে, কিন্তু মাঝে মাঝে আপনি শুধুমাত্র একটি শৈলী ব্যবহার করতে চান কিছু একটি নথিতে উপাদান, কিন্তু যে উপাদান সব ঘটনা নয়। আপনি প্রতিটি শৈলীটির শৈলী নিয়মটি পুনরাবৃত্তি না করেও একটি দস্তাবেজ তৈরি করতে পারেন যা আপনি নথির বিভিন্ন উপাদানগুলিতে প্রয়োগ করতে পারেন। এই পছন্দসই শৈলী অর্জন করতে, আপনি ক্লাস এবং আইডি এইচটিএমএল গুণাবলী ব্যবহার করবে। এই বৈশিষ্ট্য গ্লোবাল গুণাবলী যে প্রায় প্রতিটি এইচটিএমএল ট্যাগ প্রয়োগ করা যেতে পারে। এর অর্থ হল আপনি বিভাগ, অনুচ্ছেদ, লিঙ্ক, তালিকা বা আপনার নথিতে HTML এর অন্য কোনও অংশগুলি স্টাইল করছেন কিনা, আপনি এই কাজটি সম্পন্ন করতে আপনাকে সহায়তা করতে শ্রেণি এবং আইডি গুণাবলীগুলিতে ফিরে যেতে পারেন!
ক্লাস নির্বাচক
ক্লাস নির্বাচক আপনাকে একই উপাদানতে একাধিক শৈলী সেট করতে বা একটি নথিতে ট্যাগ করতে দেয়। উদাহরণস্বরূপ, আপনি নথিতে বাকি পাঠ্য থেকে আপনার বর্ণের কিছু অংশকে একটি ভিন্ন রঙে আহ্বান করতে চাইতে পারেন। এই হাইলাইট বিভাগগুলি আপনি পৃষ্ঠাতে সেটিং করা একটি "সতর্কতা" হতে পারে। আপনি ক্লাসের সাথে আপনার অনুচ্ছেদের এই বরাদ্দ করতে পারে:
পি {রঙ: # 0000ff; } পি। এলার্ট {রঙ: # FF0000; } এই শৈলী রঙ সেট হবে সব অনুচ্ছেদের নীল (# 0000ff), তবে "সতর্কতা" শ্রেণীর একটি শ্রেণির বৈশিষ্ট্য সহ যেকোন অনুচ্ছেদ পরিবর্তে লাল (# ff0000) এ স্টাইলযুক্ত হবে। এটি প্রথম শ্রেণির নিয়মটির চেয়ে শ্রেণির গুণমানের উচ্চতর নির্দিষ্টতা রয়েছে, যা শুধুমাত্র ট্যাগ নির্বাচক ব্যবহার করে। সিএসএস দিয়ে কাজ করার সময়, আরো নির্দিষ্ট নিয়ম কম নির্দিষ্ট একটি ওভাররাইড করবে। তাই এই উদাহরণে, আরো সাধারণ নিয়ম সমস্ত অনুচ্ছেদের রঙ নির্ধারণ করে, তবে কয়েকটি অনুচ্ছেদের মধ্যে কেবল সেটিংটি ওভাররাইড করার চেয়ে দ্বিতীয়, আরো নির্দিষ্ট নিয়ম। এখানে কিছু HTML মার্কআপ ব্যবহার করা যেতে পারে: এই অনুচ্ছেদ নীল প্রদর্শিত হবে, যা পৃষ্ঠার জন্য ডিফল্ট।
এই অনুচ্ছেদ নীল হতে হবে।
এবং এই অনুচ্ছেদটি লাল প্রদর্শিত হবে কারণ ক্লাসের বৈশিষ্ট্যটি উপাদান নির্বাচক স্টাইলিং থেকে আদর্শ নীল রঙকে ওভাররাইট করবে।
উদাহরণস্বরূপ, "p.alert" এর শৈলী শুধুমাত্র সেই অনুচ্ছেদ উপাদানগুলিতে প্রয়োগ করবে যা "সতর্কতা" শ্রেণী ব্যবহার করে। আপনি যদি একাধিক এইচটিএমএল উপাদান জুড়ে সেই শ্রেণীটি ব্যবহার করতে চেয়েছিলেন তবে আপনি কেবল শৈলী কলটির শুরু থেকে HTML উপাদানটি সরিয়ে ফেলবেন (কেবল সময়ের জন্য ছেড়ে দেওয়ার বিষয়ে নিশ্চিত হোন) .) জায়গায়), এই মত: .alert {পটভূমি-রঙ: # ff0000;} এই ক্লাসটি এখন যে কোনও উপাদানকে উপলব্ধ রয়েছে। আপনার এইচটিএমএল যেকোন অংশে "সতর্কতা" এর একটি শ্রেণির গুণমানের মান রয়েছে যা এখন এই শৈলীটি পাবে। নিচের HTML এ আমাদের একটি অনুচ্ছেদ এবং একটি শিরোনাম স্তর 2 রয়েছে যা "সতর্কতা" বর্গ ব্যবহার করে। আমরা উভয়ই দেখিয়েছি সিএসএসের উপর ভিত্তি করে লালগুলির একটি ব্যাকগ্রাউন্ড-রঙ থাকবে।
এই অনুচ্ছেদ লাল লেখা হবে।
আজকের ওয়েবসাইটগুলিতে, শ্রেণির গুণাবলীগুলি প্রায়শই বেশিরভাগ উপাদানের ক্ষেত্রে ব্যবহার করা হয় কারণ আইডিগুলি একটি নির্দিষ্ট দৃষ্টিকোণ থেকে কাজ করা সহজ হয়। আপনি ক্লাসের বৈশিষ্ট্যগুলি পূরণ করতে সর্বাধিক বর্তমান HTML পৃষ্ঠাগুলি খুঁজে পাবেন, এর মধ্যে কয়েকটি একটি নথিতে একাধিকবার পুনরাবৃত্তি করা হয় এবং অন্যগুলি যা শুধুমাত্র একবার প্রদর্শিত হতে পারে। আইডি নির্বাচক আপনাকে একটি ট্যাগ বা অন্য HTML উপাদান দিয়ে এটি যুক্ত না করে একটি নির্দিষ্ট শৈলীতে একটি নাম দিতে দেয়। বলুন আপনার এইচটিএমএল মার্কআপে একটি বিভাগ রয়েছে যা একটি ইভেন্ট সম্পর্কে তথ্য ধারণ করে। আপনি এই বিভাগটি "ইভেন্ট" এর একটি আইডি বৈশিষ্ট্যটি দিতে পারেন এবং তারপরে যদি আপনি 1-পিক্সেল প্রশস্ত কালো সীমানা দিয়ে সেই বিভাগটিকে রূপরেখা করতে চান তবে আপনি এটিকে একটি আইডি কোড লিখুন: # ইভেন্ট {সীমানা: 1 পিপিক্স কঠিন # 000; } আইডি নির্বাচকদের সঙ্গে চ্যালেঞ্জ হল যে তারা একটি HTML নথিতে পুনরাবৃত্তি করা যাবে না। তারা অনন্য হতে হবে (আপনি আপনার সাইটের একাধিক পৃষ্ঠায় একই আইডি ব্যবহার করতে পারেন, তবে প্রতিটি স্বতন্ত্র HTML নথিতে শুধুমাত্র একবার)। তাই যদি আপনার 3 টি ইভেন্টের এই সীমাটির প্রয়োজন হয় তবে আপনাকে "ইভেন্ট 1", "ইভেন্ট 2" এবং "ইভেন্ট 3" এর আইডি বৈশিষ্ট্যগুলি এবং তাদের প্রতিটি স্টাইল দিতে হবে। অতএব, "ইভেন্ট" এর উপরে উল্লেখিত শ্রেণির বৈশিষ্ট্যটি ব্যবহার করা আরও সহজ হবে এবং এগুলি একবারে স্টাইল করুন। আইডি বৈশিষ্ট্যগুলির সাথে আরেকটি চ্যালেঞ্জ হল তাদের শ্রেণির গুণাবলীগুলির চেয়ে উচ্চতর নির্দিষ্টতা রয়েছে। এর মানে হল যে যদি আপনার পূর্বে এমন প্রতিষ্ঠিত শৈলীকে ওভাররাইড করে এমন CSS থাকতে হয় তবে এটি করা কঠিন হতে পারে যদি আপনি আইডিগুলিতে অত্যধিকভাবে নির্ভর করে থাকেন। এই কারণে অনেক ওয়েব ডেভেলপাররা তাদের মার্কআপে আইডিগুলি ব্যবহার থেকে দূরে সরে গেছেন, এমনকি যদি তারা কেবল একবারই সেই মানটি ব্যবহার করতে চায় এবং প্রায় পরিবর্তিত সমস্ত শৈলীগুলির জন্য কম-নির্দিষ্ট শ্রেণির বৈশিষ্ট্যগুলিতে পরিণত হয়। আইডি বৈশিষ্ট্যের একটি ক্ষেত্র যেখানে আপনি একটি পৃষ্ঠা তৈরি করতে চান তাতে পৃষ্ঠাটিতে অ্যাঙ্কর লিঙ্ক থাকে। উদাহরণস্বরূপ, যদি আপনার কাছে একটি প্যারাল্যাক্স স্টাইল ওয়েবসাইট থাকে যা একটি পৃষ্ঠায় সমস্ত পৃষ্ঠায় লিঙ্কটি সহ "যেটি" পৃষ্ঠাটির বিভিন্ন অংশে "লাফ" যুক্ত থাকে। এটি আইডির গুণাবলী এবং পাঠ্য লিঙ্কগুলি ব্যবহার করে যা এই নোঙ্গর লিঙ্কগুলি ব্যবহার করে। আপনি কেবল "#" প্রতীক দ্বারা, "href" লিংকের বৈশিষ্ট্যের সাথে এই বৈশিষ্ট্যটির মান যোগ করুন, এটির মতো: এই লিঙ্ক ক্লিক বা স্পর্শ করলে, এই লিঙ্কটি এই আইডি বৈশিষ্ট্যটির পৃষ্ঠায় অংশ নেবে।এই আইডি মানটি ব্যবহার করে পৃষ্ঠাটিতে কোনও উপাদান ব্যবহার না করলে লিঙ্কটি কিছু করবে না। মনে রাখবেন, যদি আপনি কোনও সাইটে লিঙ্ক-ইন লিঙ্ক তৈরি করতে চান তবে আইডি বৈশিষ্ট্যগুলি ব্যবহার করার প্রয়োজন হবে তবে আপনি সাধারণ সিএসএস স্টাইলিং উদ্দেশ্যে ক্লাসগুলিতে ফিরে যেতে পারেন। আমরা আজকে পৃষ্ঠাগুলি কীভাবে চিহ্নিত করব - আমরা যতটা সম্ভব ক্লাস নির্বাচক ব্যবহার করি এবং কেবল তখনই কেবল আইডিগুলিতে পরিণত হব যখন আমাদের কেবলমাত্র সিএসএসের জন্য হুক হিসাবে নয় বরং ইন-পেজ লিঙ্ক হিসাবে কাজ করার বৈশিষ্ট্যটি প্রয়োজন।এবং এই H2 এছাড়াও লাল হবে।
আইডি নির্বাচক
আইডি বৈশিষ্ট্য জটিলতা
