এইচটিএমএল ক্লাস - HTML Class



একাধিক এলিমেন্টে একই ধরনের স্টাইল ব্যবহার করার জন্য এইচটিএমএল class এট্রিবিউট ব্যবহার করা হয়। ক্লাস সিলেক্টর ব্যবহার করে কোন একই ক্লাস যুক্ত একাধিক এইচটিএমএল এলিমেন্টে সিএসএস বা জাভাস্ক্রিপ্ট ব্যবহার করা যায়।


ক্লাস ব্যবহার পদ্ধতি

সিএসএস এ ক্লাস ব্যবহার করতে হলে একটি ডট ছিনহ ( . ) ব্যবহার করতে হয় এবং তারপর ক্লাসের নাম লিখতে হয়। নিচে উদাহরণ দেখুন।

উদাহরণ

<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>


নোট - ক্লাস এট্রিবিউট সকল এইচটিএমএল এলিমেন্টে ব্যবহার করা যায়। ক্লাস এট্রিবিউটের নাম কেজ সেন্সিতিভ।

নোট - ক্লাস সিলেক্টর সম্পর্কে আরও জানতে আমাদের সিএসএস ক্লাস ও আইডি টিউটোরিয়াল পেজটি ব্রাউজ করুন।


জাভাস্ক্রিপ্টে ক্লাস এট্রিবিউট ব্যবহার

getElementsByClassName() মেথড ব্যবহার করে জাভাস্ক্রিপ্ট নির্দিষ্ট কোন নামের ক্লাস যুক্ত এলিমেন্টে কাজ করতে পারে। নিচে এর উদাহরণ দেখুন। এখানে যখন কোন ইউজার একটি বাটনে ক্লিক করে, তখন "city" নাম যুক্ত সকল ক্লাস অদৃশ্য বাঁ hide হয়ে যায়।

উদাহরণ

<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>


নোট - জাভাস্ক্রিপ্ট সম্পর্কে জানতে আমাদের জাভাস্ক্রিপ্ট টিউটোরিয়াল দেখুন।


একাধিক ক্লাস

একটি এইচটিএমএল এলিমেন্টে একাধিক ক্লাস যুক্ত করা যায়। প্রতিটি ক্লাসের নাম একটি করে স্পেস বা space দিয়ে পৃথক করা যায়।

উদাহরণ

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>


উপরের উদাহরণে প্রথম <h2> এলিমেন্টে "city" এবং "main" এই ২টি ক্লাসের স্টাইলই কাজ করবে।


একই নামের ক্লাস বিভিন্ন ট্যাগে ব্যবহার

একই নামের ক্লাস ভিন্ন ভিন্ন ট্যাগের জন্য ব্যবহার করা যায়। যেমন <h2> এবং <p> এলিমেন্টে একই ক্লাসের স্টাইল কাজ করবে। নিচে একটি উদাহরণ দেখুন।

উদাহরণ

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>




ইনলাইন এলিমেন্টে class এট্রিবিউটের ব্যবহার

এইচটিএমএল ইনলাইন এলিমেন্টেও class এট্রিবিউটটি ব্যবহার করা যায়। নিচে একটি উদাহরণ দেখুন।

উদাহরণ

<style>
.note {
font-size: 100%;
color: Crimson;
}
</style>
</head>
<body>

<h1>Free <span class="note">web design</span> tutorials</h1>
<p>Free <span class="note">web design</span> tutorials</p>









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.