آموزش HTML صفحه اصلی اینستاگرام ما
صفت id در HTML

صفت id در HTML


صفت HTML id برای مشخص کردن یک شناسه (id) منحصربه فرد برای یک عنصر HTML استفاده میشود .

شما نمیتوانید بیش از یک عنصر با شناسه یکسان در یک سند HTML داشته باشید .


استفاده از صفت id

صفت id یک شناسه منحصربه فرد برای یک عنصر HTML مشخص میکند . مقدار صفت id باید در داخل سند HTML منحصربه فرد باشد .

صفت id برای اشاره به یک تعریف سبک خاص در یک شیوه نامه CSS استفاده میشود .همچنین توسط JavaScript برای دستیابی و دستکاری عنصر با id خاص استفاده میشود .

نحو برای id است : یک کارکتر هش (#) بنویسید ، که توسط یک نام id دنبال شده است . سپس ، ویژگی های CSS را داخل آکولادها { } مشخص کنید .

در مثال زیر ما یک عنصر <h1> داریم که به نام id "myHeader" اشاره میکند . این عنصر <h1> مطابق با تعریف سبک #myHeader در بخش head سبک دهی خواهد شد :

مثال

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


<h1 id="myHeader">عنوان من</h1>


</body>
</html>
امتحان کن »

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

نکته: نام id باید حداقل شامل یک کارکتر باشد ، و نباید شامل فاصله (space ، tab) باشد .


تفاوت بین Class و ID

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

مثال

<style>
/* عنصر با id "myHeader" را سبک دهی کنید */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* همه عناصر با نام class "city" را سبک دهی کنید */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- یک عنصر با یک id منحصر به فرد -->
<h1 id="myHeader">شهرهای من</h1>

<!-- چندین عنصر با class یکسان -->
<h2 class="city">لندن</h2>
<p>لندن پایتخت انگلستان است.</p>

<h2 class="city">پاریس</h2>
<p>پاریس پایتخت فرانسه است.</p>

<h2 class="city">توکیو</h2>
<p>توکیو پایتخت ژاپن است.</p>
امتحان کن »

بوک مارک های HTML با ID و لینک ها

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

اگر یک صفحه وب خیلی طولانی است بوک مارک ها میتوانند مفید باشند .

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

هنگامیکه لینک کلیک شود ، صفحه به مکان با bookmark اسکرول خواهد شد .

مثال

نخست ، از صفت id برای ساخت یک bookmark استفاده کنید :

<h2 id="C4">فصل 4</h2>

سپس ، یک لینک به bookmark (پرش به فصل 4) از داخل همان صفحه اضافه کنید :

<a href="#C4">پرش به فصل 4</a>
امتحان کن »

شما همچنین میتوانید یک لینک به یک bookmark در صفحه دیگری اضافه کنید :

<a href="html_demo.html#C4">پرش به فصل 4</a>

چکیده فصل




پسین پیشین