در پایان جلسه‌ی قبلی
گفتیم خوبه که بتونیم
برای بعضی از عناصر اسم بذاریم
و بعد اون اسم‌ها رو برای انتخاب در CSS استفاده کنیم
و بنابراین توی این ویدیو
یاد می‌گیریم دقیقاً همین کار رو با استفاده از class و id انجام بدیم
یادتون باشه جلسه‌ی قبل
می‌خواستیم فقط این متن اینجا رو italic کنیم
یعنی این پاراگرافی که داخل این header هست
ولی نه اون پاراگراف دیگه‌ای
که اون هم داخل یک header بود
پس راه‌حلی که داشتیم این بود
که فقط پاراگراف‌های داخل headerها رو انتخاب کنیم
که خودشون داخل article باشن
یادتون باشه مشکل این کار اینه
که در اصل ساختار HTML رو
داخل سلکتور CSS کدگذاری می‌کنیم و این کار خوبی نیست
پس در عوض حالا میایم این عنصر رو
با چیزی به اسم id نام‌گذاری می‌کنیم
و با این کار می‌تونیم دیگه یک سلکتور طولانی و پیچیده ننویسیم
مثل همونی که قبلاً نوشتیم
پس بریم سراغ اینجا
و اون پاراگراف مورد نظر همین یکیه
و حالا می‌تونیم یک attribute خاص به اسم id براش مشخص کنیم
attribute اینجا اسمش id هست
و حالا اسمش رو بذاریم author
پس این اسم رو یادتون باشه: Author
و حالا این عنصر
این پاراگراف در اصل اسمش author شد
و حالا توی CSS می‌تونیم از سلکتور hash استفاده کنیم
این همون سلکتور id هست
یعنی hash و بعد اسم id که تازه مشخص کردیم
و حالا اینجا می‌تونیم دوباره font-style رو
روی italic تنظیم کنیم درسته؟
و حالا می‌تونیم این کد قبلی رو حذف کنیم
چون دیگه لازم نیست
ولی به جای اینکه حذفش کنم
می‌خوام همینجا نگهش دارم
پس می‌تونیم کاری مشابه انجام بدیم
همونطور که توی HTML یاد گرفتیم کامنت بذاریم
پس اینجا یک سری کامنت HTML نوشتیم تا کد رو نگه داریم
بدون اینکه واقعاً فعال باشه
خب توی CSS هم می‌تونیم همین کار رو بکنیم
فقط روشش متفاوته
توی CSS اول اسلش می‌نویسیم بعد ستاره
و بعد از اون به بعد
هرچی باشه تبدیل به کامنت می‌شه
پس باید این کامنت رو ببندیم
چون می‌خوایم کد بعدی فعال بمونه
پس برعکسش رو می‌نویسیم
یعنی ستاره و اسلش
و حالا فقط این بخش خاکستری می‌شه و یعنی فقط این کامنت شده
پس اگه اینو ذخیره کنم
می‌بینید که فقط این متن
یعنی فقط این پاراگراف italic شده و اون یکی نه
بیاید در واقع یک استایل دیگه هم اضافه کنیم
یعنی یک declaration دیگه
و بیایم font-size رو
روی ۱۸ پیکسل بذاریم
یعنی یکم کوچیک‌تر بشه
چون یادتونه بقیه‌ی پاراگراف‌ها
۲۲ پیکسل بودن
و واقعاً می‌بینید که این یکی کوچیک‌تر شد
و بقیه‌ی پاراگراف‌ها
از جمله این یکی همونطور باقی موندن
حالا بیایم کاری مشابه روی متن copyright انجام بدیم
یعنی همین یکی و با این کار
این قانون CSS رو که اینجا هست جایگزین می‌کنیم
پس می‌تونیم دوباره مثل قبل کامنتش کنیم
ولی اجازه بدید یک ترفند خوب توی VS Code نشونتون بدم
برای کامنت کردن کدی
که از قبل انتخابش کردید
کافیه کلید Comment یا Ctrl + / رو بزنید
خب من این کار رو انجام می‌دم
و می‌بینید که به طور خودکار
این کامنت‌ها رو اضافه کرد
و اگه دوباره Ctrl یا Command + / بزنم
کامنت غیرفعال می‌شه
پس می‌تونم بین این دو حالت جابجا بشم
خب حالا اگه اینو reload کنیم
طبیعتاً برمی‌گرده روی ۲۲ پیکسل
پس بریم سراغ HTML و برای این یکی هم اسم بذاریم
یعنی با استفاده از attribute id
پس id رو بذاریم مثلاً copyright
و حالا این متن رو انتخاب کنیم کپی کنیم و همینجا بذاریمش
و یادتون باشه برای id از سلکتور hash استفاده می‌کنیم
به علاوه‌ی همون اسم که مشخص کردیم
و حالا font-size رو بذاریم روی ۱۶ پیکسل
و اینم نتیجه
پس دوباره جواب داد
حالا علاوه بر id
یه راه دیگه هم برای اسم‌گذاری عناصر هست
که استفاده از class به جای id هست
ما اینجا attribute id رو مشخص کردیم
تا به این عنصر اسم بدیم
اما می‌تونستیم به جای اون از attribute class استفاده کنیم
حالا تفاوت بزرگ بین id و class اینه
که اجازه نداریم اسم‌های id رو تکرار کنیم
یعنی هر id فقط می‌تونه یک بار استفاده بشه
پس تکرارش مجاز نیست
پس الان نمی‌تونیم یک id به نام copyright به چیز دیگه‌ای بدیم
برای مثال من نمی‌تونم
اینجا برم و id به نام copyright اضافه کنم
این در واقع HTML نامعتبر محسوب می‌شه
و اجازه نداریم این کار رو انجام بدیم
پس اگه بخوایم یک نام رو چند بار استفاده کنیم
باید برای اون از کلاس‌ها استفاده کنیم
خب پس بذارید یک مثال از استفاده کلاس‌ها نشون بدم
الان می‌خوام این نویسنده‌های اینجا رو استایل بدم
که مربوط به این سه پست مرتبط هستن به شکلی متفاوت
در واقع این همون تگ P اینجاست
و این یکی و این یکی
خب باز هم نمی‌تونم id بذارم مثلاً related author
پس به جای اون باید از صفت class استفاده کنم
و اسمش رو بذارم related-author
توی CSS یک قرارداد وجود داره که
اگه اسم یک کلاس یا id چند کلمه‌ای باشه
این کلمات رو با خط تیره از هم جدا می‌کنیم
البته می‌تونید از underscore هم استفاده کنید
اون هم معتبره ولی به طور قراردادی
در CSS همیشه از خط تیره استفاده می‌کنیم
خب حالا این رو کپی می‌کنم
و توی همه این پاراگراف‌ها می‌ذارم
پس related-author سه بار
و حالا بریم توی CSS
و همه عناصری که این کلاس رو دارن استایل بدیم
برای idها از علامت ♪ استفاده می‌کنیم
و برای کلاس‌ها از نقطه استفاده می‌کنیم
پس این شد انتخابگر کلاس
یعنی related-author
خب بیایید اینجا سایز فونت رو بذاریم
روی 18 پیکسل
و همچنین یک ویژگی جدید برای متن مشخص کنیم
که قبلاً یاد نگرفتیم: Font-weight
با این می‌تونیم متن رو مثلاً Bold کنیم
همونطور که می‌بینید اینجا گزینه‌های مختلفی هست
می‌شه از اعداد هم استفاده کرد که بعداً یاد می‌گیریم
ولی فعلاً از یک کلیدواژه ساده استفاده می‌کنیم: Bold
خب ذخیره می‌کنیم ببینیم چه نتیجه‌ای داره
و همونطور که می‌بینید
فقط این سه پاراگراف تغییر کردن
Bold شدن و فونتشون کوچیک‌تر شده
نسبت به بقیه پاراگراف‌ها
البته توی HTML همچنان پاراگراف هستن
ولی الان این استایل‌های اضافه رو گرفتن
شاید الان از خودتون بپرسید که
در واقع داریم این پاراگراف‌ها رو
چند بار انتخاب می‌کنیم درسته؟
یعنی همین پاراگراف اینجا انتخاب شده درسته؟
ولی اینجا هم دوباره انتخابش کردیم
و حتی این بالا هم انتخابش کردیم
پس سه بار این پاراگراف انتخاب شده
و شاید فکر کنید
کدوم یکی از اینا در نهایت اعمال می‌شه؟
یعنی انگار یک جورایی تداخل ایجاد می‌کنه
جواب کوتاه اینه که در واقع
همه این انتخابگرها اعمال می‌شن
پس هر سه قانون CSS
که مربوط به این انتخابگرهاست اعمال می‌شن
ولی من بیشتر توضیح می‌دم
که این چطور کار می‌کنه و چرا اینطوریه
توی یک ویدیوی اضافه چون خیلی مهمه
که اینو یاد بگیرید تا بتونید CSS رو خوب مسلط بشید
پس این موضوع یک جلسه جداگانه لازم داره
که کمی بعدتر توی این بخش بهش می‌رسیم
ولی الان بریم جلوتر
می‌خوام یک تمرین کوچیک بهتون بدم
می‌خوام کاری کنید که دایره‌های لیست حذف بشن
فقط برای همین لیست اینجا
یادتونه برای این مورد یک لیست ساختیم
و طبیعتاً این لیست الان دایره داره
می‌خوام فقط همین لیست رو انتخاب کنید
و دایره‌هاش رو حذف کنید
تا حالا دایره لیست رو حذف نکردیم
پس بذارید نشون بدم چطور کار می‌کنه
برای این کار الان در واقع انتخاب می‌کنم
همه لیست‌های unordered رو
اینجا از ویژگی list-style استفاده می‌کنیم
و مقدارش رو می‌ذاریم روی none
خب
حالا دایره‌های این یکی لیست حذف شدن
ولی از این یکی هم حذف شدن
ولی همونطور که گفتم می‌خوام فقط
این عنصر انتخاب بشه
و دایره‌هاش حذف بشه
و می‌خوام این کار رو با استفاده از یک کلاس به نام related انجام بدید
خب پس بذارید این کد رو کامنت کنم
خب
یک کلاس روی همین عنصر لیست بسازید
و بعد دایره‌هاش رو حذف کنید
منم وقتی انجام دادید برمی‌گردم اینجا
خب پس اول بریم سراغ HTML
و طبیعتاً این همون ul هست
که می‌خوایم انتخاب کنیم
و یادتون باشه گفتم باید از کلاس استفاده کنید
که بعداً دلیلش رو توضیح می‌دم
پس یک کلاس به نام related می‌ذاریم
و حالا می‌ریم سراغ CSS
و این عنصر رو انتخاب می‌کنیم
با کلاسی که همین الان اسمش رو گذاشتیم
پس طبیعتاً با استفاده از سلکتور کلاس به این شکل
و حالا فقط روی این یکی
می‌گیم که list style باید none باشه
ذخیره‌اش کن
و بنابراین این یکی هنوز بولت‌پوینت داره
و این یکی نداره
عالیه
پس ما این کار رو کردیم چون نمی‌خوایم این لیست اینجا
واقعاً شبیه یه لیست به نظر بیاد
فقط از نظر معنایی باید یه لیست از پست‌های مرتبط باشه
به هر حال حالا برگردیم به HTMLمون
و یکم درباره اینکه چرا از کلاس استفاده کردیم
و نه id صحبت کنیم
چون در واقع فقط یه المان لیست
برای پست‌های مرتبط وجود داره درسته؟
پس به‌راحتی می‌تونستیم اسمش رو id بذاریم نه؟
چون یادتون باشه id برای اسم‌هایی هست
که فقط یکبار استفاده می‌شن در حالی که کلاس‌ها وقتی استفاده می‌شن
که بخوایم چندین المان رو با یه اسم یکسان مشخص کنیم
یعنی وقتی بخوایم چند المان رو به یه شکل
در CSS استایل بدیم
پس با علم به این موضوع
چرا بهتون گفتم از کلاس استفاده کنید نه id؟
خب دلیلش اینه که معمولاً در دنیای واقعی
ما هیچ‌وقت از id استفاده نمی‌کنیم
ما همیشه از کلاس‌ها استفاده می‌کنیم چون با کلاس‌ها
برای آینده آماده هستیم
فرض کنید در واقع یه id به اسم related استفاده کرده بودیم
اما بعداً یه جایی دیگه توی صفحه
می‌خواستیم یه لیست دیگه از پست‌های مرتبط اضافه کنیم
شاید می‌خواستیم یکی توی سایدبار باشه
و یکی هم توی فوتر
پس اگه یه طراحی پیچیده‌تر رو تصور کنیم
کاملاً امکان‌پذیر بود درسته؟
ولی اگه از اول یه id به اسم related استفاده کرده بودیم
الان مجبور بودیم برگردیم و اون id رو به کلاس تغییر بدیم
تا بتونیم یه لیست دیگه از پست‌های مرتبط اضافه کنیم
و این می‌تونست منبع خطا بشه
اگه به هر دلیلی اون رو فراموش می‌کردیم
و همچنین مجبور می‌شدیم بریم توی CSSمون
و اون رو هم تغییر بدیم
پس اولش یه id به اسم related بود
اما الان باید دوباره اینجا می‌اومدیم و اون رو به یه نقطه تغییر می‌دادیم
یعنی به سلکتور کلاس
و در حالی که شاید به نظر مشکل بزرگی نیاد
اما در واقع می‌تونه باعث باگ یا خطا توی کد بشه
وقتی پروژه خیلی بزرگی داشته باشیم
بنابراین به طور پیش‌فرض ما کلاً این مشکل احتمالی رو
با استفاده همیشگی از کلاس‌ها دور می‌زنیم
خوب
حالا من همچنان این id رو برای شما نگه می‌دارم
پس این id مربوط به copyright و این id مربوط به author
فقط برای اینکه بدونید چطور با id ها هم کار کنید
اما در آینده دیگه واقعاً از id استفاده نمی‌کنم
چون همونطور که گفتم در دنیای واقعی
ما همیشه فقط از کلاس‌ها استفاده می‌کنیم
حتی اگه فقط یکبار از اون اسم کلاس استفاده کنیم
چون با این کار کدمون رو آماده آینده می‌کنیم
و برای تغییرات احتمالی آماده نگه می‌داریم
خوب امیدوارم این موضوع براتون واضح شده باشه
و حالا می‌تونید اگه خواستید
اسم چند المان دیگه رو هم بذارید
و اون‌ها رو به شکل‌های مختلف استایل بدید
در واقع برای اینکه یکم بیشتر تمرین کنید
و بعد اگه دوست داشتید می‌تونید با من بیاید
به ویدیوی بعدی که توش کار با رنگ‌ها رو شروع می‌کنیم