لینک ها در CSS می‌توانند ویژگی های مختلفی از جمله color, font-family, background و ... را داشته باشند. در ادامه با این ویژگی ها آشنا خواهیم شد...

همچنین لینک ها می‌توانند براساس حالتی که در آن هستند استایل های مختلفی به خود بگیرند. چهار حالت که لینک ها از آنها پیروی می‌کنن عبارتند از:

a:link ◄ لینک در حالت عادی و مشاهده‌نشده.

a:visited ◄ لینکی که کابر مشاهده کرده است.

a:hover ◄ لینکی که کابر ماوس را بر روی ان برده است.

a:active ◄ لینک در لحظه‌ای که بر روی آن کلیک می‌شود.

مثال:

<style>
/* حالت عادی */
a:link {
    color: red;
}

/* لینک مشاهده شده */
a:visited {
    color: green;
}

/* ماوس روی لینک */
a:hover {
    color: hotpink;
}

/* لینک در لحظه کلیک */
a:active {
    color: blue;
}
</style>

مشاهده نمونه کد بالا

هنگامی که می‌خواهید چند حالت را برای لینک تنظیم کنید باید چند نکته را راعایت کنید، در غیر این صورت کد ها کار نخواهند کرد:

a:hover باید بعد از a:link و a:visited نوشته شود.
a:active حتما باید بعد از a:hover نوشته شود.

ویزگی Text Decoration

این ویژگی بیشتر برای حذف underline (زیرخط ؟!) از لینک ها استفاده می‌شود.

<style>
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: underline;
}
</style>

مشاهده نمونه کد بالا

ویژگی Background Color

با استفاده از این ویژگی می‌توان رنگ پس‌زمینه لینک ها را تغییر داد.

<style>
a:link {
    background-color: yellow;
}
a:visited {
    background-color: cyan;
}
a:hover {
    background-color: lightgreen;
}
a:active {
    background-color: hotpink;
}
</style>

مشاهده نمونه کد بالا

تا اینجا با روش استایل دادن به لینک ها به صورت ساده آشنا شدیم. حالا چند تا ویژگی رو با هم مخلوط میکنیم!

<style>
a:link,
a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
a:hover,
a:active {
    background-color: red;
}
</style>

مشاهده نمونه کد بالا

حالا یکم پیچیده تر!

<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>

مشاهده نمونه کد بالا

اینم یه نمونه دیگه:

<style>
a:link,
a:visited {
    background-color: white;
    color: black;
    border: 2px solid green;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
a:hover,
a:active {
    background-color: green;
    color: white;
]
</style>

مشاهده نمونه کد بالا