نحوه کار با کلاس و ID در HTML


در این بخش از آموزش، مقدمه‌ای بر کلاس‌های HTML/CSS و انتخابگرهای ID، به نمونه‌های خلاقانه‌ای می‌پردازیم که بینش ارزشمندی در مورد قدرت این انتخاب‌کننده‌ها در ارائه امکانات نامحدود طراحی وب ارائه می‌دهند.

کار با HTML و CSS

CSS مخفف “Cascading Style Sheet” است و در کنار HTML (زبان نشانه گذاری فرامتن) به عنوان ابزاری قدرتمند برای ایجاد طراحی و طرح بندی وب استفاده می شود. HTML از CSS ID و ویژگی های کلاس برای اضافه کردن هر تعداد سبک برای بهبود محیط وب شما استفاده می کند.

شناسه در مقابل کلاس:

اگرچه عملکردهای مشابهی دارند، اما یکسان نیستند و همیشه هدف مشترکی ندارند.

  • شماره شناسایی منحصر به فرد است
  • هر عنصر می تواند تنها یک شناسه داشته باشد.
  • هر شناسه می‌تواند تعداد نامحدودی از سبک‌های اعمال شده روی آن داشته باشد.
  • هر صفحه می تواند تنها یک عنصر با این شناسه داشته باشد.
  • شناسه ها از “#” در CSS استفاده می کنند که می تواند به عنوان یک شناسه برای “هایپرلینک های” HTML نیز استفاده شود. این به شما امکان می دهد در همان صفحه وب از یک مکان به مکان دیگر بپرید و همچنین می توانید از آن برای ایجاد محتوای با طراحی خوب استفاده کنید.

در زیر نمونه ای از شناسه مورد استفاده در ناحیه CSS آورده شده است:

#top {
    background-color: #ccc;
    padding: 20px
}

کلاس ها منحصر به فرد نیستند.

  • می توانید از یک کلاس بر روی چندین عنصر استفاده کنید.
  • نام کلاس ها به حروف کوچک و بزرگ حساس است.
  • کلاس ها از “” استفاده می کنند. قبل از نام در CSS همانطور که در تصویر زیر مشاهده می شود.
  • هر کلاس می تواند تعداد نامحدودی از سبک های اعمال شده روی آن داشته باشد.
  • شما می توانید از چندین کلاس برای یک عنصر استفاده کنید.

در زیر نمونه ای از کلاس مورد استفاده در ناحیه CSS آورده شده است:

.introduction {
  color: red;
    font-weight: bold;
    font: 20px Arial, Helvetica, sans-serif;
}

استفاده از انتخابگر ID برای ایجاد لینک ها

در مثال زیر، ما رفتار موثر انتخابگر ID برای ایجاد یک پیوند به محتوا را نشان می دهیم. به یاد داشته باشید که وب یک رسانه ثابت مانند صفحات کپی شده نیست. استفاده از ویژگی هایپرلینک با Jump Links به کاربران وب شما استفاده آسانی می دهد.

در زیر یک صفحه HTML واقعی با کدی وجود دارد که می توانید آن را کپی کنید.

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 30px;
  text-align: center;
}

#locator {
  background-color: yellow;
  color: black;
  padding: 10px;
  text-align: left;
}

</style>
</head>
<body>
    <h1>متاوبز</h1>

<h2 id="locator">لورم ایپسوم</h2>

<p id="myHeader" >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه 
</br>
روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی
</br>
 مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان 
</br>
را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در ا
</br>
ین صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیو
</br>
</br>
</br>
</br>
</br>
سته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</br>
</br>
</br>
</br>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان 
</br>
که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با </br>
هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزار
</br>
ها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
</br>
</br>
</br>
</br>
</br>
 در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیا
</br>
ز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</br>
</br>
</br>
</br>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله د
</br>
ر ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی 
</br>
در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طرا
</br>
حان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید دا
</br>
شت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز
</br>
</br>
</br>
</br>
</br>
</br>
</br> شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>

<!-- hyperlinking to this location -->
<a id="locator" href="#locator">از پیوند لورم ایپسوم در بالا به این مکان در صفحه بروید.</a>
</body>
</html>

تصویر زیر اطلاعاتی در مورد کد نشان داده شده در بالا ارائه می دهد. از این تصویر می توانید ارتباط بین دو قطعه کد را مشاهده کنید که با یکدیگر صحبت می کنند تا پیوند پرش را تشکیل دهند.

استفاده از انتخابگر ID برای ایجاد لینک ها

ID با جاوا اسکریپت را انتخاب کنید

جالب توجه است که هر شناسه ویژگی به یک ویژگی جاوا اسکریپت از شی پنجره جهانی تبدیل می شود.

بنابراین اگر این کار را انجام دهیم، در واقع یک متغیر سراسری با همین نام ایجاد می کنیم:

<aside id="author">...</aside>

<script>
window.author; // <aside id="author"></aside>
</script>

اما متغیرهای سراسری عالی و قابل اعتماد نیستند، بنابراین هنگام طراحی HTML باید از آنها اجتناب کنیم.

احتمالاً بهتر است با جاوا اسکریپت خود فقط یک کلاس را انتخاب کرده و تغییر دهید – اما اگر به آن نیاز دارید، می‌دانید که شناسه وجود دارد.

اکنون یک API classList نیز وجود دارد که مستقیماً برای کار با ویژگی شما ساخته شده است، بنابراین نیازی به استفاده از آن در کلاس واقعی نیست.

استفاده از انتخابگر کلاس در چندین عنصر

در این بخش می خواهیم نشان دهیم که چگونه می توانید از یک نام کلاس در مکان های مختلف برای تکرار یک موضوع در صفحه وب خود استفاده کنید. بعد از اینکه استایل ها را روی نام کلاس قرار دادید، می توانید هر چند بار که بخواهید از آن استفاده کنید.

نکته: نام کلاس را می توان هر چه می خواهید گذاشت. پیشنهاد می کنیم از یک نامگذاری منطقی و بصری استفاده کنید که به شناسایی محتوا کمک می کند. این به نوبه خود به یک شناسه محتوا تبدیل می شود و به سازماندهی کد شما در قالبی با ساختار مناسب کمک می کند.

تفاوت بین کلاس و ID را به خاطر بسپارید: یک نام کلاس می تواند توسط چندین عنصر HTML استفاده شود، در حالی که یک ID باید تنها توسط یک عنصر HTML در صفحه استفاده شود.

مثال زیر یک صفحه HTML با نام کلاس GreekCity است. می توانید کد را از اینجا کپی کنید و خودتان آن را امتحان کنید.

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 30px;
  text-align: center;
}

/* Style all elements with the class name "GreekCity" */
.GreekCity {
  background-color: #9815B0;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<!-- An element with a unique id -->
<h1 id="myHeader">متاوبز</h1>

<!-- Multiple elements with same class -->
<h2 class="GreekCity">شهر 1</h2>
<p>شهر شماره یک</p>

<h2 class="GreekCity">شهر2</h2>
<p>شهر شماره دو</p>

<h2 class="GreekCity">شهر3</h2>
<p>شهر شماره 3</p>

</body>
</html>

تصویر زیر زمینه هایی را که در این بخش مورد بحث قرار دادیم نشان می دهد:

استفاده چندگانه از یک کلاس در یک صفحه وب

این مقدمه برای انتخابگرها و شناسه‌های کلاس باید نقطه شروعی برای کاوش بیشتر در جنبه‌های خلاقانه بی‌حد و مرزی باشد که HTML ارائه می‌کند. ما به بررسی سایر زمینه های طراحی HTML در وبلاگ بعدی ادامه خواهیم داد. امیدواریم این مقدمه علاقه شما را برانگیزد و الهام بخش شما برای کاوش بیشتر و فرو رفتن عمیق تر در دنیای طراحی وب باشد.

با استفاده از شناسه و انتخابگر کلاس

درباره HTML بیشتر بخوانید و حرفه ای شوید:

می توانید با تیم مجموعه متابز در تلگرام تماس بگیرید.

Related Posts

دیدگاهتان را بنویسید