این آموزش در تاریخ ۱۴۰۰/۱۰/۱۳ آپدیت شده است.
آموزش انتخابگر آی دی یا ID در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش انتخابگر آی دی یا ID در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
انتخابگر آی دی یا ID در CSS
با استفاده از این انتخابگر همونطور از اسمشم مشخصه میتونیم یک آی دی یا ID را از یک یا چندین تگ فراخوانی و در CSS به آنها استایل بدهیم.
Free-Learn
مثال از این انتخابگر
در ادامه میتوانید یک مثال از این انتخابگر را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : انتخاب یک عدد ID از صفحه
1 2 3 4 5 6 7 8 9 |
<style> #test{ background-color:#123456; color:#fff; text-align:center; } </style> |
مثال شماره ۲ : انتخاب دسته جمعی ID ها ، با کاما ( , ) از همدیگه جدا میشن
1 2 3 4 5 6 7 8 9 |
<style> #MyID1 , #free-learn , #MyID2 { background-color: orange; color: #fff; text-align: center; } </style> |
مثال شماره ۳ : انتخاب یک ID خاص در یک تگ خاص
1 2 3 4 5 6 7 8 9 |
<style> h2#test{ background-color:blue; color:white; text-align:center; } </style> |
مثال شماره ۴ : داره میگه انتخاب کن ID تست را که در تگ P هست و تگ P باز خودش داخل تگ DIV هست
1 2 3 4 5 6 7 8 9 |
<style> div h2#freelearn{ background-color:#e30730; color:#fff; text-align:center; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این انتخابگر در CSS پشتیبانی میکنند یا خیر.
نام انتخابگر | Chrome | Firefox | Opera | Safari | Edge |
آی دی / ID | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری انتخابگر آی دی یا ID در CSS
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر در CSS بصورت زیر می باشد.
1 2 3 |
#ID_Name { دستورات سی اس اس در اینجا } |
Free-Learn
نکات و توضیحات
- بیشترین استفاده از کلاس ها در زبان CSS می باشد
- بیشترین استفاده از ID ها در زبان JavaScript می باشد
- ولی خب هیچ محدودیتی برای استفاده از ID ها در CSS وجود ندارد