کُد کمپ رایگان #C رو تو پیج اینستاگرام atriya.com دنبال کن!

آموزش طراحی سایت - سلکتور ID در HTML

در این بخش از آموزش طراحی سایت به آموزش سلکتور ID (شناسه) در HTML می پردازیم.

استفاده از ویژگی ID

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

id در HTML باید در سند صفحه html منحصر به فرد باشد. ویژگی ID به منظور اشاره کردن به یک style در یک صفحه css به کار می رود. ویژگی ID همچنین توسط جاوا اسکریپت برای دسترسی به یک عنصر و دستکاری آن با یک id مشخص به کار می رود.

قاعده نوشتاری برای سلکتور id:

برای درنظر گرفتن استایل برای یک سلکتور id ابتدا یک علامت # و سپس شناسه ای را که برای صفت id عنصر منحصر به فرد مشخص کرده اید، بنویسید و سپس، مشخصه های CSS را درون { } تعریف کنید.

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

آموزش طراحی سایت

حال فقط و فقط همان عنصر h1 که شناسه myHeader را گرفته است، ویژگی های CSS را دریافت کرده، که در زیر قابل مشاهده است:

آموزش HTML

تفاوت انتخابگرهای class و id

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

آموزش HTML

مشاهده می کنید که شناسه myHeader فقط توسط عنصر h1 استفاده شده است اما کلاس city توسط تعدادی عنصر h2 استفاده شده است.

آموزش آیدی در HTML

نشانه گذاری با استفاده از id و لینک ها

برای استفاده از یک نشانه (bookmark)، ابتدا باید آن را ساخته و سپس به آن لینک اضافه کنید. سپس، وقتی که لینک کلیک شود، صفحه با استفاده از آن نشانه به قسمت مورد نظر هدایت می شود.

مثال

ابتدا، یک نشانه را با استفاده از ویژگی ID در HTML به شکل زیر می سازیم:

آموزش طراحی سایت

سپس، یک لینک به نشانه ای که ساختیم، با استفاده از تگ a  ایجاد می کنیم.

آموزش HTML

حال هرگاه روی لینک اول کلیک شود، شما به بخشی که عنصر h2 شناسه ای با نام C4 را دارد هدایت می شوید.

آموزش ID در HTML

شما همچنین می توانید به یک نشانه (bookmark) که در یک صفحه دیگر قرار دارد، یک لینک ایجاد کنید. شکل زیر نحوه انجام این کار را نشان می دهد:

آموزش ID در HTML

استفاده از ویژگی ID در جاوا اسکریپت

ویژگی id همچنین می تواند توسط جاوا اسکریپت و برای انجام دادن برخی عملیات بر روی یک عنصر خاص استفاده شود. جاوا اسکریپت می تواند با استفاده از یک id و با متد ()getElementById به یک عنصر html دسترسی داشته باشد.

آموزش طراحی سایت

در این کد، هنگام کلیک بر روی دکمه Change text، تابع ()displayResult فراخوانی شده و جاوا اسکریپت عنصر با شناسه myHeader را دریافت کرده و متن درون آن را تغییر می دهد.

آموزش HTML
آموزش طراحی سایت آموزش آیدی در HTML آموزش ID در HTML آموزش HTML دوره آموزش طراحی سایت