خوش اومدید به آخرین چالش کدنویسی این بخش
و مثل همیشه روی همون پروژه‌مون کار رو ادامه می‌دیم
خب این همونجوریه که رهاش کردیم
بعد از چالش کدنویسی شماره دو
پس مثل همیشه اینو به عنوان نقطه شروع در نظر بگیر
که امیدوارم یا توی CodePen داشته باشی
یا جایی توی کامپیوترت ذخیره کرده باشی
و اگر نه لینک این کد توی همین درس هست
و چیزی که می‌خوام انجام بدی اینه که اینو تغییر بدی
به این و در اصل فقط دو تغییر بزرگ وجود داره
اول این برچسب Sale اینجاست
که توی گوشه بالا سمت چپ المنت قرار گرفته
و بعد پایین اینجا هم داریم در واقع
این شش رنگ موجود که می‌تونیم کفش رو توش بخریم
پس می‌خوام این بخش رو اینجا بسازی و همین‌طور اینو
این برچسب Sale خیلی شبیهه
به چیزی که قبلاً انجام دادیم
امیدوارم یادت باشه که این همونه
خب؟
ولی توی این حالت
واقعاً لازم نیست برای این کار از یک شبه-المنت (pseudo-element) استفاده کنی
می‌تونی خیلی ساده یک المنت اضافه کنی مثلاً یک پاراگراف
برای Sale و بعد هم اونو اینجا موقعیت بدی درست مثل همون کاری
که توی یکی از درس‌های قبلی کردیم
حالا شاید متوجه این جزئیات بشی که
توی این متن یه فاصله‌ای وجود داره
بین کاراکترها
یا این حروف اینجا درسته؟
خب یه خاصیت CSS هست که اجازه می‌ده این کارو انجام بدی
و چیزی که می‌خوام انجام بدی اینه که اون رو گوگل کنی
پس می‌خوام از گوگل استفاده کنی تا بفهمی
چجوری می‌تونی اون فاصله رو کمی اضافه کنی
مثل چیزی که توی درس مهارت‌های توسعه‌دهنده
راجع به گوگل کردن نشونت دادم
پس حالا می‌تونی اون رو هم اعمال کنی خب؟
این یکی از کارهایی هست که باید انجام بدی
و اون یکی اینجاست
پس کاری که باید بکنی اینه که
یک المنت بسازی و بعد داخل اون المنت
که می‌تونه یک div ساده باشه داخلش
باید شش المنت دیگه ایجاد کنی
و اینا هم می‌تونن div باشن اگر بخوای
و بعد تنها کاری که باید بکنی اینه که به هرکدوم یک رنگ بدی
و اونا رو کنار هم بچینی با یک ترفند کوچیک و جالب
که در واقع توی یکی از درس‌ها هم یاد گرفتیم
و به طور خاص اون درس مربوط به
انواع باکس‌ها بود اگر درست یادم باشه
پس این یه ترفند کوچیک بود که اونجا استفاده کردیم
و اینجا هم می‌تونی ازش استفاده کنی
و اگه یادت نیست
مثل همیشه هیچ اشکالی نداره
اگه لازم باشه برگردی به کدمون
و دقیقاً ببینی اونجا چجوری انجام دادیم
و همین موضوع البته برای این تکنیک اینجا هم صدق می‌کنه
پس انتظار ندارم که همه تکنیک‌هایی
که اینجا نشونت دادم رو حفظ کرده باشی
اما اگه بتونی توی کدت دنبالشون بگردی
و توی موقعیت‌های دیگه ازشون استفاده کنی
همین خودش دستاورد فوق‌العاده‌ایه خب؟
پس اگه فقط همین کار رو می‌تونی بکنی لطفاً همین الان
ویدیو رو متوقف کن و وقتی کارت تموم شد دوباره می‌بینمت
خب برگردیم سر کار
و بریم سراغ برچسب Sale
همونطور که گفتم من خیلی ساده یه پاراگراف اضافه می‌کنم
و چون می‌خوایم موقعیت‌دهی absolute بهش بدیم
مهم نیست دقیقاً کجاست
ولی من اینو همین‌جا می‌ذارم
نزدیک قیمت و بخش ارسال
چون از نظر معنایی اونجاست که منطقیه قرار بگیره
تا اونجا باشه
خب بیایم براش یک کلاس به نام sale بذاریم
و بعد هم متن "Sale" رو بهش اضافه کنیم
و بعد اینو ببندیم
و حالا اینجا توی CSS مون
بیایم اینو هم نزدیک بخش shipping قرار بدیم
پس پایین اینجا
و شروع کنیم به اضافه کردن یه‌سری استایل ظاهری بهش
مثلاً یک رنگ پس‌زمینه
و اینجا می‌تونستی هر رنگ قرمزی که خواستی استفاده کنی
هر رنگی که خواستی
مثلاً با استفاده از color picker ویژوال استودیو کد
که منم همین کارو کردم
و رنگی که انتخاب کردم این بود: ‎#EC2F2F
دقیقاً همین
خب بیایم الان همینو اضافه کنیم درسته؟
بعدش می‌ریم سراغ متن
پس بیایم متنش رو سفید کنیم مثل این
و براش سایز فونت ۱۲ پیکسل بدیم
و حروف رو uppercase کنیم
و همینطور بولدش کنیم
پس font-weight رو بذاریم روی bold
بیایم یه کمی padding بدیم
هفت پیکسل بالا پانزده پیکسل چپ و راست
و باز هم این اعداد خیلی مهم نیستن
ولی خیلی وقت‌ها ایده خوبیه
که padding افقی
تقریباً دو برابر padding عمودی باشه
پس این یه قاعده خوبه
که اغلب ظاهر خیلی خوبی می‌ده
و حالا قدم بعدی اینه که در واقع
ما می‌خواهیم این المان فقط فضایی رو اشغال کنه
که واقعا نیاز داره
پس برای این کار دو تکنیک وجود داره
البته در واقع فقط یکی
ولی می‌شه به یه روش دیگه هم تقریبا همین نتیجه رو گرفت
بهترین راه اینه که Display رو تنظیم کنیم
روی inline box
در واقع inline block
و حالا دقیقا مثل هر المان inline دیگه
باکس فقط فضای محتوای خودش رو اشغال می‌کنه باشه؟
پس این راه‌حل درستشه
ولی بیاید اینو کامنت کنیم تا یه روش دیگه نشون بدم
می‌تونستید حدس بزنید و یه عرض مشخص بدید
برای این المان اگر می‌خواستید
مثلا بگیم 100 پیکسل و بعد اون رو تنظیم کنیم
یا مثلا 80 پیکسل
یا شاید 50 پیکسل
یا حتی 40 تا
و وقتی تقریبا به اندازه‌ی درست نزدیک شدیم
می‌تونیم text-align رو بذاریم روی center
چون حالا واقعا فضای کافی وجود داره
دور متن
که متن داخل اون بتونه وسط‌چین بشه باشه؟
پس وقتی که عرض داریم
دیگه تو اون وضعیتی نیستیم
که وسط‌چین کردن متن بی‌معنی باشه
مثل همون چیزی که قبل‌تر با لینک‌ها داشتیم
یادتونه؟
فکر کنم دو جلسه قبل بود در هر صورت
این راه‌حل ترجیحی نیست
ولی کاریه که می‌شد انجام داد
برای همین جالب بود که اینو هم نشونتون بدم
و حالا وقتشه که واقعا
این المان رو به‌صورت absolute اینجا پوزیشن بدیم
پس یادتون باشه اولین کاری که باید بکنیم
برای absolute position کردن
اینه که مشخص کنیم نسبت به کدوم والد باید پوزیشن بشه
و روی اون والد position رو relative می‌ذاریم
پس توی این حالت باید خیلی ساده باشه درسته؟
اون فقط همین product هست
یعنی این article با کلاس product
و حالا اینجاست که باید position رو بذاریم
روی relative
و حالا می‌تونیم برگردیم اینجا و بگیم position absolute
و top و left رو روی صفر بذاریم برای شروع
خب
و حالا می‌تونیم تقریبا حدس بزنیم این کجا باید باشه
مثلا بگیم منفی 15 پیکسل
می‌تونه یه مقدار بیشتر باشه مثلا 17
آره
حالا تقریبا قشنگ وسط قرار گرفته
و بیایید 30 پیکسل هم به سمت چپ ببریمش
هنوز کامل وسط نشده
بگیم 35
خب بیایید بذاریمش روی 34
که دقیقا دو برابر top بشه
خب با این کار تقریبا این بخش تمومه
فقط چیزی که کم داریم اون فاصله‌ی اضافه‌ست
بین کاراکترها درسته؟
برای اینکه یه جلوه‌ی اضافه بدیم
و همینطور چون می‌خواستم تمرین کنید
مهارت سرچ‌کردنتون رو
پس چیزی که من سرچ می‌کردم این بود:
CSS add space between characters
یا می‌تونستید به جای characters بنویسید letters
ولی اینجا عملا سریع به نتیجه می‌رسید
پس letter-spacing ولی معمولا بیشتر علاقه دارم
به جواب‌های Stack Overflow یا مستندات MDN
اینجا داریم letter-spacing
که دقیقا چیزی هست که می‌خوایم
و اینجا مثل همیشه چندتا مثال داریم
و آره این همون پروپرتی‌ایه که استفاده می‌کنیم
پس دارم کپی‌ش می‌کنم
دارم کپی‌ش می‌کنم
بیایید اینو بذاریم همینجا نزدیک این استایل‌ها
و مقدارشو روی 2 پیکسل بذارم
آره این واقعا قشنگ‌تر شد
حالا فقط لازمه یکم بیشتر ببریمش
به اون سمت تا وسط‌چین بشه
خب همین بود
پس این بخش تموم شد
حالا سریع این رنگ‌ها رو هم اضافه کنیم
و همونطور که قبلا گفتم یه div درست می‌کنیم
یه کانتینر بدون هیچ معنای سمانتیکی
و داخلش شش تا div دیگه می‌سازم
و هرکدومشون یه background-color می‌گیره
پس باید دقیقا اینجا باشه بعد از لینک
درسته بعد از لینک و قبل از جزئیات محصول
پس یه div و اسمشو می‌ذارم colors
بیایید همون اول ببندیمش که یادمون نره
چون این ادیتور مثل VS Code خوب نیست
ولی برای همچین کاری استفاده از CodePen
هنوز خیلی مفیده
و حالا یه div دیگه اینجا می‌سازیم: Color
و در واقع این هیچ محتوایی نداره
خب
این کاریه که قبلا واقعا انجام نداده بودیم
پس بذارید توضیح بدم و نشونتون بدم چجوری انجام می‌دیم
می‌خوایم شش رنگ داشته باشیم
پس فقط همینو شش بار کپی-پیست می‌کنم
خب بیایید اینو همین‌جا در انتها قرار بدیم
دقیقاً مثل همون چیزی که توی HTML داشتیم
پس کلاس colors خیلی مهم نیست به نظرم
بیاییم شروع کنیم به تعریف هر کدوم از مربع‌ها
یعنی هر کدوم از این‌ها
در واقع ما اون‌ها رو مربع می‌کنیم
با دادن یک ارتفاع مشخص
و یک عرض هم‌اندازه با اون
بذارید اینو بهتون نشون بدم
اولین کاری که باید بکنیم اینه که
بهشون یه رنگ پس‌زمینه بدیم تا راحت‌تر دیده بشن
فکر می‌کنم اولین رنگ مشکی بود
خب
ولی الان قابل دیدن نیستن
چون هیچ محتوایی ندارن
اما اگه بهشون ارتفاع و عرض بدیم
اون‌وقت قابل مشاهده می‌شن
پس بیاییم این کارو بکنیم
ارتفاع: ۲۲ پیکسل
و حالا بلافاصله یه ارتفاع گرفتن
و بعد کل فضایی که می‌تونن رو اشغال کردن
چون به طور پیش‌فرض بلاک‌المنت هستن درسته؟
چون div هستن
و بنابراین به صورت پیش‌فرض بلاک‌المنت هستن
ولی اگه عرضشون رو هم همون مقدار مشخص کنیم
طوری که مثل مربع به نظر برسن
اون‌وقت دیگه این اتفاق نمیفته
خوبه
خب هنوز تا نتیجه نهایی خیلی فاصله داریم
ولی برای اینکه مؤثر ادامه بدیم
حالا بیاییم به هر کدوم یه رنگ متفاوت بدیم
خب چطور می‌تونیم این کارو بکنیم؟
من در واقع یه کلاس دیگه به هر کدوم اضافه می‌کنم
و این کاملاً امکان‌پذیره
یادتون باشه که می‌تونیم به هر عنصر
بیشتر از یه کلاس بدیم
قبلاً اینو بهتون نشون دادم
روش کار اینطوریه که یه فاصله می‌ذاریم
و بعد یکی دیگه هم اضافه می‌کنیم
اولی مشکی بود
بعد آبی قرمز زرد سبز و قهوه‌ای
خب
در واقع برای اولی نیازی به این کار نداریم
چون همه‌شون همین الان مشکی هستن
و بنابراین ما می‌تونیم اون رو در باقی
با رنگ جدید override کنیم
پس بیایید این یکی رو بذاریم color-blue
و حالا کپی‌پیستش می‌کنم چند بار دیگه
قرمز زرد سبز و قهوه‌ای
و حالا باید
طبیعتاً همه‌شون رو همین‌جا انتخاب کنیم
خب دوباره
می‌تونستید هر رنگ آبی دلخواهی رو انتخاب کنید
انتخاب من این یکی بود: ‎#2F6EE2
خب ببینیم
و واقعاً الان آبی شده
فقط چند بار اینو کپی می‌کنم
خوبه
قرمز زرد سبز و قهوه‌ای
نه اینجا بلکه اینجا
اینجا بذارید از همون رنگ قرمزی که قبلاً داشتم استفاده کنم
و بعد زرد بود ‎#F0BF1E
سبز ‎#90CC20 هست
و در نهایت قهوه‌ای ‎#885214
و آماده شد
حالا شش رنگ مختلفمون رو داریم
تنها کاری که مونده اینه که اون‌ها رو کنار هم بذاریم
خب چطور می‌تونیم این کارو بکنیم؟
یه ترفند خوب هست که قبلاً یاد گرفتیم
و اون تغییر دادن خاصیت display هست
برای این عناصر به inline-block
پس حالا همه این شش عنصر رو تنظیم می‌کنیم
یعنی همه عناصری که کلاس color دارن
روی inline-block
به این صورت
اون‌ها فقط فضایی که نیاز دارن رو اشغال می‌کنن
و دیگه بعدشون هم line break ایجاد نمی‌شه
و این دقیقاً همون چیزیه که می‌خوایم
خب نمی‌تونستیم از inline استفاده کنیم
چون اون‌وقت height و width درست عمل نمی‌کردن
طبق انتظار
یا حداقل نباید بکنن
و می‌بینید که واقعاً درست کار نمی‌کنه
پس باید inline-block باشه
چون یادتون باشه height و width روی inline
اعمال نمی‌شن
و حالا تنها چیزی که لازمه یه margin کوچیکه
در سمت راست هر کدوم مثلاً ۱۲ پیکسل
و خب آماده شد
شاید یه مقدار زیادی باشه
پس ۱۰ پیکسل و دیگه همین
همه کاری که باید بکنیم همینه
خب در واقع یه مقدار فاصله اینجا جا افتاده
بعد از این anchor
و یادتونه قبلاً
این مشکل رو هم داشتیم
پس تلاش کردیم یه فاصله بدیم
یعنی یه margin-bottom به این anchor ولی جواب نداد
و راه‌حلش این بود که اون فاصله رو جای دیگه اضافه کنیم
بالای این تیتر
یادتونه؟
برای همینه که اینجا این عنوان جزئیات margin-top داره
و اون موقع ما متوجه نمی‌شدیم
چرا اضافه کردن margin-bottom به این عنصر anchor کار نمی‌کرد
اما حالا واقعا می‌دونیم چرا
پس بیاید همین کار رو انجام بدیم
اینجا درست همینجاست
بیاید اینجا یه margin-bottom به اندازه 30 پیکسل اضافه کنیم
که همچنان کار نخواهد کرد
اما دوباره الان می‌دونیم چرا کار نمی‌کنه
و دلیلش اینه که
عنصر anchor یک عنصر inline هست
و روی عناصر inline
margin-top و margin-bottom اعمال نمی‌شن
پس برای رفع این مشکل
باز هم باید این رو به صورت inline-block نمایش بدیم
خیلی ساده‌ست
Display رو روی inline-block بذارید
و تمام
حالا اون 30 پیکسل رو به‌خوبی داریم
خب و فکر می‌کنم با این
راه‌حل ما دقیقا مثل دموی ما به نظر می‌رسه
پس الان کارمون تمومه
بله به نظر همینطوره
و خب در واقع این جمع‌بندی میشه
برای این بخش مقدمه‌ی CSS
پس یک بار دیگه
تبریک می‌گم برای رسیدن به اولین بخش این دوره
و حالا شما همه‌ی اصول اولیه‌ی HTML و CSS رو دارید
که برای شروع ساختن Layoutها بهشون نیاز دارید
که در واقع یکی از بخش‌های اصلی CSS هست
پس یه بخش کامل در این مورد منتظر شماست
و بنابراین وقتی که کار مرور
هر چیزی که اینجا انجام دادیم تموم شد
من شما رو هر موقع آماده باشید در بخش بعد میبینم