در این جلسه
ما درباره‌ی شش ویژگی برای استایل دادن به متن با CSS یاد می‌گیریم
و بیاید خیلی سریع مرور کنیم که جلسه‌ی قبل چه کار کردیم
ما داریم CSS خارجی (external) رو توی این فایل CSS می‌نویسیم
و فایل CSS همیشه از چندین قانون CSS تشکیل شده
الان ما فقط یک قانون CSS داریم
اما خب الان شروع می‌کنیم به اضافه کردن قوانین بیشتر
هر قانون CSS همیشه با یک انتخاب‌گر (selector) شروع میشه
که توی این مثال
ما عنصر h1 رو انتخاب کردیم
ولی اگه چندتا h1 داشتیم
اون انتخاب‌گر همه‌ی اون‌ها رو انتخاب می‌کرد
بعد این بلوک اعلان (declaration block) رو داریم
که داخلش می‌تونیم یک یا چند اعلان مثل این بنویسیم
مثل همین یکی
و هر اعلان شامل نام ویژگی هست اینجا
ویژگی color هست و بعد مقداری که
براش مشخص می‌کنیم
که توی این مثال این کلمه‌ی کلیدی blue هست
باشه؟
و حالا شروع می‌کنیم به اضافه کردن چند ویژگی دیگه
اینجا و اولین چیزی که می‌خوام استفاده کنم font-size هست
اینجا می‌تونیم در واقع اندازه‌ی متن رو مشخص کنیم
و هر ویژگی می‌تونه انواع مختلفی از مقادیر رو بگیره
مثل طول یا کلمات کلیدی
مثلاً اینجا برای color
مقدارمون یک کلمه‌ی کلیدی بود
اما اینجا برای font-size
ما در واقع نیاز به طول داریم
یعنی اندازه‌ی واقعی متن در این حالت
ما می‌تونیم طول رو با واحدهای مختلفی توی CSS مشخص کنیم
ولی فعلاً نگران اون نباشید
پس فعلاً ساده‌ترینش رو استفاده می‌کنیم
که همون پیکسل روی صفحه‌تونه
مثلاً می‌تونیم اندازه‌ی فونت رو روی
۲۶ پیکسل بذاریم
بعد اینجا یک ; اضافه کنیم
و حالا متن روی صفحه دقیقاً
۲۶ پیکسل روی صفحه‌ی فیزیکی شما خواهد بود
اگه الان این رو ذخیره کنم
می‌بینید که متن اینجا کوچیک‌تر شد
و فقط یادتون باشه اگه روی کامپیوتر شما تغییر نکرد
و شما به درستی به live server
متصل هستید (اینجا پایین نشون داده میشه)
فقط کافیه صفحه رو دستی یک بار
اینجا رفرش کنید
و بعد وقتی کدتون درست به‌روزرسانی بشه
صفحه‌تون به‌طور خودکار رفرش خواهد شد
خب حالا شروع کنیم به اضافه کردن ویژگی بعدی
که font-family هست
و اینجا می‌تونید در واقع
فونت متن رو مشخص کنید
پس درست مثل وقتی که توی یک فایل Word
یا Google Docs فونت انتخاب می‌کنید
همین کار رو توی CSS هم می‌تونید انجام بدید
اما تفاوتش توی CSS اینه
که شما نمی‌تونید فقط فونتی رو که روی
کامپیوتر خودتون نصب کردید استفاده کنید
چون اون موقع برای بقیه‌ی کاربرای سایت شما
کار نخواهد کرد
مگر اینکه اون‌ها هم اون فونت رو روی
کامپیوتر خودشون نصب داشته باشن
درسته؟
پس براش یک راه‌حل وجود داره که بعداً توضیح می‌دم
اما فعلاً ما یک فونت واقعی
مشخص نمی‌کنیم
بلکه به‌جاش از یک کلمه‌ی کلیدی استفاده می‌کنیم
تا به مرورگر بگیم از هر فونتی که
sans-serif باشه استفاده کن
و اینکه sans-serif یعنی چی رو
یه کم جلوتر توی بخش طراحی توضیح می‌دم
خب اگه الان ذخیره کنم
می‌بینید که فونت اینجا کامل تغییر کرد
درسته؟
الان ظاهرش تمیزتر شده
ولی چیزی که مهمه اینه که حالا وقتی صفحه رو آپدیت می‌کنیم
فونت این تیتر
خیلی متفاوت به نظر میاد
درسته؟
پس دیگه اون خطوط کوچیک (serifs)
که آخر حروف بودن رو نداره
و دوباره توی بخش طراحی بعداً یاد می‌گیریم
چطور فونت‌های خاص رو برای صفحاتمون مشخص کنیم
خب حالا بیایید ویژگی بعدی متن رو ببینیم
که text-transform هست
با text-transform
ما می‌تونیم متن رو به حروف بزرگ (uppercase) تبدیل کنیم
می‌بینید که دوباره VS Code اینجا
خیلی پیشنهاد به ما میده
و پرکاربردترینش همین uppercase هست
پس
Uppercase
باشه؟
خب الان متنمون به حروف بزرگ تبدیل میشه
این یکی از پرکاربردترین مقادیر این ویژگیه
و می‌بینید که مرورگر لیست زیادی از مقادیر رو به ما نشون میده
ولی در حال حاضر uppercase رو استفاده می‌کنیم
درسته؟
خب
Uppercase
مثل این و نتیجه دقیقاً همون چیزی میشه که انتظار داری
پس کل متن به‌سادگی به حروف بزرگ تبدیل میشه
این یکی ساده بود
و حالا بریم سراغ یکی دیگه که اسمش هست
font
style
و اینجا دوباره این گزینه‌ها رو می‌بینی
و پرکاربردترینش اینه که متن رو
به حالت ایتالیک تبدیل کنی
بریم امتحانش کنیم
و دقیقاً همین اتفاق افتاد
پس متن طبق انتظار به ایتالیک تبدیل شد
عالیه!
پس تا الان چهار ویژگی رو پوشش دادیم
و چندتا از مقادیر ممکنشون رو دیدیم
پس داریم خوب پیش می‌ریم
و همونطور که قبلاً هم گفتم
لازم نیست الان این ویژگی‌ها رو
حفظ کنی
به مرور زمان و با استفاده بیشتر
خودت بهشون عادت می‌کنی
و بیایم یکی از اینا رو حذف کنیم
چون بعداً در مورد رنگ‌ها
بیشتر صحبت می‌کنیم
خب حالا بریم سراغ عنوان بعدی‌مون
یعنی استایل دادن به المنت H2
این در واقع تیتر اصلی این مقاله است
و می‌تونیم از ویژگی‌هایی که
قبلاً یاد گرفتیم استفاده کنیم
و وقتی این ویژگی‌ها رو تایپ کنی
کم‌کم توی ذهنت ثبت میشن
پس این یکی رو بیایم
حتی بزرگ‌تر از H1 کنیم
باشه؟
خیلی بزرگ
مثلاً ۴۰ پیکسل
و این هیچ مشکلی نداره
چون فقط به خاطر اینکه H1 تیتر اصلیه
به این معنی نیست
که همیشه باید بزرگ‌ترین هم باشه
پس H1 بودن بیشتر مربوط به معناست
نه فقط ظاهرش
خب یه متن بزرگ و قشنگ داریم
حالا بیایم فونتش رو هم sans-serif کنیم
که یه ظاهر مدرن‌تر داشته باشه
پس از کلیدواژه sans-serif استفاده می‌کنیم
و تمومه
حالا بریم پاراگراف‌ها رو استایل بدیم
و همونطور که قبلاً گفتم
با انتخاب المنت p به این شکل
در واقع همه‌ی پاراگراف‌های صفحه رو
انتخاب می‌کنیم
مثل همین پاراگراف
و این یکی و اون یکی
و در کل همه‌ی پاراگراف‌هایی که اینجا داریم
باشه؟
خب؟
پس دوباره بهشون اندازه فونت بدیم
مثلاً ۲۲ پیکسل
و فعلاً این مقادیر طولی که استفاده کردم
یعنی این عددها
یه جورایی تصادفی هستن
ولی بعداً یاد می‌گیریم چطور از یه سیستم
استفاده کنیم تا به‌طور خودکار بفهمیم
کدوم اندازه فونت‌ها بهتره استفاده بشن
باشه؟
خب؟
حالا می‌خوام دوباره فونت رو تغییر بدم
یه بار دیگه
و باز هم از sans-serif استفاده کنیم
و عالیه
خیلی خوب به نظر میاد
و اگه با دموی خودمون مقایسه کنیم
می‌بینیم که کم‌کم داریم نزدیک‌تر می‌شیم
به همون چیزی که می‌خواستیم
یعنی صفحه‌ی دموی ما
همون چیزی که در نهایت می‌خوایم بهش برسیم
فقط یه چیز دیگه مونده که می‌خوام
توی پاراگراف‌ها تغییر بدم
و اون اینه که یه ویژگی جدید به اسم
line-height رو مشخص کنیم
پس اول
این ویژگی رو تعریف می‌کنم
و بعدش تفاوتش رو توی متن می‌بینی
اینجا در واقع از مقداری بدون واحد استفاده می‌کنیم
پس این مقدار ۱۵ یعنی
ارتفاع خطوط میشه
یک و نیم برابر اندازه فونت
باشه؟ به‌طور پیش‌فرض
line-height برابر ۱ هست
ولی حالا اگه بذاریم روی ۱۵
باید فاصله بین خطوط
اینجا بیشتر بشه
پس بین این خط و این خط و اون خط
پس دقت کن وقتی الان
روی رفرش کلیک می‌کنم
صفحه دوباره لود میشه
و می‌بینی که واقعاً تغییر کرد
درسته؟ و البته می‌تونیم مقدارش رو بیشتر هم بذاریم
که باعث میشه فاصله بیشتری داشته باشیم
اما این دیگه کمی زیادی به نظر میاد
پس برگردیم به یک و نیم
مثل این
خب راستی
اینجا یه اتفاق جالب افتاد
که شاید متوجهش شده باشین
یادتونه توی این پاراگراف‌هایی که استایل دادیم
عناصر مختلفی داشتیم
مثل این متن مورب
که یه المنت EM هست
یادتونه؟
اینجا توی این پاراگراف
مثلاً یه المنت EM داریم
یا اینجا توی این پاراگراف المنت strong داریم
درسته؟
یا پایین‌تر اینجا یه anchor داریم
یعنی همین المنت
و همونطور که می‌بینید این المنت‌ها توی صفحه
مثلاً همین لینک
به‌نوعی همون سایز فونت
و همون خانواده‌ی فونت p رو گرفتن
با اینکه ما اصلاً این استایل‌ها رو برای لینک تعریف نکردیم
نه سایز فونت رو
نه خانواده فونت و نه line height
نه برای anchor
نه برای متن strong
نه برای المنت strong و نه EM
درسته؟ ولی با این حال همه این استایل‌ها روشون اعمال شد
علتش یه مکانیزم خیلی مهمه
به اسم وراثت (inheritance)
این یه کم پیچیده‌ست برای درک کردن
و بعداً یه جلسه‌ی کامل در موردش خواهیم داشت
ولی خواستم همینجا این اثر رو بهتون نشون بدم
خب حالا بریم سراغ ادامه‌ی استایل دادن
به بقیه المنت‌ها
از H3 شروع کنیم و بذاریمش اینجا
بعد از H2
تا رول‌ها رو منطقی گروه‌بندی کنیم
پس سایز فونت این یکی
مثلاً ۳۰ پیکسل باشه
این میشه همین یکی اینجا
دقیقاً این و این
پس دوباره چندتا المنت H3 داریم
و وقتی سلکتور H3 رو استفاده کنیم
همه‌شون انتخاب می‌شن
خب حالا خانواده فونت رو هم دوباره
روی sans serif بذاریم
خیلی خب و حالا آخرش
می‌رسیم به heading مربوط به H4
یعنی همین یکی
خب دوباره بیایم
سایز فونت و
خانواده فونت رو مشخص کنیم
۲۰ پیکسل
و اینجا هم sans serif
در واقع بیایم متن رو اینجا uppercase هم بکنیم
یادتونه برای این کار از ویژگی text-transform استفاده می‌کنیم
و می‌ذاریمش روی uppercase
مثل این
عالیه
و حالا یه ویژگی آخر مونده
که می‌خوام بهتون نشون بدم
برای استایل دادن به متن
اونم اینکه می‌تونیم متن رو تراز (align) کنیم
یکم شبیه کاری که توی Word یا Google Docs می‌کنیم
برای این از ویژگی text-align استفاده می‌کنیم
و اینجا گزینه‌هاشو می‌بینید
یکی از جالب‌ترینش اینه که
متن رو وسط‌چین کنیم
ببینیم وقتی ذخیره کنم چی میشه
خب
باید دوباره بریم پایین صفحه
می‌بینید که حالا متن وسط صفحه‌ست
از نظر فنی توی وسط المنت والدشه
ولی چون المنت والد کل صفحه رو گرفته
پس متن هم وسط کل صفحه قرار گرفته
خب حالا تنها چیزی که مونده
این آیتم‌های لیسته
یعنی این پنج‌تا و اون سه‌تا
و همینطور این لینک‌ها
ولی استایل لینک‌ها رو بعداً می‌دیم چون
لینک‌ها یه سری موارد خاص دارن
پس بیاید این ویدیو رو با استایل دادن
به المنت‌های LI تموم کنیم
خب
بریم پایین همینجا
و دقت کنید که ما استایل نمی‌دیم به
OL یا UL
که المنت والد لیست‌ها هستن
باشه؟
یادتون باشه
که خود لیست یه OL یا UL هست
ولی ما در واقع LI رو استایل می‌دیم
خب؟
پس دوباره بیایم خانواده فونت رو
روی sans serif بذاریم
ذخیره کنیم
و همینطور سایز فونت رو
یه بار دیگه تغییر بدیم
به‌طور پیش‌فرض
این سایز فونت رو داریم که معمولاً ۱۶ پیکسله
خب؟
این یه نکته‌ی مهمه که بعداً هم به کارمون میاد
پس یادتون باشه
ولی خب ما می‌خوایم کمی بزرگ‌ترش کنیم
پاراگراف‌هامون روی
۲۲ پیکسل هستن پس بیایم اینو کمی کوچیک‌تر بذاریم
مثلاً روی ۲۰ پیکسل
و همین
عالیه
پس استایل‌دهی اولیه
به متن صفحه‌مون تموم شد
و توی این مسیر
حدود ۶ ویژگی جدید CSS یاد گرفتیم
پس کمی وقت بذارید
و مرور کنید کاری که کردیم
و بعد بریم سراغ جلسه بعد
که اونجا یه کم بیشتر یاد می‌گیریم
درباره سلکتورها