لینک های در HTML-رنگ های مختلف

لینک‌ها در HTML - رنگ‌های مختلف 🎨

یک لینک HTML بر اساس اینکه بازدید شده (visited)، بازدید نشده (unvisited) یا فعال (active) باشد، با رنگ متفاوتی نمایش داده می‌شود.

رنگ‌های لینک در HTML

به طور پیش‌فرض، یک لینک به این صورت (در همه مرورگرها) ظاهر می‌شود:

• یک لینک بازدید نشده خط‌دار و آبی است.

• یک لینک بازدید شده خط‌دار و بنفش است.

• یک لینک فعال خط‌دار و قرمز است.

شما می‌توانید رنگ‌های وضعیت لینک را با استفاده از CSS تغییر دهید.

مثال تغییر رنگ لینک‌ها با CSS:

در این مثال، یک لینک بازدید نشده سبز و بدون خط زیر خواهد بود. یک لینک بازدید شده صورتی و بدون خط زیر خواهد بود. یک لینک فعال زرد و خط‌دار خواهد بود. علاوه بر این، هنگامی که ماوس را روی لینک می‌برید (a:hover)، قرمز و خط‌دار می‌شود:

<style>
    a:link {
        color: green;
        background-color: transparent;
        text-decoration: none;
    }
    
    a:visited {
        color: pink;
        background-color: transparent;
        text-decoration: none;
    }
    
    a:hover {
        color: red;
        background-color: transparent;
        text-decoration: underline;
    }
    
    a:active {
        color: yellow;
        background-color: transparent;
        text-decoration: underline;
    }
</style>

لینک‌های دکمه‌ای 🔘

یک لینک را می‌توان با استفاده از CSS به صورت دکمه‌ای نیز طراحی کرد:

این یک لینک است.

مثال لینک به عنوان دکمه:

<style>
    a:link, a:visited {
        background-color: #f44336;
        color: white;
        padding: 15px 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
    }
    
    a:hover, a:active {
        background-color: red;
    }
</style>

برای یادگیری بیشتر در مورد CSS، به آموزش CSS ما مراجعه کنید.

تگ‌های لینک HTML