class অ্যাট্রিবিউট
class অ্যাট্রিবিউট একটি বা একাধিক
ক্লাস এলিমেন্টের জন্য নির্দিষ্ট করে (এলিমেন্ট বলতে
বোঝানো হয়েছে ট্যাগ)।
এটি করা হয় যাতে পরে CSS এর মাধ্যমে সেইসব এলিমেন্টের গ্রুপকে অ্যাক্সেস করা যায়, যাদের একই ক্লাস নির্দিষ্ট করা হয়েছে, এবং এর জন্য নির্দিষ্ট কিছু প্রপার্টি প্রয়োগ করা (উদাহরণস্বরূপ, টেক্সটের রঙ পরিবর্তন, ফন্টের আকার পরিবর্তন ইত্যাদি)।
এছাড়াও রয়েছে id
অ্যাট্রিবিউট, যা class অ্যাট্রিবিউটের মতোই
HTML পৃষ্ঠায় এলিমেন্ট নির্বাচন করতে দেয়।
class অ্যাট্রিবিউট এবং id
অ্যাট্রিবিউট এর মধ্যে পার্থক্য হল যে class একটি গ্রুপ
এলিমেন্ট নির্বাচন করে (এমনকি যদি এটি একটি এলিমেন্টকে দেওয়া হয়
- পরবর্তীতে এটি অন্যকেও দেওয়া যেতে পারে),
কিন্তু id একটি অনন্য এলিমেন্ট নির্বাচন করে (পৃষ্ঠায়
এরকম id সহ আর কোন এলিমেন্ট থাকা উচিত নয়,
নাহলে কনফ্লিক্ট হবে)।
কীভাবে বোঝা যায়, এলিমেন্টকে কী দিতে হবে - class নাকি id? class সেইসব এলিমেন্টকে দেওয়া হয়, যা ওয়েবসাইটের পৃষ্ঠাগুলিতে পুনরাবৃত্তি হয় (যাতে একই CSS কোড কয়েকবার না লিখতে হয়)। এমনকি যদি আপনার কাছে বর্তমানে এই এলিমেন্টটি একটিই থাকে, কিন্তু আপনি মনে করেন, যে একই ধরনের এলিমেন্ট ভবিষ্যতে দেখা দিতে পারে - তাহলে এই এলিমেন্টটিকে class দিন। যদি আপনি নিশ্চিত হন, যে এই এলিমেন্টটি অনন্য - তাহলে এটিকে id দিন। যদিও বর্তমান সময়ে একটি প্রবণতা রয়েছে যে সব এলিমেন্টকে class দেওয়া হয়, এবং id শুধুমাত্র JavaScript এর জন্য রাখা হয়, কিন্তু এটি সর্বজনীনভাবে গৃহীত নয়।
একটি এলিমেন্টকে একাধিক ক্লাস দেওয়া যেতে পারে, এই ক্ষেত্রে সেগুলো স্পেস দিয়ে আলাদা করে লিখতে হবে।
ক্লাসের নামগুলি ইংরেজি অক্ষর, সংখ্যা দিয়ে লেখা উচিত, স্পেস ছাড়া (স্পেস একটি ক্লাসকে অন্যটি থেকে আলাদা করে, এর পরিবর্তে আন্ডারস্কোর বা হাইফেন ব্যবহার করা যেতে পারে)। ক্লাসগুলি সংখ্যা দিয়ে শুরু করা উচিত নয় (HTML5 এ ইতিমধ্যেই করা যায়, কিন্তু পুরনো ব্রাউজারে কাজ করবে না)।
ক্লাসের নাম ইংরেজি ভাষায় দেওয়া উচিত (রাশিয়ান ভাষায় নয়, শুধু ইংরেজি অক্ষরে নয়!)। নামগুলি অর্থপূর্ণ হওয়া উচিত, ক্লাসের সারাংশ প্রতিফলিত করা উচিত।
উদাহরণ
আসুন test ক্লাস সহ সব প্যারাগ্রাফকে
লাল রঙের টেক্সট নির্দিষ্ট করি:
<p class="test">test ক্লাস সহ প্যারাগ্রাফ।</p>
<p>ক্লাস ছাড়া নিয়ন্ত্রণ প্যারাগ্রাফ।</p>
.test {
color: red;
}
:
উদাহরণ . এলিমেন্টের জন্য একাধিক ক্লাস
এবং এখানে প্রথম প্যারাগ্রাফকে একাধিক
ক্লাস নির্দিষ্ট করি - test1 এবং test2 (সেগুলো
স্পেস দিয়ে লিখি)। test1 ক্লাসটি
লাল টেক্সটের রঙ
নির্দিষ্ট করে, এবং test2 ক্লাসটি ফন্টের আকার
নির্দিষ্ট করে 20px এ। দ্বিতীয় প্যারাগ্রাফকে
শুধুমাত্র test1 ক্লাসটি দেওয়া হয়েছে (এই প্যারাগ্রাফটি
লাল হয়ে যাবে), এবং তৃতীয় প্যারাগ্রাফকে - test2 ক্লাসটি
দেওয়া হয়েছে (এই প্যারাগ্রাফের ফন্টের আকার
20px হবে)। প্রথম প্যারাগ্রাফ, যার
দুটি ক্লাস রয়েছে, তার একই সাথে লাল
রঙ এবং ফন্টের আকার 20px হবে:
<p class="test1 test2">test1 এবং test2 দুটি ক্লাস সহ প্যারাগ্রাফ।</p>
<p class="test1">test1 ক্লাস সহ প্যারাগ্রাফ।</p>
<p class="test2">test2 ক্লাস সহ প্যারাগ্রাফ।</p>
<p>কোন ক্লাস ছাড়া নিয়ন্ত্রণ প্যারাগ্রাফ।</p>
.test1 {
color: red;
}
.test2 {
font-size: 20px;
}
:
আরও দেখুন
-
idঅ্যাট্রিবিউট,
যা এলিমেন্টগুলিকে অনন্য আইডেন্টিফায়ার নির্দিষ্ট করে
