سه جا وجود داره
که می‌تونیم CSS بنویسیم
و ما بهشون می‌گیم CSS درون‌خطی CSS داخلی و CSS خارجی
پس حالا بیاید یاد بگیریم درباره‌ی
این سه نوع متفاوت CSS
و همینطور اینکه کدومش بهترینه
و توی این بخش و همینطور بخش بعدی
ما واقعاً روی همین پروژه ادامه می‌دیم
که توی بخش قبلی شروع به ساختنش کردیم
یعنی بخشی که درباره‌ی مقدمه‌ی HTML بود
و یادتون باشه که پروژه رو اینطوری رها کردیم
بعد از اون بخش قبلی
و حالا تا آخر این بخش اول CSS
این شکلی می‌شه
پس این کاملاً متفاوته درسته؟
پس ما اینجا کلی رنگ داریم
یه حاشیه‌ی رنگی هم بالای صفحه داریم
فونت هم کاملاً متفاوته
پس رنگ متن هم تغییر کرده
و همینطور اینجا چند رنگ پس‌زمینه‌ی قشنگ داریم
حتی این دکمه رو هم داریم که اینجا شناوره
سمت راست
پس آره کلی استایل ظاهری قراره اعمال بشه
روی صفحه در طول این بخش
و شما با ساخت این پروژه کلی CSS یاد می‌گیرید
باشه؟
حالا من دوست دارم برای هرکدوم از این بخش‌ها یه پوشه داشته باشم
پس حالا می‌رم روی دسکتاپم
و یه پوشه‌ی پروژه‌ی جدید برای این بخش می‌سازم
پس کاری که این بار می‌خوام بکنم اینه که
وارد این پوشه نمی‌شم
که کدی بود که از گیت‌هاب دانلود کردیم
اما به جای اون کاری که می‌کنم اینه که این پروژه رو کپی می‌کنم
از بخش قبلی
خب
و بعد اسمش رو می‌ذارم 03 و مبانی CSS
پس نقطه‌ی شروع این بخش
کد نهایی بخش قبلیه
امیدوارم منطقی باشه
اما اگه ترجیح می‌دید توی همون پوشه کار کنید
خب البته هیچ مشکلی نداره
پس شما می‌تونید دقیقاً همونجا کدنویسی رو ادامه بدید
توی همون فایل‌هایی که داشتیم روشون توی بخش قبل
کار میکردیم
من فقط اینطوری انجامش می‌دم که در نهایت
بتونم کل کدها رو مرتب‌شده بهتون بدم
باشه؟
پس الان این پنجره رو می‌بندم
و ما می‌تونیم مثلاً اینجا روی VS Code راست‌کلیک کنیم
و بگیم New Window و بعد از اینجا پوشه رو باز کنیم
پس روی دسکتاپ این همون پوشه‌ایه که تازه ساختم بازش کنید
و بعد مثل همیشه می‌برمش سمت چپ
حالا آره می‌تونیم اینو اینجا سمت دیگه بذاریم
اما بعداً به یه مقدار فضای بیشتر نیاز داریم
چون می‌بینید
که اینجا قبلاً یه مقداری فضا بود درسته؟
و بنابراین با این چینش که فقط سمت راست باشه
فضای کافی براش نیست
ولی فعلاً مهم نیست
حالا این یکی که قبلاً داشتیم
چون اون پنجره رو بستیم دیگه کار نمی‌کنه
پس اگه الان اینجا ریفرش کنم
گوگل کروم میگه که این سایت در دسترس نیست
پس می‌تونم اینو ببندم
و بعد دوباره اینجا روی Go Live کلیک کنم
توی این پنجره‌ی جدید باشه؟
پس توی این پروژه‌ی جدید که در واقع همونه
اما یه پوشه‌ی پروژه‌ی جدیده
و بنابراین برای VS Code مثل یه پروژه‌ی جدیده
پس اگه الان روی Go Live کلیک کنم باید دوباره اجرا بشه
و این همون حالتیه که پروژه رو رها کردیم
بعد از بخش قبلی
که نقطه‌ی شروع این بخش جدیده
عالیه
ولی حالا بیاید بالاخره با یه مقدار CSS شروع کنیم درسته؟
پس یادتون باشه سه روش برای نوشتن CSS وجود داشت
و اولی CSS درون‌خطی بود
پس بذارید با نشون دادن اینکه CSS درون‌خطی چطور کار می‌کنه شروع کنم
و CSS درون‌خطی در اصل یعنی نوشتن کد CSS
داخل همون عنصر
پس مثلاً بگیم می‌خواستیم این متن رو آبی کنیم
یعنی این h1
می‌تونستیم ویژگی style رو اینطوری تعریف کنیم
و بعد داخل این عنصر HTML
و داخل این فایل HTML
شروع می‌کردیم به نوشتن CSS خودمون
پس می‌تونیم بگیم color و بعد بذاریمش روی blue
اگه ذخیره‌اش کنم
می‌بینید که واقعاً آبی شد
پس این جواب داد درسته؟
اما استایل‌های درون‌خطی معمولاً هرگز نباید استفاده بشن باشه؟
من فقط دارم اینو بهتون نشون می‌دم
که اگه یه وقت
این رو توی یه کد دیگه دیدید
یا توی یه صفحه‌ی وب دیگه بدونید چیه
اما وقتی خودتون کدنویسی می‌کنید نباید ازش استفاده کنید
پس وقتی وب‌سایت یا صفحه‌ی خودتون رو می‌سازید
این کار رو نکنید
باشه؟
پس حالا بریم سراغ روش دوم نوشتن CSS باشه ✨ خیلی دقیق و خط‌به‌خط طبق اصول بدون تغییر توی تعداد خطوط یا تایم‌کد فقط ترجمه‌ی فارسی روان و شیوا: ________________________________________
که بهش می‌گیم CSS داخلی (Internal CSS)
پس با CSS داخلی اینجا میایم به بخش head
و بعد یک عنصر style تعریف می‌کنیم
یعنی style
و بعد می‌تونیم CSS خودمون رو دقیقاً همینجا
داخل این عنصر style بنویسیم
پس در اصل کل این صفحه HTML هست
اما هر چیزی که داخل این عنصر style باشه
و باید داخل head قرار بگیره CSS محسوب می‌شه
خب حالا بیاید چیزی خیلی شبیه
به چیزی که آخر ویدیوی قبلی نوشتیم بنویسیم
یادتون باشه که همیشه باید با یک انتخابگر شروع کنیم
چون توی این حالت ما دیگه کد رو
مستقیم روی عنصر h1 نمی‌نویسیم
پس CSS ما باید راهی داشته باشه که بفهمه
دقیقاً می‌خوایم چه عنصری رو استایل بدیم درسته؟
پس می‌تونیم اینطوری انتخابش کنیم
و بعد بلوک اعلان (declaration block) رو شروع می‌کنیم
و باز هم همون چیزیه که
آخر درس قبلی گفتیم
و حالا اینجا می‌تونیم یک استایل بنویسیم
یعنی یک اعلان که در واقع یک ویژگیه
که در این مورد ویژگی color هست
و بعد مقدار blue رو براش مشخص می‌کنیم
و اگه الان ذخیره و ریفرش کنیم
می‌بینید که دوباره این کد اینجا آبی شد
پس کل این متن الان آبی شد
عالیه
پس این خودش یک قدم خیلی بزرگ به جلوه
چون حالا استایل رو جدا کردیم
که همش این بالا بود از عنصر HTML واقعی
پس قبلاً که استایل رو همینجا داشتیم
CSS و HTML یه جورایی درهم‌تنیده بودن
و این هیچ‌وقت توی برنامه‌نویسی خوب نیست
و بنابراین ما می‌خوایم این چیزها رو جدا نگه داریم
به این کار همچنین می‌گیم جداسازی وظایف (separation of concerns)
و حالا استایل ما این بالا توی head قرار داره
و عناصر هم این پایین جدا هستن
اما اگه مقدار زیادی کد CSS داشته باشیم
اون هم خیلی عملی و کاربردی نیست
پس تصور کنید ۵۰۰ خط کد CSS داشته باشیم
که این اصلاً چیز عجیبی نیست
و توی اون حالت فایل HTML ما خیلی سنگین می‌شه
و حرکت کردن توی اون خیلی سخت می‌شه
و بنابراین می‌تونیم چیزها رو حتی بیشتر جدا کنیم
با گذاشتن کل کد CSS خودمون توی یک فایل CSS جدا
پس بیاید این کار رو بکنیم
خب اینجا دوباره روی new file کلیک می‌کنیم
و این فایل اینجا
هر اسمی میتونه داشته باشه
اما من دوست دارم اسمش رو stylecss بذارم
باشه؟
پس توی HTML صفحه‌ی اول معمولاً باید
همیشه indexhtml نام‌گذاری بشه
این واقعاً یک قرارداد هست
اما برای فایل CSS
می‌تونی هر اسمی که بخوای براش بذاری
ولی من دوباره ترجیح می‌دم اسمش رو stylecss بذارم
باشه؟
و حالا به این می‌گیم CSS خارجی (External CSS)
چون ما این بلوک اعلان یا در واقع این قانون رو
به یک فایل کاملاً جدا منتقل می‌کنیم
و بنابراین این CSS حالا خارج از HTML قرار داره
باشه؟
پس ما استایل‌مون رو اینجا داریم
و دیگه نیازی به استایل داخل اینجا نداریم
شاید متوجه شده باشی وقتی اینو ذخیره کردم
رنگ آبی در واقع از بین رفت
پس فکر می‌کنی چرا این اتفاق افتاده؟
چرا این متن دیگه آبی نیست
حتی با اینکه دقیقاً همون کدی رو اینجا داریم
که قبلاً داشتیم؟
خب دلیلش اینه که HTML در حال حاضر
هیچ راهی برای دونستن اینکه ما یک فایل CSS داریم نداره
یا به عبارت دیگه فایل HTML و فایل CSS
به طور خودکار به هم متصل نمی‌شن
پس کاری که باید بکنیم اینه که به فایل HTML بگیم
که یک فایل CSS وجود داره
که می‌خوایم برای استایل دادن به HTML ازش استفاده کنیم
پس اساساً باید این دوتا رو به هم لینک کنیم
و این کار رو دوباره اینجا توی head HTML انجام می‌دیم
چون دقیقاً همین‌جاست که همه‌ی اطلاعات
درباره‌ی صفحه قرار می‌گیره
و برای این کار از عنصر link استفاده می‌کنیم
پس این یک عنصر جدید دیگه‌ست
و عنصر link در واقع برای مبتدی‌ها
خیلی گیج‌کننده‌ست چون خیلی‌ها وقتی شروع می‌کنن
ممکنه فکر کنن که عنصر link
در واقع برای ساختن هایپرلینک‌هاست مثل اینجا
اما خب قطعاً اینطور نیست
همونطور که می‌دونی برای ساختن هایپرلینک‌ها
ما از تگ anchor استفاده می‌کنیم نه تگ link
پس عنصر link فقط و فقط یک کاربرد داره
اونم اتصال HTML به یک فایل CSS هست
اینجا دوباره ویژگی href رو مشخص می‌کنیم
و بعد اینجا باید مسیر فایل CSS رو بدیم
که توی این حالت فقط همون stylecss هست
بعد اینجا خوبه که ویژگی rel رو هم مشخص کنیم
و به HTML از قبل بگیم که این یک style sheet هست
و حالا وقتی دوباره اینو ذخیره کنم ببین چی می‌شه
خیلی عالی متنمون اینجا دوباره آبی شد
و حالا ما فایل CSS رو با موفقیت به وصل کردیم
به فایل HTMLمون
پس این دیگه شد CSS خارجی (External CSS)
و این همون چیزیه که ما
تا آخر این دوره ازش استفاده می‌کنیم
و همین رو هم بهت توصیه می‌کنم
هر وقت خواستی صفحات وب خودت رو بسازی انجام بدی
البته CSS داخلی (Internal CSS) هم گاهی کاربرد خودش رو داره
مخصوصاً وقتی می‌خوای یه چیز کوچیک و سریع بسازی
و می‌خوای همه‌چیز رو توی یه فایل انجام بدی
اون موقع کاملاً قابل قبوله که CSS داخلی بسازی
با استفاده از همین عنصر style یادت هست؟
دقیقاً مثل این
اما CSS درون‌خطی (Inline CSS)
که همون اول بهت نشون دادم
یعنی اضافه کردن استایل اینجا با استفاده از ویژگی style
معمولاً کار درستی نیست
و بنابراین ایده‌ی خوبی نیست که اون کار رو انجام بدی
خیلی خب
و حالا که این بخش سر جاشه
آماده‌ایم که یاد بگیریم
اولین چند ویژگی CSS برای استایل دادن به متن رو
و این دقیقاً موضوع جلسه‌ی بعدی ما خواهد بود