آشنایی با ID ها در HTML

طراحی سایت

..آشنایی با ID ها در HTML..
طراحی سایت

آشنایی با ID ها در HTML

خاصیت ID چیست؟ آیا می‌توانیم از خاصیت ID در تمامی تگ های HTML استفاده کنیم؟ تفاوت ID ها با Class ها در چیست؟ در این مقاله با ID ها آشنا می‌شویم و تفاوت آی دی با کلاس را بررسی می‌کنیم.

سرفصل‌های پست

خاصیت ID در HTML

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

با توجه به تعریف تعیین شده در w3c ، خاصیت ID یک شناسه یکتا برای تگ محسوب می شود. این خاصیت ساده کارایی بسیار زیادی در سطح وب دارد. از جمله کار هایی که می توان با خاصیت id انجام داد به شرح زیر هستند:

  • انتخاب کننده Style Sheet : بیشترین استفاده خاصیت id در اینجا است. به خاطر یکتا بودن مقدار داخل id می توان مطمئن بود استایل تعریف شده فقط برای یک تگ خاص اعمال می شود. نقطه منفی استفاده از خاصیت id برای استایل این است که به اختصاصی سازی زیادی نیاز دارد. که این امر به خودی خود به زمان زیادی نیاز دارد و حتی در هنگام تغییر استایل برای یک تگ می تواند چالشی جدی باشد. به همین دلیل روش های جدید برپایه استفاده از کلاس ها برای تعیین استایل هستند. از id برای هدف های کلی تعیین استایل استفاده می شود.
  • برای لینک دهی به بخش خاص صفحه: مرورگر های وب به شما اجازه می دهند تا به قسمت خاصی از صفحه وب با استفاده از شناسه تعیین شده برای یک تگ حرکت کنید. برای این کار شما به سادگی شناسه تگ مورد نظر را به انتهای URL صفحه اضافه می کنید. حالت دیگر این است که پس از نوشتن شناسه برای یک تگ، از تگ a استفاده کنید و در ابتدای مقدار href یک علامت # و سپس مقدار شناسه از پیش تعیین شده را بنویسید.
  • مرجعی برای یک اسکریپت: در این حالت اگر شما در حال نوشتن توابع جاوا اسکریپت هستید، مطمئنا نیاز به اعمال تغییر در تگ های موجود در صفحه دارید. برای این امر کافیست یک شناسه یکتا برای تگ مورد نظر در نظر بگیرید و در اسکریپت از آن استفاده کنید.
  • سایر فرآیند ها: خاصیت id به شما اجازه انعطاف پذیری بالایی در استفاده از تگ ها را می دهد. به عنوان مثال قصد دارید بخشی از محتوای صفحه وب را در یک دیتابیس ذخیره کنید. برای اینکار می توانید از مقدار های تعیین شده خاصیت آی دی برای شناسایی هر تگ استفاده کنید.

قوانین استفاده از خاصیت آی دی

برای مقدار دهی خاصیت id قوانینی وجود دارند که رعایت آن ها برای حفظ عملکرد صفحه وب ضروری است.

  • مقدار id باید با حروف a-z یا A-Z آغاز شوند.
  • کاراکتر های دنباله می توانند از حروف،اعداد و بعضی از علامت های خاص(-,_,:,.) باشند
  • هر مقدار خاصیت آی دی در سراسر صفحه باید یکتا باشد.

بخش “ارتباط با ما” و خاصیت ID :

<p id="contact-section">ارتباط با ما میزفا </p>

برای پرش به بخش ارتباط با ما‌ برای استایل دهی می توان از یکی از کد های زیر استفاده کرد

div#contact-section { background: #0cf;}

یا

#contact-section { background: #0cf;}

در مثال های بالا تفاوتی ندارد از کدام یک استفاده می کنید. در کد اول یک تگ div به عنوان هدف در نظر گرفته شده است. و در کد دوم همچنان تگ مورد نظر با شناسه “contact-section” مورد هدف است.

برای دسترسی به یک تگ از طریق جاوا اسکریپت، باید از تابع getElementById() استفاده کنید.

document.getElementById("contact-section")

همچنین برای اینکه بتوانیم از بخشی از صفحه به ارتباط با ما منتقل شویم، میتوانیم از آی دی ها استفاده کنیم که در مثال زیر نمونه را مشاهده می‌کنید:

<a href="#contact-section"> بخش تماس با ما </a>

نتیجه گیری

در این مقاله به صورت کلی با مبحث ID ها آشنا شدیم، در نظر داشته باشید که اطلاعات بیشتری را در رابطه با آی دی ها و کلاس ها می‌توانید در مقاله آشنایی با کلاس ها و آیدی ها دوست عزیزم نوید معدن نژاد در دوره آموزش CSS بخوانید.

این مقاله هم به پایان رسید. اگر سوال، پیشنهاد یا انتقادی داشتید برامون حتما بنویسید تا بتونیم مقالات و خدمات بهتری را ارائه کنیم.

تا مقاله بعدی و آشنایی کامل با Attribute های HTML فعلا…

147
05 بهمن 1398
..نظرات..
..مقالات پربازدید..
طراحی سایت

آموزش قرعه کشی در اینستاگرام

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

18902
24 فروردین 1398
طراحی سایت

bit.ly چیست ؟

بیتلی یا bitly یکی از شناخته‌شده‌ترین سرویس‌های کوتاه کننده لینک است. این سایت با نشانی https://bit.ly در سال ۲۰۰۸ تاسیس شد. یک کوتاه کننده‌ی لینک وظیفه دارد تا لینک‌های مورد نظر کاربران را به شکل کوتاه و قابل خواندن و نوشتن تبدیل کند. این سرویس در هر ماه حدود ۶۰۰ میلیون لینک کاربران را کوتاه می‌کند. علت استفاده از...

4007
27 آذر 1398
سئو

چگونه ویدیو کلاس های آنلاین (وبینار) را ضبط کنیم؟| آموزش ۳ روش

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

3989
08 اردیبهشت 1399