لینک ها در 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 یادگیری CSS

مقدمه ای بر CSS ترکیب کدهای CSS CSS چگونه کار میکند؟ رنگ ها در CSS پس زمينه در CSS خط حاشيه ( border ) در CSS margin (حاشیه) در CSS صفت padding در CSS عرض و ارتفاع در CSS مدل جعبه ای CSS outline در CSS متن در CSS فونت ها در CSS آیکون ها در CSS لینک ها در CSS لیست ها در CSS جدول در CSS نمايش در قالب بندی CSS حداكثر عرض در CSS صفت position در CSS صفت overflow در CSS صفت float در CSS بلوک اینلاین در CSS تراز بندی در CSS combinator در CSS Pseudo-classes در CSS Pseudo-Elements در CSS تاری و شفافیت در CSS منو ناوبری در CSS کرکره ها در CSS ابزار راهنما (tooltip) در CSS گالری تصاویر در CSS اسپرایت تصویر در CSS سلکتور های صفات در CSS فرم ها در CSS شمارشگر ها در CSS معرفی CSS3 گوشه های گرد در CSS3 حاشیه های تصویری در CSS3 پس زمینه در CSS3 رنگ ها در CSS3 گرادیانت در CSS3 سایه در CSS3 متن در CSS3 فونت ها در CSS3 ترنسفرم های دوبعدی در CSS3 ترنسفرم های سه بعدی CSS3 انتقال در CSS انیمیشن در CSS Tooltip در CSS استایل تصویر در CSS ویژگی object-fit در CSS دکمه ها در CSS صفحه بندی در CSS چندستونی در CSS رابط کاربری CSS متغیرهای CSS اندازه جعبه (Box) در CSS Flexbox در CSS کوئری Media در CSS مثال کوئری Media در CSS طراحی ریسپانسیو وب – مقدمه طراحی ریسپانسیو وب – viewport طراحی ریسپانسیو وب – Grid-View طراحی ریسپانسیو وب – کوئری Media طراحی ریسپانسیو وب – تصاویر طراحی ریسپانسیو وب – ویدیو طراحی ریسپانسیو وب – چارچوب (Frameworks) چیدمان شبکه ای در CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز