با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش تعریف style برای لینک ها در css بپردازیم. در css می توان برای حالات مختلف لینک ها style تعریف کرد. مثلا می توان برای لینک هایی که ویزیت شده و لینک هایی که هنوز ویزیت نشده اند، style جداگانه تعریف کرد تا از هم متمایز باشند. و می توانید ویژگی های style متن لینک نظیر color
, font-family
, background
را تعریف کرد.
در پست های آموزشی قبلی، آموزشهایی در مورد تعریف style متن عناصر html در css، با عناوین مدیریت متن عناصر html در css و تنظیمات فونت متن عناصر html در css ارائه گردیده است.
در ادامه مطلب به بررسی چگونگی تعریف style برای لینک ها در css ، می پردازیم.
در css می توان برای لینک ها ویژگی های مختلف style مانند color , font-family , background و … را تعریف کرد.
مثال:
شما می توانید بر ای وضعیت های مختلف لینک ها یک style تعریف کنید. در css برای ۴ وضعیت لینک ها می توان style تعریف کرد. که این وضعیت ها به شرح زیر است:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /* 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; } |
از ویژگی text-decoration برای طرح دادن به متن ها در css استفاده می شود. و به همین صورت می توان برا متن لینک ها از آن بهره گرفت.
مثال: زمانیکه اشاره گر موس روی لینک برود یا لینک کلیک شود، متن لینک زیر خط دار (underline) شود:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } |
با استفاده از ویژگی background-color ، می توان رنگ پس زمینه برای لینک تعریف کرد.
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink; } |
در مثال زیر style های پیشرفته تری برای لینک تعریف شده است:
1 2 3 4 5 6 7 8 9 10 11 12 | 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; } |
یک وب سایت از صفحات وب مختلفی تشکیل شده است که گاها شما نیاز دارید از بخش های مختلف صفحات وب به یکدیگر لینک بدهید، همچنین ممکن است به لینک به سایر وب سایت ها نیاز باشد، که این اقدامات با استفاده از تعریف style برای لینک ها در css انجام می شود.