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