ویژگی class و id در HTML

قبلی بعدی

ویژگی class در HTML

برای نام گذاری المان ها در HTML می توان از ویژگی class استفاده کرد.

<tag class="نام کلاس"></tag>

نکته: با کمک کلاس می توانیم المان را در CSS و JS صدا بزنیم.

<div class="box">
    <h2>HTML</h2>
    <p>زبان HTML برای ساختار سایت استفاده می شود.</p>
</div>
<div class="box">
    <h2>CSS</h2>
    <p>زبان CSS برای استایل دهی استفاده می شود.</p>
</div>
<div class="box">
    <h2>JS</h2>
    <p>زبان JS در سمت کاربر اجرا می شود.</p>
</div>

همانطور که در نمونه کد بالا دیدید از یک کلاس مشابه می توان در چندین المان استفاده کرد.

در مثال دوم دو المان <span> دارای ویژگی class با نام "note" داریم. هردو المان <span> با توجه به استایل نوشته شده برای کلاس note. در قسمت head به صورت یکسان استایل‌دهی می‌شوند:

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

نکته: ویژگی class می‌تواند در هر المان HTML استفاده شود.

نکته: ویژگی class به حروف بزرگ و کوجک حساس است!

نکته: برای یادگیری css به صفحه آموزش css مراجعه کنید.

ساختار class در HTML

برای انتخاب المان های HTML به وسیله ویژگی class باید به روش زیر عمل کنید:

در فایل HTML ویژگی class را برای المان خود تعریف کرده و مقدار آن را به صورت دلخواه تعیین کنید.
در انتخابگر CSS علامت نقطه (.) را گذاشته و سپس اسم class خود را بنویسید.
علامت {} (براکت مجعد) را بگذارید و داخل آن کد های CSS خود را قرار دهید.

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

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

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

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

چندین class در HTML

چندین کلاس می‌تواند به یک تگ HTML داده شود.

برای اینکار، نام کلاس‌ها را در المان HTML با استفاده از فاصله از هم جدا کنید. برای مثال: <"div class="city main>

استایل‌دهی المان طبق تمام کلاس‌های وارد شده انجام می‌گیرد.

در مثال زیر، اولین تگ <h2> هردو کلاس city و main را در بردارد، بنابراین استایل‌دهی هردوی آنها بر این المان اعمال خواهد شد.

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

نکته: همچنین المان‌های مختلف می‌توانند از یک کلاس یکسان استفاده کنند.

در مثال بعدی، هردو تگ <h2> و <p> کلاس city را دربردارند و استایل‌دهی آنها یکسان خواهد بود.

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

استفاده از ویژگی class در JavaScript

از نام کلاس می‌توان برای انجام عملیات‌هایی خاص برای یک سری المان معین توسط JavaScript استفاده کرد.

با استفاده از متد ()getElementsByClassName می‌توان به المان‌هایی که از نام کلاس مشترکی استفاده می‌کنند دسترسی یافت:

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

اگر کد مثال بالا را درک نمی‌کنید، نگران نباشید. در آموزش JavaScript بیشتر دربارۀ این زبان می‌آموزید.

ویژگی id در HTML

ویژگی id یک نامی اختصاصی برای المان HTML تأیین می‌کند. نام id در کل سند HTML باید خاص باشد.

ویژگی id برای اشاره به استایل‌دهی معینی در استایل‌شیت(style sheet) به کار می‌رود. همچنین توسط JavaScript برای دسترسی و تغییر المان دارای آیدی مشخصی به کار می‌رود.

ساختار آیدی # (هش) بعلاوه نام آیدی (idname.) است. سپس استایل‌دهی را درون براکت مجعد {} قرار دهید..

#نام آیدی { }
#p1 { }

در مثال زیر یک تگ <h1> داریم که به نام آیدی "myHeader" اشاره دارد. این المان با توجه به استایل‌ نوشته شده برای آیدی myHeader# در قسمت head استایل‌دهی می‌شود.

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

نکته: نام آیدی حساس به حروف کوچک و بزرگ است!

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

تفاوت class و id در HTML

تفاوت class و id:

id یکتا است و چند المان نمی توانند از یک id مشخص استفاده کنند.
اما class یکتا نیست و حتی چندین المان می توانند از یک class استفاده کنند.
علامت class (.) است.
علامت id (#) است.

نشانه‌‌های HTML با استفاده از id و لینک‌ها

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

نشانه‌ها وقتی مفید واقع می‌شوند که صفحۀ وب طولانی باشد.

برای استفاده از نشانه، ابتدا باید آن را بسازید، سپس لینکی را به آن اضافه کنید.

سپس، وقتی بر روی لینک کلیک می‌شود صفحه به آن بخش اشاره شده در نشانه رجوع داده می‌شود.

مثال:

ابتدا، یک نشانه با ویژگی id بسازید:

<h2 id="C4">Chapter 4</h2>

سپس، یک لینک به نشانۀ رجوع به فصل چهارم در همان صفحه اضافه کنید:

<a href="#C4">Jump to Chapter 4</a>

استفاده از ویژگی id در JavaScript

همچنین از آیدی می‌توان برای انجام یک‌سری عملیات برای یک المان معین توسط JavaScript استفاده کرد.

با استفاده از متد ()getElementById می‌توان به المانی که آیدی مشخصی دارد دسترسی یافت:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

خلاصه درس

ویژگی class در HTML یک یا چندین نام کلاس برای یک المان مشخص می‌کند.
کلاس‌ها توسط css و JavaScript برای انتخاب و دسترسی به یکسری المان‌ها استفاده می‌شود.
ویژگی class می‌تواند بر روی هر المانی اعمال شود.
نام کلاس حساس به حروف کوچک و بزرگ است.
المان‌های مختلف HTML می‌توانند از نام کلاس یکسانی استفاده کنند.
با متد ()getElementsByClassName می‌توان به المان‌های حاوی نام کلاس خاصی دسترسی یافت.
ویژگی id در HTML یک آِیدی خاص برای یک المان مشخص می‌کند.
نام id در کل سند HTML باید خاص باشد.
آیدی توسط css و JavaScript برای انتخاب و دسترسی به یک المان‌ مشخص استفاده می‌شود.
نام آِیدی حساس به حروف کوچک و بزرگ است.
ویژگی آیدی همچنین برای ساخت نشانه‌های HTML استفاده می‌شود.
با متد ()getElementById می‌توان به المانی که آیدی مشخصی دارد دسترسی یافت.

قبلی بعدی

توسعه دهندگان

احسان اسلامی