CSS អ្នកជ្រើសរើស អត្តបទ ការពិពណ៌នា

ক্লাস সিলেক্টরটি ডকুমেন্ট তত্ত্বগুলির থেকে স্বাধীনে শৈলী নির্দিষ্ট করতে পারে。

CSS អ្នកជ្រើសរើស អត្តបទ

ক্লাস সিলেক্টরটি ডকুমেন্ট তত্ত্বগুলির থেকে স্বাধীনে শৈলী নির্দিষ্ট করতে পারে。

এই সিলেক্টরটি এককভাবেও ব্যবহার করা যেতে পারে এবং অন্যান্য তত্ত্বগুলির সাথে মিলিত হয়েও ব্যবহার করা যেতে পারে。

সুঝাওয়া:এই সিলেক্টরগুলি ব্যবহার করতে যাতে ডকুমেন্টকে উপযুক্তভাবে ট্যাগ করা হয়, তাই এই দুই সিলেক্টরকে ব্যবহার করার জন্য সাধারণত কিছু ভাবনা ও পরিকল্পনা করা হয়。

শৈলী প্রয়োগ করতে যেখানে নির্দিষ্ট ডিজাইনের তত্ত্বকে বিবেচনা করা হবে না, সর্বাধিক ব্যবহৃত পদ্ধতি হল ক্লাস সিলেক্টর ব্যবহার করা।

এই HTML কোডটি সংশোধন করুন

ক্লাস সিলেক্টর ব্যবহার করার আগে, নির্দিষ্ট ডকুমেন্ট ট্যাগকে সংশোধন করা হতে হবে যাতে ক্লাস সিলেক্টর সঠিকভাবে কাজ করে।

ক্লাস সিলেক্টরের শৈলীকে তত্ত্বগুলির সাথে সংযুক্ত করতে, class-কে একটি উপযুক্ত মান নির্দিষ্ট করতে হবে। নিচের HTML কোড দেখুন:

<h1 class="important">
এই শিরোনাম খুবই গুরুত্বপূর্ণ
</h1>
<p class="important">
এই অনুচ্ছেদ খুবই গুরুত্বপূর্ণ
</p>

উপরের কোডে, দুই তত্ত্বের class সবাই important নির্দিষ্ট করা হয়: প্রথম শিরোনাম (h1 তত্ত্ব), দ্বিতীয় অনুচ্ছেদ (p তত্ত্ব)।

গ্রামার

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

*.important {color:red;}

আপনি কেবল একই নামের ক্লাস নিয়েই উপাদানকে চিহ্নিত করতে চান, তাহলে ক্লাস সিলেক্টরের মধ্যে উপযোগী সিলেক্টরকে ইগনোর করতে পারেন, তার কোনও ক্ষতিকারক প্রভাব হবে না:

.important {color:red;}

សម្រេចចិត្តព្យាយាម

মিলিত এলিমেন্ট সিলেক্টর

ক্লাস সিলেক্টরকে এলিমেন্ট সিলেক্টরের সাথে মিলিয়ে ব্যবহার করা যেতে পারে。

উদাহরণস্বরূপ, আপনি মহৎ হিসাবে প্যারাগ্রাফকেই লাল লিখিত দেখতে চান তবে:

p.important {color:red;}

সিলেক্টর এখন class অ্যাট্রিবিউটকে important সম্পর্কিত সকল p উপাদানকে মাপছে, কিন্তু অন্য কোনও ধরনের উপাদানকে মাপছে না, সেইসব উপাদানের class অ্যাট্রিবিউট কি হোক না . সিলেক্টর p.important-এর অর্থ হল ‘যেসব ক্লাস অ্যাট্রিবিউটের মান important হয়েছে তারা সকল প্যারাগ্রাফ’ . কারণ h1 উপাদানটি প্যারাগ্রাফ নয়, এই রুলের সিলেক্টরটি তার সঙ্গে মান নয়, তাই h1 উপাদানটি লাল লিখিত না হবে。

আপনি কি প্রকৃতপক্ষে h1 উপাদানকে আলাদা শৈলী দিতে চান, তাহলে সিলেক্টর h1.important ব্যবহার করতে পারেন:

p.important {color:red;}
h1.important {color:blue;}

សម្រេចចិត្តព្យាយាម

CSS মাল্টি-ক্লাস সিলেক্টর

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

<p class="important warning">
This paragraph is a very important warning.
</p>

এই দুইটি শব্দের ক্রম অত্যন্ত গুরুত্বপূর্ণ নয়, warning important লিখতেও পারি。

আমরা মনে করি যে, class হল ইমপোর্ট্যান্ট এবং এইসব সকল উপাদানকে বড় লিখা হবে, যদিও class হল warning এবং এইসব সকল উপাদানকে ইটালিক লিখা হবে, এবং class এইসব সকল উপাদানকে একসঙ্গেই important এবং warning হলে একটি সিলভার পিন্ডলের পেছন হবে . এটা লিখতে পারি:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

សម្រេចចិត្តព្យាយាម

দুইটি ক্লাস সিলেক্টরকে যুক্ত করে, শুধুমাত্র সেইসব অংশকে চিহ্নিত করা যায় যাIt contains all these class names at the same timeelements (the order of class names is not limited).

If a multi-class selector contains a class name that is not in the list of class names, the match will fail. Please see the following rules:

.important.urgent {background:silver;}

As expected, this selector will only match p elements that have the words important and urgent in the class attribute. Therefore, if a p element's class attribute only contains the words important and warning, it will not match. However, it can match the following elements:

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

សម្រេចចិត្តព្យាយាម

សូមប្រុងប្រយ័ត្ន：ក្នុងការដំណើរការ IE7 មុន អាចមិនអាចកុងសុទ្ធ ក្នុងការដំណើរការអ៊ីនធឺណេតអ៊ីចអេចអេ នៅក្នុងកំរិតដែលមិនទាន់មានតែការជ្រើសរើសអត្តបទបន្ថែម