لینک ها در CSS
یادگیری CSSبا استفاده از CSS به لینک ها می توان به روش های مختلفی استایل داد.
لینک های استایل دار
برای استایل دهی به لینک ها می توان از هر صفت CSS استفاده کرد. (مانند : color ، background و ...)
مثال :
a {
color: hotpink;
}
مشاهده مثالبه علاوه ، لینک ها را می توان حتی متفاوت از وضعیتشان استایل دهی کرد. چهار وضعیت لینک ها عبارتند از :
a:link - یک لینک مشاهده نشده.
a:visited - لینکی که قبلا توسط کاربر مشاهده شده.
a:hover - حالتی از لینک زمانی که ماوس روی آن باشد.
a:active - حالتی از لینک در لحظه کلیک شدن.
مثال :
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
مشاهده مثالزمانی که برای حالت های مختلفی از لینک استایل تعیین می کنید ، باید ترتیب های زیر را رعایت کنید :
- a:hover باید بعد از a:link و a:visited قرار گیرد.
- a:active باید بعد از a:hover قرار گیرد.
صفت text-decoration
صفت 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: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
مشاهده مثاللینک های دکمه ای - پیشرفته
مثال زیر ، نمونه ای حرفه ای از ترکیب برخی از صفات CSS برای نمایش لینک ها به شکل جعبه یا دکمه است.
مثال :
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;
}
مشاهده مثال
نظر شما
>