پیوند رنگ در CSS

دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 15 بهمن 1399

خصوصیات می توانند پیوند رنگ در CSS را با توجه به وضعیت پیوند اضافه کنند.

نکات اصلی پیوند رنگ در CSS:

4 حالت پیوند وجود دارد: a: فعال ، a: شناور ، a: بازدید شده و یک پیوند
برای جلوگیری از همپوشانی رفتار ، این حالات باید به ترتیب زیر انجام شوند
a: hover باید بعد از a: link و a: بازدید شود.
a: فعال باید بعد از a: شناور برود.
برای پیوند دادن به سبک ، بسیاری از خصوصیات یک ظاهر طراحی شده CSS می توانند اعمال شوند (به عنوان مثال زمینه های CSS ، رنگ CSS ، خانواده فونت CSS ، تزئین متن CSS و غیره).

مناطق پیوند

حالت های مختلف پیوند می توانند خصوصیات جداگانه رنگ پیوند را در CSS داشته باشند. توسعه دهندگان برای ایجاد مطابقت با طراحی وب خود ، سبک و رنگ پیش فرض URL ها را انتخاب می کنند.

در اینجا حالاتی وجود دارد که می توانید رنگ پیوند را با CSS تغییر دهید:

a: link – بازدید نشده.
a: hover – هنگامی که نشانگر ماوس روی آن قرار می گیرد.
a: فعال – وقتی کاربر پیوند را کلیک می کند.
a: بازدید – لینک بازدید شده.

در مثال زیر ، ما هر چهار حالت پیوند را با رنگ های مختلف داریم:

/* A link that has not been visited */
a:link {
    color: pink;
}
/* A link that has been visited */
a:visited {
    color: blue;
}
/* A link that is hovered on */
a:hover {
    color: red;
}
/* A link that is selected */
a:active {
    color: green;
}

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="scripts.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="https://www.bitdegree.org/" target="_blank">I am a link</a>
</body>
</html>

رنگ CSS

پیوندهایی که همرنگ بقیه متن هستند ، دشوارتر قابل مشاهده هستند. شما همیشه باید رنگ پیوند CSS را تغییر دهید تا برجسته شود.

برای تغییر رنگ پیوند ، مقدار CSS باید به خاصیت یک ظاهر طراحی رنگ اختصاص یابد. روش های مختلفی برای توصیف رنگ وجود دارد. می توانید از نام رنگها ، نشانگرهای RGB (rgb ()) یا نشانگرهای HEX (#ffffff) استفاده کنید.

در مثال زیر ، یک پیوند CSS یک رنگ اختصاص داده شده است:

a {
    color: green;
}

فرصتی را برای امتحان مقیاس جدید رنگ Pickeristic برای تنظیم رنگ پیوند CSS از دست ندهید.

نکته: Pickeristic شاخص های RGB ، HSLA و کدهای رنگی دیگر را برای شما فراهم می کند. شما می توانید مجموعه ای از رنگ ها را برای پروژه خود ایجاد کنید ، به طور تصادفی رنگ ایجاد کنید و حتی آن ها را مخلوط کنید.

تزئین متن

به طور پیش فرض ، لینک ها دارای زیر خط هستند. برای حذف زیر خط از پیوند با CSS ، از ویژگی تزئین متن CSS استفاده کنید.

چهار مقدار ممکن دارد: underline ، overline ، line-through و هیچ.

مثال زیر باعث می شود CSS با افزودن متن-تزئین زیر خط را از لینک حذف کند: none ؛. ما مقادیر تزئین متن را برای هر یک از حالت های پیوند با CSS تنظیم می کنیم: فقط حالت های فعال و شناور دارای زیر خط هستند:

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

رنگ پس زمینه

علاوه بر تنظیم رنگ در CSS ، امکان افزودن ویژگی پس زمینه رنگ نیز وجود دارد.

a:link {
    background-color: green;
}

a:visited {
    background-color: blue;
}

a:hover {
    background-color: red;
}

a:active {
    background-color: pink;
}

خاصیت مشابه پیوند رنگ CSS است. همچنین می توانید از همان شاخص های ارزش استفاده کنید.

نکته: معمولاً تنظیم رنگ پس زمینه بر روی حالت شناور.

دکمه های پیوند برای منوی پیمایش

کنترل رنگ با CSS تمام نیست. برای توسعه دهندگان معمول است که پیوندها را به صورت دکمه (مثلاً برای منوی پیمایش وب سایت ها) تنظیم کنند.

در اینجا ویژگی های CSS لازم برای یک ظاهر طراحی شده دکمه ها یا برگه هایی که به قسمت های دیگر یک وب سایت منتهی می شوند وجود دارد:

color – برای تنظیم رنگ متن که نشان دهنده پیوند است
background-color – برای افزودن رنگ به دکمه
padding – برای تعیین اندازه دکمه
text-decoration – برای حذف زیر خط از لینک ها
text-align – برای تنظیم ترازبندی پیوندها
display – برای توصیف چگونگی نمایش پیوند شما

در این مثال ، این ویژگی های CSS را برای نمایش پیوندها به عنوان دکمه ترکیب می کنیم:

a:link, a:visited {
    background-color: purple;
    border: none;
    color: #FFFFFF;
    padding: 15px 32px;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    text-decoration: none;
   font-size: 16px;
   cursor: pointer;
   display: inline-block;
}

a:hover, a:active {
   background-color: #6D0062;
}

خلاصه پیوند رنگ در CSS:

همچنین می توانید مکان نماها را با افزودن نشانگر cursor: به عنوان یکی از ویژگی ها ، سبک کنید.
انتخاب رنگ CSS به طراحی کلی وب سایت ها بستگی دارد. اطمینان حاصل کنید که سبک های اصلاح شده پیوندها یافتن پیوندها را دشوارتر نمی کند.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊