সিএসএস সিলেক্টর ব্যবহার করে কীভাবে কোনও ওয়েব পৃষ্ঠার অংশকে লক্ষ্যবস্তু করবেন

ক্যাসকেডিং স্টাইল শীট (সিএসএস) আপনাকে আপনার ওয়েবপৃষ্ঠাগুলির চেহারা রূপান্তর করতে দেয়। হরফ এবং রঙ থেকে ব্যবধান এবং সামগ্রিক বিন্যাসে, নকশার সমস্ত ধরণের সরঞ্জাম আপনার নখদর্পণে। যদিও সিএসএস সম্পূর্ণরূপে একটি জটিল ভাষা, তবে শুরু করতে আপনাকে কেবল দুটি প্রাথমিক ধারণাটি বুঝতে হবে।

আপনি সমস্ত পৃষ্ঠার কোন অংশটি স্টাইল করতে চান তা সনাক্ত করেই এটি শুরু হয়।

সিএসএস = নির্বাচক + ঘোষণা

একটি সিএসএস ফাইলটিতে এইচটিএমএল ফাইলটি কীভাবে ফর্ম্যাট করা উচিত তা বর্ণনা করার নিয়মগুলির একটি সিরিজ রয়েছে। প্রতিটি নিয়মে দুটি অংশ থাকে: কী স্টাইল করা যায় এবং কীভাবে এটি স্টাইল করা যায়। প্রথম অংশটি "নির্বাচক" নামে পরিচিত পদগুলির একটি সিরিজ ব্যবহার করে নিয়ন্ত্রণ করা হয়।

এই নিবন্ধের উদাহরণগুলির মধ্যে শৈলীর ঘোষণার অন্তর্ভুক্ত রয়েছে তবে সেগুলি ফোকাস নয়: নির্বাচকরা নিজেরাই।

.তিহাসিকভাবে, ব্রাউজার সমর্থনের বিভিন্ন ডিগ্রি সহ তিনটি সিএসএস নির্বাচক স্তর (বা সংস্করণ) ছিল। ক্যান আই ইউজ অনুসারে 2020 সালে, এগুলি সারা বিশ্বে 99 শতাংশের বেশি ব্যবহারকারীদের জন্য উপলব্ধ।

স্তর 1 নির্বাচক

স্তর 1 এমন চারটি মৌলিক ধরণের নির্বাচককে পরিচয় করিয়ে দিয়েছে যা আজও বিপুল সংখ্যক মামলা coverেকে রাখে।

প্যাটার্ন	ম্যাচ
E	সমস্ত ই উপাদান
.c	শ্রেণি = "সি" সহ সমস্ত উপাদান
#myid	আইডি = "ম্যারিড" সহ উপাদান
EF	একটি E উপাদানের ভিতরে একটি এফ উপাদান
সিউডো-ক্লাস
E:link	এমন একটি পৃষ্ঠায় একটি হাইপার লিঙ্ক যা এর আগে দেখা হয়নি
E:visited	ইতিমধ্যে পরিদর্শন করা হয়েছে এমন একটি পৃষ্ঠায় একটি হাইপার লিঙ্ক
E:active	বর্তমানে নির্বাচিত একটি হাইপারলিঙ্ক
সিউডো-উপাদানসমূহ
E::first-line	একটি E উপাদানের প্রথম ফর্ম্যাট লাইন
E::first-letter	কোনও ই এলিমেন্টের প্রথম ফর্ম্যাট লেটার

টাইপ নির্বাচনকারী

খুব সাধারণ নির্বাচক হ'ল "টাইপ নির্বাচনকারী"। এটি অনুচ্ছেদে বা গা bold় পাঠ্যের মতো কোনও উপাদানটির সমস্ত দৃষ্টান্তকে লক্ষ্য করে:

 p { margin-bottom: 0; }
 b { font-family: sans-serif; }

শ্রেণি নির্বাচক

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

 .intro { font-weight: bold; }

এই নির্বাচক মেলে:

 <p class="intro">…</p>

তবে মনে রাখবেন এটিও মিলবে:

 <ul class="intro">…</ul>

আপনি যদি কেবল এটি ইন্ট্রো অনুচ্ছেদে প্রয়োগ করতে চান তবে আপনি টাইপ নির্বাচনকারী এবং শ্রেণি নির্বাচককে একত্রিত করতে পারেন:

 p.intro { font-weight: bold; }

আইডি নির্বাচনকারী

এইচটিএমএল আইডি বৈশিষ্ট্যটি কোনও দস্তাবেজের মধ্যে স্বতন্ত্র হওয়া উচিত, উদাহরণস্বরূপ:

 <div id="contents">…</div>

"বিষয়বস্তু" আইডি সহ এটিই একমাত্র উপাদান হওয়া উচিত। একটি আইডি নির্বাচক আপনাকে কোনও দস্তাবেজের সেই নির্দিষ্ট উপাদানটিকে লক্ষ্য করতে অনুমতি দেয়:

 #contents { color: #333; }

বংশোদ্ভূত নির্বাচক

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

 table b { font-weight: normal; }

সিউডো ক্লাস এবং উপাদানসমূহ

সিউডো নির্বাচকরা ক্লাস বা উপাদানগুলিকে লক্ষ্য করে যা স্পষ্টভাবে উপস্থিত থাকে না তবে যেভাবেই উপলভ্য করা হয়। এগুলিকে বিশেষ সামগ্রী বোনাস হিসাবে ভাবেন:

 p::first-line { text-transform: uppercase; }

নির্বাচক তালিকা

আপনি যদি প্রতিটিটিতে নিয়মের একই সেট প্রয়োগ করতে চান তবে নির্বাচকদের একটি তালিকায় একত্রিত করতে একটি কমা ব্যবহার করুন। পরিবর্তে:

 th { padding: 1em; }
 td { padding: 1em; }

তুমি লিখতে পারো:

 th, td { padding: 1em; }

বিশিষ্টতা

স্টাইল শিটটি নিয়মের একটি সিরিজ যা কোনও উপাদানকে ম্যাচ করার জন্য নির্বাচককে ব্যবহার করে, তবে যখন একাধিক নিয়ম একটি নির্দিষ্ট উপাদানটির সাথে মেলে তখন কী ঘটে? ফলস্বরূপ আচরণটি "নির্দিষ্টতা" দ্বারা পরিচালিত হয় যা কোনও ক্ষেত্রে যেমন বিধি ব্যবহৃত হয় তা নির্ধারণ করে:

 p.intro { color: black; }
 p { color: gray; }

এই জাতীয় ক্ষেত্রে অগ্রাধিকার গ্রহণের নিয়মটি তার নির্দিষ্টতা দ্বারা সংজ্ঞায়িত করা হয়েছে:

1. আইডি নির্বাচক (`# বিষয়বস্তু) সর্বাধিক নির্দিষ্ট।
2. শ্রেণি নির্বাচক (a .uthor`) কম সুনির্দিষ্ট।
3. প্রকার নির্বাচনকারী (`p`) স্বল্পতম নির্দিষ্ট।

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

স্তর 2 নির্বাচক

সিএসএস নির্বাচকদের পরবর্তী সংশোধনী সিটিও-ক্লাস এবং সিউডো-উপাদানগুলিতে প্রসারিত এবং বৈশিষ্ট্য নির্বাচনকারীদের পরিচয় করিয়ে দিয়েছিল এবং দুটি নতুন সংযুক্তকারী যুক্ত করেছে।

প্যাটার্ন	ম্যাচ
*	যে কোনও উপাদান
E > F	একটি E উপাদান একটি এফ উপাদান শিশু
E + F	তত্ক্ষণাত একটি ই উপাদান দ্বারা একটি এফ উপাদান
বৈশিষ্ট্য নির্বাচক
E[foo]	একটি "foo" বৈশিষ্ট্যযুক্ত একটি উপাদান
E[foo="bar"]	একটি E উপাদান যার "foo" গুণটি হ'ল "বার"
E[foo~="bar"]	একটি E উপাদান যার "foo" বৈশিষ্ট্য হ'ল সাদা স্থান-বিভাজিত মানগুলির একটি তালিকা, যার মধ্যে একটি "বার"
E[foo|="en"]	একটি E উপাদান যার "foo" বৈশিষ্ট্যের একটি "হাই" দিয়ে শুরু হওয়া মানগুলির একটি হাইফেন-বিভাজিত তালিকা রয়েছে
সিউডো-ক্লাস
E:first-child	একটি ই উপাদান, এর পিতামাতার প্রথম সন্তান
E:lang(fr)	ভাষা "এফ" তে E টাইপের একটি উপাদান
সিউডো-উপাদানসমূহ
E::before	কোনও ই উপাদানটির সামগ্রীর আগে তৈরি সামগ্রী
E::after	কোনও ই উপাদানটির সামগ্রীর পরে তৈরি সামগ্রী

সর্বজনীন নির্বাচক

"*" যে কোনও উপাদানটির সাথে মেলে। এটি প্রায়শই দরকারী নয়, তবে আপনি যদি কোনও ডিফল্ট মার্জিন পুনরায় সেট করতে চান, উদাহরণস্বরূপ, আপনি এটি করতে পারেন:

 * { margin: 0; }

বৈশিষ্ট্য নির্বাচনকারী

বৈশিষ্ট্য নির্বাচনকারীরা শৈলীগুলিকে খুব নির্দিষ্টভাবে লক্ষ্যবস্তু করার অনুমতি দেয়, কোনও উপাদানটির বৈশিষ্ট্য দ্বারা ফিল্টার করে:

 a[title] { text-decoration: underline dotted; }

শিশু সমন্বয়কারী: তত্ক্ষণাত্ একটি উপাদান অন্যরকম ide

বংশোদ্ভূত সমন্বয়কারীের মতো, তবে এটি কেবলমাত্র তাত্ক্ষণিক শিশুদের সাথে মেলে, বংশধররা গাছের নীচে কোন নীচে নামেন না। উদাহরণস্বরূপ, "উল> লি" এখানে কেবল "বিভাগ 1" পাঠ্যের সাথে মিলবে, এবং "বিভাগ 1.1" এর সাথে নয়:

 <ul>
 <li>
 Section 1
 <ul>
 <li>Section 1.1</li>
 <li>Section 1.2</li>
 </ul>
 <li>
 </ul>

সংলগ্ন ভাইবোর্ড সংযুক্তকারী: পরের ভাইবোন

 h1 + p { font-weight: bold; }

মার্জিনগুলি নিয়ন্ত্রণ করার জন্য প্রায়শই কার্যকর বা নির্দিষ্ট শ্রেণিবিহীন একটি সূচনা অনুচ্ছেদের জন্য দরকারী, এই নির্বাচক কেবল তখনই একটি উপাদানটির সাথে মেলে যদি তা অবিলম্বে অন্যটিকে অনুসরণ করে। উদাহরণস্বরূপ, এখানে কেবল প্রথম অনুচ্ছেদটি মিলবে, দ্বিতীয়টি নয়:

 <h1>Contents</h1>
 some extra text
 <p>Introductory paragraph</p>
 <p>Following paragraph</p>

নোট করুন যে এই নির্বাচক কেবল পরবর্তী উপাদানটি কী তা সিদ্ধান্ত নেওয়ার সময় উপাদানগুলিকে কেবল পাঠ্য নয় consid

উত্তরাধিকার

কিছু সিএসএস বৈশিষ্ট্য পূর্বসূর উপাদান থেকে তাদের মান উত্তরাধিকার সূত্রে প্রাপ্ত হয়। অনুশীলনে, এর অর্থ example উদাহরণস্বরূপ — যে "বডি" উপাদানটির ফন্টের মুখ নির্ধারণের অর্থ প্রতিটি অনুচ্ছেদ, টেবিল ইত্যাদিতেও একই ফন্টের মুখ হয়।

অবশ্যই, আপনি যা প্রত্যাশা করেছেন এটি হ'ল, তবে এমন একটি সম্পত্তি বিবেচনা করুন যা উত্তরাধিকারসূত্রে পাওয়া যায় না: "মার্জিন", উদাহরণস্বরূপ। আপনি চাইবেন না প্রতিটি স্বতন্ত্র অনুচ্ছেদ বা বিট গা .় পাঠ্যের পুরো ডকুমেন্টের মতোই মার্জিন থাকে।

সম্পর্কিত: সাধারণ সিএসএস কোড উদাহরণগুলি আপনি 10 মিনিটে শিখতে পারেন

থাম্বের একটি ভাল নিয়ম উপাদানগুলি হিসাবে লক্ষ্য হিসাবে সাধারণভাবে বিবেচনা করা হয় – প্রতিটি স্বতন্ত্র উপাদানকে লক্ষ্য করবেন না যখন একটি সাধারণ "দেহ" নির্বাচক করবেন।

স্তর 3 নির্বাচক

কিছু অ্যাট্রিবিউট সিলেক্টর এবং একটি নতুন কম্বিনেটর পাশাপাশি এই স্তরে আরও অনেক সিউডো-ক্লাস যুক্ত হয়েছিল।

প্যাটার্ন	ম্যাচ
E ~ F	একটি E উপাদান এর আগে একটি এফ উপাদান
বৈশিষ্ট্য নির্বাচক
E[foo^="bar"]	একটি E উপাদান যার "ফু" বৈশিষ্ট্যটি "বার" স্ট্রিং দিয়ে শুরু হয়
E[foo$="bar"]	একটি E উপাদান যার "ফু" বৈশিষ্ট্যটি "বার" স্ট্রিংয়ের সাথে শেষ হয়
E[foo*="bar"]	একটি E উপাদান যার "foo" বৈশিষ্ট্যে স্ট্রিং "বার" রয়েছে
সিউডো-ক্লাস
E:root	একটি ই উপাদান, নথির মূল
E:nth-child(n)	একটি ই উপাদান, এর পিতামাতার এন-তম সন্তান
E:nth-last-child(n)	একটি ই উপাদান, তার পিতামাতার এন-তম সন্তান, শেষটি থেকে গণনা করছে
E:nth-of-type(n)	একটি ই উপাদান, এর ধরণের n-th সহোদর
E:nth-last-of-type(n)	একটি ই উপাদান, শেষ ধরণের থেকে গণনা করে এর ধরণের এন-তম ভাইবাল
E:last-child	একটি ই উপাদান, এর পিতামাতার শেষ সন্তান
E:first-of-type	একটি ই উপাদান, এর প্রকারের প্রথম সহোদর
E:last-of-type	একটি ই উপাদান, তার ধরণের শেষ ভাইবোন
E:only-child	একটি ই উপাদান, এর পিতামাতার একমাত্র সন্তান
E:only-of-type	একটি ই উপাদান, কেবল তার ধরণের ভাইবাল
E:empty	কোনও E উপাদান যার কোনও সন্তান নেই (পাঠ্য নোড সহ)
E:target	উল্লেখযোগ্য ইউআরআই এর লক্ষ্য হওয়ায় একটি E উপাদান element
E:enabled	সক্ষম ইউজার ইন্টারফেস উপাদান E
E:disabled	একটি ব্যবহারকারী ইন্টারফেস উপাদান ই যা অক্ষম
E:checked	একটি ব্যবহারকারী ইন্টারফেস উপাদান ই যা পরীক্ষা করা হয়েছে
E:not(s)	একটি ই উপাদান যা সাধারণ নির্বাচকগুলির সাথে মেলে না

বৈশিষ্ট্য নির্বাচনকারী

আপনি প্রদত্ত মান দিয়ে শুরু হওয়া এমন একটি অ্যাট্রিবিউটের সাথে উপাদান নির্বাচন করতে পারেন: a[href^="https:"] , একটি প্রদত্ত মান দিয়ে শেষ হয়: img[src$=".gif"] , বা একটি মান রয়েছে: a[*="value"] ।

সিউডো ক্লাস

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

জেনারেল সিবিলিং কম্বিনেটর: একটি নিম্নলিখিত ভাইবোন

স্তর 2 এর অ্যাডজাস্টেন্ট সিলিং কম্বিনেটরের অনুরূপ, এটি কেবল পরেরটি নয়, একের পর এক ভাইবিলের সাথে মেলে:

 h1 ~ p { font-size: 110%; }

সিএসএস নির্বাচক এবং তাদের কীভাবে ব্যবহার করবেন

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

চিত্র ক্রেডিট: পঙ্কজ প্যাটেল / আনস্প্ল্যাশ