لینک ها در 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;
}
مشاهده مثال


 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط