Omega Programming

قالب بندی لینک ها در css

به روش های مختلف می توان لینک ها را استایل دهی کرد. برای نمونه به مثال زیر توجه کنید:

a {
    color: #FF0000;
}

لینک ها می توانند در چهار حالت زیر قرار داشته باشند:

  یک لینک معمولی که هنوز ملاقات نشده :a:link

a:visited:      لینکی که کاربر آن را ملاقات کرده

a:hover:    لینکی که کاربر ماوس را روی آن قرار داده

a:active:    لینک در لحظه ای که روی آن کلیک شده

به مثال زیر توجه کنید:

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

در مثال بالا رنگ لینک ها بسته به حالتی که لینک در آن قرار گرفته تغییر خواهد کرد.

وقتی که برای حالات مختلف لینک استایل تعریف می کنیم (مانند مثال بالا) باید به این نکته توجه کرد که حالت hover باید بعد از حلالات hink و visited بیاید همچنین حالت active بعد از hover.

Text Decoration

از این ویژگی اغلب برای حذف زیرخط استفاده می شود:

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Background Color

این ویژگی نیز برای لینک ها می تواند بصورت زیر استفاده شود:

a:link {
    background-color: #B2FF99;
}

a:visited {
    background-color: #FFFF85;
}

a:hover {
    background-color: #FF704D;
}

a:active {
    background-color: #FF704D;
}

شما اینجا هستید: صفحه ی اصلی آموزش ها آموزش CSS آموزش CSS قالب بندی لینک ها در css