آموزش نحوه استفاده از ID در CSS

این آموزش در تاریخ ۱۳۹۹/۰۱/۲۴ آپدیت شده است.

آموزش نحوه استفاده از ID در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه استفاده از ID در CSS با من همراه باشید.

نحوه استفاده از ID در CSS

آی دی یا ID بعد از کلاس دومین صفتی است که در CSS خیلی مورد استفاده قرار میگیره و میتوان از آن در CSS به راحتی استفاده کرد.

یکسری تفاوت ها بین Class و ID وجود دارد که این تفاوت ها به شرح زیر می باشد :

• در یک صفحه یک تگ فقط میتونه ۱ ( یک عدد ) آی دی یا ID داشته باشد. (مثال)
• در یک صفحه یک تگ میتونه چندین ( بیش از ۲ ) کلاس داشته باشد. (مثال)
• از ID ها نیز در CSS میشه استفاده کرد، یعنی میشه از یک ID درون چندین تگ استفاده کرد سپس با استفاده از CSS به اون تگ ها استایل داد. ( مثال )
• بیشترین استفاده از ID ها در جاوااسکریپت می باشد، و اگه شما در جاوااسکریپت از یک ID درون چندین تگ استفاده کرده باشید، عملیات فقط بروی اولین تگ اعمال میشه و بروی بقیه هیچ تاثیری ندارد. ( مثال )
• معمولا به مواردی که در یک صفحه ی وب میتونن خاص باشند ( مثله: هدر،سایدبار،فوتر و.. ) ID میدن و سپس در CSS یا جاوااسکریپت برای این ID ها استایل / عملیات تعریف میکنند.
• یک تگ بصورت همزمان هم میتونه Class و هم میتونه ID داشته باشد. (مثال)
• نام یک ID نباید با عدد شروع شود.
• نام یک Class نباید با عدد شروع شود.
• نام یک ID باید حداقل حاوی یک کاراکتر باشد.
• نباید هیچ فاصله ای در بین کاراکترهای نام یک ID قرار داشته باشد.
• نباید هیچ فاصله ای قبل و بعد از نام ID وجود داشته باشد.
• در HTML نام ID ها به حروف بزرگ و کوچک حساس می باشند.

نحوه ایجاد ID در CSS

ما ID رو در HTML در واقع باید ایجاد کنیم و در CSS اون رو فراخوانی کنیم، پس برای ایجاد ID در HTML ما باید از صفت ID در درون هر یک از تگ هایی که میخوایم براش ID تعریف کنیم، استفاده کنیم.

شکل کلی برای تعریف یک ID برای تگ های HTML بصورت زیر می باشد :

برای مثال من میخوام یک ID به نام test در تگ P ایجاد کنم، پس بصورت زیر عمل میکنم :

و برای فراخوانی ID در CSS بصورت زیر عمل میکنم : (یک علامت # میزارم بعد نام ID و در نهایت دستورات CSS)

امتحان کنید