ক্লাসেস – ফ্রি HTML ও CSS কোর্স – ক্লাস ৮

সিএসএস ক্লাসগুলি সাধারণত সিএসএস স্টাইলের একটি সেট সংজ্ঞায়িত করতে এবং তারপরে সিলেক্টরগুলি ব্যবহার করে একটি এইচটিএমএল উপাদানগুলিতে প্রয়োগ করা হয়। সিএসএস স্টাইলশিটের মধ্যে শ্রেণি নির্ধারণ করতে নীচে ডট সিলেক্টর ব্যবহার করুন:

<style>
.nice {
    font-family: sans-serif;
}
</style>

প্রতিটি এইচটিএমএল উপাদানগুলির একটি নির্দিষ্ট ক্রমে অর্ডার করা ক্লাসের একটি সেট থাকতে পারে। প্রতিটি শ্রেণি পৃষ্ঠায় সংজ্ঞায়িত স্টাইল অনুসারে সম্ভাব্যভাবে সিএসএস সংজ্ঞাগুলির একটি সেট যুক্ত করবে। কোডের এই অংশে আমরা একটি সিএসএস নিয়ম সংজ্ঞায়িত করেছি যা “nice” শ্রেণি সহ প্রতিটি উপাদানকে প্রয়োগ করা হবে। এর অর্থ এই যে এই কোডের এই অংশটি এইচটিএমএল পৃষ্ঠার অভ্যন্তরে সংজ্ঞায়িত হয়ে গেলে, নিম্নলিখিত HTML অনুচ্ছেদে এতে স্টাইল প্রয়োগ করা হবে:

<style>
.nice {
    font-family: sans-serif;
}
</style>
<p class="nice">This is a short sentence.</p>

HTML5 classList API

এইচটিএমএল ক্লাসলিস্ট সংগ্রহটি ব্যবহার করে কোনও উপাদানের শ্রেণি তালিকা সম্পাদনা করার জন্য একটি নতুন উপায় প্রবর্তন করেছে। প্রতিটি এইচটিএমএল উপাদান element.classList সদস্যকে অ্যাক্সেস করে সংগ্রহটি ফিরিয়ে দেয়। এইচটিএমএল ক্লাসলিস্ট সংগ্রহটি ব্যবহার করে কোনও উপাদানের শ্রেণি তালিকা সম্পাদনা করার জন্য একটি নতুন উপায় প্রবর্তন করেছে। প্রতিটি এইচটিএমএল উপাদান এক্স সদস্যকে অ্যাক্সেস করে সংগ্রহটি ফিরিয়ে দেয়। শ্রেণীর তালিকা যুক্ত করতে, অপসারণ করতে, টগল করতে এবং কোনও উপাদানটিতে একটি নির্দিষ্ট শ্রেণি রয়েছে কিনা তা পরীক্ষা করতে অনুমতি দেয়।

চলুন একটি উদাহারণ দেখি:

<!DOCTYPE html>
<html>
<head>
    <style>
    .nice {
        font-family: sans-serif;
    }
    </style>
</head>
<body>
    <p id="mytext">My text</p>
    <script>
        var el = document.getElementById("mytext");
        el.classList.add("nice");    // adds the nice class to the paragraph
        el.classList.remove("nice"); // removes the nice class from the paragraph
        el.classList.toggle("nice"); // adds the nice class to the paragraph again, since it does not currently
                                     // contain the nice class.

        if (el.classList.contains("nice")) {
            alert("The element contains the 'nice' class.");
        }
    </script>
</body>
</html>

HTML5 যেহেতু তুলনামূলকভাবে নতুন মান, এটি সমস্ত ব্রাউজারগুলিতে সমর্থিত নয়। এটি যদিও আজ ব্যবহারের জন্য যথেষ্ট নিরাপদ। বৈশিষ্ট্যের জন্য এখানে সামঞ্জস্যতা টেবিলটি দেওয়া হয়েছে:

http://caniuse.com/#search=classlist

Leave a Comment