جلسه 17 آموزش HTML: کار با id و کلاس (class و id)

جلسه 17 آموزش HTML: کار با id و کلاس (class و id)

سلام به همه دنبال کنندگان عزیز دوره آموزش HTML رایا وردپرس✨

تو جلسه هفدهم، قراره دو تا مفهوم خیلی مهم و پرکاربرد تو HTML رو بررسی کنیم: کلاس (class)‌ و آیدی (id).
این دوتا دقیقاً مثل ابزارهای جادویی طراحی وب هستن که بهت کمک می‌کنن استایل‌های خاصی به عناصر صفحه بدی یا حتی با جاوااسکریپت کنترلشون کنی!

وقتی داری یه صفحه وب می‌سازی، ممکنه بخوای چندتا عنصر مثل دکمه‌ها 🔘 یا متن‌ها 📝 رو با یه استایل خاص طراحی کنی یا بهشون یه رفتار مشخص بدی. اینجاست که کلاس (class)‌ 🎭 و آیدی (id) 🆔 به کمکت میان!

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

جلسه 4 آموزش HTML: بررسی تگ های هدینگ (h1 تا h6)

مطالعه

جلسه 2 آموزش HTML :HTML چیست؟ آنچه باید بدانید

مطالعه

 جلسه 21 آموزش HTML: آشنایی با API ها در html

مطالعه

اگه برای هر عنصر جداگانه استایل تعریف کنی، کلی کد تکراری ✍️ تولید میشه که هم حجم صفحه رو بالا می‌بره 📈 و مدیریتش سخت‌تر میشه 🛠️. اما با کلاس‌ها و آیدی‌ها می‌تونی این کار رو هوشمندانه‌تر 🤓 و منظم‌تر انجام بدی:

• کلاس (class)‌ 🎭 برای چندین عنصر استفاده میشه که می‌خوای استایل یا رفتار مشابهی داشته باشن.
• آیدی (id) 🆔 برای یه عنصر خاص توی صفحه استفاده میشه که می‌خوای فقط همون یه دونه رو هدف بگیری و یه استایل یا رفتار خاص بهش بدی.

تفاوت کلاس و id به زبان ساده 🧑‍💻

قبل از اینکه وارد جزئیات بشم، بیا یه نگاهی به تفاوت های اصلی کلاس و id بندازیم:

شناسه یا id 🆔

• منحصر به فرد است: هر id فقط باید یک بار در صفحه استفاده بشه یعنی اگه به یه عنصری از صفحه یه آیدی خاص دادی همون ایدی رو نمیتونی برای المان یا عنصر دیگه داخل اون صفحه استفاده کنی
• اولویت بالاتری در CSS داره: قدرت انتخابگر id بیشتر از کلاسه
• با علامت # در CSS انتخاب تعریف میشه
• برای عناصر یکتا مانند هدر، فوتر یا منوی اصلی مناسبه

کلاس (class) 🏷️

• میتونه بارها استفاده بشه: یک کلاس میتونه به چندین عنصر در صفحه اختصاص پیدا کنه
• اولویت متوسط در CSS داره
• با علامت نقطه در CSS انتخاب تعریف میشه
• برای استایل‌دهی گروهی از عناصر مشابه ایده‌آله

نحوه استفاده از کلاس در HTML 📝

برای استفاده از کلاس‌ها در HTML، کافیه به عنصری که میخای استایل یا رفتار مشترک داشته باشه، ویژگی class رو اضافه کنی.درست قبل از بسته شدن تگ آغازین (یعنی قبل از قرار گرفتن علامت >) ویژگی class باید اضافه بشه. مثال ها:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

استفاده از چندین کلاس برای یک عنصر 🔀

یکی از ویژگی‌های جالب کلاس‌ها، امکان استفاده از چندین کلاس برای یک عنصره یعنی میتونی به یه عنصر چندین کلاس مختلف بدی:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

در مثال بالا، عنصر div از سه کلاس مختلف استفاده میکنه که هر کدوم میتونن استایل‌های متفاوتی رو بهش اعمال کنن.

وقتی توی HTML برای یه عنصر کلاس تعریف می‌کنی، توی CSS باید با علامت نقطه (.) و نام کلاس بهش استایل بدی. مثلا:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

🔍 کاربرد کلاس (class) در عمل

مثال ۱: استایل دادن به چند دکمه با یک کلاس

فرض کن میخوایم سه دکمه داشته باشیم که همشون رنگ پس زمینه آبی و متن سفید داشته باشن. به جای سه بار نوشتن استایل، از کلاس مشترک واسه تمام دکمه ها استفاده میکنیم:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

در CSS:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

قوانین نام گذاری کلاس‌ ها 📋

برای اینکه کدهای HTML و CSS ات خوانا، استاندارد و قابل نگهداری باشه، رعایت چند نکته در نام گذاری کلاس‌ها ضروریه:

1. شروع نام کلاس:
   • نام کلاس‌ها نمی‌تونن با عدد یا کاراکترهای خاص شروع بشن (به جز – و _ )
   • برای مثال، نام‌هایی مثل 3box یا @header اشتباه‌ هستن، در حالی که _header یا -menu مجازن.
   • 🎯نکته: همیشه سعی کن نام رو با یک حرف شروع کنی.
2. عدم استفاده از فاصله:
   • در نام‌های کلاس، استفاده از فاصله مجاز نیست.
   • به جای فاصله از خط تیره (-) یا آندرلاین (_) استفاده کن.
   • مثلاً به جای نوشتن main content از main-content یا main_content استفاده کن.
   • 🎯 نکته: این کار به خوانایی و هماهنگی کد کمک می‌کنه.
3. حساسیت به حروف بزرگ و کوچک:
   • نام‌های کلاس در CSS به حروف بزرگ و کوچک حساس هستن.
   • به عنوان مثال، box با Box تفاوت داره.
   • 🎯 نکته: بهتره یک سبک ثابت (همه حروف کوچک یا بزرگ) رو در کل پروژه رعایت کنی.
4. استفاده از نام‌های معنادار:
   • همیشه از نام‌هایی استفاده کن که کارکرد یا محتوای عنصر رو به خوبی نشون بدن.
   • به جای نام‌های کلی و مبهم مثل class1 یا item، از نام‌هایی مانند main-header، sidebar-menu یا product-card استفاده کن تا کد خواناتر و مدیریتش آسون‌تر باشه.
   • 💡 نکته: نام‌های معنادار به تیم توسعه کمک می‌کنه تا سریع‌تر متوجه عملکرد بخش‌های مختلف بشن.

با رعایت این قواعد، کدهات تمیزتر، استانداردتر و نگهداری‌شون راحت‌تر خواهد بود. 🚀

نحوه استفاده از آیدی یا شناسه در HTML 📝

آیدی (ID) یا شناسه برای شناسایی یک عنصر در صفحه استفاده می‌شه. یعنی اگر نیاز داری تنها یک عنصر خاص رو هدف قرار بدی، از آیدی استفاده کن. این کار در CSS و به خصوص JavaScript کاربرد زیادی داره.

نحوه استفاده: وقتی تگ HTML رو می‌نویسی، قبل از بسته شدن تگ آغازین، ویژگی id رو اضافه کن. توجه کن که هر آیدی باید منحصر به فرد باشه؛ یعنی در یک صفحه نباید دو عنصری با یک آیدی وجود داشته باشن.

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

وقتی به یک عنصر HTML یک id منحصر به فرد اختصاص دادی، می‌تونی به راحتی اون رو در CSS هدف‌گذاری کنی. برای اعمال استایل‌ها، کافیه از علامت # به همراه نام آیدی استفاده کنی. مثلاً:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

از اونجایی که id، یک ویژگی حیاتی در جاوااسکریپته، برای دسترسی به یک عنصر خاص می‌تونی از متد document.getElementById("unique-element") استفاده کنی. این متد بهت اجازه می‌ده به سرعت و به صورت مستقیم با عنصر مورد نظر تعامل داشته باشی؛ مثلاً برای تغییر محتوا یا استایل اون. ⚡️

🔥 کاربرد id در عمل

آیدی برای عناصر منحصر به فرد مثل هدر سایت، منو یا فرم تماس استفاده میشه. همچنین در جاوااسکریپت برای دسترسی به عناصر خاص کاربرد داره!

مثال ۱: ساخت یک هدر با آیدی خاص main-header

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

در CSS برا خلاف کلاس که اولش از نقطه استفاده میکردیم اینجا اول کلاس خط باید #بزاری بعد آیدی مدنظرو بنویسی:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

مثال ۲: پرش به بخشی از صفحه با لینک (با استفاده از id) 🔗

اگر بخوای با کلیک روی یه لینک، کاربر به بخش خاصی از صفحه بره، از آیدی استفاده کن:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

قوانین استفاده از ID ها 📏

برای استفاده صحیح از id در HTML، این نکات رو همیشه به خاطر داشته باش:

۱. هر id باید یکتا باشه: هر id در یک صفحه باید منحصر به‌ فرد باشه. یعنی نمی‌تونی یک id رو به بیش از یک عنصر اختصاص بدی، چون باعث ایجاد مشکلات در CSS و JavaScript می‌شه. ❌📛

۲. قوانین نام‌گذاری مشابه کلاس‌ هاست

• نام id نباید با عدد شروع بشه. 🚫 3box (اشتباه) ✅ box3 (درست)
• فاصله مجاز نیست، به‌جاش از - یا _ استفاده کن. ✅ main-section یا main_section
• به حروف بزرگ و کوچک حساسه (header با Header فرق داره).

۳. برای عناصری که فقط یک‌بار در صفحه ظاهر میشن، مناسبه
از id برای عناصری که فقط یک نسخه از اون‌ها در صفحه وجود داره، مثل هدر، فوتر، یا فرم ثبت‌نام خاص استفاده کن. مثلاً:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

۴. از id میتونی برای ناوبری درون‌ صفحه‌ استفاده کنی
اگر بخوای کاربر رو با کلیک روی یک لینک به یک بخش خاص از صفحه ببری، می‌تونی از id استفاده کنی. این کار با #id در لینک‌ها انجام می‌شه. مثال:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

۵. id در JavaScript بسیار کاربردیه
در جاوااسکریپت برای انتخاب و تغییر یک عنصر خاص، id بهترین گزینه‌ست. از document.getElementById("element-id") برای دسترسی سریع به عنصر استفاده کن. ⚡

تا یادم نرفته اینم بهتون بگم👇

نکته درباره ترکیب کلاس و id : می‌تونیم توی یک عنصر هم class داشته باشیم و هم id، ولی id همیشه اولویت داره. مثل این مثال:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

در CSS:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

الان به نظرت رنگ متن چی میشه؟ 🎨
درست حدس زدی! 🔴 قرمز میشه، چون id نسبت به class توی CSS اولویت بالاتری داره. 😉

جمع بندی

تو این جلسه یاد گرفتی چطور با کلاس و id عناصر صفحه رو شخصی سازی کنی، بهشون استایل بدی یا حتی با جاوااسکریپت کنترلشون کنی. 🎉

• کلاس ها رو برای گروه های تکراری به کار ببر.
• آیدی ها رو برای عناصر منحصر به فرد استفاده کن.

حالا برو تمرین کن و یه صفحه وب ساده با استفاده از کلاس و id طراحی کن! اگه سوالی داری تو کامنت ها بپرس. 😊 مرسی که تا پایان این جلسه منو با نگاه قشنگت همراهی کردی امیدوارم مطالب برات مفید باشن تا جلسه بعدی به خدای بزرگ میسپارمت 🙂