خاصیت class در HTML

  /  فرانت اند   /  HTML   /  خاصیت class در HTML

با استفاده از خاصیت class در HTML می توانیم کد های نوشته شده CSS را کلاس بندی کنیم و نام کلاس ها را به عناصر سند HTML خود اختصاص بدهیم و آنها را به وسیله کلاس ها سبک دهی کنیم.

مثال

در مثال زیر با استفاده از کلاس هایی که در تگ <style> تعریف کرده ایم رنگ متن های عناصر انتخابی را تغییر داده ایم.

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
h1.intro {
color: blue;
}

p.important {
color: green;
}
</style>
</head>
<body>

<h1 class="intro">عنوان صفحه</h1>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
<p class="important">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>

</body>
</html>


تعریف و کاربرد

خاصیت class در HTML یک یا چند نام کلاس را برای عناصر مشخص می کند.

معمولاً از class ها برای سبک دهی به عناصر استفاده می شود و شما می توانید کد های CSS خود را در قالب یکسری کلاس تعریف کنید و به عناصر خاصی اختصاص دهید ولی می توانید توسط javascript هم از طریق کلاس ها به عناصر دسترسی داشته باشید و تغییراتی را روی آنها اعمال کنید.


پشتیبانی مرورگر ها

خاصیت
classبلهبلهبلهبلهبله

نحوه استفاده

<element class="classname">

مقادیر خاصیت

مقدارتوضیحات
classnameیک یا چند نام کلاس را مشخص می کند ، اگر قصد داشته باشید چند کلاس را کنار هم مشخص کنید باید یک فاصله Space بین نام کلاس ها قرار بدید مثل <span class="left important">

قوانین برای نام ها:

  • باید با حروف انگلیسی شروع شود مثل A-Z یا a-z
  • می توانید بعد از حروف از اعداد 0-9 یا کاراکتر هایی مثل _ یا - استفاده کنید.

مثال های بیشتر

در مثال زیر با استفاده از جاوا اسکریپت رنگ پس زمینه اولین عنصر div را که کلاس example به آن اختصاص داده شده به رنگ زرد تبدیل می کنیم.

<!DOCTYPE html>
<html dir="rtl">
<body>

<div class="example">اولین عنصر div با کلاس example</div>
<div class="example">دومین عنصر div با کلاس example</div>

<p>روی دکمه زیر کلیک کنید ، رنگ پس زمینه اولین عنصر div با کلاس example به رنگ زرد تغییر می کند (index 0).</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
var x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";
}
</script>

</body>
</html>

5/5 - (1 امتیاز)

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر