Style-دهیِ گروهی
اگر style مشخصی در نظر دارید و می خواهید آن را به چندین تگ متفاوت نسبت دهید نیازی نیست این کار را بارها تکرار کنید. برای مثال فرض کنید می خواهیم عناوین نوع اول تا سوم را در سایت خود را به صورت زرد رنگ و با پس زمینه مشکی نمایش دهیم؛ شاید چنین کاری در نظر داشته باشید:
color: yellow;
background-color: black;
}
h2 {
color: yellow;
background-color: black;
}
h3 {
color: yellow;
background-color: black;
}
این روش بسیار آشفته و درهم است، زمانی هم که style-های گوناگونی برای بخش های مختلف در نظر داشته باشید کار حتی آشفته تر نیز می شود. اینگونه می توانیم کار را ساده تر و کوتاه تر نماییم:
color: yellow;
background-color: black;
}
معنی عبارت بالا: در برخورد با تگ های نوع اول، دوم و سوم آن ها را زرد رنگ و با پس زمینه مشکی نشان بده.
کاما=«یا»
در مثال بالا توجه کنید که نقشِ «،» برای سایت ما همچون عبارتِ «یا» در نظر گرفته شده است.
حالا بیایید با اطلاعات جدیدمان style یگانه ای را به چند نوع تگ مختلف نسبت دهیم، هنوز عنوان نوع سه ای در سایت خود نداریم اما در آینده ای نه چندان دور اضافه خواهد شد؛
1. تغییرات زیر را به فایل CSS خود وارد کرده و آن را ذخیره کنید:
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}
2. صفحه “About Us” را از نو بارگذاری کنید و تغییرات را مشاهده کنید، نتیجه کار باید مشابه با تصویر نشان داده شده در عکسِ 3.12 باشد.
نه تنها این امتیاز را داریم که طراحی چندین صفحه گوناگونِ سایت خود را در یک جا انجام دهیم بلکه می توانیم چندین تغییر را به تگ های گوناگون و با یک کدنویسی ساده اختصاص دهیم. علاوه بر این به نکته کوچک و زیبای دیگری توجه کنید؛ اینکه style طراحی شده در یک جاست و نیازی نیست سایت کاربر داده زیادی را دانلود نماید.
کدام یک از قوانین اختصاص داده شده پیروز می شوند؟
زمانی که در کدهای خود تغییرات گروهی به وجود آوردیم پاره ای از style-های اختصاص داده شده گذشته را نیز دستخوشِ تغییر نمودیم. در واقع اندکی مغایرت وتناقض بین طراحی های گذشته و جدیدمان دیده می شود. با نگاهی به کدهای مان می بینیم که عنوان نوع دوم ما در جاهای دیگر به صورت آبی رنگ و سفید رنگ تنظیم شده بود:
color: blue;
font-size: medium;
font-weight: normal;
}
em {
text-transform: uppercase;
}
h1, h2, h3 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}
همانطور که دیده می شود تخصیص رنگِ سفید بعد از آبی آمده است، و به همین دلیل قبلی نادیده گرفته خواهد شد. اگر حتی 100 بار قبل از رنگ سفید رنگ آبی را برای این عنوان مشخص کرده باشیم هم مهم نیست، آخرین قانونی که برای آن مشخص شده برای سایت در نظر گرفته می شود.
نامی که به فایل CSS اختصاص داده شد.
مدت زمانی تقریباً طولانی است که بر روی فایل style1.css کار می کنیم، شاید این سوال در ذهن شما به وجود آمده باشد که چرا از شماره بندی برای این نام گذاری استفاده شد، در جواب باید گفت که در آینده style-های دیگری طراحی خواهیم کرد و به همین دلیل باید این ها را با اعداد اختصاص داده شده از یکدیگر متمایز کنیم. اما آیا نمی توانستیم از نام گذاری دیگر استفاده کنیم؟ نام گذاری دیگری که به اندازه نام گذاری کنونی ما کلی نباشد. در جواب باید گفت که می شد و ما عمداً انتخابی جامع انجام دادیم. به این نکته توجه کنید که در آینده و با پیشرفت سایت ممکن است طراحی ما با نامی که به فایل CSS خود اختصاص داده ایم نخواند. در واقع اصلِ CSS نیز بر همین بنا سوار است. به همین دلیل از کلی ترین و جامع ترین نامی که می شد استفاده کردیم؛ style1.css. پیشنهاد ما به شما برای کارهای شخصی آینده تان نیز همین است.
بازبینیِ دیگری به کارهای انجام شده
تا اینجا با یکدیگر style-های گوناگونی را مرور کردیم و طریقه استفاده از آن ها و کاربردهایشان را نیز یاد گرفتیم. اینکه چگونه تگ های خود را style-دهی کنیم و این اواخر نیز اینکه چگونه چندین دسته تگ های مختلف را با هم و یکجا style-دهی نماییم. بخشی باقی می ماند که کمتر از سایر بخش ها با آن برخورد داشته و به بحث و بررسی گذاشتیم؛ لینک ها.
Style-دهی به لینک هایمان
در فضای آنلاین بیش از همه چیزِ دیگر با لینک ها برخورد داریم، پایه و اساس تمامی قسمت های وب همین لینک ها هستند. این روزها که سایت های موجود در وب پر از طراحی های متنوع و متفاوت هستند را کنار گذاشته و اندکی به گذشته برگردید. بر می گردیم به اولین مرورگرها و در آنجا می بینید که تمامیِ لینک ها با خط زیرین نشان داده شده بودند که امروز نیز به صورت پیشفرض همین تنظیم به آن ها اختصاص داده شده است؛
لینکی که تا کنون باز نشده است: آبی رنگ
لینکی که در گذشته باز شده و مشاهده شده است: بنفش رنگ
لینکی که بر روی آن کلیک شده و هنوز بارگذاری نشده است—این روزها و با سرعت های بالای اینترنت کمتر با آن مواجه می شویم: قرمز رنگ
این شماتیک های از پیش تعیین شده همان هایی است که به صورت پیش فرض به ما تحمیل شده اند، گرچه با وجود نعمتی به نام CSS دیگر در قید و بند آن ها نخواهیم بود.
ساده ترین style-ای که در فایل CSS خود ممکن است برای لینک ها مشاهده کنیم به صورت زیر است؛
font-weight: bold;
color: black;
}
و حالا به جای لینک هایی آبی رنگ و با حالت normal لینک های ما به صورت bold و با رنگ سیاه نشان داده می شود. این کد را به CSS خود اضافه کرده، آن را ذخیره کنید و نتیجه را در مرورگر خود مشاهده نمایید، باید نتیجه ای مشابه با تصویر آورده شده در عکس 3.13 روبه رو شده باشید.
عکس 3.13: لینک هایی سیاه رنگ و bold بعد از اعمال تغییر در تنظیمات پیش فرض.
