- آموزش کلاس ها در html + سه دلیل استفاده از آنها
- HoseinKetabi
- اکتبر 18, 2024
- تعداد نظرات : بدون نظر
برای استفاده از هر عنصر درون html به صورت جداگانه از کلاس ها و آیدی ها استفاده میکنیم.این کار باعث میشود که تفکیک پذیری در عناصر بالا رود و بتوان راحت تر به عناصر مورد نظر دسترسی پیدا کرد.
کلاس در html چیست – تعریف لغوی
کلاس ها در زبان html در واقع شناسه هایی هستند که ما میتوانیم به یک گروه از عناصر به صورت گروهی اختصاص دهیم.منظورم این است ک میتوانیم به چند تا تگ در html یک کلاس را بدهیم.این کار باعث میشود که وقتی میخواهیم اعمالی را روی عناصر یا تگ هایی از آن کلاس انجام دهیم.این اعمال به صورت گروهی انجام میشود و روی تمامی تگ هایی که این کلاس را به خود اختصاص داده اند این عملیات اجرا میشود.
<html>
<head>
<title>کلاس ها در زبان html</title>
</head>
<body>
<p class="p1">این پاراگراف دارای کلاس p1 میباشد</p>
<p class="p2">این پاراگراف دارای کلاس 2p میباشد</p>
<p class="p3">این پاراگراف دارای کلاس p3 میباشد</p>
</body>
</html>
در بالا یک نمونه را برای شما آورده ایم که در آن از کلاس ها در html استفاده کرده ایم.اگر شما این مثال هارا متوجه نمیشوید نگران نباشید در ادامه ساختار و کاربرد کلاس ها در html را به صورت کامل برای شما توضیح میدهیم.
ساختار کلاس ها در html
ساختار کلاس بسیار راحت میباشد به طوریکه شما با استفاده از ویژگی کلاس یک کلاس را به تگ یا تگ های مورد نظر اختصاص داده و در جا هایی که نیاز است از آن استفاده میکنید.
<p class="myClass">این یک پاراگراف با کلاس myClass است.</p>
.myClass {
color: blue;
font-size: 16px;
}
// استفاده از کلاس در css با استفاده از نقطه
کاربرد های استفاده از کلاس در html
کلاس ها در زبان html کاربرد های زیادی دارد.کاربرد های کلاس در زبان html فقط به خود html ختم نمیشود و وقتی ما میخواهیم html را با زبان های دیگر مانند css یا زبان های برنامه نویسی سمت فرانت و بک اند مانند php استفاده کنیم استفاده میشوند. در اینجا چند تا از اصلی ترین کاربرد های کلاس را برای شما آورده ایم.
- سازماندهی بهتر کد ها
- استفاده مجدد از استایل ها
- انعطاف پذیری بیشتر
- استفاده راحت تر از کتابخانه ها و زبان های دیگر
سازماندهی بهتر کد ها
شما با استفاده از اختصاص دادن کلاس ها به تگ های html میتوانید دسته بندی های آن را بهینه تر کنید و وقتی که خواستید از آن ها استفاده کنید کار بسیار راحتی را داشته باشید.
<div class="my-class another-class">
این یک دیو با دو کلاس است
</div>
استفاده مجدد از استایل ها
استفاده مجدد از استایل‌ها در CSS یکی از اصول اساسی طراحی وب است. این کار به شما اجازه می‌دهد تا یک بار یک مجموعه خاص از استایل‌ها را تعریف کنید و سپس آن را به چندین عنصر مختلف در صفحه وب خود اعمال کنید. این رویکرد باعث میشود کد CSS شما تمیزتر، قابل نگهداری‌تر و انعطاف‌پذیرتر شود.
.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
}
<button class="my-button">کلیک کنید</button>
انعطاف پذیری بیشتر
وقتی شما از کلاس ها در html استفاده میکنید باعث میشود که شما بتوانید به صورت کاستوم شده و سفارشی شده به هر عنصری به صورت گروهی یا تکی دسترسی پیدا کنید.این کار باعث میشود که دست شما در کد زنی باز تر شود و دسترسی راحت تری به عناصر مورد نظر خود داشته باشید.
<button class="btn primary">دکمه اصلی</button> <button class="btn secondary">دکمه ثانویه</button>
.btn {
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
}
.primary {
background-color: #4CAF50;
color: white;
}
.secondary {
background-color: #f44336;
color: white;
}
استفاده راحت تر از کتابخانه و زبان های دیگر
با استفاده از کلاس ها شما میتوانید با استفاده از زبان های دیگر و یا کتابخانه های دیگر روی عناصر و تگ های مشخصی که که یک کلاس خاص را به آن داده اید اعمالی را انجام دهید.مثلا در css مشخص کنید که روی عناصر با آن کلاس خاص استایل هایی اعمال شود و یا با استفاده از js بگویید وقتی روی آن عناصر با کلاس خاص کلید شد اتفاقی رخ دهد مثلا محتوای آن تغییر کند.
<button class="myButton">کلیک کنید</button>
// انتخاب عنصر با کلاس myButton
const myButton = document.querySelector('.myButton');
// اضافه کردن رویداد کلیک
myButton.addEventListener('click', function() {
alert('شما روی دکمه کلیک کردید!');
});
این یک نمونه از استفاده از کلاس ها برای زمانی است که کاربر روی عنصری با کلاس مد نظر کلیک کرد اتفاقی که در js تعریف شده اجرا شود.توجه داشته باشید که شما در اینجا نیازی نیست که دانش js داشته باشید این فقط یک مثال برای اثبات کاربرد کلاس است.
- نظرات