آموزش نحوه استفاده از ID در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه استفاده از ID در CSS با من همراه باشید.
Free-Learn
نحوه استفاده از ID در CSS
آی دی یا ID بعد از کلاس دومین صفتی است که در CSS خیلی مورد استفاده قرار میگیره و میتوان از آن در CSS به راحتی استفاده کرد.
معمولا بیشترین استفاده از ID در زبان جاوااسکریپت می باشد.
در همین رابطه : آموزش صفت عمومی ID در HTML را مطالعه نمایید.
یکسری تفاوت ها بین Class و ID وجود دارد که این تفاوت ها به شرح زیر می باشد :
- در یک صفحه یک تگ فقط میتونه ۱ (یک عدد) آی دی یا ID داشته باشد. (مثال)
- در یک صفحه یک تگ میتونه چندین (بیش از ۲) کلاس داشته باشد. (مثال)
- معمولا و بیشتر از ID ها در زبان جاوااسکریپت استفاده میشود.
- از ID ها نیز در CSS میشه استفاده کرد، مثلا شما میتونید به هدر سایتتون یک ID بدید سپس در CSS براش استایل تعریف نمایید.
- به مواردی که در یک صفحه ی وب میتونن خاص باشند (مثله: هدر،سایدبار،فوتر و..) میتوان ID داد.
- یک تگ بصورت همزمان هم میتونه Class و هم میتونه ID داشته باشد. (مثال)
- نام یک ID نباید با عدد شروع شود.
- نام یک Class نباید با عدد شروع شود.
- نام یک ID باید حداقل حاوی یک کاراکتر باشد.
- نباید هیچ فاصله ای در بین کاراکترهای نام یک ID قرار داشته باشد.
- در HTML نام ID ها به حروف بزرگ و کوچک حساس می باشند.
Free-Learn
نحوه ایجاد ID در CSS
ما ID رو در HTML در واقع باید ایجاد کنیم و در CSS اون رو فراخوانی کنیم، پس برای ایجاد ID در HTML ما باید از صفت ID در درون هر یک از تگ هایی که میخوایم براش ID تعریف کنیم، استفاده کنیم.
شکل کلی برای تعریف یک ID برای تگ های HTML بصورت زیر می باشد :
|
1 |
<tagname id="ID_NAME"> ... </tagname> |
برای مثال من میخوام یک ID به نام test در تگ P ایجاد کنم، پس بصورت زیر عمل میکنم :
|
1 2 3 4 5 |
<body> <p id="test">سایت آموزشی فری لرن</p> </body> |
و برای فراخوانی ID در CSS بصورت زیر عمل میکنم : (یک علامت # میزارم بعد نام ID و در نهایت دستورات CSS)
|
1 2 3 4 5 6 7 |
<style> #test{ background-color:orange; } </style> |
