این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش نحوه استفاده از ID در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه استفاده از ID در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه ایجاد و فراخوانی ID در CSS
خیلی راحت برای ایجاد ID در HTML ما باید از صفت ID در درون هر یک از تگ هایی که میخوایم براش ID تعریف کنیم، استفاده کنیم.
شکل کلی برای تعریف یک ID برای تگ های HTML بصورت زیر می باشد :
|
1 |
<tagname id="ID_NAME"> |
بعدش برای فراخوانی ID در CSS یک علامت # میزاریم بعد نام ID مون رو مینویسیم و در نهایت دستورات CSS
|
1 2 3 |
#ID_NAME{ دستورات سی اس اس در اینجا } |
Free-Learn
مثال از نحوه ایجاد و فراخوانی ID در CSS
مثال شماره ۱ : فراخوانی تگ هایی که ID شون برابر است با free-learn
|
1 2 3 4 5 6 7 8 9 |
<style> #free-learn{ background-color:#F44336; color:#fff; padding:10px; } </style> |
مثال شماره ۲ : فراخوانی یک ID از یک تگ خاص ( یعنی مثلا من میخوام فقط تگ های H2 که ID فلان رو دارن انتخاب بشن )
|
1 2 3 4 5 6 7 8 9 |
<style> h2#test{ background-color:blue; color:white; text-align:center; } </style> |
Free-Learn
نکات و توضیحات
قوانین نامگذاری یک id برای عناصر در HTML :
- نام یک id باید حداقل دارای یک کاراکتر باشد.
- در بین حروف نام یک id نباید هیچ فاصله ای وجود داشته باشد.
سوال : شاید این براتون سواله که اصلا این صفت به چه درد میخوره و یا اصلا تفاوت ID با Class در چیه؟ و اینکه اصلا چرا ما باید از کلاس و یا آی دی استفاده نماییم؟
پاسخ :اول اینکه این صفت همونطور که گفتم میتونه یک شناسه یا آی دی منحصر بفردی رو برای یک عنصر یا تگ در یک صفحه ی وب مشخص کند خب میتونیم از این شناسه در جاوااسکریپت یا CSS استفاده نماییم.
ادامه پاسخ » وقتی میگیم منحصر بفرد، یعنی مثلا من میخوام با استفاده از جاوااسکریپت وقتی بروی یک دکمه کلیک شد متن درون یک تگ تغییر کند، حال اگه چندین تگ از یک ID یکسان استفاده کرده باشند ، دیگه عملیات تغییر متن بروی همه ی تگ ها اعمال نخواهد شد چون چندین تگ از ID یکسان استفاده کرده اند، پس اینجاست که میگیم باید منحصربفرد باشه.
بطور کلی میشه گفت تفاوت های اصلی ID با Class موارد زیر می باشد :
- در یک صفحه یک تگ فقط میتونه ۱ ( یک عدد ) آی دی یا ID داشته باشد. (مثال)
- در یک صفحه یک تگ میتونه چندین ( بیش از ۲ ) کلاس داشته باشد. (مثال)
- از ID ها نیز در CSS میشه استفاده کرد، یعنی میشه از یک ID درون چندین تگ استفاده کرد سپس با استفاده از CSS به اون تگ ها استایل داد. ( مثال )
- بیشترین استفاده از ID ها در جاوااسکریپت می باشد، و اگه شما در جاوااسکریپت از یک ID درون چندین تگ استفاده کرده باشید، عملیات فقط بروی اولین تگ اعمال میشه و بروی بقیه هیچ تاثیری ندارد. ( مثال )
- معمولا به مواردی که در یک صفحه ی وب خاص هستند ID میدن، مثلا چیزی که ازش نهایتا یه دونه در صفحه قرار داره.
- یک تگ بصورت همزمان هم میتونه Class و هم میتونه ID داشته باشد. (مثال)
- نام یک ID نباید با عدد شروع شود.
- نام یک Class نباید با عدد شروع شود.
- نام یک ID باید حداقل حاوی یک کاراکتر باشد.
- نباید هیچ فاصله ای در بین کاراکترهای نام یک ID قرار داشته باشد.
- نباید هیچ فاصله ای قبل و بعد از نام ID وجود داشته باشد.
- در HTML نام ID ها به حروف بزرگ و کوچک حساس می باشند.
