CSS নির্বাচকরা ওয়েব ডেভেলপারদের একটি নির্দিষ্ট উপাদান বা একটি ওয়েব পৃষ্ঠার উপাদানগুলির সেটে শৈলী প্রয়োগ করার অনুমতি দেয়।
নির্বাচকদের সাথে কাজ করার সময়, আপনি সিদ্ধান্ত নিতে পারেন যে আপনি শুধুমাত্র একটি নির্দিষ্ট বৈশিষ্ট্য সহ উপাদানগুলিকে লক্ষ্য করতে চান৷ এখানেই CSS অ্যাট্রিবিউট সিলেক্টর আসে। অ্যাট্রিবিউট সিলেক্টর আপনাকে শুধুমাত্র নির্দিষ্ট অ্যাট্রিবিউট সহ উপাদানগুলিতে নির্দিষ্ট স্টাইল প্রয়োগ করতে সাহায্য করে।
এই টিউটোরিয়ালে আলোচনা করা হবে কিভাবে উপাদান স্টাইল করার সময় CSS অ্যাট্রিবিউট সিলেক্টর ব্যবহার করতে হয়। এই টিউটোরিয়ালটি পড়ার শেষে, আপনি শৈলী উপাদানগুলিতে বৈশিষ্ট্য নির্বাচক ব্যবহারে একজন বিশেষজ্ঞ হয়ে উঠবেন।
HTML গুণাবলী
HTML-এ, বৈশিষ্ট্যগুলি একটি উপাদানের অতিরিক্ত বৈশিষ্ট্য বা বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, উচ্চতা বৈশিষ্ট্য একটি চিত্রের উচ্চতা সেট করে এবং শিরোনাম বৈশিষ্ট্য একটি ওয়েব উপাদানের শিরোনাম সেট করে।
আপনি নাম/মান পেয়ার গঠন ব্যবহার করে গুণাবলী ঘোষণা করেন। এর মানে হল, একটি HTML ফাইলে, একটি বৈশিষ্ট্য এইভাবে প্রদর্শিত হবে: name=“value” . HTML-এর বৈশিষ্ট্য সম্পর্কে আরও জানতে, HTML বৈশিষ্ট্যগুলির জন্য আমাদের নির্দেশিকা পড়ুন।
CSS অ্যাট্রিবিউট সিলেক্টর
আপনি যখন একটি সাইট ডিজাইন করছেন, আপনি সেই উপাদানগুলির একটি নির্দিষ্ট বৈশিষ্ট্যের মান আছে কিনা তার উপর ভিত্তি করে উপাদানগুলিতে একটি স্টাইল প্রয়োগ করতে চাইতে পারেন। আপনি এটি করতে CSS অ্যাট্রিবিউট সিলেক্টর ব্যবহার করেন।
অ্যাট্রিবিউট সিলেক্টর ব্যবহার করার সময় আপনি যে দুটি পদক্ষেপ নেবেন তা হল:
- বর্গাকার বন্ধনীর মধ্যে একটি বৈশিষ্ট্যের নাম সংযুক্ত করুন।
- এই নামের বৈশিষ্ট্যগুলিতে আপনি যে শৈলীগুলি প্রয়োগ করতে চান তা নির্দিষ্ট করুন৷ ৷
চলুন CSS অ্যাট্রিবিউট সিলেক্টরের কিছু উদাহরণ দেখি।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগদানের পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
CSS [অ্যাট্রিবিউট]
অ্যাট্রিবিউট সিলেক্টরের সবচেয়ে মৌলিক ফর্ম হল:[attribute] . সহজ কথায়, আপনি বর্গাকার বন্ধনীতে একটি বৈশিষ্ট্যের নাম ঘেরাও করেন।
ধরুন আমরা 16px এ শিরোনাম বৈশিষ্ট্য সহ প্রতিটি উপাদানের ফন্ট সাইজ সেট করতে চাই। আমরা এই কোড ব্যবহার করে তা করতে পারি:
[title] {
font-size: 16px;
}
আমাদের CSS নিয়মের কোড শুধুমাত্র একটি শিরোনাম বৈশিষ্ট্য সহ উপাদানগুলিতে প্রযোজ্য হবে। একটি শিরোনাম বৈশিষ্ট্য সহ যেকোন উপাদানের ফন্টের আকার নির্দিষ্ট করা হয়েছে - সেই বৈশিষ্ট্যটি যে মানই সঞ্চয় করে না কেন - উপরের নিয়ম অনুসারে 16px এ পরিবর্তিত হবে৷
আপনি নিম্নলিখিত একটি বা উভয় নির্দিষ্ট করে আপনার বৈশিষ্ট্য নির্বাচককে আরও সুনির্দিষ্ট করতে পারেন:
- একটি নির্দিষ্ট উপাদানের ধরন যাতে একটি নিয়ম প্রযোজ্য হয়
- এর বৈশিষ্ট্য আইডি মান (যেমন পাঠ্যের জন্য "শিরোনাম", একটি লিঙ্কের জন্য "href" বা যেকোনো উপাদানের জন্য "শ্রেণী")।
উদাহরণস্বরূপ, ধরুন আপনি সমস্ত অনুচ্ছেদ হেডার পাঠ্যের আকার 16 পিক্সে সেট করতে চান। আপনি এই কোড ব্যবহার করে তা করতে পারেন:
[title] {
font-size: 16px;
}
অক্ষর p অ্যাট্রিবিউট সিলেক্টরের শুরুতে ব্রাউজারকে ফন্ট স্টাইল শুধুমাত্র <p> এ প্রয়োগ করতে বলে। ট্যাগ. [title] নির্বাচকের অংশটি ব্রাউজারকে ফন্ট স্টাইলটি শুধুমাত্র একটি title সহ
ট্যাগগুলিতে প্রয়োগ করার নির্দেশ দেয়। বৈশিষ্ট্য নির্দিষ্ট করা হয়েছে।
অতএব, এই কোডটি পড়ার পরে, ব্রাউজার সমস্ত অনুচ্ছেদ (p) শিরোনামের ফন্টের আকার 16 পিক্সে রূপান্তর করবে। এই কোডটি পৃষ্ঠার অন্য কোনো লেখাকে প্রভাবিত করবে না।
CSS [অ্যাট্রিবিউট=“মান”]
[attribute=“value”] বৈশিষ্ট্য নির্বাচক কোডারকে শুধুমাত্র সেই উপাদানগুলিতে শৈলী প্রয়োগ করতে সক্ষম করে যার বৈশিষ্ট্যের মান নির্বাচকে নির্দিষ্ট করা মানের সমান।
ধরুন আমরা ক্যারিয়ার কারমা হোমপেজের সমস্ত লিঙ্কের পটভূমির রঙ কমলাতে সেট করতে চাই। এই শৈলীটি a এর পটভূমির রঙ সেট করা উচিত কমলা থেকে উপাদান. আমরা নিম্নলিখিত CSS কোড ব্যবহার করে এই কর্ম সম্পাদন করতে পারি:
a[href="careerkarma.com"] {
background-color: orange;
}
এই নিয়মটি আপনার ওয়েব পৃষ্ঠার সমস্ত উপাদান নির্বাচন করে যার href বৈশিষ্ট্যটি careerkarma.com এর সমান। . তারপর, এটি সেই সমস্ত উপাদানগুলির পটভূমির রঙ কমলাতে সেট করে।
CSS [অ্যাট্রিবিউট~=“মান”]
[attribute~=“value”] নির্বাচক আপনাকে বৈশিষ্ট্য মান সহ উপাদান নির্বাচন করতে দেয় যাতে একটি নির্দিষ্ট শব্দ থাকে।
উদাহরণস্বরূপ, ধরুন আপনি সমস্ত p-এ একটি স্টাইল প্রয়োগ করতে চান blue শব্দের সাথে মেলে শিরোনাম সহ উপাদান . এই শৈলীর জন্য, এই উপাদানগুলির পাঠ্যের রঙ নীলে পরিবর্তন করা উচিত।
এই কাজটি সম্পন্ন করার জন্য আমরা নিম্নলিখিত নিয়ম ব্যবহার করতে পারি:
p[title~="blue"] {
color: blue;
}
এই নিয়মটি "নীল" শব্দ ধারণকারী শিরোনামগুলির সাথে যুক্ত সমস্ত
ট্যাগ খুঁজে পাবে এবং সেই
ট্যাগের মধ্যে পাঠ্যের রঙ নীল রঙে সেট করবে। সুতরাং, যদি একটি
ট্যাগের শিরোনাম থাকে blue color অথবা color blue , এই শৈলী প্রযোজ্য হবে. যাইহোক, এই নিয়ম না হবে৷ শিরোনাম blueColor সহ একটি
ট্যাগে প্রয়োগ করুন কারণ blue শব্দটি বৈশিষ্ট্যের মধ্যে স্বাধীনভাবে উপস্থিত নয়।
এটি *= selector থেকে আলাদা , যা শুধুমাত্র একটি বৈশিষ্ট্যে একটি নির্দিষ্ট শব্দ খুঁজে পায় না, কিন্তু একটি বৈশিষ্ট্যের একটি নির্দিষ্ট মানও খুঁজে পেতে পারে।
CSS [অ্যাট্রিবিউট|=“মান”]
[attribute|=“value”] নির্বাচক আপনাকে একটি নির্দিষ্ট মান দিয়ে শুরু করে এমন বৈশিষ্ট্য সহ উপাদান নির্বাচন করতে দেয় (উদাহরণস্বরূপ, "শীর্ষ")। এর মধ্যে অ্যাট্রিবিউট সহ উপাদানগুলি রয়েছে যা নির্দিষ্ট মান দিয়ে শুরু হয় এবং একটি হাইফেন ধারণ করে যার পরে অতিরিক্ত পাঠ্য থাকে (উদাহরণস্বরূপ, "টপ-স্টাইল" এবং অন্যান্য "শীর্ষ-" মান)। মনে রাখবেন যে কোডটি "ক্লাস" শব্দের পরে একটি উল্লম্ব বার (|) ডাকে৷
উদাহরণস্বরূপ, ধরুন আপনি প্রতিটি <div>-এ একটি 10px শীর্ষ প্যাডিং বরাদ্দ করতে চান top দিয়ে শুরু হয় এমন একটি ক্লাস অ্যাট্রিবিউট সহ উপাদান , অন্যান্য হাইফেন-বিচ্ছিন্ন মান দ্বারা অনুসরণ করা সহ। আপনি এই কোড ব্যবহার করে তা করতে পারেন:
div[class|="top"] {
padding-top: 10px;
}
এই নিয়মটি প্রতিটি
top দিয়ে শুরু হয় , top- দিয়ে শুরু হওয়া ক্লাস নামের উপাদানগুলি সহ .
আপনি যে মানটি নির্দিষ্ট করেছেন সেটি অবশ্যই একটি সম্পূর্ণ শব্দ বা হাইফেন দ্বারা অনুসরণ করা একটি শব্দ হতে হবে তা লক্ষ্য করা গুরুত্বপূর্ণ৷ অন্য কথায়, আমাদের উপরের স্টাইল top style শ্রেণীর নাম সহ
top-style , কিন্তু ক্লাস নাম topstyle সহ একটি CSS [অ্যাট্রিবিউট^=“মান”]
[attribute^=“value”] নির্বাচক উপাদান নির্বাচন করতে ব্যবহার করা হয় যার বৈশিষ্ট্য মান একটি নির্দিষ্ট মান দিয়ে শুরু হয়। আপনি যে মানটি নির্দিষ্ট করেছেন তা সম্পূর্ণ শব্দ হতে হবে না, [attribute|=“value”] এর বিপরীতে নির্বাচক আমরা আগে আলোচনা.
ধরুন আমরা প্রতিটি
paddingBottom দিয়ে শুরু হয়। . আমরা এই কোড ব্যবহার করে তা করতে পারি:div[class^="paddingBottom"] {
padding-bottom: 10px;
}
ব্যবহারকারীর ওয়েব ব্রাউজারটি প্যাডিং-বটম স্টাইলটি প্রয়োগ করবে যা আমরা সকল
CSS [অ্যাট্রিবিউট$=“মান”]
$= operator সমস্ত উপাদান নির্বাচন করতে ব্যবহৃত হয় যার বৈশিষ্ট্য মান একটি নির্দিষ্ট মান দিয়ে শেষ হয়। উদাহরণস্বরূপ, ধরুন আপনি সমস্ত হাইপারলিঙ্ক করা পাঠ্যের পাঠ্যের রঙ ধূসর করতে চান যার href বৈশিষ্ট্যের মানগুলি .app এ শেষ হয়। . আপনি এই কোড ব্যবহার করে তা করতে পারেন:
a[href$=".app"] {
color: gray;
}
এই নির্বাচক আপনার ওয়েব পৃষ্ঠার সমস্ত উপাদানগুলিতে প্রযোজ্য হবে যার href মানগুলি .app এ শেষ হয় .
CSS [অ্যাট্রিবিউট*=“মান”]
*= operator আপনাকে এমন সমস্ত উপাদান নির্বাচন করতে দেয় যার বৈশিষ্ট্যের মানগুলিতে একটি নির্দিষ্ট মান রয়েছে। ~= operator থেকে ভিন্ন , এই বৈশিষ্ট্য নির্বাচক একটি ক্লাসে একটি নির্দিষ্ট মান খুঁজে পেতে পারে, শুধুমাত্র একটি শব্দ নয়।
উদাহরণস্বরূপ, ধরুন আপনি সমস্ত
allPadding রয়েছে . আপনি এই নিয়ম ব্যবহার করে তা করতে পারেন:div[class*="allPadding"] {
padding: 50px;
}
এই নিয়মটি allPadding শব্দটি ধারণ করে এমন ক্লাস অ্যাট্রিবিউট সহ সমস্ত HTML উপাদানগুলির চারপাশে একটি 50px প্যাডিং সেট করবে . সুতরাং, new allPadding ক্লাসের নাম সহ উপাদান , surround allPadding red , allPaddingblue এবং allPadding-true সব এই শৈলী বিষয় হবে.
উপসংহার
CSS অ্যাট্রিবিউট সিলেক্টর ডেভেলপারদের তাদের অ্যাট্রিবিউট মানের উপর ভিত্তি করে উপাদান নির্বাচন করতে এবং সেই উপাদানগুলিতে নির্দিষ্ট শৈলী প্রয়োগ করতে দেয়।
এই টিউটোরিয়ালটি উদাহরণের রেফারেন্স সহ, অ্যাট্রিবিউট সিলেক্টরের বেসিক এবং কীভাবে সমস্ত ধরণের সিএসএস অ্যাট্রিবিউট সিলেক্টর ব্যবহার করতে হয় তা নিয়ে আলোচনা করা হয়েছে। এখন আপনি একজন পেশাদারের মতো CSS অ্যাট্রিবিউট সিলেক্টর ব্যবহার শুরু করতে প্রস্তুত৷
৷
সিএসএস হল ওয়েব ডেভেলপমেন্টে ব্যবহৃত তিনটি প্রধান দক্ষতার একটি। ডাউনলোড করুন ফ্রি ক্যারিয়ার কর্ম অ্যাপ আজ একজন বিশেষজ্ঞ ক্যারিয়ার প্রশিক্ষকের সাথে কথা বলুন যিনি আপনাকে একজন ওয়েব ডেভেলপার হিসেবে ক্যারিয়ারে প্রবেশের জন্য প্রয়োজনীয় দক্ষতার বিষয়ে পরামর্শ দিতে সাহায্য করতে পারেন৷
