خب در این جلسه یاد می‌گیریم
چطور هایپرلینک‌ها را با استفاده از شبه‌کلاس‌ها (pseudo classes) استایل بدهیم
اما بیایید سریع این متن قرمز را اینجا که نمی‌خواهیم درست کنیم
که نمی‌خواهیمش
در واقع کاری که اینجا می‌کنم این است که دوباره برش گردانم
به first-child که یادتان هست کار نمی‌کرد
و بعد اینجا یک کامنت می‌گذارم با استفاده از کلید Command
یا Control + Slash و بعد به سادگی می‌نویسم که این همان
سوءبرداشتی است که در ویدیوی قبل درباره‌اش صحبت کردیم
پس این کار نخواهد کرد
خُب
و بنابراین با این کار شروع می‌کنیم به مستندسازی
یا کدنویسی کمی
و حالا اینجا یک کامنت دیگر اضافه می‌کنم تا بگویم
که اینجا قرار است لینک‌ها یا هایپرلینک‌ها را استایل بدهیم
حالا ممکن است فکر کنیم این‌طور لینک‌ها را استایل می‌دهیم
یعنی فقط A را می‌نویسیم
و تمام عناصر anchor صفحه را انتخاب می‌کنیم
و بعد مثلاً می‌توانیم رنگ آن‌ها را استایل بدهیم
و فرض کنیم می‌خواستیم برویم
با همین رنگ آبی اینجا
و بعد وقتی صفحه را دوباره بارگذاری کنیم
در واقع این لینک‌ها همین حالا هم قشنگ به نظر می‌رسند
پس این یکی آبی شد و این‌ها هم این پایین
و احتمالاً این یکی‌ها هم آره درسته
اما این کار به تنهایی در واقع یک روش خوب نیست
پس نباید فقط anchor را انتخاب کنیم و بعد استایل بدهیم
در عوض باید یک شبه‌کلاس anchor را استایل بدهیم
چون این اجازه می‌دهد حالت‌های مختلف را هدف بگیریم
پس اولین چیزی که می‌خواهیم استایل بدهیم
شبه‌کلاس link است
این اساساً تمام عناصر anchor را هدف می‌گیرد
که ویژگی href دارند
چون یادتان باشد ما می‌توانیم anchor تعریف کنیم
یعنی عناصر A بدون ویژگی href
و بنابراین آن‌ها توسط کدی که قبلاً داشتیم
هدف گرفته می‌شدند حتی اگر واقعاً لینک نبودند
اما با این
یعنی با مشخص کردن شبه‌کلاس link
این فقط لینک‌های واقعی را هدف می‌گیرد
پس اگر دوباره بارگذاری کنیم هنوز هم خوب دیده می‌شود
اجازه بدهید خیلی سریع این را به شما نشان بدهم
اینجا اگر رنگ را قرمز قرار بدهیم
و اگر بعد یک عنصر A اینجا مشخص کنم
یک A تستی پس اینجاست
و می‌بینید که این یکی حالا واقعاً قرمز است
و این به خاطر این استایل اینجاست
نه به خاطر این یکی
و دوباره چون این یکی فقط عناصر A را هدف می‌گیرد
که واقعاً ویژگی href دارند
که این یکی ندارد
پس بیایید حذفش کنیم
و همین‌طور این قانون را هم
و خب حالا می‌دانید
که باید این‌طور انجام شود
بیایید همچنان به این لینک‌ها نگاه کنیم
حالا چیز دیگری که رایج است هنگام استایل دادن لینک‌ها
این است که زیرخط (underline) را حذف کنیم
پس اینجا یک ویژگی دیگر CSS برای استایل متن داریم
که text-decoration است
که در این مورد می‌توانیم آن را روی none تنظیم کنیم
اما مقدارهای دیگری هم دارد
که در یک لحظه به شما نشان می‌دهم
اما فعلاً فقط می‌خواهیم زیرخط را حذف کنیم
و در این شرایط خیلی رایج است که در چندین ویژگی
از مقدار none استفاده کنیم
و در واقع حالا حذف شد
و همین‌طور این پایین هم عالی
مورد بعدی شبه‌کلاس visited است
خیلی از سایت‌ها در واقع لینک‌ها را متفاوت نمایش می‌دهند
اگر قبلاً روی آن‌ها کلیک شده باشد
و یک مثال خوب برای آن گوگل است
و در CSS این کار واقعاً ساده خواهد بود
همه کاری که باید بکنیم این است که anchorها را انتخاب کنیم
با شبه‌کلاس visited
پس اینجا می‌توانیم به آن‌ها یک رنگ متفاوت بدهیم
مثلاً یک خاکستری روشن چیزی شبیه به این خب؟
اما در عمل در واقع هیچ‌وقت این کار را نمی‌کنیم
پس در صفحات معمولی
معمولاً همیشه رنگ لینک‌های visited همان رنگی است
که در شبه‌کلاس link داشتیم
پس فقط همین کار را می‌کنیم
و کار را تمام می‌کنیم
و این دو قانون حالا در واقع خیلی شبیه هم هستند
و بنابراین معمولاً آن‌ها را با هم گروه‌بندی می‌کنیم
اما حالا این کار را نمی‌کنیم
و همه چیز را جداگانه نگه می‌داریم
فقط برای هدف آموزشی اینجا
به هر حال حالا برویم سراغ شبه‌کلاس بعدی برای anchorها
که می‌گویم مهم‌ترینشان است
و آن hover است
پس در شبه‌کلاس hover
می‌توانیم هر استایلی را که می‌خواهیم تعریف کنیم
که به anchor اعمال شود به محض این‌که عنصر
با ماوس hover شود
پس مثلاً فرض کنیم در این حالت
می‌خواستیم رنگ را تغییر بدهیم به چیزی مثل نارنجی-قرمز
که یکی از این نام‌های رنگی است
که من واقعاً کمی این یکی را دوست دارم
و بعد فرض کنیم
اینکه بخوایم وزن فونت رو هم بولد کنیم
پس یه جورایی یه استایل شلوغ و عجیب میشه
و در واقع بیایم دوباره زیرخط رو هم برگردونیم
پس text decoration
و این یکی هم یکی از همون shorthand propertyهاست
که می‌تونیم چند مقدار رو تعریف کنیم
تو این حالت می‌تونیم خط زیر متن
استایل خط زیر متن و رنگ خط زیر متن رو مشخص کنیم
می‌تونیم بگیم underline
بعد می‌تونیم نوع خط زیر متن رو مشخص کنیم
که خیلی شبیه به استایل border هست
مثلاً بذاریم dotted
و در نهایت رنگ
پس بذاریم اونم روی orange-red
و ببینیم حالا وقتی روی لینک میریم چی میشه
و کار کرد
پس رنگ عوض شد وزن فونت هم تغییر کرد
و همینطور text decoration
یه استایل دیگه هم امتحان کنیم مثل wavy که باحاله
و این شکلی میشه
بازم یه استایل شلوغ و عجیب
و اگه بخوایم کمتر شلوغ باشه
می‌تونیم مقدار دوم رو حذف کنیم
و CSS خودش تشخیص میده که اون دومیه حالا رنگه
که بشه رنگ خط زیر متن
و حالا خیلی نرمال‌تر به نظر میاد درسته؟
پس بذاریم همینطوری بمونه
در نهایت یه pseudo class چهارم هم می‌تونیم مشخص کنیم
و اون active pseudo class هست
و این حالتیه که واقعا داریم روی لینک کلیک می‌کنیم
پس وقتی روی یه لینک کلیک کنیم
pseudo class فعال به اون المنت اضافه میشه
و می‌تونیم اینجا انتخابش کنیم
دقیقاً مثل کاری که برای سه حالت دیگه کردیم
خب بیایم اینجا هم یه استایل عجیب اضافه کنیم
مثلاً رنگ پس‌زمینه رو بذاریم مشکی
تو اون حالت
و حتی استایل فونت رو italic کنیم
خب
همینه
پس hover مثل قبل می‌مونه
ولی حالا وقتی کلیک کنم
این شکلی دیده میشه در طول مدت
کلیک
بعد اگه رها کنم و بیرون برم
برمی‌گرده به حالت عادی
خب
فکر کنم همین بود
چیزی که مهمه اینه که این چهار حالت همیشه
دقیقاً به همین ترتیب تعریف میشن
یعنی همیشه link visited hover و active
یا اگه حفظ کردنش راحت‌تره LVHA
باشه؟
ولی خب ما اینو چند بار دیگه هم تمرین می‌کنیم
تو ادامه‌ی دوره
و بعدش دیگه خیلی راحت میشه
و با این کار در واقع رسیدیم به پایان
بخش مقدماتی استایل‌دهی‌های ساده‌ی ظاهری با CSS
البته کلی چیزهای دیگه هم هست مثل border-radius
سایه‌ها گرادیانت‌ها
تصاویر پس‌زمینه و موارد دیگه
ولی اونا رو بعداً می‌بینیم
فعلاً همینجا متوقف میشیم
و این خودش پیشرفت خیلی خوبیه
پس تبریک میگم که تا اینجا رسیدی
و همه‌ی اینا رو درباره‌ی CSS یاد گرفتی
مرحله‌ی بعد یه چیزایی درباره‌ی مرورگر یاد می‌گیریم
یه ابزار خیلی کاربردی
و بعد معلومه که
ادامه میدیم به یاد گرفتن مبانی CSS با یه مقدار تئوری
و بعدش چند ویژگی دیگه رو یاد می‌گیریم
که به چیزای دیگه مربوط میشن