دوباره خوش اومدید
در این جلسه
یاد می‌گیریم چطور با رنگ‌ها در CSS کار کنیم
اما قبل از اینکه به سراغ CSS بریم
اول لازمه کمی یاد بگیریم
درباره‌ی تئوری اینکه چطور میشه رنگ‌ها رو با کدنویسی نمایش داد
خب روش‌های زیادی برای نمایش رنگ‌ها
در کامپیوتر و اساساً در کدنویسی وجود داره
اما یکی از مدل‌های سنتی‌تر مدل RGB هست
در مدل RGB هر رنگی رو میشه نمایش داد
با هر ترکیبی از رنگ‌های قرمز (Red) سبز (Green) و آبی (Blue)
این چیزی شبیه به این میشه
و شاید قبلاً همچین دیاگرامی رو
جایی مثل مدرسه یا جاهای دیگه دیده باشید
پس برای اینکه یک رنگ خاص رو نمایش بدیم
باید به هرکدوم
از سه رنگ پایه مقداری بین صفر تا 255 بدیم
و با این کار می‌تونیم در مجموع
حدود 168 میلیون رنگ مختلف تعریف کنیم
خب بیاید اینو با دیاگراممون یکم بهتر درک کنیم
و از رنگ قرمز خالص شروع کنیم
اینجا کانال قرمز روی مقدار کامل یا همون 255 هست
و دوتای دیگه روی صفر قرار دارن
پس دو رنگ پایه دیگه هیچ مقداری ندارن
یعنی هیچ سبزی وجود نداره و هیچ آبی هم وجود نداره
به همین خاطر این رنگ قرمز خالصه
پس دوباره کانال قرمز
روی حداکثر مقداره و بقیه روی صفرن
و همین موضوع برای سبز و آبی هم صادقه
برای رنگ آبی کانال آبی روی
حداکثر 255 هست و بقیه صفرن
و برای سبز هم همینطور
بعدی رنگ سفید هست و
در سفید هر سه رنگ روی حداکثر 255 قرار دارن
پس وقتی هر سه رنگ رو
روی حداکثر قرار بدیم سفید کامل ایجاد میشه
و در طرف مقابل طیف
وقتی همه رنگ‌ها روی صفر باشن
یک رنگ مشکی کامل داریم
در نهایت سه رنگ دیگه‌ای که اینجا داریم ترکیبی هستن
از دو رنگ دیگه‌ای که ازشون ساخته شدن
برای مثال این رنگ سرخابی (Magenta) اینجا
ترکیب قرمز و آبی در حداکثره و هیچ سبزی نداره
بعدی این رنگه که بهش میگن فیروزه‌ای یا Cyan
که در اون قرمز صفره و سبز و آبی روی حداکثرن
و در نهایت رنگ زرد آبی رو
روی صفر داره و قرمز و سبز روی 255 هستن
عالیه امیدوارم این توضیحات روشن باشه
و حالا که یک درک ابتدایی داریم
از اینکه مدل RGB چطور کار می‌کنه
بیاید ببینیم چطور میشه رنگ‌ها رو
در CSS تعریف و نمایش داد
خب در CSS دو روش وجود داره
برای نوشتن رنگ‌ها با مدل RGB
که یکی نوتیشن RGB هست
و دیگری نوتیشن هگزادسیمال
با استفاده از نوتیشن RGB
فقط از تابع RGB در CSS استفاده می‌کنیم
و بعد مقادیر رو مشخص می‌کنیم
برای هر سه کانال رنگی: قرمز سبز و آبی
برای مثال اگر سبز و آبی رو
روی مقدار حداکثر بذاریم این رنگ فیروزه‌ای رو می‌گیریم
همونطور که در اسلاید قبلی دیدیم
یک مثال دیگه که به دنیای واقعی نزدیک‌تره
رنگ نارنجیه که اینجاست
اینجا اعداد
برای هر کانال یک مقدار به ظاهر تصادفی دارن
و اینطوریه که یک رنگ واقعی رو با CSS
و با نوتیشن RGB می‌سازیم
علاوه بر تابع RGB معمولی چیزی به اسم RGB
با شفافیت هم داریم که شفافیت بهش Alpha میگن
به همین خاطر اسم این تابع RGBA هست
اینجا می‌تونیم یک مقدار چهارم مشخص کنیم
که در این مثال 03 هست
و این باعث میشه که رنگمون شفافیت داشته باشه
همونطور که اینجا می‌بینیم
در مثال دیگه
اگر برای مثال مقدار آلفا رو 07 تعریف کنیم
می‌بینیم که این رنگ شفافه
و وقتی روی یک رنگ دیگه
مثل این مربع سبز قرارش بدیم مشخص میشه
البته ما لازم نیست خودمون دستی
این اعداد رو برای رنگ‌ها حدس بزنیم
لازم نیست مثلاً دستی 24417963 رو بنویسیم
تا این رنگ نارنجی به دست بیاد
معمولاً یک رنگ مشخص رو از جایی کپی می‌کنیم
یا با ابزار Color Picker در VS Code می‌سازیم
و این ابزار به طور خودکار این اعداد رو بهمون میده
اما دونستن این موضوع مهمه
که بدونید این اعداد دقیقاً چی معنی میدن
خب بریم جلوتر
حالا بیاید درباره نوتیشن هگزادسیمال صحبت کنیم
که در CSS بیشتر استفاده میشه
اینجا در نوتیشن هگزادسیمال
به جای مقیاس صفر تا 255 از صفر تا ff استفاده می‌کنیم
که ff معادل همون 255 هست
اما در مقیاس هگزادسیمال
و لازم نیست وارد جزئیات معنیش بشیم
اما در کل اعداد هگزادسیمال به جای اینکه از صفر تا 9 برن
از صفر تا 15 میرن
پس اینجا ۱۶ عدد مختلف وجود داره و نه فقط ۱۰
و آخرین اون‌ها f هست
به همین دلیل ff اینجا به معنی ۲۵۵ هست
خب حالا وقتی اینو به CSS ترجمه کنیم
یادداشت هگزادسیمال رو اینطوری می‌نویسیم با هَش (♪)
بعد مقدار قرمز سبز و آبی رو می‌نویسیم
دقیقاً مثل همینی که اینجا روی صفحه دارم
و این همون مقدار رو به ما می‌ده
که با روش RGB به دست میاد
و همین کار رو می‌شه انجام داد
با این مثال رنگ نارنجی که پایین دارم
می‌تونیم اینو به شکل f4 b3 3f نمایش بدیم
باز هم ممکنه تصادفی به نظر برسه برای همین
معمولاً اینو مستقیم از color picker در VS Code کپی می‌کنیم
خب در نوشتار هگزادسیمال
یه چیزی هم هست به اسم shorthand (کوتاه‌نویسی)
که وقتی همه رنگ‌ها جفت‌های یکسان باشن می‌تونیم استفاده کنیم
مثل رنگ فیروزه‌ای که اینجا داریم
که شامل دو تا صفر دو تا f و دوباره دو تا f هست
پس می‌تونیم خلاصه‌اش کنیم
و به صورت 0ff بنویسیم
خیلی خب
و حالا کمی در مورد اینکه در عمل چطوری کار می‌کنیم
توی دنیای واقعی
در عمل ما بیشتر از یادداشت هگزادسیمال استفاده می‌کنیم
و اگر نیاز به شفافیت باشه
از تابع RGBA استفاده می‌کنیم
همون‌طور که اینجا در سمت چپ با مقدار آلفا می‌بینید
در نهایت یه نکته درباره خاکستری‌ها که یه نوع خاص
از رنگ هستن و همیشه توی CSS به کارمون میان
در مدل RGB وقتی مقدار سه کانال (قرمز سبز و آبی)
کاملاً برابر باشه
خروجی یه رنگ خاکستری می‌شه
پس در دو انتهای طیف
وقتی همه مقادیر صفر باشن سیاه مطلق می‌شه
و وقتی همه مقدارها حداکثر باشن
یعنی ۲۵۵ یا ff رنگ سفید می‌شه
ولی طبیعتاً کلی خاکستری دیگه هم هست
که بین این دو قرار می‌گیرن و می‌تونیم استفاده کنیم
و دقیق‌تر بگم
دقیقاً ۲۵۶ رنگ خاکستری خالص برای انتخاب داریم
یکی‌شون همین مثالیه که اینجاست
یعنی وقتی مقدار قرمز سبز و آبی هر سه روی ۶۹ باشن
این بهمون یه رنگ خاکستری قشنگ می‌ده که
کد هگزادسیمالش 444444 هست
که در کوتاه‌نویسی می‌شه فقط 444
من معمولاً اینو زیاد برای رنگ متن استفاده می‌کنم
و خب بذارید یه مثال دیگه هم ببینیم
این یکی همه مقدارهاش روی ۱۸۳ هست
و می‌شه به شکل b7b7b7 نشونش داد
یعنی در یادداشت هگزادسیمال همون‌طور که می‌بینید
سه جفت مقدار دقیقاً مثل هم هستن
و این نشونه‌ایه که نشون می‌ده واقعاً خاکستری داریم
خیلی خب حالا که یه مقدار یاد گرفتیم
درباره تئوری رنگ‌ها
بیایم بریم سراغ این که
چطور توی کدنویسی CSS
واقعاً از رنگ‌ها استفاده کنیم
پس سریع بریم چند تا ویژگی CSS یاد بگیریم
که واقعاً می‌شه باهاشون از رنگ استفاده کرد
و ساده‌ترین ویژگی CSS که نیاز به مقدار رنگ داره
ویژگی color هست
که البته قبلاً هم ازش استفاده کرده بودیم
خب فرض کنید
می‌خوایم این H1 اینجا یه رنگ دیگه داشته باشه
پس می‌نویسیم color
و بعد یه رنگ آبی مشخص می‌کنم
۱۰۹۸ و ad
و این بهمون یه رنگ آبی خوشگل می‌ده
خب همون‌طور که یاد گرفتیم
اینجا ۱۰ یا ۰a در کانال قرمز داریم
۹۸ در کانال سبز و ad در کانال آبی
همون‌طور که قبلاً هم گفتم
معمولاً از color picker در VS Code استفاده می‌کنیم
که با رفتن ماوس روی یه رنگ باز می‌شه
و از اونجا می‌تونیم
هر رنگی که بخوایم انتخاب کنیم
مثلاً اینجا رنگ رو تغییر بدیم به یه چیزی دیگه
مثل این طیف خاکستری
و اونجا می‌تونیم دقیق مشخص کنیم که چه‌قدر تیره باشه
همچنین اگه بالا کلیک کنیم
روی همین مقدار حالت نوشتار تغییر می‌کنه
و الان داریم hsl رو می‌بینیم
که البته دربارش صحبت نکردیم
ولی اگه دوباره کلیک کنیم rgb می‌شه
و این دقیقاً همون رنگ قبلیه
فقط این بار با تابع RGB
خب بذارید ذخیره کنم
و حالا می‌بینید
که اینجا یه رنگ سبز داریم
اگه دوباره ماوس رو ببریم روش color picker باز می‌شه
و اینجا در واقع یه اسلایدر هست
برای مقدار آلفا
اگه اینو بکشیم پایین
می‌بینید که به صورت خودکار به RGBA تغییر می‌کنه
و اینجا می‌تونیم همون‌طور که گفتم
مقدار آلفا رو تعریف کنیم
در واقع همین الان هم ذخیره شده
و می‌بینید 20000:11:25,198... > 00:11:29,280:
و اگر حتی اون رو نزدیک صفر قرار بدیم
اون‌وقت تقریباً کاملاً محو می‌شه
درسته؟
خب اینطوری با انتخاب‌گر رنگ کار می‌کنیم
ولی حالا بیایم واقعاً برگردیم به رنگی که داشتیم
یعنی 1098ad
درسته؟
در واقع یه نکته‌ی جالب دیگه هم می‌خواستم نشونت بدم
پس اگه فقط انتخاب‌گر رنگ رو بخوای
می‌تونی اول هر رنگی رو مشخص کنی مثلاً
سفید با استفاده از fff و بعد فقط روی رنگ هاور کنی
و بعد به انتخاب‌گر رنگ می‌رسی
درسته؟
پس اگه بخوای مثلاً این صورتی رو
می‌تونی اینجا انتخابش کنی شاید با یه کم آلفا
و همین شد
و حالا این رنگ صورتی اعمال شد
چون وقتی دو تعریف مشابه داشته باشیم
ساده‌ترین کار اینه که آخرین رو استفاده می‌کنه
ولی در موردش بعداً بیشتر توضیح می‌دیم
پس بیایم اون رو حذف کنیم
و حالا ما در واقع می‌خوایم H2
و H3 هم دقیقاً همین رنگ رو داشته باشن
یعنی این یکی و این یکی
پس باید چیکار کنیم؟
آیا باید فقط این ویژگی رو کپی کنیم اینجا؟
یعنی این تعریف رو و بعد اینجا و اینجا پیست کنیم؟
خب نه واقعاً درسته؟
چون اون‌وقت دقیقاً همون کد رو خواهیم داشت
توی چند جای مختلف
و این هیچ‌وقت ایده‌ی خوبی نیست
چون فرض کن بعدش بخوایم رنگ رو تغییر بدیم
مثلاً به نارنجی
اون‌وقت باید بریم توی هر سه
تعریف رنگ و اونجا تغییرش بدیم
یعنی دونه‌دونه تغییر بدیم
و خب این چیزی نیست که بخوایم
پس به جاش می‌تونیم یه لیست تعریف کنیم
از سلکتورها درست مثل همینجا ولی حالا فقط
با اونایی که می‌خوایم رنگ آبی بهشون اعمال بشه
یعنی H1 H2 H3
و حالا بیایم اون رو برداریم
و اینجا پیست کنیم سیوش کنیم
و همین شد
پس حالا H1 H2 و H3 این رنگ آبی رو دارن
و همونطور که احتمالاً دوباره متوجه شدی
ما حالا یه سلکتور دیگه هم داریم که داره اعمال می‌شه
روی H1
پس این یکی رو داریم و این یکی و این یکی
و در واقع همه‌ی استایل‌ها
از همه‌ی اون‌ها الان روی این المنت اعمال می‌شن
قدم بعد بیایم یه رنگ هم برای بقیه‌ی متن تعریف کنیم
پس الان بقیه‌ی متن کاملاً مشکیه
ولی بیایم از اون رنگ خاکستری استفاده کنیم
که توی یکی از اسلایدها نشونت دادم
و در واقع بیایم همینجا انجامش بدیم
پس می‌خوایم این متن اعمال بشه
روی همه‌چیز عملاً حتی اینجا هم
و رنگ بعداً بازنویسی می‌شه
و دوباره یاد می‌گیریم چرا
و چطور این کار توی یه جلسه‌ی جدا کار می‌کنه
پس یادت باشه برای یه رنگ خاکستری
باید توی هر سه کانال مقدار یکسان داشته باشه
پس بگیم 444444 به این شکل
و اگه اون شکل خلاصه رو یادت باشه
اون‌وقت می‌تونیم حتی بیشتر خلاصه‌ش کنیم
چون هر جفت مقدار یکیه
همیشه فقط 44 هست
و پس می‌تونیم حتی کوتاه‌ترش کنیم اینطوری
سیوش کنیم
و حالا واقعاً همه‌ی این متن اینجا همون رنگ خاکستریه
به جز H1 2 و 3
که اینجا کمی بعدتر بازنویسی شدن
عالی
خب حالا بیایم صحبت کنیم
درباره‌ی یه ویژگی دیگه‌ی CSS که می‌تونه یه مقدار رنگ بگیره
و اون ویژگی background-color هست
پس حالا بیایم به هدر اصلی صفحه‌مون یه رنگ خاکستری ملایم
به‌عنوان پس‌زمینه بدیم تا یه کم متمایز بشه
از بقیه‌ی محتوا
خب چطوری می‌تونیم این کار رو بکنیم؟
بیایم بریم پایین اینجا
و اولین چیزی که به ذهن می‌رسه
اینه که فقط هدر رو اینطوری انتخاب کنیم درسته؟
و اینجا اون ویژگی جدید هست به اسم background-color
و اینجا بیایم از یه رنگ خاکستری دیگه استفاده کنیم
که هست F7 F7 F7
پس دوباره می‌بینی که رنگ‌ها توی هر سه رنگ
یعنی سه کانال اصلی RGB دقیقاً یکی هستن
و راستی اینجا توی انتخاب‌گر رنگ
فرقی نداره توی چه رنگی باشی
اینجا توی این اسلایدر رنگ در سمت چپ
همیشه یه طیف خاکستری هست
پس اگه از بالا شروع کنی
اون سفیدی رو می‌بینی که توی اسلاید نشونت دادم
و در پایین‌ترین قسمت به مشکی می‌رسی
خب؟ پس همیشه می‌تونی یه رنگ خاکستری بگیری
اگه این اسلایدر رو اینجا حرکت بدی
در انتهای سمت چپ اینجا
ولی حالا بیایم بریم سراغ F7 F7
که یه رنگه که خوبه حفظش کنید و خوبه ازش استفاده کنید
پس یه خاکستری خیلی ملایم شاید اینجا حتی نتونید ببینیدش
ولی امیدوارم روی صفحه‌نمایش خودتون ببینیدش
حالا مشکل اینجاست
که نه تنها هدر صفحه ما اون رنگ خاکستری رو گرفت
بلکه این هدر دیگه هم گرفت
شاید تونسته باشید اینو پیش‌بینی کنید
پس راه‌حل اینه که به این هدر یه اسم بدیم
و بعد فقط همین هدر رو استایل بدیم
خب فقط همین یه هدره که می‌خوایم استایل بدیم
پس می‌تونستیم اینجا از ID استفاده کنیم اما با توجه به چیزی که
توی جلسه قبل توضیح دادم این کار رو نمی‌کنیم
و به‌سادگی از یه کلاس استفاده می‌کنیم
بیایم اسمشو بذاریم main header
بذارید کپی‌اش کنم
و این هدر رو با کلاس main header جایگزین کنم
و واقعاً الان فقط همین یکی این رنگ خاکستری رو گرفت
بیایم فقط این متن تست رو حذف کنیم
و تمام
عالی و اگه واقعاً نمی‌تونید این رنگ پس‌زمینه رو ببینید
فقط از color picker استفاده کنید
و یه طیف دیگه از خاکستری رو انتخاب کنید
خب این ویدیو الان خیلی طولانی شده
ولی بذارید هنوزم درباره یه ویژگی دیگه صحبت کنیم
که مربوط به border هاست
پس چیزی که می‌خوام بعدش انجام بدم اینه که یه بوردر
به این پست‌های مرتبط اضافه کنم
یعنی عملاً باعث بشه الان یه چیزی شبیه این بشن
خب داریم
در بالا و پایین اینجا این بوردر آبی رو
خب این اصلاً کار سختی نیست
پس فقط بیایم ببینیم المنت اینجا چیه
و این المنت aside هست
پس بذارید فقط همینو انتخاب کنیم
با استفاده از selector المنت
خب selector المنت یعنی وقتی فقط اسم
اون المنت رو برای انتخابش استفاده می‌کنیم
باشه؟ پس اینجا selector کلاس با نقطه هست
این selector آی‌دی با هش هست
و وقتی فقط اسم المنت رو می‌نویسیم
بهش می‌گیم selector المنت
حالا شروع کنیم
با دادن همون رنگ پس‌زمینه
پس background-color
و بعد از همون رنگی که قبلاً استفاده کردیم استفاده می‌کنیم
و VS Code واقعاً اینجا خیلی کمک می‌کنه
چون فایل CSS رو اسکن می‌کنه
برای مقادیری که قبلاً استفاده کردیم
تا خیلی راحت دوباره همونا رو استفاده کنیم
و اینجا حالا بیایم درباره border صحبت کنیم
پس border
و حالا این ویژگی در واقع یه ویژگی خاصه
چون چندتا مقدار مختلف قبول می‌کنه
پس بیایم عرض border رو روی پنج پیکسل بذاریم
استایل border رو بذاریم solid
و بعد رنگ border رو بذاریم همون رنگی
که قبلاً استفاده کردیم
یعنی همین آبیه باشه؟
بذارید فقط ذخیره‌اش کنم
و بعد یه کم بیشتر توضیح می‌دم
که چرا اینطوری کار می‌کنه
و واقعاً اینجا بوردر آبی ما هست
خیلی قشنگه
پس برگردیم اینجا به ویژگی border
این در واقع یه نوع ویژگی خاصه
بهش می‌گیم ویژگی shorthand
چون می‌تونیم فقط با یه ویژگی
سه ویژگی مختلف رو تعریف کنیم
پس می‌تونستیم جداگانه border-width
border-style و border-color رو استایل بدیم
ولی معمولاً همه رو یه‌جا انجام می‌دیم
و همه‌چیزو همزمان تعریف می‌کنیم
حالا اینجا می‌تونید کلی کلمه کلیدی مختلف تعریف کنید
مثلاً dotted همیشه یه گزینه‌ست
پس این چیزی شبیه این میشه
می‌تونید dashed هم استفاده کنید
که اینطوری دیده میشه
ولی معمولاً من هیچ‌وقت از اونا استفاده نمی‌کنم
من همیشه میرم سراغ solid
باشه؟ پس این بهمون کل border رو میده
دور کل المنت
اما ما فقط می‌خوایم border بالا و پایین باشه
پس به جای اینکه border رو اینطوری تعریف کنیم
یه سری حالت‌های خاص از این ویژگی وجود دارن
مثلاً می‌تونیم بگیم border-top
و این همونطور که انتظار دارید
فقط بوردر بالای المنت رو استایل می‌ده
پس دقیقاً اینطوری باشه؟
بعد بیایم همه اینو انتخاب کنیم و اینجا پیست کنیم
چون می‌خوایم بوردر پایین هم داشته باشیم
پس خیلی راحت border-bottom
ذخیره‌اش کنید و تمام
و فقط برای کامل بودن مطلب
می‌تونیم border-left و border-right هم بگیم
و اون وقت دوباره برمی‌گردیم به حالت اول
که بوردر رو در هر چهار طرف داریم
و خب مشخصه که این منطقی نیست
پس فقط از همون ویژگی border استفاده می‌کنیم
اینا رو که اصلاً نمی‌خوایم
و پس دوباره به همین نتیجه برمی‌گردیم
که یه رنگه که خوبه حفظش کنید و خوبه ازش استفاده کنید
پس یه خاکستری خیلی ملایم شاید اینجا حتی نتونید ببینیدش
ولی امیدوارم روی صفحه‌نمایش خودتون ببینیدش
حالا مشکل اینجاست
که نه تنها هدر صفحه ما اون رنگ خاکستری رو گرفت
بلکه این هدر دیگه هم گرفت
شاید تونسته باشید اینو پیش‌بینی کنید
پس راه‌حل اینه که به این هدر یه اسم بدیم
و بعد فقط همین هدر رو استایل بدیم
خب فقط همین یه هدره که می‌خوایم استایل بدیم
پس می‌تونستیم اینجا از ID استفاده کنیم اما با توجه به چیزی که
توی جلسه قبل توضیح دادم این کار رو نمی‌کنیم
و به‌سادگی از یه کلاس استفاده می‌کنیم
بیایم اسمشو بذاریم main header
بذارید کپی‌اش کنم
و این هدر رو با کلاس main header جایگزین کنم
و واقعاً الان فقط همین یکی این رنگ خاکستری رو گرفت
بیایم فقط این متن تست رو حذف کنیم
و تمام
عالی و اگه واقعاً نمی‌تونید این رنگ پس‌زمینه رو ببینید
فقط از color picker استفاده کنید
و یه طیف دیگه از خاکستری رو انتخاب کنید
خب این ویدیو الان خیلی طولانی شده
ولی بذارید هنوزم درباره یه ویژگی دیگه صحبت کنیم
که مربوط به border هاست
پس چیزی که می‌خوام بعدش انجام بدم اینه که یه بوردر
به این پست‌های مرتبط اضافه کنم
یعنی عملاً باعث بشه الان یه چیزی شبیه این بشن
خب داریم
در بالا و پایین اینجا این بوردر آبی رو
خب این اصلاً کار سختی نیست
پس فقط بیایم ببینیم المنت اینجا چیه
و این المنت aside هست
پس بذارید فقط همینو انتخاب کنیم
با استفاده از selector المنت
خب selector المنت یعنی وقتی فقط اسم
اون المنت رو برای انتخابش استفاده می‌کنیم
باشه؟ پس اینجا selector کلاس با نقطه هست
این selector آی‌دی با هش هست
و وقتی فقط اسم المنت رو می‌نویسیم
بهش می‌گیم selector المنت
حالا شروع کنیم
با دادن همون رنگ پس‌زمینه
پس background-color
و بعد از همون رنگی که قبلاً استفاده کردیم استفاده می‌کنیم
و VS Code واقعاً اینجا خیلی کمک می‌کنه
چون فایل CSS رو اسکن می‌کنه
برای مقادیری که قبلاً استفاده کردیم
تا خیلی راحت دوباره همونا رو استفاده کنیم
و اینجا حالا بیایم درباره border صحبت کنیم
پس border
و حالا این ویژگی در واقع یه ویژگی خاصه
چون چندتا مقدار مختلف قبول می‌کنه
پس بیایم عرض border رو روی پنج پیکسل بذاریم
استایل border رو بذاریم solid
و بعد رنگ border رو بذاریم همون رنگی
که قبلاً استفاده کردیم
یعنی همین آبیه باشه؟
بذارید فقط ذخیره‌اش کنم
و بعد یه کم بیشتر توضیح می‌دم
که چرا اینطوری کار می‌کنه
و واقعاً اینجا بوردر آبی ما هست
خیلی قشنگه
پس برگردیم اینجا به ویژگی border
این در واقع یه نوع ویژگی خاصه
بهش می‌گیم ویژگی shorthand
چون می‌تونیم فقط با یه ویژگی
سه ویژگی مختلف رو تعریف کنیم
پس می‌تونستیم جداگانه border-width
border-style و border-color رو استایل بدیم
ولی معمولاً همه رو یه‌جا انجام می‌دیم
و همه‌چیزو همزمان تعریف می‌کنیم
حالا اینجا می‌تونید کلی کلمه کلیدی مختلف تعریف کنید
مثلاً dotted همیشه یه گزینه‌ست
پس این چیزی شبیه این میشه
می‌تونید dashed هم استفاده کنید
که اینطوری دیده میشه
ولی معمولاً من هیچ‌وقت از اونا استفاده نمی‌کنم
من همیشه میرم سراغ solid
باشه؟ پس این بهمون کل border رو میده
دور کل المنت
اما ما فقط می‌خوایم border بالا و پایین باشه
پس به جای اینکه border رو اینطوری تعریف کنیم
یه سری حالت‌های خاص از این ویژگی وجود دارن
مثلاً می‌تونیم بگیم border-top
و این همونطور که انتظار دارید
فقط بوردر بالای المنت رو استایل می‌ده
پس دقیقاً اینطوری باشه؟
بعد بیایم همه اینو انتخاب کنیم و اینجا پیست کنیم
چون می‌خوایم بوردر پایین هم داشته باشیم
پس خیلی راحت border-bottom
ذخیره‌اش کنید و تمام
و فقط برای کامل بودن مطلب
می‌تونیم border-left و border-right هم بگیم
و اون وقت دوباره برمی‌گردیم به حالت اول
که بوردر رو در هر چهار طرف داریم
و خب مشخصه که این منطقی نیست
پس فقط از همون ویژگی border استفاده می‌کنیم
اینا رو که اصلاً نمی‌خوایم
و پس دوباره به همین نتیجه برمی‌گردیم
خوبه؟
و این هم روش کار کردن با رنگ‌ها در CSS هست
حالا فقط سریع اشاره کنم که ما می‌تونیم
از این نام‌های رنگ از پیش تعریف‌شده هم استفاده کنیم
همونطور که در ابتدای کار با رنگ آبی انجام دادیم
پس سریع نشونت میدم
فرض کن می‌خواستیم یک رنگ پس‌زمینه تنظیم کنیم
برای کل صفحه‌ی وب
این هم ممکنه فقط کافیه یک استایل به body اضافه کنیم
به تگ body
پس می‌تونیم به این شکل background-color رو تنظیم کنیم
و اینجا می‌تونیم یکی از این نام‌ها رو مشخص کنیم
اگر ذخیره کنم اون‌وقت همه‌چیز این
رنگ آبی زیبا رو به عنوان پس‌زمینه می‌گیره
به جز البته
اون المنت‌هایی که مشخصاً
براشون رنگ پس‌زمینه‌ی دیگه‌ای تعیین کرده بودیم
یا می‌تونیم چیز دیگه‌ای استفاده کنیم
معمولاً اگر شروع کنی به نوشتن نام یک رنگ
اینجا کلی پیشنهاد از VS Code دریافت می‌کنی
و بعد می‌تونی یکی از اون‌ها رو مثل این انتخاب کنی
اوکی؟ ولی خب ما اینو نمی‌خوایم
پس بذار فقط این کد رو کامنت کنیم با زدن Command
یا Control + Slash و برمی‌گردیم به حالت عادی
اوکی؟ و حالا فقط برای جمع‌بندی این مطالب
یه مقدار پیشنهاد می‌کنم که خودت امتحان کنی
با این سه خاصیتی که همین الان یاد گرفتیم
مثلاً با اضافه کردن چندتا border به المنت‌های بیشتر
مثل تیترها یا لیست‌ها
و همینطور تغییر دادن رنگ متن‌های دیگه
و مخصوصاً خیلی مهمه که یه مقدار هم خودت کار کنی
با color picker و باهاش بازی کنی
پس فقط ۱۰ یا ۱۵ دقیقه وقت بذار برای این کار
و بعد توی ویدیوی بعدی می‌بینمت