این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
آموزش نحوه ایجاد آی دی یا Id در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه ایجاد آی دی یا Id در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه ایجاد آی دی یا ID در HTML
صفت ID در دسته صفات عمومی و جزء صفات پراستفاده در یک صفحه وب می باشد، صفت عمومی یعنی اینکه تقریبا از این صفت میشه در تمامی تگ های HTML استفاده کرد.
از این صفت هم میشه در زبان CSS و هم در زبان JavaScript استفاده کرد ولی خب بیشترین استفاده این صفت در زبان جاوااسکریپت می باشد، و در زبان جاوااسکریپت هست که میگم نباید ID دوتا تگ شبیه هم باشند وگرنه در زبان CSS مهم نیست.
بفرض مثال با استفاده از جاوااسکریپت گفتیم انتخاب کن فلان تگ رو از صفحه بر اساس فلان ID ، حال اینجاست که میگم باید ID منحصربفرد باشه، چون اگه ۲تا تگ ID شون شبیه هم باشه میبینی برنامه مون بکل کار نمیکنه.
Free-Learn
نحوه تعریف ID در تگ های HTML
خیلی راحت با استفاده از صفت ID در داخل هرتگی که دوس داشتیم میتونیم براش ID تعریف کنیم، شکل کلی بصورت زیر می باشد :
|
1 |
<Element id="ID_Name"> |
که بجای Element همون تگ ما قرار میگیرد و بجای ( ID_Name ) نیز نام ID مون قرار میگیرد.
بعدش برای فراخوانی ID در زبان CSS :
|
1 2 3 |
#ID_Name{ دستورات سی اس اس در اینجا } |
اول یه علامت # میزاریم بعدش نام ID مون رو مینویسم و در نهایت دستورات سی اس اس مورد نظرمون رو وارد مینماییم.
Free-Learn
مثال از صفت ID در تگ های HTML
مثال شماره ۱ : استفاده و فراخوانی ID در CSS
|
1 2 3 4 5 |
<body> <p id="free-learn">Www.Free-Learn.Ir</p> </body> |
مثال شماره ۲ : استفاده و فراخوانی در زبان JavaScript
|
1 2 3 4 5 6 7 |
<script> function Result(){ document.getElementById("test").innerHTML = "وای! من تغییر کردم"; } </script> |
Free-Learn
تفاوت های ID با Class
بطور کلی میشه گفت تفاوت های اصلی ID با Class موارد زیر می باشد :
- در یک صفحه یک تگ فقط میتونه ۱ ( یک عدد ) آی دی یا ID داشته باشد. (مثال)
- در یک صفحه یک تگ میتونه چندین ( بیش از ۲ ) کلاس داشته باشد. (مثال)
- از ID ها نیز در CSS میشه استفاده کرد، یعنی میشه از یک ID یکسان درون چندین تگ استفاده کرد سپس با استفاده از CSS به اون تگ ها استایل داد. ( مثال )
- بیشترین استفاده از ID ها در جاوااسکریپت می باشد، و اگه شما در جاوااسکریپت از یک ID درون چندین تگ استفاده کرده باشید، عملیات فقط بروی اولین تگ اعمال میشه و بروی بقیه هیچ تاثیری ندارد. ( مثال )
- معمولا به مواردی که در یک صفحه ی وب خاص هستند ID میدن، مثلا چیزی که ازش نهایتا یه دونه در صفحه قرار داره.
- یک تگ بصورت همزمان هم میتونه Class و هم میتونه ID داشته باشد. (مثال)
- نام یک ID نباید با عدد شروع شود.
- نام یک Class نباید با عدد شروع شود.
- نام یک ID باید حداقل حاوی یک کاراکتر باشد.
- نباید هیچ فاصله ای در بین کاراکترهای نام یک ID قرار داشته باشد.
- نباید هیچ فاصله ای قبل و بعد از نام ID وجود داشته باشد.
- در HTML نام ID ها و کلاس ها به حروف بزرگ و کوچک حساس می باشند.
Free-Learn
نکات و توضیحات
- بهتر است بدانید در HTML5 ما میتونیم از صفت ID در تمامی عناصری که معتبر می باشند استفاده نماییم و در مقابل در HTML4.01 صفت ID را نمیتوان با تگ های زیر بکار گرفت:
| <base> | <head> | <html> |
| <meta> | <param> | <script> |
| – | <style> | <title> |
