در مطالب پیشین سه نوع حالت پیشفرض یک لینک را بررسی کردیم—مشاهده نشده، مشاهده شده و در حال بارگذاری—حالتی دیگر در ارتباط با یک لینک و جود دارد که آن را با یکدیگر بررسی نکردیم، زمانی که نشانگرِ موس را بر روی لینک قرار داده و هنوز بر روی آن کلیک نکرده اید. در CSS تمامی این حالت ها را می توانیم دستخوشِ تغییر نماییم. ممکن است در آغاز اندکی پیچیده آید اما بسیار ساده است. به markup زیر توجه کنید؛
font-weight: bold;
}
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
text-decoration: none;
color: white;
background-color: navy;
}
a:active {
color: aqua;
background-color: navy;
}
تمامی حالت های یک لینک را در بالا توسط انتخاب گر تگ های CSS آدرس دهی کردیم، و همانطور که می بینید در تنظیمات پیش فرض آن ها تغییراتی ایجاد کردیم.
رعایتِ ترتیب تنظیمات گوناگون در لینکهامان
معمولاً مرورگر ها در مورد تنظیمات لینک ها و ترتیب این تنظیمات حساس نیستند، اما بهتر است ترتیب مثال بالا را رعایت کنید. لینک، مشاهده شده، زمانی که نشانگر موس بر روی لینک است و در حال بارگذاری—link، visited، hover و active.
حالا بیایید لینک های گوناگون پروژه خود را style-دهی نماییم:
1. فایل style1.css را باز کرده و کدِ CSS بالا را به آن اضافه کنید.
2. فایل جدید را ذخیره کنید.
3. صفحه ها را از نو در مرورگر مشاهده کنید و تغییرات را ببینید.
عکس 3.14 حالت های مختلفِ به وجود آمده برای یک لینک را نشان می دهد؛ لینکِ home مشاهده نشده است، لینکِ About Us مشاهده شده و نشانگر موس نیز بر روی لینکِ Contact Us قرار گرفته است.
عکس 3.14: هر سه حالت یک لینک در این تصویر style-دهی داده شده اند.
پیشنهاد می شود خودتان نیز با روش سعی و خطا تغییرات دلخواه دیگری به حالت های لینک های خود داده و تغییرات را مشاهده کنید.
انتخابگرِ Class های تعریف شده
تا به اینجا یاد گرفتیم که چگونه تگ های گوناگون را آنگونه که می خواهیم style-دهی کنیم، مانند پاراگراف ها و عناوین، همچنین یاد گرفتیم که تگ هایی که در جاهای مشخص و خاصی قرار داده شده اند را چگونه با مشخصه id انتخاب کرده و ظاهری متفاوت به آن ها نسبت دهیم. با این حال اگر بخواهیم پس زمینه پاراگراف ما برای مثال به رنگِ navy نمایش دهیم به مشکل بر خواهیم خورد، اگر بخواهیم با پاراگراف ها یا تگ دیگری که مد نظر داریم چنین کاری کنیم چه؟ انتخابگرهای Class جواب سوال ما می باشند.
یک انتخابگر Class به شما اجازه می دهد style مشخصی را تعریف کرده، بارها و بارها فراخوانی و در تگ های گوناگونی که مد نظر دارید مورد استفاده قرار دهید. برای مثال شاید بخواهیم بخشی از نوشته ی سایتمان نسبت به سایر قسمت ها بیشتر جلب توجه کند، در CSS برای انجام این کار به صورت زیر عمل می کنیم؛
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}
در اینجا یک Class با نام “fun” را ساختیم. همچنین از letter-spacing نیز در اینجا استفاده شد، این دستور در واقع فاصله بین حروف را مشخص می کند. در اینجا این مقدار را 0.05em انتخاب کردیم، برای درک این مقدار بدانید که ارتفاع حرفِ “M” با این فرمت 1em می باشد، پس 0.05em در واقع 5% از ارتفاع حرف “M” می باشد.
برای اینکه از این style تعریف شده استفاده کنیم تنها کاری که باید انجام دهیم اضافه کردن class=”fun” به عنوان متغییری به تگ مورد نظرمان است؛
بیایید اندکی از این class ها را به پروژه خود اضافه کنیم.
1. فایل style1.css را گشوده و markup بالا را به آن اضافه کنید، فایل را ذخیره کرده و ببندید.
2. در مرورگر خود about.html را باز کنید.
3. پاراگرافی که درون blockquote می باشد را پیدا کنید.
4. مشخصه class=”fun” را به تگِ گشوده شده این پاراگراف اضافه کنید.
نتیجه کارتان باید اینگونه باشد؛
<p class="fun">"Happiness is a dip in the ocean followed by a
pint or two of Old Speckled Hen. You can quote me on
that!"</p>
</blockquote>
توجه کنید در بالا تنها یک پاراگراف داشتیم، اگر برای مثال سه پاراگراف داشتیم کار اندکی آشفته می شد؛
<p class="fun">"Happiness is a dip in the ocean followed by a
pint or two of Old Speckled Hen. You can quote me
on that!</p>
<p class="fun">"Join us for a weekend away at some of our
favorite dive spots and you'll soon be making new
friends.</p>
<p class="fun">"Anyway, about time I got on with some
<em>proper</em> work!"</p>
</blockquote>
برای جلوگیری از این بی نظمی قطعاً CSS راه را برای ما باز گذاشته است؛
<p>"Happiness is a dip in the ocean followed by a pint or two of
Old Speckled Hen. You can quote me on that!</p>
<p>"Join us for a weekend away at some of our favorite dive
spots and you'll soon be making new friends.</p>
<p>"Anyway, about time I got on with some <em>proper</em>
work!"</p>
</blockquote>
در این مثال class تعریف شده خود با نامِ “fun” را به تگ blockquote اضافه کردیم و تمام محتوای این تگ را با class تعریف شده خود مجهز کردیم. با این کار از بارها فراخوانی کردن class تعریف شده در بخش های مختلف وبسایت خود جلوگیری کردیم.
