لینک ها در CSS
یادگیری CSS
تعداد بازدید :
5035
تاریخ و ساعت انتشار :
چهار شنبه 1 شهریور 1396 01:51
با استفاده از 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;
}
مشاهده مثال
نظر شما
>