অন্যান্য ভাষার মতো CSS এর নিজস্ব সিনট্যাক্স রয়েছে। CSS-এ কোনো উপাদান, প্যারামিটার বা ট্যাগ নেই। CSS এর নিয়ম আছে। একটি নিয়মে একটি নির্বাচক এবং একটি স্টাইল ব্লক কোঁকড়া ধনুর্বন্ধনীতে আবদ্ধ থাকে:

একটি শৈলী ঘোষণা ব্লক বৈশিষ্ট্য এবং একটি সম্পত্তি মান নিয়ে গঠিত, একটি সেমিকোলন দ্বারা পৃথক করা হয়:

অনুশীলন আমাদের সেরা বন্ধু, এর চেষ্টা করা যাক! এইচটিএমএল পেজ এবং সিএসএস ফাইলটি খুলুন যা আমরা পাঠ নং 2 এ তৈরি করেছি।

এখন পৃষ্ঠাটিকে একটি নীল পটভূমি দেওয়া যাক। আমরা মনে রাখি, ট্যাগটি পটভূমির রঙের জন্য দায়ী , ফাইলে যান style.cssএবং নিম্নলিখিত কোড যোগ করুন:

শরীর(
পটভূমি: নীল;
}

এখন আমরা ব্রাউজারে আমাদের html পৃষ্ঠাটি পরীক্ষা করি, ব্যাকগ্রাউন্ডটি নীল হওয়া উচিত। এর পরে, পাঠ্যের রঙ সাদাতে পরিবর্তন করুন:

শরীর(
পটভূমি: নীল;
সাদা রং;
}

ব্রাউজারে এইচটিএমএল পেজ রিফ্রেশ করতে আমরা চেক করি, Ctrl+F5 টিপুন এবং দেখি যে সমস্ত লেখা সাদা হয়ে গেছে। এখন আমাদের শিরোনামের রঙগুলি h1 এর জন্য লাল এবং h2 এর জন্য হলুদ করতে হবে:

শরীর(
পটভূমি: নীল;
সাদা রং;
}
h1(
লাল রং;
}
h2(
রঙ: হলুদ;
}

আবার টিপুন Ctrl+F5এবং পরিবর্তনগুলি দেখুন।

আমার মতে, নীতিটি ইতিমধ্যে পরিষ্কার: প্রথমে আমরা যে উপাদানটি (নির্বাচনকারী) স্টাইল প্রয়োগ করি তা নির্দেশ করি এবং তারপরে আমরা কোঁকড়া ধনুর্বন্ধনীতে এর বৈশিষ্ট্য এবং তাদের মানগুলি লিখি। আমরা বৈশিষ্ট্য এবং মানগুলির জন্য পৃথক পাঠ উত্সর্গ করব, তবে এই মুহুর্তে আমরা একটি স্টাইল শীট সংকলনের সাধারণ নীতিটি দেখছি।

সিএসএস নির্বাচক

আইডি দ্বারা নির্বাচক (শনাক্তকারী)

পূর্ববর্তী উদাহরণগুলিতে, পৃষ্ঠা উপাদানগুলি নির্বাচক হিসাবে ব্যবহার করা হয়েছিল: শরীর, h1, h2. এই পরিস্থিতিটি কল্পনা করুন - একটি html পৃষ্ঠায় বেশ কয়েকটি অনুচ্ছেদ রয়েছে, আমাদের একটি অনুচ্ছেদের পাঠ্য গোলাপী হতে হবে এবং বাকি অনুচ্ছেদগুলি কালো হতে হবে। এই ধারণাটি বাস্তবায়ন করতে, আমাদের একটি অনন্য শনাক্তকারী নির্দিষ্ট করতে হবে ( আইডি) অনুচ্ছেদ এবং এটির জন্য একটি পৃথক শৈলী তৈরি করুন।

শনাক্তকারী (আইডি) সহ অনুচ্ছেদ পাঠ্য।

আপনি সংরক্ষিত শব্দগুলি ব্যতীত যে কোনও অনন্য নাম বরাদ্দ করতে পারেন (এগুলি HTML এবং CSS উপাদানগুলির ট্যাগ এবং প্যারামিটারগুলির নাম)৷ উদাহরণস্বরূপ, আপনি একটি শনাক্তকারীকে একটি নাম নির্ধারণ করতে পারবেন না শরীর. এখন এইচটিএমএল পৃষ্ঠায় বেশ কয়েকটি অনুচ্ছেদ যুক্ত করা যাক এবং তাদের মধ্যে একটিতে একটি শনাক্তকারী থাকবে:

এটি প্রথম স্তরের শিরোনাম

এখন পৃষ্ঠায় উভয় অনুচ্ছেদ সাদা। যোগ করা style.cssআমাদের অনুচ্ছেদের জন্য শৈলী:

শরীর(
পটভূমি: নীল;
সাদা রং;
}
h1(
লাল রং;
}
h2(
রঙ: হলুদ;
}
পি(
রঙ কালো;
}
#গোলাপী(
রঙ: গোলাপী;
}

প্রথমে আমরা উল্লেখ করেছি যে সমস্ত অনুচ্ছেদের পাঠ্য কালো হবে, তবে অনুচ্ছেদের পাঠ্য সহ আইডি "গোলাপী"গোলাপী হবে। আমাদের নির্বাচক একটি হ্যাশ নিয়ে গঠিত ( # ) এবং শনাক্তকারীর নাম ( গোলাপী).

এটা মনে রাখা গুরুত্বপূর্ণ যে আপনি একই সাথে দুটি অনুচ্ছেদ তৈরি করতে পারবেন না আইডি, সঙ্গে অনুচ্ছেদ আইডি "গোলাপী"শুধুমাত্র একটি হতে পারে। প্রতিটি অনুচ্ছেদের নিজস্ব অনন্য শনাক্তকারী থাকতে পারে, ধরা যাক আমরা এর সাথে একটি অনুচ্ছেদ তৈরি করি id="সবুজ"এবং স্টাইল শীটে আমাদের নিজস্ব স্টাইল দিন।

শ্রেণী অনুসারে নির্বাচক

পূর্বে আমরা গোলাপী রঙ ব্যবহার করে একটি অনুচ্ছেদ তৈরি করেছি আইডি, কিন্তু আমরা যদি কিছু অনুচ্ছেদের রঙ পরিবর্তন করে গোলাপী করতে চাই। এই জন্য একটি পরামিতি আছে ক্লাস.

এইচটিএমএল পৃষ্ঠায় কয়েকটি অনুচ্ছেদ যুক্ত করা যাক এবং তাদের বরাদ্দ করা যাক class="গোলাপী":

এটি প্রথম স্তরের শিরোনাম

একটি ক্লাস স্টাইল বরাদ্দ করতে, আমরা স্টাইল শীটে একটি নিয়ম লিখব যেখানে গোলাপী নামটি আবার নির্বাচক হিসাবে ব্যবহার করা হবে, তবে এই ক্ষেত্রে এটি ক্লাসের নাম, তাই এর আগে একটি বিন্দু (.) ব্যবহার করা হবে নাম:

শরীর(
পটভূমি: নীল;
সাদা রং;
}
h1(
লাল রং;
}
h2(
রঙ: হলুদ;
}
পি(
রঙ কালো;
}
#গোলাপী(
রঙ: গোলাপী;
}
গোলাপী(
রঙ: গোলাপী;
}

এই শ্রেণীর সাথে অনির্দিষ্টভাবে অনেক অনুচ্ছেদ থাকতে পারে।

আসুন সব নতুন জ্ঞান একসাথে করা যাক:

• সমস্ত অভিন্ন উপাদান (শিরোনাম, অনুচ্ছেদ, ইত্যাদি) একই শৈলী থাকতে হবে, তারপর নির্বাচক শুধুমাত্র এই উপাদান নিয়ে গঠিত p(রঙ:কালো;)
• উপাদান (অনুচ্ছেদ, শিরোনাম, ইত্যাদি) অবশ্যই অন্যদের থেকে আলাদা হতে হবে, তারপর আমরা এটিকে একটি শনাক্তকারী (আইডি) বরাদ্দ করি এবং শৈলী শীটে আমরা শনাক্তকারীর আগে একটি হ্যাশ চিহ্ন রাখি # , #গোলাপী (রঙ:গোলাপী;)
• একটি পৃষ্ঠার বেশ কয়েকটি উপাদানের অবশ্যই একই শৈলী থাকতে হবে, তারপরে তাদের একটি ক্লাস বরাদ্দ করা হয় ( ক্লাস) এবং স্টাইল শীটে আমরা ক্লাসের সামনে একটি বিন্দু (.) রাখি, গোলাপী(রঙ:গোলাপী;)
• উ আইডিতুলনায় উচ্চ অগ্রাধিকার ক্লাস.

প্রসঙ্গ নির্বাচক

ধরা যাক আমাদের নিম্নলিখিত কোড সহ একটি HTML পৃষ্ঠা রয়েছে:

এই লেখাটি অনুচ্ছেদে রয়েছে

ব্রাউজারে আমরা দেখতে পাব:

কল্পনা করুন যে আমরা সমস্ত তির্যক পাঠ্যকে সবুজ রঙে হাইলাইট করতে চাইনি, তবে শুধুমাত্র অনুচ্ছেদে যা আছে। আসুন স্টাইল শীটে পরিবর্তন করি:

পি আমি(
রঙ:সবুজ;
}

তাই আমরা উল্লেখ করেছি যে এই স্টাইলটি অনুচ্ছেদে থাকা i উপাদানগুলিতে প্রয়োগ করা উচিত। উপাদানের নাম একটি স্থান দ্বারা পৃথক করা আবশ্যক. এই ধরনের নির্বাচকদের বলা হয় প্রাসঙ্গিক নির্বাচক। ব্রাউজারে আমাদের পৃষ্ঠাটি একবার দেখে নেওয়া যাক:

গ্রুপিং নির্বাচক

এমন একটি পরিস্থিতি কল্পনা করুন যেখানে বিভিন্ন নির্বাচকদের জন্য শৈলী ঘোষণা ব্লক একই (H1 H2 H3 হেডার সবুজ), সেগুলিকে গোষ্ঠীভুক্ত করা যেতে পারে। গ্রুপিংয়ের জন্য নির্বাচকদের অবশ্যই কমা দিয়ে আলাদা করতে হবে। উদাহরণ:

h1, h2, h3(
রঙ:সবুজ;
}

রঙ ছাড়াও, আমরা আকার নির্দিষ্ট করতে চাই। তারপর আমাদের স্টাইল শীটে যোগ করতে হবে:

h1, h2, h3(
রঙ:সবুজ;
}
h1(
ফন্ট-সাইজ:18px;
}
h2(
ফন্ট সাইজ:16px;
}
h3(
ফন্ট সাইজ:14px;
}

শিরোনামগুলি (H1 H2 H3) তাদের নিজস্ব আকার থাকবে, তবে সেগুলি সবুজ হবে৷

দলগুলি সম্পর্কে অনেক বিতর্ক রয়েছে:

কেউ কেউ উপরের কোডটিকে সঠিক বলে মনে করেন, কারণ। অভিন্ন উপাদান বৈশিষ্ট্যের পুনরাবৃত্তি এড়ানো এবং কোড সংক্ষিপ্ত।

অন্যরা বিশ্বাস করে যে গ্রুপিং কোডটিকে কম যৌক্তিক করে তোলে। h3 শিরোনামের জন্য নির্বাচক খুঁজে পেয়ে, এটিতে পাঠ্যটি সবুজ কেন তা অবিলম্বে স্পষ্ট নয়। এই মতামত গোষ্ঠীর প্রবক্তারা শুধুমাত্র সেই উপাদানগুলি যাদের ব্লকগুলি সম্পূর্ণভাবে মিলে যায়।

গ্রুপ করা বা না করা আপনার রুচির বিষয়। কিন্তু আপনাকে বিভিন্ন পদ্ধতির কথা মনে রাখতে হবে, যখন আপনি টেমপ্লেটে অন্য কারো কোড পড়বেন তখন এটি আপনার জীবনকে অনেক সহজ করে তুলবে।

CSS - পাঠ 3. CSS নিয়ম এবং নির্বাচক

শৈলী ঘোষণা ব্লক নিজেই বৈশিষ্ট্য এবং তাদের মান নিয়ে গঠিত, সেমিকোলন দ্বারা পৃথক করা হয়:

এর অনুশীলনে এটি চেষ্টা করা যাক। আপনি শেষ পাঠে তৈরি করা html পৃষ্ঠা এবং CSS পৃষ্ঠাটি খুলুন। আসুন আমাদের পৃষ্ঠাটিকে একটি নীল পটভূমি দিন। আপনি মনে রাখবেন, ট্যাগ এর জন্য দায়ী , তারপর style.css পৃষ্ঠায় যান এবং নিম্নলিখিত কোডটি লিখুন:

শরীর (পটভূমি: নীল;)

একটি ব্রাউজারে আপনার html পৃষ্ঠা খুলুন এবং নিশ্চিত করুন যে এর পটভূমি নীল। এখন, পাতার লেখাটিকে সাদা করা যাক:

শরীর (পটভূমি: নীল; রঙ: সাদা;)

আপনার ব্রাউজারে html পৃষ্ঠাটি রিফ্রেশ করুন (Ctrl+F5) এবং নিশ্চিত করুন যে সমস্ত পাঠ্য এখন সাদা। এখন হেডিং কালারগুলো লাল (h1 এর জন্য) এবং হলুদ (h2 এর জন্য) করা যাক:

শরীর (পটভূমি: নীল; রঙ: সাদা;) h1 (রঙ: লাল;) h2 (রঙ: হলুদ;)

আপনার ব্রাউজারে পৃষ্ঠাটি আবার রিফ্রেশ করুন এবং নিশ্চিত করুন যে সবকিছুই উদ্দেশ্য অনুযায়ী।

আমি মনে করি নীতিটি ইতিমধ্যেই পরিষ্কার: আমরা নির্বাচককে নির্দিষ্ট করি, অর্থাৎ উপাদান যা শৈলী প্রয়োগ করা হয়, এবং কোঁকড়া বন্ধনী তার বৈশিষ্ট্য এবং তাদের মান. পৃথক পাঠগুলি বৈশিষ্ট্য এবং মানগুলির জন্য উত্সর্গীকৃত হবে, তবে আপাতত আমরা একটি স্টাইল শীট সংকলনের সাধারণ নীতিটি দেখছি।

সিএসএস নির্বাচক

আমাদের উদাহরণে, পৃষ্ঠা উপাদানগুলি নির্বাচক হিসাবে ব্যবহার করা হয়েছিল: body, h1, h2৷ কিন্তু আমাদের এইচটিএমএল পৃষ্ঠায় যদি বেশ কয়েকটি অভিন্ন উপাদান থাকে (উদাহরণস্বরূপ, অনুচ্ছেদ), এবং আমরা চাই যে সমস্ত অনুচ্ছেদের পাঠ্য কালো হোক এবং তাদের মধ্যে একটি গোলাপী হোক। তারপর আমাদের এই অনুচ্ছেদের জন্য একটি অনন্য শনাক্তকারী প্রদান করতে হবে এবং এটির জন্য একটি শৈলী তৈরি করতে হবে।

HTML এ, উপাদান শনাক্তকারী প্যারামিটার ব্যবহার করে নির্দিষ্ট করা হয় আইডি, যার মান একটি অনন্য নাম। উদাহরণ স্বরূপ:

শনাক্তকারী (আইডি) সহ অনুচ্ছেদ পাঠ্য।

আপনি সংরক্ষিত শব্দ ব্যতীত যেকোন নাম দিতে পারেন (এগুলির মধ্যে HTML এবং CSS উপাদানগুলির ট্যাগ এবং প্যারামিটারের নাম অন্তর্ভুক্ত), উদাহরণস্বরূপ, আপনি শনাক্তকারীকে নামের মূল অংশটি দিতে পারবেন না। আমাদের এইচটিএমএল পৃষ্ঠায় কয়েকটি অনুচ্ছেদ যুক্ত করা যাক এবং তাদের একটিতে একটি শনাক্তকারী বরাদ্দ করা যাক: আপনি যদি এখন ব্রাউজারে আমাদের পৃষ্ঠাটি দেখেন তবে আমাদের অনুচ্ছেদ দুটিই সাদা। স্টাইল শীটে (style.css) আমাদের অনুচ্ছেদের জন্য শৈলী যোগ করা যাক:

শরীর (পটভূমি: নীল; রঙ: সাদা; ) h1 (রঙ: লাল; ) h2 (রঙ: হলুদ; ) p (রঙ: কালো; ) p# গোলাপী (রঙ: গোলাপী; )

আমরা প্রথমে সমস্ত অনুচ্ছেদের পাঠ্য কালো এবং অনুচ্ছেদের পাঠ্যটি দিয়ে নির্দিষ্ট করেছি আইডি "গোলাপী"এটা গোলাপী করা এই ক্ষেত্রে আমাদের নির্বাচক উপাদান নিয়ে গঠিত ( পি), বিভাজক ( # ) এবং শনাক্তকারীর নাম ( গোলাপী).

এটি মনে রাখা গুরুত্বপূর্ণ যে একটি পৃষ্ঠায় শুধুমাত্র একটি শনাক্তকারী (আইডি) থাকতে পারে। সেগুলো. আমাদের উদাহরণের জন্য, এটি দিয়ে দুটি অনুচ্ছেদ তৈরি করা অসম্ভব আইডি "গোলাপী", এই সঙ্গে অনুচ্ছেদ আইডিশুধুমাত্র একটি হতে পারে। কিন্তু প্রতিটি অনুচ্ছেদের নিজস্ব শনাক্তকারী থাকতে পারে, উদাহরণস্বরূপ, আপনি id="green" দিয়ে একটি অনুচ্ছেদ তৈরি করতে পারেন এবং স্টাইল শীটে এই অনুচ্ছেদের জন্য শৈলী সেট করতে পারেন।

শ্রেণী অনুসারে নির্বাচক

উপরের উদাহরণে, আমরা গোলাপী টেক্সট রঙ সহ একটি অনুচ্ছেদ তৈরি করেছি এবং নির্দেশ করেছি যে শুধুমাত্র একটি আইডি থাকতে পারে। কিন্তু আমরা যদি দুই বা তিন অনুচ্ছেদের জন্য টেক্সট রঙ গোলাপী হতে চাই. HTML এ এর ​​জন্য একটি প্যারামিটার আছে ক্লাস, যার মান এর নাম।

আমাদের এইচটিএমএল পৃষ্ঠায় আরও কয়েকটি অনুচ্ছেদ যুক্ত করা যাক এবং সেগুলি বরাদ্দ করা যাক class="গোলাপী": এই শ্রেণীর জন্য শৈলী নির্দিষ্ট করার জন্য, আমরা স্টাইল শীটে একটি নিয়ম লিখব, যেখানে উপাদানটি আবার নির্বাচক হিসাবে ব্যবহার করা হবে। পিএবং নাম গোলাপী, কিন্তু এই ক্ষেত্রে এটি একটি শ্রেণীর নাম, তাই একটি বিন্দু (.) একটি বিভাজক হিসাবে ব্যবহার করা হবে:

শরীর (পটভূমি: নীল; রঙ: সাদা; ) h1 (রঙ: লাল; ) h2 (রঙ: হলুদ; ) p (রঙ: কালো; ) p# গোলাপী (রঙ: গোলাপী; ) p. গোলাপী (রঙ: গোলাপী; )

এই ক্লাসের সাথে আপনার পছন্দ অনুযায়ী অনেক অনুচ্ছেদ থাকতে পারে।

আসুন সংক্ষিপ্ত করা যাক:

• যদি সমস্ত অনুরূপ উপাদান (উদাহরণস্বরূপ, সমস্ত h1 শিরোনাম) একই শৈলী থাকা উচিত, তাহলে নির্বাচক শুধুমাত্র সেই উপাদান নিয়ে গঠিত (উদাহরণস্বরূপ, p(রঙ:কালো;))
• যদি একটি উপাদান (যেকোন: অনুচ্ছেদ, শিরোনাম...) অন্য সব থেকে আলাদা হতে হবে, তাহলে এটি একটি শনাক্তকারী বরাদ্দ করা হয় ( আইডি) এবং স্টাইল শীটে বিভাজক হল হ্যাশ চিহ্ন ( # ), উদাহরণ স্বরূপ, p#গোলাপী (রঙ:গোলাপী;) .
• যদি পৃষ্ঠায় একই শৈলী সহ বেশ কয়েকটি উপাদান থাকে, তবে তাদের একটি ক্লাস বরাদ্দ করা হয় ( ক্লাস) এবং স্টাইল শীট বিভাজক একটি পিরিয়ড (.), উদাহরণস্বরূপ, p.pink(রঙ:গোলাপী;).
• শনাক্তকারীর ক্লাসের চেয়ে বেশি অগ্রাধিকার রয়েছে। অতএব, যদি একটি শ্রেণী এবং একটি শনাক্তকারী উভয়ই একটি উপাদানের জন্য নির্দিষ্ট করা হয় (যা CSS-এর নীতির সাথে বিরোধিতা করে না), তাহলে শনাক্তকারী শৈলী প্রয়োগ করা হবে।

লাল (রঙ:লাল;) #হলুদ (রঙ:হলুদ;)

এইভাবে, কোন ব্যাপার না কোন উপাদান আমরা সেট class="লাল"(শিরোনাম, অনুচ্ছেদ বা লিঙ্ক), এর পাঠ্যের রঙ লাল হয়ে যাবে। আমরা পৃষ্ঠায় একটি উপাদান সেট করতে পারি (যেকোনো) id="হলুদ"এবং সেই উপাদানটির পাঠ্য রঙ হলুদ হয়ে যাবে।

প্রসঙ্গ নির্বাচক

ধরা যাক আমাদের নিম্নলিখিত কোড সহ একটি HTML পৃষ্ঠা রয়েছে: আমরা চাই তির্যকগুলি সবুজ রঙে হাইলাইট করা হোক। তারপরে আমরা স্টাইল শীটে উপাদানটির জন্য একটি নির্বাচক লিখব, যেমন

i(রঙ:সবুজ;)

এখন ব্রাউজারে আমাদের পৃষ্ঠাটি এরকম দেখাচ্ছে:

কিন্তু আমরা যদি সমস্ত ইটালিক টেক্সটকে সবুজ রঙে হাইলাইট না করতে চাই, তবে শুধুমাত্র অনুচ্ছেদে থাকা টেক্সটটিই দেখতে চাই। এটি করার জন্য, আমরা স্টাইল শীটে পরিবর্তন করব:

p i(রঙ:সবুজ;)

তাই আমরা ইঙ্গিত দিয়েছি যে এই শৈলীটি উপাদানগুলিতে প্রয়োগ করা উচিত i, যা উপাদান আছে পি. উপাদানগুলির নাম একটি স্থান দ্বারা পৃথক করা হয়। এমন নির্বাচকদের বলা হয় প্রাসঙ্গিক. এখন ব্রাউজারে আমাদের পৃষ্ঠাটি এরকম দেখাচ্ছে:

গ্রুপিং নির্বাচক

যদি বেশ কয়েকটি নির্বাচকের জন্য শৈলী ঘোষণা ব্লক একই হয় (উদাহরণস্বরূপ, আমরা প্রথম তিনটি স্তরের শিরোনাম সবুজ হতে চাই), তাহলে সেগুলিকে গোষ্ঠীভুক্ত করা যেতে পারে। এটি করার জন্য, যে নির্বাচকদের একটি শৈলী প্রয়োগ করা হবে তাদের অবশ্যই কমা দ্বারা পৃথক তালিকাভুক্ত করতে হবে। উদাহরণ:

h1, h2, h3 (রঙ: সবুজ;)

ধরা যাক রঙ ছাড়াও, আমরা আমাদের শিরোনামগুলিকে একটি আকার দিতে চাই। তারপরে আমরা কেবল আমাদের স্টাইল শীটে যোগ করতে পারি:

h1, h2, h3 (রঙ:সবুজ; ) h1 (ফন্ট-সাইজ:18px; ) h2 (ফন্ট-সাইজ:16px; ) h3 (ফন্ট-সাইজ:14px; )

আমাদের শিরোনাম নির্দিষ্ট আকার থাকবে, কিন্তু তারা সব সবুজ হবে.

আসলে দলগুলো নিয়ে মতভেদ আছে। কিছু লোক মনে করেন উপরের কোডটি সঠিক, কারণ। গ্রুপিং তিনটি উপাদানের জন্য একই সম্পত্তির পুনরাবৃত্তি এড়াতে সাহায্য করে, এটি কোডকে ছোট করে।

অন্যরা বিশ্বাস করে যে এটি কোডের ধারাবাহিকতা হ্রাস করে। যেহেতু, h3 শিরোনামের জন্য নির্বাচক খুঁজে পাওয়া গেছে, কেন এটিতে পাঠ্যটি সবুজ তা অবিলম্বে স্পষ্ট নয়। যুক্তির প্রবক্তারা শুধুমাত্র সেই উপাদানগুলিকে গোষ্ঠীভুক্ত করার পরামর্শ দেন যার বিবরণ ব্লক সম্পূর্ণরূপে মেলে।

সাধারণভাবে, গ্রুপ করা বা না করা আপনার রুচির বিষয়। কিন্তু আপনি যখন অন্য লোকেদের কোড পড়েন, উদাহরণস্বরূপ, টেমপ্লেটগুলিতে, তখন আপনার বিভিন্ন পদ্ধতির কথা মনে রাখা উচিত।

এটি নির্বাচকদের পাঠ শেষ করে। পরবর্তী পাঠে আমরা ছদ্ম-উপাদান এবং ছদ্ম-শ্রেণির মত ধারণাগুলি উপস্থাপন করব।

সিএসএস নির্বাচকরা সিএসএস ভাষার অন্যতম প্রধান বৈশিষ্ট্য। নির্বাচকরা আপনাকে উপাদানগুলির একটি গ্রুপ বা শুধুমাত্র একটিতে অ্যাক্সেস করার অনুমতি দেয়।

সিএসএস-এ নির্বাচক

কোঁকড়া ধনুর্বন্ধনীতে বর্ণিত শৈলীগুলি কোন উপাদানগুলি প্রয়োগ করতে হবে তা ব্রাউজারকে বলতে নির্বাচকরা ব্যবহার করা হয়।

পি(
শৈলী...
}

এই ক্ষেত্রে, নির্বাচক হল p – অনুচ্ছেদ ট্যাগ। এই নিয়মটি একটি ওয়েব পৃষ্ঠার সমস্ত অনুচ্ছেদে শৈলী যুক্ত করবে।

CSS নির্বাচকের ধরন কি কি?

ট্যাগ নির্বাচক - সবচেয়ে সহজ. এটি একটি উদাহরণে প্রদর্শিত হয়েছে। CSS-এ লিখতে হলে আপনাকে অ্যাঙ্গেল ব্র্যাকেট ছাড়াই ট্যাগের নাম লিখতে হবে। শৈলীগুলি সেই ট্যাগ সহ সমস্ত উপাদানগুলিতে প্রয়োগ করা হবে।
টেবিল() - সমস্ত টেবিলের জন্য শৈলী
Li() - সমস্ত তালিকা আইটেমের জন্য শৈলী
A() - সমস্ত লিঙ্কের জন্য শৈলী

শৈলী ক্লাস- আপনি একটি ওয়েব পৃষ্ঠার যেকোনো উপাদানের সাথে একটি স্টাইল ক্লাস সংযুক্ত করতে পারেন। এমনকি একটি চিঠি পর্যন্ত। তারপর css ফাইলে আপনি এটির জন্য আপনার নিজস্ব শৈলী লিখে এই উপাদানটি অ্যাক্সেস করতে পারেন। এটি করার জন্য, আপনাকে একটি বিন্দু স্থাপন করতে হবে এবং এটির পরে শৈলী শ্রেণীর নাম লিখতে হবে। উদাহরণ:
সম্পর্কে
.down() - নিয়মগুলি সমস্ত উপাদানগুলিতে প্রয়োগ করা হবে যার বৈশিষ্ট্য ক্লাস = "down" আছে
.float() - নিয়মগুলি সমস্ত উপাদানের ক্ষেত্রে প্রযোজ্য হবে যার বৈশিষ্ট্য ক্লাস = "float" আছে।

আপনি দেখতে পাচ্ছেন, মূল জিনিসটি একটি বিন্দু তৈরি করা। একটি শৈলী শ্রেণী সীমাহীন সংখ্যক উপাদানের সাথে আবদ্ধ হতে পারে। একটি উপাদান বিভিন্ন ক্লাস বরাদ্দ করা যেতে পারে.

শনাক্তকারী- অন্য ধরনের নির্বাচক। একটি শনাক্তকারী শুধুমাত্র একটি উপাদানের জন্য বরাদ্দ করা যেতে পারে। এটিতে দুটি শনাক্তকারী থাকতে পারে না এবং এই উপাদানটির সাথে যুক্ত আইডি অন্য কোথাও নিবন্ধিত হতে পারে না।

এটি এই মত সেট করা হয়:

অনুচ্ছেদ

অর্থাৎ ক্লাসের মতোই শুধুমাত্র অ্যাট্রিবিউট ব্যবহার করা হয় আইডিযেকোনো শব্দ তার অর্থ হিসেবে ব্যবহৃত হয়।

CSS এর মাধ্যমে একটি শনাক্তকারী সহ একটি উপাদান অ্যাক্সেস করতে, আপনাকে আইডি মান লিখতে হবে এবং এটির সামনে একটি হ্যাশ রাখতে হবে।

#প্রথম(
হরফের আকার: 22px
}

আমরা সঙ্গে অনুচ্ছেদ চালু id = প্রথম. শৈলী শুধুমাত্র এটি প্রয়োগ করা হবে. অবশিষ্ট অনুচ্ছেদের জন্য, ফন্টের আকার পরিবর্তন হবে না।

আসুন CSS নির্বাচকদের কথা বলি। ক্লাসের নাম, আইডি এবং এইচটিএমএল ট্যাগের নামের মাধ্যমে উপাদানগুলিতে স্বাভাবিক অ্যাক্সেস ছাড়াও, আপনি বিশেষ সমন্বয় এবং কমান্ড ব্যবহার করতে পারেন। আসুন নিবন্ধে আরো বিস্তারিতভাবে তাদের তাকান। কিছু নির্বাচক সমস্ত ব্রাউজার দ্বারা সমর্থিত, কিছু শুধুমাত্র ব্রাউজারগুলির নতুন সংস্করণ দ্বারা সমর্থিত৷

1. * - সমস্ত উপাদান নির্বাচন করে

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

এটি একটি নির্দিষ্ট পাত্রের সমস্ত বাচ্চাদের হাইলাইট করতেও ব্যবহার করা যেতে পারে।

#কন্টেইনার * (সীমানা: 1px কঠিন কালো;)

এই ক্ষেত্রে, #container ব্লকের সমস্ত চাইল্ড উপাদান নির্বাচন করা হয়। অপব্যবহার না করার চেষ্টা করুন।

সামঞ্জস্য

• IE6+
• ফায়ারফক্স
• ক্রোম
• সাফারি
• অপেরা

2. #এক্স

CSS নির্বাচকের সামনে হ্যাশ চিহ্নটি id="container" দিয়ে উপাদানটিকে হাইলাইট করবে। এটা খুবই সহজ, কিন্তু আইডি ব্যবহার করার সময় সতর্ক থাকুন।

নিজেকে জিজ্ঞাসা করুন: আমাকে কি আইডি দ্বারা হাইলাইট করতে হবে?

আইডি মানগুলি স্টাইলটিকে উপাদানটিতে শক্তভাবে লক করে এবং পুনরায় ব্যবহারযোগ্য নয়। এটা class="" ক্লাস, ট্যাগ নাম, বা এমনকি ছদ্ম-শ্রেণী ব্যবহার করা বাঞ্ছনীয় হবে।

সামঞ্জস্য

• IE6+
• ফায়ারফক্স
• ক্রোম
• সাফারি
• অপেরা

3.এক্স

এটি ক্লাস X এর একটি CSS নির্বাচক। আইডি এবং ক্লাসের মধ্যে পার্থক্য হল যে একটি ক্লাস একটি পেজে একাধিক উপাদানের মালিক হতে পারে। আপনি যখন একই ধরনের একাধিক উপাদানে একটি শৈলী প্রয়োগ করতে চান তখন ক্লাস ব্যবহার করুন। আইডি ব্যবহার করার সময়, আপনাকে প্রতিটি পৃথক উপাদানের জন্য একটি স্টাইল লিখতে হবে।

সামঞ্জস্য

• IE6+
• ফায়ারফক্স
• ক্রোম
• সাফারি
• ক্রোম

4. এক্সY

CSS চাইল্ড এলিমেন্ট সিলেক্টর সবচেয়ে সাধারণ। আপনি যদি অনেক শিশু উপাদান থেকে একটি নির্দিষ্ট ধরনের উপাদান নির্বাচন করতে চান, এই নির্বাচক ব্যবহার করুন. উদাহরণস্বরূপ, আপনাকে li উপাদানে থাকা সমস্ত লিঙ্কগুলিকে হাইলাইট করতে হবে। এই ক্ষেত্রে, এই নির্বাচক ব্যবহার করুন.

আপনি CSS নির্বাচকদের মত করা উচিত নয় X Y Z A B. ত্রুটি . সর্বদা নিজেকে জিজ্ঞাসা করুন যে একটি প্রদত্ত উপাদান হাইলাইট করার জন্য এই ধরনের একটি কষ্টকর CSS নির্বাচক লেখার প্রয়োজন আছে কিনা।

সামঞ্জস্য

• IE6+
• ফায়ারফক্স
• ক্রোম
• সাফারি
• ক্রোম

5.এক্স

যদি আপনি একটি পৃষ্ঠায় একটি প্রদত্ত ধরনের সমস্ত উপাদান কভার করতে চান? এটি সহজ রাখুন, একটি CSS প্রকার নির্বাচক ব্যবহার করুন। যদি আপনাকে সমস্ত অ-ক্রমবিহীন তালিকা হাইলাইট করতে হয় তবে ul() ব্যবহার করুন

সামঞ্জস্য

• IE6+
• ফায়ারফক্স
• ক্রোম
• সাফারি
• অপেরা

আমরা pseudo-class:link ব্যবহার করি এমন সমস্ত লিঙ্ক হাইলাইট করতে যা এখনও ক্লিক করা হয়নি।

যদি আমাদের ইতিমধ্যে পরিদর্শন করা লিঙ্কগুলিতে একটি নির্দিষ্ট শৈলী প্রয়োগ করতে হয়, তাহলে আমরা pseudo-class:visited ব্যবহার করি।

সামঞ্জস্য

• IE7+
• ফায়ারফক্স
• ক্রোম
• সাফারি
• অপেরা

7. এক্স+ওয়াই

পরবর্তী উপাদান নির্বাচন করে। তিনি নির্বাচন করবেন কেবল Y টাইপের একটি উপাদান যা X এলিমেন্টের পরপরই আসে। উদাহরণে, প্রতিটি উল-এর পর প্রথম অনুচ্ছেদের টেক্সট লাল হবে।

সামঞ্জস্য

• IE7+
• ফায়ারফক্স
• ক্রোম
• সাফারি
• ক্রোম

8. এক্স>ওয়াই

স্ট্যান্ডার্ড X Y এবং X > Y এর মধ্যে পার্থক্য হল যে প্রশ্নে CSS নির্বাচক শুধুমাত্র তাৎক্ষণিক শিশু উপাদান নির্বাচন করবে। উদাহরণস্বরূপ, নিম্নলিখিত কোড বিবেচনা করুন।

• তালিকাবদ্ধ
  • শিশু উপাদান
• তালিকাবদ্ধ
• তালিকাবদ্ধ
• তালিকাবদ্ধ